Merge pull request #3114 from pyth-network/feat/remove-appshell

feat(dev-hub): remove app shell for now

apps/developer-hub/content/docs/meta.json

@@ -1,3 +1,3 @@
 {
-  "pages": ["price-feeds"]
+  "pages": ["price-feeds", "express-relay", "entropy"]
 }

apps/developer-hub/src/app/(docs)/[section]/layout.tsx

@@ -3,19 +3,7 @@ import type { ReactNode } from "react";
 
 import { docsOptions } from "../../../config/layout.config";
 
-export default async function Layout({
-  children,
-  ...props
-}: {
-  children: ReactNode;
-  params: Promise<{ section: string }>;
-}) {
-  const params = await props.params;
+export default function Layout({ children }: { children: ReactNode }) {
   const options = { ...docsOptions };
-  options.sidebar = {
-    ...options.sidebar,
-    // {} (empty object) means true
-    tabs: params.section === "price-feeds" ? {} : false,
-  };
   return <DocsLayout {...options}>{children}</DocsLayout>;
 }

apps/developer-hub/src/app/price-feeds/page.tsx

@@ -1 +0,0 @@
-export { Homepage as default } from "../../components/Pages/Homepage";

apps/developer-hub/src/components/Root/global.css

@@ -1,5 +1,43 @@
 @import "tailwindcss";
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
-@import "./theme.css";
-@import "./fumadocs-global-style-overrides.css";
+/* @import "./theme.css"; this overrides the default colors to match the pyth branding */
+/* @import "./fumadocs-global-style-overrides.css"; */
+
+.light {
+  --color-fd-background: hsla(0, 16%, 96%, 1);
+  --color-fd-foreground: hsla(0, 16%, 5%, 1);
+  --color-fd-muted: hsla(0, 16%, 90%, 1);
+  --color-fd-muted-foreground: rgba(30, 30, 30, 0.564);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsla(0, 16%, 94%, 1);
+  --color-fd-card-foreground: hsl(0, 0%, 8%);
+  --color-fd-border: hsla(0, 12%, 85%, 1);
+  --color-fd-primary: hsla(263, 70%, 50%, 1);
+  --color-fd-primary-foreground: hsl(204, 90%, 51%);
+  --color-fd-secondary: hsl(0, 0%, 93.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 0%);
+  --color-fd-accent: hsla(0, 0%, 0%, 0.054);
+  --color-fd-accent-foreground: hsl(0, 0%, 0%);
+  --color-fd-ring: hsla(263, 70%, 50%, 1);
+}
+
+.dark {
+  --color-fd-background: hsl(240, 4%, 11%);
+  --color-fd-foreground: hsl(250, 18%, 87%);
+  --color-fd-muted: hsl(0, 3%, 6%);
+  --color-fd-muted-foreground: hsla(250, 18%, 87%, 0.571);
+  --color-fd-popover: hsl(0, 0%, 9%);
+  --color-fd-popover-foreground: hsl(0, 0%, 82%);
+  --color-fd-card: hsl(240, 2%, 9%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsla(240, 18%, 86%, 0.085);
+  --color-fd-primary: rgb(197, 157, 254);
+  --color-fd-primary-foreground: hsl(139, 91%, 18%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(250, 18%, 87%);
+  --color-fd-accent: hsla(0, 0%, 100%, 0.079);
+  --color-fd-accent-foreground: hsl(250, 18%, 87%);
+  --color-fd-ring: hsla(262, 83%, 58%, 1);
+}

apps/developer-hub/src/components/Root/index.tsx

@@ -1,15 +1,8 @@
-import { AppBody, AppShellRoot } from "@pythnetwork/component-library/AppShell";
+import { RootProviders } from "@pythnetwork/component-library/AppShell";
 import { RootProvider as FumadocsRootProvider } from "fumadocs-ui/provider";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
 
-import {
-  AMPLITUDE_API_KEY,
-  ENABLE_ACCESSIBILITY_REPORTING,
-  GOOGLE_ANALYTICS_ID,
-} from "../../config/server";
-import { SearchButton } from "../search-button";
-
 import "./global.css";
 
 export const TABS = [
@@ -24,21 +17,19 @@ type Props = {
 };
 
 export const Root = ({ children }: Props) => (
-  <AppShellRoot
-    amplitudeApiKey={AMPLITUDE_API_KEY}
-    googleAnalyticsId={GOOGLE_ANALYTICS_ID}
-    enableAccessibilityReporting={ENABLE_ACCESSIBILITY_REPORTING}
-    providers={[NuqsAdapter]}
-  >
-    <FumadocsRootProvider
-      search={{
-        enabled: true,
-        options: {
-          api: "/api/search",
-        },
-      }}
-    >
-      <AppBody
+  <html lang="en">
+    <body>
+      <RootProviders providers={[NuqsAdapter]}>
+        <FumadocsRootProvider
+          search={{
+            enabled: true,
+            options: {
+              api: "/api/search",
+            },
+          }}
+        >
+          {/* commenting out the app body because we don't have the app shell anymore
+          <AppBody
         appName="Developer Hub"
         displaySupportButton={false}
         extraCta={<SearchButton />}
@@ -47,9 +38,11 @@ export const Root = ({ children }: Props) => (
           href: "https://dev-forum.pyth.network/",
         }}
         tabs={TABS}
-      >
-        {children}
-      </AppBody>
-    </FumadocsRootProvider>
-  </AppShellRoot>
+      > */}
+          {children}
+          {/* </AppBody> */}
+        </FumadocsRootProvider>
+      </RootProviders>
+    </body>
+  </html>
 );

apps/developer-hub/src/config/layout.config.tsx

@@ -1,3 +1,4 @@
+import { Logo } from "@pythnetwork/component-library/Header";
 import type { DocsLayoutProps } from "fumadocs-ui/layouts/docs";
 import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 
@@ -6,20 +7,28 @@ import { source } from "../lib/source";
 export const baseOptions: BaseLayoutProps = {
   nav: {
     enabled: true,
+    title: (
+      <>
+        <Logo width="1em" height="1em" />
+        Developer Hub
+      </>
+    ),
   },
-  themeSwitch: {
-    enabled: false, // Keep this false as the theme switch is handled by the component library
-  },
-  searchToggle: {
-    enabled: false,
-  },
+  // these are commented out because we don't have the app shell anymore
+  // themeSwitch: {
+  //   enabled: false, // Keep this false as the theme switch is handled by the component library
+  // },
+  // searchToggle: {
+  //   enabled: false,
+  // },
 };
 
 export const docsOptions: DocsLayoutProps = {
   ...baseOptions,
   tree: source.pageTree,
   sidebar: {
-    tabs: false,
-    collapsible: false,
+    // these are commented out because we don't have the app shell anymore
+    // tabs: false,
+    // collapsible: false,
   },
 };

packages/component-library/src/Header/index.tsx

@@ -20,6 +20,8 @@ import { Card } from "../Card/index.jsx";
 import { Link } from "../Link/index.jsx";
 import type { Link as UnstyledLink } from "../unstyled/Link/index.jsx";
 
+export { default as Logo } from "./logo.svg";
+
 type Props = ComponentProps<"header"> & {
   appName: string;
   mainCta?:
@@ -239,3 +241,5 @@ export const SupportDrawer = {
     </>
   ),
 };
+
+export { default as HeaderLogo } from "./logo.svg";