Merge pull request #698 from hirosystems/feat/design-improvements

docs improvements
hirosystems · Jul 19, 2024 · 82454de · 82454de
2 parents 31e0119 + 15d0731
commit 82454de
Show file tree

Hide file tree

Showing 165 changed files with 6,604 additions and 4,107 deletions.
diff --git a/app/(docs)/[...slug]/page.tsx b/app/(docs)/[...slug]/page.tsx
@@ -1,6 +1,7 @@
 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";
 import { DocsPage, DocsBody } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
 import { utils, type Page } from "@/utils/source";
@@ -76,18 +77,9 @@ export default function Page({ params }: { params: Param }): JSX.Element {
       toc={page.data.exports.toc}
       tableOfContent={{
         enabled: page.data.toc,
-        footer: (
-          <a
-            href={`https://github.com/hirosystems/docs/blob/main/${path}`}
-            target="_blank"
-            rel="noreferrer noopener"
-            className="inline-flex items-center text-xs text-muted-foreground hover:text-foreground"
-          >
-            Edit on Github <ExternalLinkIcon className="ml-1 size-3" />
-          </a>
-        ),
       }}
     >
+      <RollButton />
       {page.data.title !== "Home" && (
         <h1 className="text-3xl font-bold text-foreground sm:text-4xl">
           {prefix} {page.data.title}
@@ -131,7 +123,7 @@ function Category({ page }: { page: Page }): JSX.Element {
   );
 }
 
-export const metadata: Metadata = {
+const metadata: Metadata = {
   metadataBase: new URL(
     `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` || "https://docs.hiro.so"
   ),
@@ -164,24 +156,47 @@ export const metadata: Metadata = {
   },
 };
 
-// export function generateMetadata({ params }: { params: Param }): Metadata {
-//   const page = utils.getPage(params.slug);
+function generateCustomTitle(file: {
+  flattenedPath: string;
+  name: string;
+}): string {
+  const segments = file.flattenedPath.split("/");
+  const isRootLevelSegment = segments.length === 3;
+  let relevantSegments: string[] = [];
 
-//   if (!page) notFound();
+  if (isRootLevelSegment) {
+    relevantSegments = [segments[1]];
+  }
 
-//   const description =
-//     page.data.description ??
-//     "All the developer docs, guides and resources you need to build on Bitcoin layers.";
+  return (
+    relevantSegments[0]?.charAt(0)?.toUpperCase() +
+    relevantSegments[0]?.slice(1)
+  );
+}
+
+export function generateMetadata({ params }: { params: Param }): Metadata {
+  const page = utils.getPage(params.slug);
 
-//   const imageParams = new URLSearchParams();
-//   imageParams.set("title", page.data.title);
-//   imageParams.set("description", description);
+  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);
 
-//   return createMetadata({
-//     title: page.data.title,
-//     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) => ({

diff --git a/app/(docs)/layout.client.tsx b/app/(docs)/layout.client.tsx
@@ -8,14 +8,32 @@ import { cn } from "@/utils/cn";
 import { modes } from "@/utils/modes";
 import { ChevronLeft } from "lucide-react";
 
+type Mode = "stacks" | "bitcoin" | null | undefined;
+
 const itemVariants = cva(
   "rounded-md px-2 py-1 transition-colors hover:text-accent-foreground",
   {
     variants: {
       active: {
-        true: "bg-background text-accent-foreground",
+        true: "text-accent-foreground",
+      },
+      mode: {
+        bitcoin: "bg-[hsl(var(--hiro))]",
+        stacks: "bg-background",
       },
     },
+    compoundVariants: [
+      {
+        active: true,
+        mode: "bitcoin",
+        className: "hsl(var(--hiro)) dark:text-background",
+      },
+      {
+        active: true,
+        mode: "stacks",
+        className: "bg-background",
+      },
+    ],
   }
 );
 
@@ -36,7 +54,12 @@ export function NavChildren(): JSX.Element {
         <Link
           key={m.param}
           href={`/${m.param}`}
-          className={cn(itemVariants({ active: mode === m.param }))}
+          className={cn(
+            itemVariants({
+              active: mode === m.param,
+              mode: mode === m.param ? (m.param as Mode) : undefined,
+            })
+          )}
         >
           <div className="inline-flex items-center gap-2">
             {m.icon && <m.icon className="shrink-0 size-3" />}

diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx
@@ -3,22 +3,14 @@ import type { ReactNode } from "react";
 import { ArrowUpRight } from "lucide-react";
 import { utils } from "@/utils/source";
 import { create } from "@/components/ui/icon";
-import { HiroIcon, HiroSVG } from "../(home)/icons";
+import { DocsLogo } from "@/components/ui/icon";
 import { Body, NavChildren, SidebarBanner } from "./layout.client";
 
 export const layoutOptions: Omit<DocsLayoutProps, "children"> = {
   tree: utils.pageTree,
   nav: {
     transparentMode: "top",
-    title: (
-      <div className="text-md flex gap-3 items-center group">
-        <HiroIcon className="size-11 shrink-0 rounded-md" />
-        <span className="max-lg:hidden text-gray-500">|</span>
-        <span className="max-lg:hidden text-gray-500 group-hover:text-primary">
-          Documentation
-        </span>
-      </div>
-    ),
+    title: <DocsLogo className="size-28" />,
     children: <NavChildren />,
     links: [
       {
@@ -37,10 +29,10 @@ export const layoutOptions: Omit<DocsLayoutProps, "children"> = {
     ],
   },
   links: [
-    // {
-    //   text: "Guides",
-    //   url: "/guides",
-    // },
+    {
+      text: "Guides",
+      url: "/guides",
+    },
   ],
   sidebar: {
     defaultOpenLevel: 0,

diff --git a/app/(home)/icons.tsx b/app/(home)/icons.tsx
@@ -1,69 +1,5 @@
 import type { SVGProps } from "react";
 
-export function HiroIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
-  return (
-    <svg
-      width="46"
-      height="14"
-      viewBox="0 0 46 14"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M25.2475 11.9154V13.1997H18.553V11.9154H21.1896V5.75148H18.553V4.46726H22.5939V11.9154H25.2475ZM20.8302 1.86474C20.8302 1.26521 21.3096 0.802795 21.9092 0.802795C22.5087 0.802795 22.9711 1.26521 22.9711 1.86474C22.9711 2.49833 22.5087 2.94371 21.9092 2.94371C21.3096 2.94371 20.8302 2.49833 20.8302 1.86474Z"
-        fill="hsl(var(--icon))"
-      />
-      <path
-        d="M34.981 4.46698V5.83639H33.8509C31.813 5.83639 31.2143 7.39482 31.2143 8.78126V11.9143H34.1592V13.1986H27.8582V11.9143H29.81V5.7512H27.8582V4.46698H31.1454L31.1965 5.93942C31.59 5.25471 32.3777 4.46698 34.0391 4.46698H34.981Z"
-        fill="hsl(var(--icon))"
-      />
-      <path
-        d="M37.1479 8.83343C37.1479 6.1798 38.9287 4.3642 41.4801 4.3642C44.0315 4.3642 45.8122 6.17899 45.8122 8.83343C45.8122 11.4879 44.0315 13.3027 41.4801 13.3027C38.9287 13.3027 37.1479 11.4879 37.1479 8.83343ZM44.3738 8.83343C44.3738 6.96753 43.2097 5.61435 41.4801 5.61435C39.7505 5.61435 38.5863 6.96672 38.5863 8.83343C38.5863 10.7001 39.7505 12.0525 41.4801 12.0525C43.2097 12.0525 44.3738 10.7001 44.3738 8.83343Z"
-        fill="hsl(var(--icon))"
-      />
-      <path
-        d="M10.8542 13.2058L14.9227 1.15863H16.4722L12.4038 13.2058H10.8542Z"
-        fill="hsl(var(--icon))"
-      />
-      <path
-        d="M0.743164 13.2059L4.81163 1.15869H6.36033L2.29267 13.2059H0.743164Z"
-        fill="hsl(var(--icon))"
-      />
-      <path
-        d="M10.9086 6.54071H6.7436L6.30957 7.82494H10.4746L10.9086 6.54071Z"
-        fill="hsl(var(--icon))"
-      />
-    </svg>
-  );
-}
-
-export function HiroSVG(props: SVGProps<SVGSVGElement>): JSX.Element {
-  return (
-    <svg
-      width="43"
-      height="43"
-      viewBox="0 0 43 43"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M23.8896 28.7348L28.756 14.3248H30.6094L25.7431 28.7348H23.8896Z"
-        fill="currentColor"
-      />
-      <path
-        d="M11.797 28.7345L16.6634 14.3246H18.5158L13.6504 28.7345H11.797Z"
-        fill="currentColor"
-      />
-      <path
-        d="M23.9537 20.7611H18.9718L18.4526 22.2972H23.4345L23.9537 20.7611Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 export function HiroPlatformSVG(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg width="474" height="40" viewBox="0 0 474 40" fill="none" {...props}>

diff --git a/app/fonts/Inter-SemiBold.woff2 b/app/fonts/Inter-SemiBold.woff2
diff --git a/app/fonts/fonts.ts b/app/fonts/fonts.ts
@@ -41,6 +41,11 @@ export const inter = localFont({
       weight: "normal",
       style: "normal",
     },
+    {
+      path: "./Inter-SemiBold.woff2",
+      weight: "600",
+      style: "normal",
+    },
   ],
   display: "swap",
   variable: "--font-inter",