feat: DR-7392 Add navigation menu for website/blog (#7533)

* Add navigation menu for website/blog

* Add fonts in DS
Add hooks for GH stargazer and scroll threshold
Update button
Update blog layout with navbar

* Update md breaking point
Update blog layout for mobile

* update top

* Update navigation menu states

* update navigation menu

* Update import for navigation

* first stage of nav menu mobile

* Add website mobile

* Add overflow fixture

* Update rounded corners for md

* Update layout
Update dropdown

* Update rounded on menu item

* Update color of icon

* Update navigation-menu overflow scroll

* update triggers

Author: carlagn

apps/blog/src/app/(blog)/layout.tsx

@@ -1,23 +1,112 @@
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-export function baseOptions(): BaseLayoutProps {
+import { WebNavigation } from "@prisma-docs/ui/components/web-navigation";
+export function baseOptions() {
   return {
     nav: {
-      title: 'My App',
+      title: "My App",
     },
     links: [
       {
-        url: '/docs',
-        text: 'Docs',
+        text: "Products",
+        sub: [
+          {
+            text: "Postgres",
+            url: "/postgres",
+            desc: "Managed Postgres for global workloads",
+            icon: "fa-regular fa-chart-pyramid",
+          },
+          {
+            text: "ORM",
+            url: "/orm",
+            desc: "Managed Postgres for global workloads",
+            icon: "fa-regular fa-database",
+          },
+          {
+            text: "Studio",
+            icon: "fa-regular fa-table",
+            url: "/studio",
+            desc: "Explore and manipulate your data",
+          },
+          {
+            icon: "fa-regular fa-bolt",
+            text: "Accelerate",
+            desc: "Make your database global",
+            url: "/accelerate",
+          },
+          {
+            icon: "fa-regular fa-plug",
+            text: "Management API",
+            desc: "Offer Postgres to your users",
+            url: "/",
+          },
+        ],
       },
       {
-        url: '/blog',
-        text: 'Blog',
+        url: "/pricing",
+        text: "Pricing",
+      },
+      {
+        text: "Resources",
+        col: 2,
+        sub: [
+          {
+            text: "MCP",
+            url: "/mcp",
+            icon: "fa-regular fa-message-code",
+          },
+          {
+            text: "Get started",
+            url: "/docs",
+            icon: "fa-regular fa-book-open",
+          },
+          {
+            text: "Tutorials",
+            url: "/learn",
+            icon: "fa-regular fa-clapperboard-play",
+          },
+          {
+            text: "Examples",
+            url: "/",
+            icon: "fa-regular fa-grid-2",
+          },
+          {
+            text: "Stack",
+            url: "/stack",
+            icon: "fa-regular fa-layer-group",
+          },
+          {
+            text: "Ecosystem",
+            url: "/ecosystem",
+            icon: "fa-regular fa-globe",
+          },
+          {
+            text: "Customer stories",
+            url: "/",
+            icon: "fa-regular fa-users",
+          },
+          {
+            text: "Data guide",
+            url: "/dataguide",
+            icon: "fa-regular fa-file-binary",
+          },
+        ],
+      },
+      {
+        url: "/partners",
+        text: "Partners",
+      },
+      {
+        url: "/blog",
+        text: "Blog",
       },
     ],
   };
 }
 
-export default function Layout({ children, }: { children: React.ReactNode; }) {
-  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <WebNavigation links={baseOptions().links} />
+      {children}
+    </>
+  );
 }

apps/blog/src/app/layout.tsx

@@ -1,26 +1,32 @@
-import { RootProvider } from 'fumadocs-ui/provider/next';
-import './global.css';
-import { Inter, Barlow } from 'next/font/google';
+import { RootProvider } from "fumadocs-ui/provider/next";
+import "./global.css";
+import { Inter, Barlow } from "next/font/google";
+import Script from "next/script";
 
 const inter = Inter({
-  subsets: ['latin'],
-  variable: '--font-inter',
+  subsets: ["latin"],
+  variable: "--font-inter",
 });
 
 const barlow = Barlow({
-  subsets: ['latin'],
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-barlow',
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-barlow",
 });
 
-export default function Layout({ children }: LayoutProps<'/'>) {
+export default function Layout({ children }: LayoutProps<"/">) {
   return (
     <html
       lang="en"
       className={`${inter.variable} ${barlow.variable}`}
       suppressHydrationWarning
     >
-      <head></head>
+      <head>
+        <Script
+          src="https://kit.fontawesome.com/6916e9db27.js"
+          crossOrigin="anonymous"
+        ></Script>
+      </head>
       <body className="flex flex-col min-h-screen">
         <RootProvider>{children}</RootProvider>
       </body>

packages/eclipse/src/components/action.tsx

@@ -8,25 +8,27 @@ const actionVariants = cva(
   {
     variants: {
       color: {
-        ppg: "bg-background-ppg",
-        orm: "bg-background-orm",
-        error: "bg-background-error",
-        success: "bg-background-success",
-        warning: "bg-background-warning",
-        cyan: "bg-background-cyan",
-        fuchsia: "bg-background-fuchsia",
-        lime: "bg-background-lime",
-        pink: "bg-background-pink",
-        purple: "bg-background-purple",
-        sky: "bg-background-sky",
-        violet: "bg-background-violet",
-        yellow: "bg-background-yellow",
-        neutral: "bg-background-neutral",
-        "neutral-reversed": "bg-background-neutral-reverse",
+        ppg: "bg-background-ppg text-foreground-ppg",
+        orm: "bg-background-orm text-foreground-orm",
+        error: "bg-background-error text-foreground-error",
+        success: "bg-background-success text-foreground-success",
+        warning: "bg-background-warning text-foreground-warning",
+        cyan: "bg-background-cyan text-foreground-cyan",
+        fuchsia: "bg-background-fuchsia text-foreground-fuchsia",
+        lime: "bg-background-lime text-foreground-lime",
+        pink: "bg-background-pink text-foreground-pink",
+        purple: "bg-background-purple text-foreground-purple",
+        sky: "bg-background-sky text-foreground-sky",
+        violet: "bg-background-violet text-foreground-violet",
+        yellow: "bg-background-yellow text-foreground-yellow",
+        neutral: "bg-background-neutral text-foreground-neutral",
+        "neutral-reversed":
+          "bg-background-neutral-reverse text-foreground-neutral-reverse",
       },
       size: {
         lg: "h-7 w-7 p-1.5",
         "2xl": "h-9 w-9 p-2",
+        nav: "h-10 w-10 p-2.5",
         "4xl": "h-12 w-12 p-3",
         "5xl": "h-16 w-16 p-4",
       },

packages/eclipse/src/components/button.tsx

@@ -2,15 +2,15 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/cn";
 
-const buttonVariants = cva("border", {
+const buttonVariants = cva("", {
   variants: {
     variant: {
       ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong",
       orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong",
       default:
-        "bg-background-default border-stroke-neutral text-foreground-neutral",
+        "bg-background-default border border-stroke-neutral text-foreground-neutral",
       "default-stronger":
-        "bg-background-neutral border-stroke-neutral text-foreground-neutral hover:bg-background-neutral-strong",
+        "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong",
       "default-weaker": "bg-background-neutral text-foreground-neutral-weaker",
       error:
         "bg-background-error-reverse text-foreground-error-reverse hover:bg-backΩground-error-reverse-strong focus-visible:ring-stroke-error",

packages/eclipse/src/static/fonts/monaspace_neon_var.woff

@@ -3,6 +3,13 @@
 @source "../components/**/*.tsx";
 @source "../components/ui/**/*.tsx";
 
+@font-face {
+    font-family: "Monaspace Neon Var";
+    src:
+        url("../static/fonts/monaspace_neon_var.woff") format("woff"),
+        url("../static/fonts/monaspace_neon_var.woff2") format("woff2");
+}
+
 @theme {
     /* Box Shadow */
     --shadow-drop-low: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
@@ -75,7 +82,7 @@
     --font-family-display: var(--font-mona-sans), Inter, sans-serif;
     --font-family-sans-display: Inter, sans-serif;
     --font-family-sans: Inter, system-ui, sans-serif;
-    --font-family-mono: Jetbrains Mono, monospace;
+    --font-family-mono: Monaspace Neon Var;
 
     /* Tailwind Font Family Mappings */
     --font-display: var(--font-mona-sans), Inter, sans-serif;

packages/eclipse/src/static/fonts/monaspace_neon_var.woff2

@@ -235,7 +235,7 @@ export const typography = {
   fontFamily: {
     "sans-display": "Inter",
     sans: "Inter",
-    monospace: "Jetbrains Mono",
+    monospace: "Monaspace Neon Var",
   },
   fontSize: {
     "2xs": 11,

packages/eclipse/src/styles/globals.css

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@base-ui/react": "catalog:",
+    "@prisma-docs/eclipse": "workspace:*",
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
     "feed": "catalog:",

packages/eclipse/src/tokens/index.ts

@@ -0,0 +1,11 @@
+"use client";
+export function FontAwesomeScript() {
+  return (
+    <script
+      //WEB COMPONENTS FONTAWESOME
+      src="https://kit.fontawesome.com/ad485975d2.js"
+      cross-origin="anonymous"
+      async
+    />
+  );
+}