ensdomains · lucemans · Apr 7, 2024 · Apr 3, 2024 · Apr 4, 2024 · Apr 4, 2024
diff --git a/app/app/layout.tsx b/app/app/layout.tsx
@@ -2,20 +2,50 @@ import './globals.css';
 import 'focus-visible';
 import '@ens-tools/thorin-core/style.css';
 
+import {
+    PropertyValueSpecification,
+    SearchAction,
+    WebSite,
+    WithContext,
+} from 'schema-dts';
+
 import { Theme } from './theme';
 
 export const metadata = {
     title: 'ENS Documentation',
     description: 'Documentation for the ENS protocol.',
 };
 
+type CustomSearchAction = SearchAction & {
+    'query-input': PropertyValueSpecification | String;
+};
+
+const searchAction: CustomSearchAction = {
+    '@type': 'SearchAction',
+    target: 'https://docs.ens.domains?q={search_term_string}',
+    'query-input': 'required name=search_term_string',
+};
+
+const jsonLD: WithContext<WebSite&g
8000
t; = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    url: 'https://docs.ens.domains',
+    name: metadata.title,
+    description: metadata.description,
+    potentialAction: searchAction,
+};
+
 export default function RootLayout(properties) {
     const { children } = properties;
 
     return (
         <html lang="en" suppressHydrationWarning className="not-system">
             <head>
                 <link rel="icon" href="/favicon.ico" sizes="any" />
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLD) }}
+                />
             </head>
             <body className="bg-ens-light-background-primary dark:bg-ens-dark-background-primary text-ens-light-text-primary dark:text-ens-dark-text-primary">
                 <Theme>{children}</Theme>

diff --git a/app/src/layout/header/Header.tsx b/app/src/layout/header/Header.tsx
@@ -6,7 +6,7 @@ import { useTransform } from 'framer-motion';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { usePathna
8000
me } from 'next/navigation';
-import { forwardRef } from 'react';
+import { forwardRef, Suspense } from 'react';
 import { FaGithub } from 'react-icons/fa';
 
 import { ClientOnly } from '@/ClientOnly';
@@ -90,13 +90,17 @@ export const Header = forwardRef<HTMLDivElement, { className?: string }>(
                         )}
                     />
                     <div className="mx-auto w-full max-w-lg">
-                        <Search />
+                        <Suspense>
+                            <Search />
+                        </Suspense>
                     </div>
                     <div className="float-right flex h-full items-center gap-4">
                         <ClientOnly child={() => <ThemeSwitcher />} />
                         <div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
                         <div className="flex gap-4">
-                            <MobileSearch />
+                            <Suspense>
+                                <MobileSearch />
+                            </Suspense>
                             <Link
                                 href="https://github.com/ensdomains/docs"
                                 target="_blank"

diff --git a/app/src/layout/header/search/ResponsiveSearch.tsx b/app/src/layout/header/search/ResponsiveSearch.tsx
@@ -2,7 +2,7 @@
 
 import { MagnifyingGlassSVG } from '@ensdomains/thorin';
 import clsx from 'clsx';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { FC, useEffect, useRef, useState } from 'react';
 import { FiLoader } from 'react-icons/fi';
 import useSWR from 'swr';
@@ -135,7 +135,11 @@ const Tags: FC<{
 
 export const ResponsiveSearch = () => {
     const [tag, setTag] = useState('All');
-    const [search, setSearch] = useState('');
+    const searchParameters = useSearchParams();
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const [search, setSearch] = useState(searchParameters.get('q') || '');
 
     const { data, error, isLoading, isValidating } = useSWR(
         { search, tag },
@@ -148,8 +152,6 @@ export const ResponsiveSearch = () => {
     const [select, setSelect] = useState(-2);
     const showSearch = search.length > 0 && data;
 
-    const router = useRouter();
-
     useEvent('keydown', (event) => {
         switch (event.key) {
             case 'ArrowDown': {
@@ -202,8 +204,14 @@ export const ResponsiveSearch = () => {
                         // eslint-disable-next-line jsx-a11y/no-autofocus
                         autoFocus={true}
                         id="search-input"
+                        value={search}
                          => {
                             setSearch(event.target.value);
+                            router.replace(
+                                pathname +
+                                    '?q=' +
+                                    encodeURIComponent(event.target.value || '')
+                            );
                         }}
                          => {
                             if (event.key === 'Enter') {
@@ -214,10 +222,10 @@ export const ResponsiveSearch = () => {
                                 }
                             }
                         }}
+                        ref={inputReference}
                          => {
                             setSelect(-2);
                         }}
-                        ref={inputReference}
                     />
                     <div className="absolute inset-y-0 left-3 flex h-full items-center text-neutral-300">
                         <MagnifyingGlassSVG />

diff --git a/app/src/layout/header/search/Search.tsx b/app/src/layout/header/search/Search.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import { SearchModal } from './SearchModal';
@@ -19,7 +20,8 @@ function SearchIcon(properties) {
 
 export function Search() {
     const [modifierKey, setModifierKey] = useState<string>('');
-    const [isOpen, setOpen] = useState<boolean>(false);
+    const urlParameters = useSearchParams();
+    const [isOpen, setOpen] = useState<boolean>(urlParameters.has('q'));
 
     // eslint-disable-next-line sonarjs/no-identical-functions
     useEffect(() => {
@@ -57,7 +59,7 @@ export function Search() {
             <button
                 type="button"
                 className={clsx(
-                    'outline-ens-500 h-8 w-full items-center gap-2 rounded-lg bg-white pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 hover:ring-zinc-900/20 dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex',
+                    'outline-ens-500 h-8 w-full items-center gap-2 rounded-lg bg-white pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20',
                     isOpen ? 'opacity-0' : 'opacity-100'
                 )}
                  => setOpen(true)}
@@ -66,7 +68,7 @@ export function Search() {
                 Search Content...
                 <span className="ml-auto inline-flex p-1">
                     {modifierKey && (
-                        <kbd className="my-1 flex h-full items-center rounded-md border border-ens-light-border px-1 text-2xs dark:border-ens-dark-border">
+                        <kbd className="border-ens-light-border text-2xs dark:border-ens-dark-border my-1 flex h-full items-center rounded-md border px-1">
                             <kbd className="font-sans">{modifierKey}</kbd>+
                             <kbd className="font-sans">k</kbd>
                         </kbd>
@@ -85,7 +87,7 @@ export function MobileSearch() {
         <div className="contents lg:hidden">
             <button
                 type="button"
-                className="flex size-6 items-center justify-center rounded-md transition-all hover:bg-zinc-900/5 dark:hover:bg-white/5 lg:hidden"
+                className="flex size-6 items-center justify-center rounded-md transition-all hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5"
                 aria-label="Search Content..."
                  => setOpen(true)}
             >

diff --git a/app/src/layout/header/search/SearchModal.tsx b/app/src/layout/header/search/SearchModal.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { FC } from 'react';
 import ReactModal from 'react-modal';
 
@@ -11,6 +13,9 @@ export const SearchModal: FC<{ open: boolean; onClose: () => void }> = ({
     onClose,
     open,
 }) => {
+    const router = useRouter();
+    const pathname = usePathname();
+
     return (
         <ReactModal
             isOpen={open}
@@ -19,6 +24,7 @@ export const SearchModal: FC<{ open: boolean; onClose: () => void }> = ({
             }}
              => {
                 onClose();
+                router.replace(pathname);
             }}
              => {
                 document.querySelector('html').style.overflow = 'auto';