docs: Add link to learn.next-intl.dev (#1984)

Author: amannn

docs/src/components/Footer.tsx

@@ -17,6 +17,8 @@ export default function Footer() {
         <div>
           <FooterLink href="/docs">Docs</FooterLink>
           <FooterSeparator />
+          <FooterLink href="https://learn.next-intl.dev">Learn</FooterLink>
+          <FooterSeparator />
           <FooterLink href="/examples">Examples</FooterLink>
           <FooterSeparator />
           <FooterLink href="/blog">Blog</FooterLink>

docs/src/pages/_meta.tsx

@@ -9,6 +9,20 @@ export default {
     title: 'Docs',
     type: 'page'
   },
+  learn: {
+    title: 'Learn',
+    type: 'page',
+    titleChildren: (
+      <span className="absolute -right-4 -top-3 rotate-6 rounded-sm bg-green-500 px-1 py-[1px] text-[10px] font-semibold uppercase tracking-wider text-white group-[.navbar-home]:bg-green-300 group-[.navbar-home]:text-green-900 dark:bg-green-300 dark:text-green-900">
+        New!
+      </span>
+    ),
+    theme: {
+      sidebar: false,
+      toc: false
+    },
+    href: 'https://learn.next-intl.dev'
+  },
   examples: {
     title: 'Examples',
     type: 'page',

docs/src/pages/index.mdx

@@ -21,8 +21,8 @@ import GetStartedBackground from '@/components/GetStartedBackground';
   getStarted="Get started"
   viewExample="View an example"
   announcement={{
-    href: '/blog/next-intl-4-0',
-    label: 'next-intl 4.0 is out now!'
+    href: 'https://learn.next-intl.dev',
+    label: 'learn.next-intl.dev is out now!'
   }}
 />
 <PartnerBanner intro="Presented by" />

docs/src/styles.css

@@ -15,7 +15,7 @@
 }
 
 /**
- * Navbar on home
+ * Navbar
  */
 .navbar-home {
   @apply bg-slate-850 text-white dark:bg-slate-850;
@@ -43,6 +43,10 @@
   @apply bg-white dark:bg-black md:bg-transparent md:dark:bg-transparent;
 }
 
+.nextra-nav-container > nav > div:nth-child(2) {
+  @apply py-5;
+}
+
 /**
  * TOC
  */

docs/src/theme.config.tsx

@@ -26,23 +26,6 @@ export default {
   components: {
     pre: Pre
   },
-  banner: {
-    key: 'banner-learn-next-intl-announcement',
-    content: (
-      <div className="text-center">
-        Announcing{' '}
-        <a
-          className="underline"
-          href="https://learn.next-intl.dev"
-          rel="noreferrer"
-          target="_blank"
-        >
-          learn.next-intl.dev
-        </a>
-        !
-      </div>
-    )
-  },
   footer: {
     component: Footer
   },
@@ -92,7 +75,7 @@ export default {
       if (!isRoot) return <Navbar {...props} />;
 
       return (
-        <div className="navbar-home">
+        <div className="navbar-home group">
           <Navbar {...props} />
         </div>
       );

package.json

@@ -14,6 +14,9 @@
   "pnpm": {
     "overrides": {
       "@babel/parser": "7.21.9"
+    },
+    "patchedDependencies": {
+      "nextra-theme-docs": "patches/nextra-theme-docs.patch"
     }
   },
   "packageManager": "[email protected]"

patches/nextra-theme-docs.patch

@@ -0,0 +1,29 @@
+diff --git a/dist/index.js b/dist/index.js
+index 56201641fd965dcc5ab7c5df53e444c41293c00e..0c1b131ffea455aeaa988b9b550bf3ab37f7e5f0 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -1406,7 +1406,7 @@ function Navbar({ items }) {
+           children: renderComponent(themeConfig.logo)
+         }
+       ) : /* @__PURE__ */ jsx19("div", { className: "_flex _items-center ltr:_mr-auto rtl:_ml-auto", children: renderComponent(themeConfig.logo) }),
+-      /* @__PURE__ */ jsx19("div", { className: "_flex _gap-4 _overflow-x-auto nextra-scrollbar _py-1.5", children: items.map((pageOrMenu) => {
++      /* @__PURE__ */ jsx19("div", { className: "_flex _overflow-x-auto nextra-scrollbar _py-1.5", style: {gap: '1.5rem'}, children: items.map((pageOrMenu) => {
+         if (pageOrMenu.display === "hidden") return null;
+         if (pageOrMenu.type === "menu") {
+           const menu2 = pageOrMenu;
+@@ -1424,12 +1424,13 @@ function Navbar({ items }) {
+             href,
+             className: cn11(
+               classes2.link,
+-              "max-md:_hidden _whitespace-nowrap _ring-inset",
++              page.className,
++              "max-md:_hidden _whitespace-nowrap _ring-inset _relative",
+               !isActive || page.newWindow ? classes2.inactive : classes2.active
+             ),
+             newWindow: page.newWindow,
+             "aria-current": !page.newWindow && isActive,
+-            children: page.title
++            children: [page.title, page.titleChildren]
+           },
+           href
+         );