initial pass (#1939)

ava-labs · Nov 18, 2024 · b93271c · b93271c
1 parent 6aeb8c2
commit b93271c
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 81 deletions.
diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'fumadocs-ui/layout';
+import { Layout, DocsLayout } from 'fumadocs-ui/layout';
 import type { ReactNode } from 'react';
 import { Footer } from '@/components/footer';
 import { homebaseOptions } from '@/app/layout.config';

diff --git a/app/(home)/page.client.tsx b/app/(home)/page.client.tsx
@@ -5,9 +5,8 @@ import React, {
   Fragment,
   type ReactElement,
 } from 'react';
-import { IndentDecrease, Layers, MailIcon, MonitorCheck, Settings, SproutIcon, SquareGanttChart, TerminalIcon, Webhook, HomeIcon, FolderCode, BadgeDollarSign, CpuIcon, Files, Folder, Globe, Link, SquareIcon, ArrowLeftRight, Coins, SquareCode, SquareStackIcon, Triangle, ChevronDownIcon, Pyramid } from 'lucide-react';
+import { IndentDecrease, Layers, MailIcon, MonitorCheck, Settings, SproutIcon, SquareGanttChart, TerminalIcon, Webhook, HomeIcon, FolderCode, BadgeDollarSign, CpuIcon, Files, Folder, Globe, Link, SquareIcon, ArrowLeftRight, Coins, SquareCode, SquareStackIcon, Triangle, ChevronDownIcon, Pyramid, HandCoins, Server, Code, TrendingUp, ScanFace, Telescope, LayoutTemplate, Building2, BookOpen, Podcast, Wallet } from 'lucide-react';
 import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
-import { Menu, Transition } from '@headlessui/react'
 
 
 export function DeployBlockchainAnimation(): React.ReactElement {
@@ -106,11 +105,10 @@ export function HamburgerMenu(): React.ReactElement {
     <RootToggle
     options={[
       {
-        title: 'Home',
+        title: 'Docs',
         description: '',
         icon: <></>,
-        url: '/',
-
+        url: '',
       },
       {
         title: 'Avalanche Protocol',
@@ -182,70 +180,168 @@ interface AcademyDropdownProps {
   width?: string
 }
 
-const options: Option[] = [
-  {
-    title: 'Academy',
-    description: '',
-    icon: <></>,
-    url: '/',
-  },
-  {
-    title: 'Blockchain Fundamentals',
-    description: 'Understand fundamental blockchain concepts.',
-    icon: <SquareIcon className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/blockchain-fundamentals',
-  },
-  {
-    title: 'Avalanche Fundamentals',
-    description: 'Overview of Avalanche Consensus, L1s, and VMs.',
-    icon: <Triangle className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/avalanche-fundamentals',
-  },
-  {
-    title: "Multi-Chain Architecture",
-    description: 'Deploy your own blockchain with multi-chain architecture.',
-    icon: <SquareStackIcon className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/multi-chain-architecture',
-  },
-  {
-    title: "Interchain Messaging",
-    description: 'Build cross-chain dApps on Avalanche.',
-    icon: <MailIcon className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/interchain-messaging',
-  },
-  {
-    title: "Interchain Token Transfer",
-    description: 'Transfer assets between Avalanche blockchains.',
-    icon: <ArrowLeftRight className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/interchain-token-transfer',
-  },
-  {
-    title: "Customizing the EVM",
-    description: 'Add custom precompiles to the EVM.',
-    icon: <SquareCode className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/customizing-evm',
-  },
-  {
-    title: "Layer 1 Tokenomics",
-    description: 'Design tokenomics for your Avalanche L1.',
-    icon: <Coins className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/l1-tokenomics',
-  },
-  {
-    title: "AvaCloud APIs",
-    description: 'Use AvaCloud APIs to build web apps.',
-    icon: <Webhook className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/avacloudapis',
-  },
-  {
-    title: "HyperSDK",
-    description: 'Build high-performance blockchains with HyperSDK.',
-    icon: <TerminalIcon className="w-5 h-5" />,
-    url: 'https://academy.avax.network/course/hypersdk',
-  }
-]
-
 export function AcademyDropdown({ width = 'w-72' }: AcademyDropdownProps) {
+  const options: Option[] = [
+    {
+      title: 'Courses',
+      description: '',
+      icon: <></>,
+      url: '',
+    },
+    {
+      title: 'Blockchain Fundamentals',
+      description: 'Understand fundamental blockchain concepts.',
+      icon: <SquareIcon className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/blockchain-fundamentals',
+    },
+    {
+      title: 'Avalanche Fundamentals',
+      description: 'Overview of Avalanche Consensus, L1s, and VMs.',
+      icon: <Triangle className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/avalanche-fundamentals',
+    },
+    {
+      title: "Multi-Chain Architecture",
+      description: 'Deploy your own blockchain with multi-chain architecture.',
+      icon: <SquareStackIcon className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/multi-chain-architecture',
+    },
+    {
+      title: "Interchain Messaging",
+      description: 'Build cross-chain dApps on Avalanche.',
+      icon: <MailIcon className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/interchain-messaging',
+    },
+    {
+      title: "Interchain Token Transfer",
+      description: 'Transfer assets between Avalanche blockchains.',
+      icon: <ArrowLeftRight className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/interchain-token-transfer',
+    },
+    {
+      title: "Customizing the EVM",
+      description: 'Add custom precompiles to the EVM.',
+      icon: <SquareCode className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/customizing-evm',
+    },
+    {
+      title: "Layer 1 Tokenomics",
+      description: 'Design tokenomics for your Avalanche L1.',
+      icon: <Coins className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/l1-tokenomics',
+    },
+    {
+      title: "AvaCloud APIs",
+      description: 'Use AvaCloud APIs to build web apps.',
+      icon: <Webhook className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/avacloudapis',
+    },
+    {
+      title: "HyperSDK",
+      description: 'Build high-performance blockchains with HyperSDK.',
+      icon: <TerminalIcon className="w-5 h-5" />,
+      url: 'https://academy.avax.network/course/hypersdk',
+    }
+  ];
+  return (
+    <RootToggle options={options} />
+  )
+}
+
+
+
+export function GrantsDropdown() {
+  const options: Option[] = [
+    {
+      title: 'Grants & Programs',
+      description: '',
+      icon: <></>,
+      url: '',
+    },
+    {
+      title: 'Retro9000',
+      description: 'Build publicly and get rewarded.',
+      icon: <HandCoins className="w-5 h-5" />,
+      url: 'https://www.avax.network/retro9000',
+    },
+    {
+      title: 'infraBUIDL()',
+      description: 'Infrastructure projects that enhance user and developer experience',
+      icon: <Server className="w-5 h-5" />,
+      url: 'https://www.avax.network/infrabuidl-program',
+    },
+    {
+      title: 'Codebase',
+      description: 'Transforming ambitious builders into extraordinary founders',
+      icon: <Code className="w-5 h-5" />,
+      url: 'https://codebase.avax.network/',
+    },
+    {
+      title: 'Blizzard Fund',
+      description: 'VC fund investing in innovative entrepreneurs driving growth on Avalanche',
+      icon: <TrendingUp className="w-5 h-5" />,
+      url: 'https://www.blizzard.fund/',
+    },
+
+  ];
+  return (
+    <RootToggle options={options} />
+  )
+}
+
+
+export function IntegrationsDropdown() {
+  const options: Option[] = [
+    {
+      title: 'Integrations',
+      description: '',
+      icon: <></>,
+      url: '/integrations',
+    },
+    {
+      title: 'Account Abstraction',
+      description: "",
+      icon: <ScanFace className="w-5 h-5" />,
+      url: '/integrations#Account%20Abstraction',
+    },
+    {
+      title: 'Block Explorers',
+      description: "",
+      icon: <Telescope className="w-5 h-5" />,
+      url: '/integrations#Block%20Explorers',
+    },
+    {
+      title: 'Blockchain as a Service',
+      description: "",
+      icon: <LayoutTemplate className="w-5 h-5" />,
+      url: '/integrations#Blockchain%20as%20a%20Service',
+    },
+    {
+      title: 'Enterprise Solutions',
+      description: "",
+      icon: <Building2 className="w-5 h-5" />,
+      url: '/integrations#Enterprise%20Solutions',
+    },
+    {
+      title: 'Indexers',
+      description: "",
+      icon: <BookOpen className="w-5 h-5" />,
+      url: '/integrations#Indexers',
+    },
+    {
+      title: 'Oracles',
+      description: "",
+      icon: <Podcast className="w-5 h-5" />,
+      url: '/integrations#Oracles',
+    },
+    {
+      title: 'Wallets',
+      description: "",
+      icon: <Wallet className="w-5 h-5" />,
+      url: '/integrations#Wallet%20SDKs',
+    },
+
+  ];
   return (
     <RootToggle options={options} />
   )

diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -3,7 +3,7 @@ import type { LucideIcon } from 'lucide-react';
 import {
   CpuIcon,
   BadgeDollarSign,
-  Globe, MailIcon, SproutIcon, SquareGanttChart, IndentDecrease, Layers, MonitorCheck, Settings, Terminal, Cable, Webhook, ArrowUpRight, Command
+  Globe, MailIcon, SproutIcon, SquareGanttChart, IndentDecrease, Layers, MonitorCheck, Settings, Terminal, Cable, Webhook, ArrowUpRight, Command,
 } from 'lucide-react';
 import Link from 'next/link';
 import type { HTMLAttributes, ReactNode } from 'react';
@@ -12,6 +12,7 @@ import { CodeBlock } from '@/components/code-block';
 import { File, Files, Folder } from 'fumadocs-ui/components/files';
 import { DeployBlockchainAnimation } from './page.client';
 
+
 const badgeVariants = cva(
   'mb-2 inline-flex size-7 items-center justify-center rounded-full bg-fd-primary font-medium text-fd-primary-foreground',
 );
@@ -268,4 +269,11 @@ function Feature({
       {props.children}
     </div>
   );
-}
+}
+
+interface Option {
+  title: string
+  description: string
+  icon: React.ReactNode
+  url: string
+}
diff --git a/app/integrations/layout.tsx b/app/integrations/layout.tsx
@@ -1,14 +1,14 @@
 import { Layout } from 'fumadocs-ui/layout';
 import type { ReactNode } from 'react';
 import { Footer } from '@/components/footer';
-import { baseOptions } from '@/app/layout.config';
+import { integrationPageOptions } from '@/app/layout.config';
 
 export default function HomeLayout({
   children,
 }: {
   children: ReactNode;
 }): React.ReactElement {
-  return <Layout {...baseOptions}>
+  return <Layout {...integrationPageOptions}>
     {children}
     <Footer />
     </Layout>;

diff --git a/app/layout.client.tsx b/app/layout.client.tsx
@@ -1,6 +1,6 @@
 'use client';
 import type { ReactNode } from 'react';
-import { AcademyDropdown, HamburgerMenu } from './(home)/page.client';
+import { AcademyDropdown, HamburgerMenu, GrantsDropdown, IntegrationsDropdown } from './(home)/page.client';
 
  const svgCode = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="100%" viewBox="0 0 220 190" enable-background="new 0 0 220 190" xml:space="preserve">
@@ -63,9 +63,11 @@ return (
 <>
 	<img width="80" height="80" src={`data:image/svg+xml;utf8,${encodeURIComponent(svgCode)}`} className="size-7" alt="logo" />
 	<span style={{fontSize: "large"}}>Developer Hub</span>
-	<div className="flex items-center pl-4 space-x-4">
+	<div className="flex items-center pl-4 space-x-3">
 		<HamburgerMenu />
 		<AcademyDropdown />
+		<GrantsDropdown />
+		<IntegrationsDropdown />
 	</div>
 </>
 );

diff --git a/app/layout.config.tsx b/app/layout.config.tsx
@@ -2,23 +2,34 @@ import { type BaseLayoutProps, type DocsLayoutProps } from 'fumadocs-ui/layout';
 import { Title, HomeTitle } from '@/app/layout.client';
 import { docsPageTree } from '@/utils/docs-loader';
 import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
-import { MailIcon, SproutIcon, SquareGanttChart, IndentDecrease, Layers, MonitorCheck, Settings, Webhook, Server, FolderCode, Pyramid } from 'lucide-react';
-
+import { MailIcon, SproutIcon, SquareGanttChart, IndentDecrease, Layers, MonitorCheck, Settings, Webhook, Server, FolderCode, Pyramid, Folder } from 'lucide-react';
 // home page configuration (HomeTitle includes hamburger menu)
 export const homebaseOptions: BaseLayoutProps = {
   githubUrl: 'https://github.com/ava-labs/avalanche-docs',
   nav: {
     title: <HomeTitle />,
     transparentMode: 'top',
+    url: '/',
   },
   links: [
     {
       text: 'Guides',
       url: 'https://academy.avax.network/guide',
     },
+  ],
+};
+
+export const integrationPageOptions: BaseLayoutProps = {
+  githubUrl: 'https://github.com/ava-labs/avalanche-docs',
+  nav: {
+    title: <HomeTitle />,
+    transparentMode: 'top',
+    url: '/integrations',
+  },
+  links: [
     {
-      text: 'Integrations',
-      url: '/integrations',
+      text: 'Guides',
+      url: 'https://academy.avax.network/guide',
     },
   ],
 };
@@ -70,13 +81,13 @@ export const docsOptions: DocsLayoutProps = {
           {
             title: 'Avalanche L1s',
             description: 'Build Your L1 Blockchain',
-            icon: <Pyramid />,
+            icon: <Layers />,
             url: '/avalanche-l1s',
           },
           {
             title: 'EVM Customization',
             description: 'Customize the Ethereum VM',
-            icon: <FolderCode />,
+            icon: <Pyramid />,
             url: '/evm-l1s',
           },
           {