docs: Add Algolia search (#1043)

docs/components/AlgoliaSearch.css

@@ -0,0 +1,65 @@
+:root {
+  --docsearch-key-shadow: none;
+  --docsearch-key-gradient: #fff;
+  --docsearch-primary-color: var(--color-text-primary);
+  --docsearch-key-pressed-shadow: none;
+  --docsearch-text-color: inherit;
+}
+
+.DocSearch-Input {
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.DocSearch-Commands-Key {
+  @apply border border-solid border-slate-200;
+}
+
+.DocSearch-Button {
+  @apply rounded-md md:min-w-[200px];
+}
+
+.DocSearch-Button-Key {
+  @apply mr-1 bg-white;
+
+  &:last-child {
+    @apply text-xs font-semibold;
+  }
+}
+
+.DocSearch-Button-Placeholder {
+  @apply text-sm;
+}
+
+.DocSearch-Search-Icon {
+  @apply md:scale-75 dark:text-white;
+}
+
+.DocSearch-Form .DocSearch-Search-Icon {
+  @apply text-slate-900;
+}
+
+.DocSearch-Button {
+  @apply bg-transparent dark:md:bg-slate-800 md:bg-slate-100;
+}
+
+.navbar-home {
+  .DocSearch-Button-Key {
+    @apply opacity-90;
+  }
+
+  .DocSearch-Button {
+    @apply bg-transparent md:bg-slate-900 md:text-slate-400;
+
+    .DocSearch-Search-Icon {
+      @apply text-white md:text-slate-400;
+    }
+  }
+}
+
+.nextra-sidebar-container {
+  .DocSearch-Button {
+    @apply hidden;
+  }
+}

docs/components/AlgoliaSearch.tsx

@@ -0,0 +1,46 @@
+import {DocSearch} from '@docsearch/react';
+import Router from 'next/router';
+import {TITLE_TEMPLATE_SUFFIX} from 'theme.config';
+import '@docsearch/css';
+import './AlgoliaSearch.css';
+
+export default function AlgoliaSearch() {
+  return (
+    <DocSearch
+      apiKey="7c038bab58b7eb07475d5dcdfdaba88f"
+      appId="4MXOXYFOUD"
+      indexName="next-intl-vercel"
+      navigator={{
+        navigate({itemUrl}) {
+          Router.push(itemUrl);
+        }
+      }}
+      transformItems={(items) =>
+        items.map((item) => {
+          const url = new URL(item.url);
+          const localUrl = item.url.replace(url.origin, '');
+
+          return {
+            ...item,
+            url: localUrl,
+
+            // Remove page title from the hierarchy
+            _snippetResult: {
+              ...item._snippetResult,
+              hierarchy: {
+                ...item._snippetResult.hierarchy,
+                lvl1: {
+                  ...item._snippetResult.hierarchy?.lvl1,
+                  value: item._snippetResult.hierarchy?.lvl1?.value?.replace(
+                    TITLE_TEMPLATE_SUFFIX,
+                    ''
+                  )
+                }
+              }
+            }
+          };
+        })
+      }
+    />
+  );
+}

docs/components/Hero.tsx

@@ -35,15 +35,19 @@ export default function Hero({
               <p className="mt-3 max-w-xl text-lg leading-normal tracking-tight text-sky-100/70 lg:mt-4 lg:text-2xl lg:leading-normal">
                 {description}
               </p>
-              <div className="mt-8 flex gap-4 lg:mt-10">
-                <LinkButton href="/docs">{getStarted}</LinkButton>
-                <LinkButton
-                  href="https://next-intl-example-app-router.vercel.app"
-                  target="_blank"
-                  variant="secondary"
-                >
-                  {viewExample}
-                </LinkButton>
+              <div className="mt-8 flex flex-col gap-4 md:flex-row lg:mt-10">
+                <div>
+                  <LinkButton href="/docs">{getStarted}</LinkButton>
+                </div>
+                <div>
+                  <LinkButton
+                    href="https://next-intl-example-app-router.vercel.app"
+                    target="_blank"
+                    variant="secondary"
+                  >
+                    {viewExample}
+                  </LinkButton>
+                </div>
               </div>
               {announcement && (
                 <HeroAnnouncement href={announcement.href}>

docs/package.json

@@ -11,6 +11,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@docsearch/react": "^3.6.0",
     "@heroicons/react": "^2.0.17",
     "@tailwindcss/typography": "^0.5.9",
     "@vercel/analytics": "1.1.0",

docs/pages/blog/next-intl-3-0.mdx

@@ -97,7 +97,7 @@ If you want to stay on the `as-needed` strategy, you can [configure this option]
 
 With the newly introduced Server Components support comes a temporary workaround for static rendering.
 
-If you call APIs from `next-intl` in Server Components, the page will by default opt into [dynamic rendering](https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering). This is a limitation that we aim to remove in the future, but as a stopgap solution, we've added the [`unstable_setRequestLocale`](/docs/getting-started/app-router-server-components#static-rendering) API so that you can keep your pages fully static.
+If you call APIs from `next-intl` in Server Components, the page will by default opt into [dynamic rendering](https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering). This is a limitation that we aim to remove in the future, but as a stopgap solution, we've added the [`unstable_setRequestLocale`](/docs/getting-started/app-router#static-rendering) API so that you can keep your pages fully static.
 
 Note that if you're using `next-intl` exclusively in Client Components, this doesn't apply to your app and static rendering will continue to work as it did before.
 

docs/pages/docs/usage/messages.mdx

@@ -351,7 +351,7 @@ Tags can be arbitrarily nested (e.g. `This is <important><very>very</very> impor
 <Details id="rich-text-reuse-tags">
 <summary>How can I reuse a tag across my app?</summary>
 
-If you want to use the same tag across your app, you can configure it via [default translation values](/docs/configuration#default-translation-values).
+If you want to use the same tag across your app, you can configure it via [default translation values](/docs/usage/configuration#default-translation-values).
 
 </Details>
 

docs/styles.css

@@ -5,6 +5,7 @@
 :root {
   --shiki-token-punctuation: rgba(0, 0, 0, 0.5);
   --shiki-token-comment: rgba(100, 116, 139, 0.8);
+  --color-text-primary: #0073e6;
 }
 
 .dark {
@@ -25,24 +26,13 @@
 }
 
 .navbar-home nav > a {
-  @apply !text-white/80 transition-opacity hover:opacity-70;
-}
-.navbar-home *:not(.nextra-scrollbar) a,
-.navbar-home *:not(.nextra-scrollbar) button {
-  @apply !text-inherit;
+  @apply !text-white transition-opacity hover:opacity-70;
 }
 
 html:not(.dark) .navbar-home .nextra-scrollbar {
   @apply !bg-white;
 }
 
-.navbar-home input::placeholder {
-  @apply !text-white/50;
-}
-.navbar-home input {
-  @apply !bg-slate-900 !text-white;
-}
-
 .navbar-home .nextra-nav-container-blur {
   display: none;
 }

docs/theme.config.tsx

@@ -1,3 +1,4 @@
+import AlgoliaSearch from 'components/AlgoliaSearch';
 import Footer from 'components/Footer';
 import PartnerSidebar from 'components/PartnerSidebar';
 import {useRouter} from 'next/router';
@@ -6,6 +7,9 @@ import {Navbar, ThemeSwitch, useConfig} from 'nextra-theme-docs';
 import {ComponentProps} from 'react';
 import config from './config';
 
+export const TITLE_TEMPLATE_SUFFIX =
+  ' – Internationalization (i18n) for Next.js';
+
 const logo = (
   <svg
     aria-label="next-intl logo"
@@ -79,7 +83,7 @@ export default {
   docsRepositoryBase: config.githubUrl + '/blob/main/docs',
   useNextSeoProps() {
     return {
-      titleTemplate: '%s – Internationalization (i18n) for Next.js'
+      titleTemplate: '%s' + TITLE_TEMPLATE_SUFFIX
     };
   },
   primaryHue: {light: 210, dark: 195},
@@ -116,6 +120,9 @@ export default {
       );
     }
   },
+  search: {
+    component: AlgoliaSearch
+  },
   feedback: {
     content: 'Provide feedback on this page',
     useLink: () => {