fix: fix page sizing, links, cookbook side bar

Author: aspectrr

app/(home)/integrations/_pages/page.en.tsx

@@ -46,14 +46,14 @@ export default function IntegrationsPage() {
             />
             <IndexCard
               icon={<API />}
-              href="/integrations/magnitude/overview"
+              href="/integrations/magnitude/quickstart"
               title="Magnitude"
               tag="Browser Agent"
               description="Use Magnitude with Steel Browser."
             />
             <IndexCard
               icon={<API />}
-              href="/integrations/notte/overview"
+              href="/integrations/notte/quickstart"
               title="Notte"
               tag="Browser Agent"
               description="Use Notte with Steel Browser."

app/(home)/overview/_pages/page.en.tsx

@@ -13,7 +13,7 @@ import Image from "next/image";
 
 export default function HomePage() {
   return (
-    <main className="space-y-10">
+    <main className="space-y-10 max-w-[1024px] w-full mx-auto ">
       <div className="px-4 md:px-[var(--nav-offset)] py-[56px]">
         <div className="space-y-10">
           <div className="space-y-1">

app/favicon.ico

@@ -257,7 +257,19 @@
     color: #ffffff;
   }
 
-  span {
+  h1 {
+    font-weight: 500;
+    font-size: 32px;
+  }
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 20px;
+  }
+  h2 span {
     font-family: var(--font-inter), sans-serif;
   }
 

app/global.css

@@ -35,6 +35,10 @@ export const baseOptions: BaseLayoutProps = {
       text: "Playground",
       url: "/playground",
     },
+    {
+      text: "API Reference",
+      url: "/api-reference",
+    },
     // {
     //   type: "menu",
     //   text: "Libraries & SDKs",

app/layout.config.tsx

@@ -1,9 +1,9 @@
-import './global.css';
-import { RootProvider } from 'fumadocs-ui/provider';
-import type { ReactNode } from 'react';
-import { jetBrainsMono, inter } from '@/fonts';
-import { KeyboardShortcutsProvider } from '@/hooks/use-keyboard-shortcuts';
-import { QueryProvider } from '@/providers/query-provider';
+import "./global.css";
+import { RootProvider } from "fumadocs-ui/provider";
+import type { ReactNode } from "react";
+import { jetBrainsMono, inter } from "@/fonts";
+import { KeyboardShortcutsProvider } from "@/hooks/use-keyboard-shortcuts";
+import { QueryProvider } from "@/providers/query-provider";
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (

app/layout.tsx

@@ -2,5 +2,6 @@ export type {
   SectionContentProps,
   SectionHeaderProps,
   SectionProps,
-} from './section';
-export { Section, SectionContent, SectionHeader } from './section';
+} from "./section";
+export { Section, SectionContent, SectionHeader } from "./section";
+export { ExternalNavLink } from "./external-nav-link";

components/layout/index.ts

@@ -466,17 +466,23 @@ export function PageBadges({ item }: { item: PageTree.Node }) {
   const badges: React.ReactNode[] = [];
 
   const isNew = (item as any).data?.isNew;
+  const isLink = (item as any).data?.isLink;
 
   if (isNew) {
     badges.push(
       <span
         key="new"
-        className="font-regular text-[10px] px-1 rounded uppercase bg-orange-500 dark:bg-brand-orange text-neutral-950 border-none"
+        className="font-regular text-[10px] px-1 rounded uppercase bg-yellow-500 dark:bg-yellow-300 text-neutral-950 border-none"
       >
         New
       </span>,
     );
   }
+  if (isLink) {
+    badges.push(
+      <ArrowUpRight className="w-3.5 h-3.5 translate-y-0.5 group-hover:translate-y-0 transition-transform duration-200 bg-gray-600" />,
+    );
+  }
 
   const openapi = (item as any).data?.openapi;
   const operations = openapi?.operations || [];