From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Mon, 15 Dec 2025 23:48:10 +0800
Subject: initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.
---
 src/components/docs.tsx | 64 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/docs.tsx

(limited to 'src/components/docs.tsx')

diff --git a/src/components/docs.tsx b/src/components/docs.tsx
new file mode 100644
index 0000000..038a52b
--- /dev/null
+++ b/src/components/docs.tsx
@@ -0,0 +1,64 @@
+import type { PageTree } from 'fumadocs-core/server';
+import { cn } from 'fumadocs-ui/components/api';
+import {
+  type SidebarOptions,
+  checkPageTree,
+  layoutVariables,
+} from 'fumadocs-ui/layouts/docs/shared';
+import { type BaseLayoutProps, getLinks } from 'fumadocs-ui/layouts/shared';
+import {
+  type PageStyles,
+  StylesProvider,
+  TreeContextProvider,
+} from 'fumadocs-ui/provider';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Header } from './sections/header';
+
+export interface DocsLayoutProps extends BaseLayoutProps {
+  tree: PageTree.Root;
+
+  sidebar?: Omit<Partial<SidebarOptions>, 'component' | 'enabled'>;
+
+  containerProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+export const DocsLayout = ({
+  nav = {},
+  i18n = false,
+  ...props
+}: DocsLayoutProps): ReactNode => {
+  checkPageTree(props.tree);
+  const links = getLinks(props.links ?? [], props.githubUrl);
+
+  const variables = cn(
+    '[--fd-nav-height:3.5rem] [--fd-tocnav-height:36px] xl:[--fd-toc-width:268px] xl:[--fd-tocnav-height:0px]',
+  );
+
+  const pageStyles: PageStyles = {
+    tocNav: cn('lg:px-4 xl:hidden'),
+    toc: cn('max-xl:hidden'),
+    page: cn('mt-[var(--fd-nav-height)]'),
+    article: cn('mx-auto'),
+  };
+
+  return (
+    <TreeContextProvider tree={props.tree}>
+      <main
+        id='nd-docs-layout'
+        {...props.containerProps}
+        className={cn(
+          'flex w-full flex-1 flex-row pe-[var(--fd-layout-offset)]',
+          variables,
+          props.containerProps?.className,
+        )}
+        style={{
+          ...layoutVariables,
+          ...props.containerProps?.style,
+        }}
+      >
+        <Header finalLinks={links} nav={nav} />
+        <StylesProvider {...pageStyles}>{props.children}</StylesProvider>
+      </main>
+    </TreeContextProvider>
+  );
+};
-- 
cgit v1.2.3