Merge pull request #802 from hirosystems/develop

v2.4.0

Author: ryanwaits

.eslintrc.cjs

@@ -0,0 +1,6 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

.eslintrc.json

@@ -5,4 +5,5 @@ bun.lockb
 openapi
 .DS_Store
 **/.DS_Store
-tmp
+tmp
+prompt.txt

.gitignore

@@ -1,4 +1,3 @@
-import { ExternalLinkIcon } from "lucide-react";
 import type { Metadata } from "next";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { RollButton } from "fumadocs-ui/components/roll-button";
@@ -18,69 +17,6 @@ export default function Page({ params }: { params: Param }): JSX.Element {
 
   if (!page) notFound();
 
-  // TODO: this is a less than ideal solution for creating different titles between sidebar and page
-  const generatePrefix = (page: any) => {
-    // Mapping of words to their desired capitalization forms
-    const specialCases = {
-      api: "API",
-      sdk: "SDK",
-      connect: "Stacks Connect",
-      platform: "Hiro Platform",
-      hacks: "Hiro Hacks",
-      "clarinet-js-sdk": "Clarinet JS SDK",
-      "platform-api": "Platform API",
-      "rpc-api": "Stacks Node RPC",
-    };
-
-    if (page.file?.name === "index" && page.slugs[1]) {
-      const segment = page.slugs[1];
-      let prefix =
-        specialCases[segment.toLowerCase() as keyof typeof specialCases] ||
-        segment.charAt(0).toUpperCase() + segment.slice(1);
-
-      // Check if there is a second segment and append it
-      if (page.slugs[2] && page.slugs[1].toLowerCase() !== "api") {
-        const secondSegment = page.slugs[2];
-        prefix +=
-          " " +
-          (specialCases[
-            secondSegment.toLowerCase() as keyof typeof specialCases
-          ] || secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1));
-      }
-
-      if (page.slugs[1].toLowerCase() === "platform-api") {
-        prefix = "Platform API";
-      }
-
-      if (page.slugs[1].toLowerCase() === "token-metadata-api") {
-        prefix = "Token Metadata API";
-      }
-
-      if (page.slugs[1].toLowerCase() === "rpc-api") {
-        prefix = "Stacks Node RPC API";
-      }
-
-      return prefix;
-    } else if (["overview", "index"].includes(page.file?.name)) {
-      const pathSegments = page.file.dirname.split("/");
-      if (pathSegments.length >= 2) {
-        const relevantSegments = pathSegments.slice(-2); // Get the last two segments
-
-        return relevantSegments
-          .map(
-            (segment: string) =>
-              specialCases[
-                segment.toLowerCase() as keyof typeof specialCases
-              ] || segment.charAt(0).toUpperCase() + segment.slice(1) // Capitalize the first letter
-          )
-          .join(" "); // Join them with a space
-      }
-    }
-    return "";
-  };
-
-  const prefix = generatePrefix(page);
-
   return (
     <DocsPage
       toc={page.data.exports.toc}
@@ -90,15 +26,18 @@ export default function Page({ params }: { params: Param }): JSX.Element {
     >
       <RollButton />
       {page.data.title !== "Home" && (
-        <h1 className="text-3xl font-bold text-foreground sm:text-4xl">
-          {prefix} {page.data.title}
+        <h1 className="text-2xl text-foreground sm:text-3xl">
+          {page.data.title}
         </h1>
       )}
       {page.data.title !== "Home" && (
         <p className="mb-8 text-lg text-muted-foreground">
           {page.data.description}
         </p>
       )}
+      {page.data.title !== "Home" && (
+        <hr className="border-t border-border/50" />
+      )}
       <DocsBody>
         {page.data.index ? (
           <Category page={page} />
@@ -165,50 +104,12 @@ const metadata: Metadata = {
   },
 };
 
-function generateCustomTitle(file: {
-  flattenedPath: string;
-  name: string;
-}): string {
-  const segments = file.flattenedPath.split("/");
-  const isRootLevelSegment = segments.length === 3;
-  let relevantSegments: string[] = [];
-
-  if (isRootLevelSegment) {
-    relevantSegments = [segments[1]];
-  }
-
-  return (
-    relevantSegments[0]?.charAt(0)?.toUpperCase() +
-    relevantSegments[0]?.slice(1)
-  );
-}
-
-export function generateMetadata({ params }: { params: Param }): Metadata {
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
   const page = utils.getPage(params.slug);
-
   if (!page) notFound();
 
-  const description =
-    page.data.description ??
-    "All the developer docs, guides and resources you need to build on Bitcoin layers.";
-
-  const imageParams = new URLSearchParams();
-  imageParams.set("title", page.data.title);
-  imageParams.set("description", description);
-
-  const customTitle = generateCustomTitle(page.file);
-
-  return createMetadata({
-    ...metadata,
-    title: customTitle.length
-      ? `${customTitle} ${page.data.title}`
-      : page.data.title,
-    description,
-  });
-}
-
-export function generateStaticParams(): Param[] {
-  return utils.getPages().map<Param>((page) => ({
-    slug: page.slugs,
-  }));
+  return metadata;
 }

app/(docs)/[...slug]/page.tsx

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import type { ReactNode } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/lib/utils";
 import { modes } from "@/utils/modes";
 import { ChevronLeft } from "lucide-react";
 
@@ -15,7 +15,7 @@ const itemVariants = cva(
   {
     variants: {
       active: {
-        true: "text-accent-foreground",
+        true: "text-accent-foreground pointer-events-none",
       },
       mode: {
         bitcoin: "bg-hiro",
@@ -31,7 +31,7 @@ const itemVariants = cva(
       {
         active: true,
         mode: "stacks",
-        className: "bg-background",
+        className: "bg-inverted text-background",
       },
     ],
   }
@@ -99,7 +99,7 @@ export function SidebarBanner(): JSX.Element {
 
   return (
     <Link key={currentMode.param} href={`/${currentMode.param}`}>
-      <div className="group flex flex-row items-center gap-2 rounded-lg px-2 transition-colors">
+      <div className="group flex flex-row items-center gap-2 rounded-lg px-2 mb-3 transition-colors">
         <ChevronLeft className="text-muted-foreground size-4 shrink-0 rounded-md group-hover:text-primary" />
         <div>
           <p className="text-muted-foreground group-hover:text-primary">Back</p>

app/(docs)/layout.client.tsx

@@ -4,6 +4,10 @@ import { ArrowUpRight } from "lucide-react";
 import { utils } from "@/utils/source";
 import { DocsLogo } from "@/components/ui/icon";
 import { Body, NavChildren, SidebarBanner } from "./layout.client";
+import { Statuspage } from "statuspage.io";
+
+const statuspage = new Statuspage("3111l89394q4");
+console.log({ status: await statuspage.api.getStatus() });
 
 export const layoutOptions: Omit<DocsLayoutProps, "children"> = {
   tree: utils.pageTree,
@@ -27,7 +31,16 @@ export const layoutOptions: Omit<DocsLayoutProps, "children"> = {
       },
     ],
   },
-  links: [],
+  links: [
+    {
+      text: "Guides",
+      url: "/guides",
+    },
+    {
+      text: "Cookbook",
+      url: "/cookbook",
+    },
+  ],
   sidebar: {
     defaultOpenLevel: 0,
     banner: <SidebarBanner />,
@@ -56,7 +69,16 @@ export const homeLayoutOptions: Omit<DocsLayoutProps, "children"> = {
       },
     ],
   },
-  links: [],
+  links: [
+    {
+      text: "Guides",
+      url: "/guides",
+    },
+    {
+      text: "Cookbook",
+      url: "/cookbook",
+    },
+  ],
 };
 
 export default function Layout({

app/(docs)/layout.tsx

@@ -8,7 +8,7 @@ export default function HomeLayout({
   children: ReactNode;
 }): JSX.Element {
   return (
-    <div className="max-w-7xl mx-auto *:border-none">
+    <div className="px-10 *:border-none">
       <Layout {...homeLayoutOptions}>{children}</Layout>
     </div>
   );