add json-ld search action

dogokit · Jun 25, 2024 · fd4027f · fd4027f
1 parent d32b74c
commit fd4027f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 39 deletions.
diff --git a/.zed/settings.json b/.zed/settings.json
@@ -0,0 +1,8 @@
+{
+  "formatter": {
+    "external": {
+      "command": "./node_modules/@biomejs/biome/bin/biome",
+      "arguments": ["format", "--write", "--stdin-file-path", "{buffer_path}"]
+    }
+  }
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,75 +1,81 @@
-import { publishEscape } from "@curiousleaf/utils";
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLocation,
-} from "@remix-run/react";
-import { SpeedInsights } from "@vercel/speed-insights/remix";
-import { ThemeProvider } from "next-themes";
-import { posthog } from "posthog-js";
-import { type PropsWithChildren, useEffect } from "react";
-import { Footer } from "~/components/Footer";
-import { Header } from "~/components/Header";
-import { Newsletter } from "~/components/Newsletter";
-import { BreadcrumbsLink } from "./components/Breadcrumbs";
-import { Logo } from "./components/Logo";
-import { SITE_NAME, SITE_URL } from "./utils/constants";
-
-import stylesheet from "~/styles.css?url";
+import { publishEscape } from "@curiousleaf/utils"
+import type { LinksFunction, MetaFunction } from "@remix-run/node"
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLocation } from "@remix-run/react"
+import { SpeedInsights } from "@vercel/speed-insights/remix"
+import { ThemeProvider } from "next-themes"
+import { posthog } from "posthog-js"
+import { type PropsWithChildren, useEffect } from "react"
+import { Footer } from "~/components/Footer"
+import { Header } from "~/components/Header"
+import { Newsletter } from "~/components/Newsletter"
+import { BreadcrumbsLink } from "./components/Breadcrumbs"
+import { Logo } from "./components/Logo"
+import { SITE_NAME, SITE_URL } from "./utils/constants"
+
+import stylesheet from "~/styles.css?url"
 
 export const handle = {
   breadcrumb: () => (
     <BreadcrumbsLink to="/" label={SITE_NAME}>
       <Logo className="size-5 shrink-0" />
     </BreadcrumbsLink>
   ),
-};
+}
 
 export const links: LinksFunction = () => {
   return [
     { rel: "stylesheet", href: stylesheet },
     { rel: "icon", href: "/favicon.png", type: "image/png" },
     { rel: "preconnect", href: "https://rsms.me/" },
     { rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
-  ];
-};
+  ]
+}
 
 export const meta: MetaFunction = ({ location }) => {
-  const currentUrl = `${SITE_URL}${location.pathname}${location.search}`;
-  const canonicalUrl = `${SITE_URL}${location.pathname}`;
+  const currentUrl = `${SITE_URL}${location.pathname}${location.search}`
+  const canonicalUrl = `${SITE_URL}${location.pathname}`
 
   return [
     { tagName: "link", rel: "canonical", href: canonicalUrl },
     { property: "twitter:card", content: "summary_large_image" },
     { property: "og:type", content: "website" },
     { property: "og:url", content: currentUrl },
     { property: "og:site_name", content: SITE_NAME },
-  ];
-};
+    {
+      "script:ld+json": {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        name: SITE_NAME,
+        url: SITE_URL,
+        potentialAction: {
+          "@type": "SearchAction",
+          target: {
+            "@type": "EntryPoint",
+            urlTemplate: `${SITE_URL}/?openalternative[query]={search_term_string}`,
+          },
+          "query-input": "required name=search_term_string",
+        },
+      },
+    },
+  ]
+}
 
 export function Layout({ children }: PropsWithChildren) {
-  const { key } = useLocation();
+  const { key } = useLocation()
 
   useEffect(() => {
     // Trigger escape hatch when the route changes
-    publishEscape();
+    publishEscape()
 
     // Track pageview
-    posthog.capture("$pageview");
-  }, [key]);
+    posthog.capture("$pageview")
+  }, [key])
 
   return (
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, user-scalable=no"
-        />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
         <Meta />
         <Links />
       </head>
@@ -125,9 +131,9 @@ export function Layout({ children }: PropsWithChildren) {
         />
       </body>
     </html>
-  );
+  )
 }
 
 export default function App() {
-  return <Outlet />;
+  return <Outlet />
 }