mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
fix fumadocs theme
This commit is contained in:
Aman Varshney
@@ -55,7 +55,7 @@
|
||||
"dependencies": {
|
||||
"@clack/prompts": "^0.10.1",
|
||||
"consola": "^3.4.2",
|
||||
"execa": "^8.0.1",
|
||||
"execa": "^9.5.2",
|
||||
"fs-extra": "^11.3.0",
|
||||
"globby": "^14.1.0",
|
||||
"gradient-string": "^3.0.0",
|
||||
@@ -66,7 +66,7 @@
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/globby": "^9.1.0",
|
||||
"@types/node": "^20.17.30",
|
||||
"@types/node": "^22.14.1",
|
||||
"@types/yargs": "^17.0.33",
|
||||
"tsup": "^8.4.0",
|
||||
"typescript": "^5.8.3"
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
import { Cards, Card } from "fumadocs-ui/components/card";
|
||||
import { Database, Package, Lock, Globe, Server, Cable } from "lucide-react";
|
||||
import { Card, Cards } from "fumadocs-ui/components/card";
|
||||
import { Cable, Database, Globe, Lock, Package, Server } from "lucide-react";
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<Cards>
|
||||
<Card
|
||||
icon={<Globe />}
|
||||
title='Frontend'
|
||||
description='Choose between Tanstack Router, React Router, Expo, Next.js, and more'
|
||||
/>
|
||||
<Card
|
||||
icon={<Server />}
|
||||
title='Flexible Backend'
|
||||
description='Choose between Hono, Elysia, Next.js and Express'
|
||||
/>
|
||||
<Card
|
||||
icon={<Cable />}
|
||||
title='End to end typesafe APIs'
|
||||
description='With the help of tRPC or oRPC'
|
||||
/>
|
||||
<Card
|
||||
icon={<Lock />}
|
||||
title='Authentication'
|
||||
description='With the help of Better Auth'
|
||||
/>
|
||||
<Card
|
||||
icon={<Database />}
|
||||
title='Database Setup'
|
||||
description='Many ORMs and Relational Databases'
|
||||
/>
|
||||
<Card
|
||||
icon={<Package />}
|
||||
title='Addons'
|
||||
description='Add PWA support, desktop apps, documentation, and more'
|
||||
/>
|
||||
</Cards>
|
||||
);
|
||||
return (
|
||||
<Cards>
|
||||
<Card
|
||||
icon={<Globe />}
|
||||
title="Frontend"
|
||||
description="Choose between Tanstack Router, React Router, Expo, Next.js, and more"
|
||||
/>
|
||||
<Card
|
||||
icon={<Server />}
|
||||
title="Flexible Backend"
|
||||
description="Choose between Hono, Elysia, Next.js and Express"
|
||||
/>
|
||||
<Card
|
||||
icon={<Cable />}
|
||||
title="End to end typesafe APIs"
|
||||
description="With the help of tRPC or oRPC"
|
||||
/>
|
||||
<Card
|
||||
icon={<Lock />}
|
||||
title="Authentication"
|
||||
description="With the help of Better Auth"
|
||||
/>
|
||||
<Card
|
||||
icon={<Database />}
|
||||
title="Database Setup"
|
||||
description="Many ORMs and Relational Databases"
|
||||
/>
|
||||
<Card
|
||||
icon={<Package />}
|
||||
title="Addons"
|
||||
description="Add PWA support, desktop apps, documentation, and more"
|
||||
/>
|
||||
</Cards>
|
||||
);
|
||||
}
|
||||
|
||||
3
apps/web/content/docs/meta.json
Normal file
3
apps/web/content/docs/meta.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"pages": ["---Getting Started---", "index"]
|
||||
}
|
||||
@@ -10,19 +10,19 @@
|
||||
"postinstall": "fumadocs-mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@radix-ui/react-scroll-area": "^1.2.5",
|
||||
"@radix-ui/react-scroll-area": "^1.2.6",
|
||||
"@radix-ui/react-switch": "^1.2.2",
|
||||
"@xyflow/react": "^12.5.5",
|
||||
"babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250405",
|
||||
"@radix-ui/react-tooltip": "^1.2.4",
|
||||
"@xyflow/react": "^12.6.0",
|
||||
"babel-plugin-react-compiler": "^19.1.0-rc.1",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"fumadocs-core": "15.1.2",
|
||||
"fumadocs-mdx": "11.5.7",
|
||||
"fumadocs-ui": "15.1.2",
|
||||
"lucide-react": "^0.501.0",
|
||||
"motion": "^12.7.4",
|
||||
"next": "15.2.3",
|
||||
"fumadocs-core": "15.2.10",
|
||||
"fumadocs-mdx": "11.6.1",
|
||||
"fumadocs-ui": "15.2.10",
|
||||
"lucide-react": "^0.503.0",
|
||||
"motion": "^12.8.0",
|
||||
"next": "15.3.1",
|
||||
"nuqs": "^2.4.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
@@ -30,16 +30,16 @@
|
||||
"tailwind-merge": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@tailwindcss/postcss": "^4.1.4",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.13.11",
|
||||
"@types/react": "^19.1.0",
|
||||
"@types/react-dom": "^19.1.1",
|
||||
"eslint": "^9.24.0",
|
||||
"eslint-config-next": "15.2.3",
|
||||
"@types/node": "22.14.1",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"eslint": "^9.25.1",
|
||||
"eslint-config-next": "15.3.1",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"tw-animate-css": "^1.0.0",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"tw-animate-css": "^1.2.8",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { defineConfig, defineDocs } from "fumadocs-mdx/config";
|
||||
|
||||
export const docs = defineDocs({
|
||||
dir: "content/docs",
|
||||
dir: "content/docs",
|
||||
});
|
||||
|
||||
export default defineConfig({
|
||||
mdxOptions: {
|
||||
// MDX options
|
||||
},
|
||||
mdxOptions: {
|
||||
// MDX options
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,319 +1,319 @@
|
||||
"use client";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
BookMarked,
|
||||
BookMarkedIcon,
|
||||
Github,
|
||||
Maximize2,
|
||||
Menu,
|
||||
X,
|
||||
BookMarked,
|
||||
BookMarkedIcon,
|
||||
Github,
|
||||
Maximize2,
|
||||
Menu,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import PackageIcon from "./Icons";
|
||||
|
||||
const Navbar = () => {
|
||||
const [activeLink, setActiveLink] = useState("home");
|
||||
const [bgStyles, setBgStyles] = useState({});
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
|
||||
const [activeLink, setActiveLink] = useState("home");
|
||||
const [bgStyles, setBgStyles] = useState({});
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
|
||||
|
||||
useEffect(() => {
|
||||
const updateBackground = (linkId: string) => {
|
||||
const linkElement = linkRefs.current[linkId];
|
||||
if (linkElement) {
|
||||
setBgStyles({
|
||||
padding: "0.75rem 0rem",
|
||||
width: `${linkElement.clientWidth - 12}px`,
|
||||
transform: `translateX(${linkElement.offsetLeft}px)`,
|
||||
opacity: 1,
|
||||
});
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const updateBackground = (linkId: string) => {
|
||||
const linkElement = linkRefs.current[linkId];
|
||||
if (linkElement) {
|
||||
setBgStyles({
|
||||
padding: "0.75rem 0rem",
|
||||
width: `${linkElement.clientWidth - 12}px`,
|
||||
transform: `translateX(${linkElement.offsetLeft}px)`,
|
||||
opacity: 1,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
updateBackground(activeLink);
|
||||
updateBackground(activeLink);
|
||||
|
||||
const handleScroll = () => {
|
||||
const isScrolled = window.scrollY > 50;
|
||||
setScrolled(isScrolled);
|
||||
};
|
||||
const handleScroll = () => {
|
||||
const isScrolled = window.scrollY > 50;
|
||||
setScrolled(isScrolled);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
window.addEventListener("resize", () => updateBackground(activeLink));
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
window.addEventListener("resize", () => updateBackground(activeLink));
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
window.removeEventListener("resize", () => updateBackground(activeLink));
|
||||
};
|
||||
}, [activeLink]);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
window.removeEventListener("resize", () => updateBackground(activeLink));
|
||||
};
|
||||
}, [activeLink]);
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setMobileMenuOpen(!mobileMenuOpen);
|
||||
};
|
||||
const toggleMobileMenu = () => {
|
||||
setMobileMenuOpen(!mobileMenuOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex w-full items-center justify-between px-4 py-4 transition-all duration-300 sm:px-8",
|
||||
scrolled ? "bg-transparent" : "bg-background/80 backdrop-blur-xl"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-row items-center space-x-3 transition-opacity duration-300",
|
||||
scrolled ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
>
|
||||
<div className='flex h-4 w-4 items-center justify-center rounded-sm'>
|
||||
<span className='text-md text-primary'>$_</span>
|
||||
</div>
|
||||
<span className='font-semibold text-foreground text-md'>
|
||||
Better-T Stack
|
||||
</span>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex w-full items-center justify-between px-4 py-4 transition-all duration-300 sm:px-8",
|
||||
scrolled ? "bg-transparent" : "bg-background/80 backdrop-blur-xl",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-row items-center space-x-3 transition-opacity duration-300",
|
||||
scrolled ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
>
|
||||
<div className="flex h-4 w-4 items-center justify-center rounded-sm">
|
||||
<span className="text-md text-primary">$_</span>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground text-md">
|
||||
Better-T Stack
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='-translate-x-1/2 absolute left-1/2 hidden transform md:block'>
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center rounded-lg border border-border bg-muted/90 px-1.5 py-1 text-sm backdrop-blur-sm transition-all duration-500 ease-out",
|
||||
scrolled ? "w-[420px]" : "w-[313px]"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className='absolute rounded-md bg-background transition-all duration-200 ease-in-out'
|
||||
style={bgStyles}
|
||||
/>
|
||||
<Link
|
||||
href='/'
|
||||
ref={(ref) => {
|
||||
linkRefs.current.home = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("home")}
|
||||
className='relative flex items-center gap-1 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary'
|
||||
>
|
||||
<span className='text-primary'>~/</span>
|
||||
home
|
||||
</Link>
|
||||
<div className="-translate-x-1/2 absolute left-1/2 hidden transform md:block">
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center rounded-lg border border-border bg-muted/90 px-1.5 py-1 text-sm backdrop-blur-sm transition-all duration-500 ease-out",
|
||||
scrolled ? "w-[420px]" : "w-[313px]",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute rounded-md bg-background transition-all duration-200 ease-in-out"
|
||||
style={bgStyles}
|
||||
/>
|
||||
<Link
|
||||
href="/"
|
||||
ref={(ref) => {
|
||||
linkRefs.current.home = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("home")}
|
||||
className="relative flex items-center gap-1 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
<span className="text-primary">~/</span>
|
||||
home
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href='https://my-better-t-app-client.pages.dev/'
|
||||
target='_blank'
|
||||
ref={(ref) => {
|
||||
linkRefs.current.demo = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("demo")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className='relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary'
|
||||
>
|
||||
<span>demo</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://my-better-t-app-client.pages.dev/"
|
||||
target="_blank"
|
||||
ref={(ref) => {
|
||||
linkRefs.current.demo = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("demo")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className="relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
<span>demo</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href='/docs'
|
||||
ref={(ref) => {
|
||||
linkRefs.current.docs = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("docs")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className='relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary'
|
||||
>
|
||||
<span>docs</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/docs"
|
||||
ref={(ref) => {
|
||||
linkRefs.current.docs = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("docs")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className="relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
<span>docs</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href='https://www.npmjs.com/package/create-better-t-stack'
|
||||
target='_blank'
|
||||
ref={(ref) => {
|
||||
linkRefs.current.npm = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("npm")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className='relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary'
|
||||
>
|
||||
<PackageIcon pm='npm' className='h-4 w-4 rounded-full' />{" "}
|
||||
<span>npm</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://www.npmjs.com/package/create-better-t-stack"
|
||||
target="_blank"
|
||||
ref={(ref) => {
|
||||
linkRefs.current.npm = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("npm")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className="relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
<PackageIcon pm="npm" className="h-4 w-4 rounded-full" />{" "}
|
||||
<span>npm</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href='https://www.github.com/better-t-stack/create-better-t-stack'
|
||||
target='_blank'
|
||||
ref={(ref) => {
|
||||
linkRefs.current.github = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("github")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className={cn(
|
||||
"relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary",
|
||||
scrolled
|
||||
? "translate-y-0 opacity-100"
|
||||
: "pointer-events-none opacity-0"
|
||||
)}
|
||||
>
|
||||
<Github className='size-4'>
|
||||
<title>GitHub</title>
|
||||
</Github>
|
||||
Github
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href="https://www.github.com/better-t-stack/create-better-t-stack"
|
||||
target="_blank"
|
||||
ref={(ref) => {
|
||||
linkRefs.current.github = ref;
|
||||
}}
|
||||
onMouseOver={() => setActiveLink("github")}
|
||||
onMouseLeave={() => setActiveLink("home")}
|
||||
className={cn(
|
||||
"relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary",
|
||||
scrolled
|
||||
? "translate-y-0 opacity-100"
|
||||
: "pointer-events-none opacity-0",
|
||||
)}
|
||||
>
|
||||
<Github className="size-4">
|
||||
<title>GitHub</title>
|
||||
</Github>
|
||||
Github
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"hidden justify-end gap-2 transition-opacity duration-300 md:flex",
|
||||
scrolled ? "pointer-events-none opacity-0" : "opacity-100"
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href='/new'
|
||||
className='inline-flex items-center rounded-lg border border-primary/50 bg-primary/10 px-4 py-1 font-mono text-primary text-sm backdrop-blur-sm transition-colors hover:bg-primary/20'
|
||||
>
|
||||
<Maximize2 className='mr-1 size-4' />
|
||||
Stack Builder
|
||||
</Link>
|
||||
<Link
|
||||
href='https://www.github.com/better-t-stack/create-better-t-stack'
|
||||
target='_blank'
|
||||
className='inline-flex items-center rounded-lg border border-border bg-muted/90 px-4 py-1 font-mono text-muted-foreground text-sm backdrop-blur-sm transition-colors hover:bg-muted hover:text-primary'
|
||||
>
|
||||
<Github className='mr-1 size-4'>
|
||||
<title>GitHub</title>
|
||||
</Github>
|
||||
Star on GitHub
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"hidden justify-end gap-2 transition-opacity duration-300 md:flex",
|
||||
scrolled ? "pointer-events-none opacity-0" : "opacity-100",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href="/new"
|
||||
className="inline-flex items-center rounded-lg border border-primary/50 bg-primary/10 px-4 py-1 font-mono text-primary text-sm backdrop-blur-sm transition-colors hover:bg-primary/20"
|
||||
>
|
||||
<Maximize2 className="mr-1 size-4" />
|
||||
Stack Builder
|
||||
</Link>
|
||||
<Link
|
||||
href="https://www.github.com/better-t-stack/create-better-t-stack"
|
||||
target="_blank"
|
||||
className="inline-flex items-center rounded-lg border border-border bg-muted/90 px-4 py-1 font-mono text-muted-foreground text-sm backdrop-blur-sm transition-colors hover:bg-muted hover:text-primary"
|
||||
>
|
||||
<Github className="mr-1 size-4">
|
||||
<title>GitHub</title>
|
||||
</Github>
|
||||
Star on GitHub
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
onClick={toggleMobileMenu}
|
||||
className='flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted/50 focus:outline-none md:hidden'
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className='size-5' aria-hidden='true' />
|
||||
) : (
|
||||
<Menu className='size-5' aria-hidden='true' />
|
||||
)}
|
||||
<span className='sr-only'>Toggle menu</span>
|
||||
</button>
|
||||
</nav>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMobileMenu}
|
||||
className="flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted/50 focus:outline-none md:hidden"
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="size-5" aria-hidden="true" />
|
||||
) : (
|
||||
<Menu className="size-5" aria-hidden="true" />
|
||||
)}
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out md:hidden",
|
||||
mobileMenuOpen
|
||||
? "pointer-events-auto opacity-100"
|
||||
: "pointer-events-none opacity-0"
|
||||
)}
|
||||
>
|
||||
<div className='mx-4 mt-4 overflow-hidden rounded-lg border border-border bg-background/95'>
|
||||
<div className='flex items-center bg-muted px-4 py-2'>
|
||||
<div className='mr-4 flex space-x-2'>
|
||||
<div className='h-3 w-3 rounded-full bg-red-500' />
|
||||
<div className='h-3 w-3 rounded-full bg-yellow-500' />
|
||||
<div className='h-3 w-3 rounded-full bg-green-500' />
|
||||
</div>
|
||||
<div className='font-mono text-muted-foreground text-sm'>
|
||||
better-t-stack:~
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out md:hidden",
|
||||
mobileMenuOpen
|
||||
? "pointer-events-auto opacity-100"
|
||||
: "pointer-events-none opacity-0",
|
||||
)}
|
||||
>
|
||||
<div className="mx-4 mt-4 overflow-hidden rounded-lg border border-border bg-background/95">
|
||||
<div className="flex items-center bg-muted px-4 py-2">
|
||||
<div className="mr-4 flex space-x-2">
|
||||
<div className="h-3 w-3 rounded-full bg-red-500" />
|
||||
<div className="h-3 w-3 rounded-full bg-yellow-500" />
|
||||
<div className="h-3 w-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
<div className="font-mono text-muted-foreground text-sm">
|
||||
better-t-stack:~
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='p-4 font-mono text-sm'>
|
||||
<div className='pb-3'>
|
||||
<span className='text-[--color-chart-4]'>
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span className='text-muted-foreground'>:~$</span>
|
||||
<span className='ml-2 text-foreground'>ls -la</span>
|
||||
</div>
|
||||
<div className="p-4 font-mono text-sm">
|
||||
<div className="pb-3">
|
||||
<span className="text-[--color-chart-4]">
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span className="text-muted-foreground">:~$</span>
|
||||
<span className="ml-2 text-foreground">ls -la</span>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2 border-border border-l-2 pl-4'>
|
||||
<Link
|
||||
href='/'
|
||||
className='block text-primary hover:underline'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/home
|
||||
</Link>
|
||||
<div className="space-y-2 border-border border-l-2 pl-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="block text-primary hover:underline"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/home
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href='https://my-better-t-app-client.pages.dev/'
|
||||
target='_blank'
|
||||
className='block text-primary hover:underline'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/demo
|
||||
</Link>
|
||||
<Link
|
||||
href="https://my-better-t-app-client.pages.dev/"
|
||||
target="_blank"
|
||||
className="block text-primary hover:underline"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/demo
|
||||
</Link>
|
||||
|
||||
<div className='flex items-center'>
|
||||
<PackageIcon pm='npm' className='mr-1 h-4 w-4' />
|
||||
<Link
|
||||
href='https://www.npmjs.com/package/create-better-t-stack'
|
||||
target='_blank'
|
||||
className='block text-primary hover:underline'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/npm
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<PackageIcon pm="npm" className="mr-1 h-4 w-4" />
|
||||
<Link
|
||||
href="https://www.npmjs.com/package/create-better-t-stack"
|
||||
target="_blank"
|
||||
className="block text-primary hover:underline"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/npm
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center'>
|
||||
<BookMarked className='mr-1 h-4 w-4' />
|
||||
<Link
|
||||
href='/docs'
|
||||
className='block text-primary hover:underline'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/docs
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<BookMarked className="mr-1 h-4 w-4" />
|
||||
<Link
|
||||
href="/docs"
|
||||
className="block text-primary hover:underline"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/docs
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center'>
|
||||
<Github className='mr-1 size-4 text-foreground' />
|
||||
<Link
|
||||
href='https://www.github.com/better-t-stack/create-better-t-stack'
|
||||
target='_blank'
|
||||
className='block text-primary hover:underline'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/github
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Github className="mr-1 size-4 text-foreground" />
|
||||
<Link
|
||||
href="https://www.github.com/better-t-stack/create-better-t-stack"
|
||||
target="_blank"
|
||||
className="block text-primary hover:underline"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
~/github
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 pb-3'>
|
||||
<span className='text-[--color-chart-4]'>
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span className='text-muted-foreground'>:~$</span>
|
||||
<span className='ml-2 text-foreground'>star-repo</span>
|
||||
</div>
|
||||
<div className="mt-6 pb-3">
|
||||
<span className="text-[--color-chart-4]">
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span className="text-muted-foreground">:~$</span>
|
||||
<span className="ml-2 text-foreground">star-repo</span>
|
||||
</div>
|
||||
|
||||
<div className='border-border border-l-2 pb-2 pl-4'>
|
||||
<Link
|
||||
href='https://www.github.com/better-t-stack/create-better-t-stack'
|
||||
target='_blank'
|
||||
className='inline-flex items-center rounded-md bg-muted px-4 py-2 text-foreground transition-colors hover:bg-muted/80'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<Github className='mr-1 size-5' />
|
||||
Star on GitHub
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-border border-l-2 pb-2 pl-4">
|
||||
<Link
|
||||
href="https://www.github.com/better-t-stack/create-better-t-stack"
|
||||
target="_blank"
|
||||
className="inline-flex items-center rounded-md bg-muted px-4 py-2 text-foreground transition-colors hover:bg-muted/80"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<Github className="mr-1 size-5" />
|
||||
Star on GitHub
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='mt-4'>
|
||||
<span className='text-[--color-chart-4]'>
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span className='text-muted-foreground'>:~$</span>
|
||||
<span className='ml-2 animate-pulse text-foreground'>█</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
<div className="mt-4">
|
||||
<span className="text-[--color-chart-4]">
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span className="text-muted-foreground">:~$</span>
|
||||
<span className="ml-2 animate-pulse text-foreground">█</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
import { source } from "@/lib/source";
|
||||
import defaultMdxComponents from "fumadocs-ui/mdx";
|
||||
import Features from "components/features";
|
||||
import defaultMdxComponents from "fumadocs-ui/mdx";
|
||||
import {
|
||||
DocsBody,
|
||||
DocsDescription,
|
||||
DocsPage,
|
||||
DocsTitle,
|
||||
DocsBody,
|
||||
DocsDescription,
|
||||
DocsPage,
|
||||
DocsTitle,
|
||||
} from "fumadocs-ui/page";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
const page = source.getPage(params.slug);
|
||||
if (!page) notFound();
|
||||
const params = await props.params;
|
||||
const page = source.getPage(params.slug);
|
||||
if (!page) notFound();
|
||||
|
||||
const MDX = page.data.body;
|
||||
const MDX = page.data.body;
|
||||
|
||||
return (
|
||||
<DocsPage toc={page.data.toc} full={page.data.full}>
|
||||
<DocsTitle>{page.data.title}</DocsTitle>
|
||||
<DocsDescription>{page.data.description}</DocsDescription>
|
||||
<DocsBody>
|
||||
<MDX components={{ ...defaultMdxComponents, Features }} />
|
||||
</DocsBody>
|
||||
</DocsPage>
|
||||
);
|
||||
return (
|
||||
<DocsPage toc={page.data.toc} full={page.data.full}>
|
||||
<DocsTitle>{page.data.title}</DocsTitle>
|
||||
<DocsDescription>{page.data.description}</DocsDescription>
|
||||
<DocsBody>
|
||||
<MDX components={{ ...defaultMdxComponents, Features }} />
|
||||
</DocsBody>
|
||||
</DocsPage>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return source.generateParams();
|
||||
return source.generateParams();
|
||||
}
|
||||
|
||||
export async function generateMetadata(props: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
const page = source.getPage(params.slug);
|
||||
if (!page) notFound();
|
||||
const params = await props.params;
|
||||
const page = source.getPage(params.slug);
|
||||
if (!page) notFound();
|
||||
|
||||
return {
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
};
|
||||
return {
|
||||
title: page.data.title,
|
||||
description: page.data.description,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
@import "fumadocs-ui/css/ocean.css";
|
||||
@import "fumadocs-ui/css/shadcn.css";
|
||||
@import "fumadocs-ui/css/preset.css";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@source '../../../../node_modules/fumadocs-ui/dist/**/*.js';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
.bg-noise {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
|
||||
import { BookMarked } from "lucide-react";
|
||||
|
||||
/**
|
||||
* Shared layout configurations
|
||||
@@ -9,23 +8,9 @@ import { BookMarked } from "lucide-react";
|
||||
* Docs Layout: app/docs/layout.tsx
|
||||
*/
|
||||
export const baseOptions: BaseLayoutProps = {
|
||||
nav: {
|
||||
title: "Better-T-Stack",
|
||||
enabled: false,
|
||||
},
|
||||
links: [
|
||||
{
|
||||
children: (
|
||||
<a
|
||||
className='border-muted flex border rounded-lg p-2 text-lg items-center gap-2'
|
||||
href='/docs'
|
||||
>
|
||||
<BookMarked size={16} />
|
||||
Documentation
|
||||
</a>
|
||||
),
|
||||
type: "custom",
|
||||
},
|
||||
],
|
||||
githubUrl: "https://github.com/AmanVarshney01/create-better-t-stack",
|
||||
nav: {
|
||||
title: "Better-T-Stack",
|
||||
enabled: false,
|
||||
},
|
||||
githubUrl: "https://github.com/AmanVarshney01/create-better-t-stack",
|
||||
};
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@changesets/cli": "^2.28.1",
|
||||
"@changesets/cli": "^2.29.2",
|
||||
"husky": "^9.1.7",
|
||||
"lint-staged": "^15.5.0",
|
||||
"turbo": "^2.5.0",
|
||||
"lint-staged": "^15.5.1",
|
||||
"turbo": "^2.5.1",
|
||||
"typescript": "5.7.3"
|
||||
},
|
||||
"lint-staged": {
|
||||
|
||||
Reference in New Issue
Block a user