mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
begin docs (#167)
This commit is contained in:
Neville Brem
39
apps/web/components/features.tsx
Normal file
39
apps/web/components/features.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Cards, Card } from "fumadocs-ui/components/card";
|
||||
import { Database, Package, Lock, Globe, Server, Cable } 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>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Hello World
|
||||
description: Your first document
|
||||
title: Introduction
|
||||
---
|
||||
|
||||
Welcome to the docs! You can start writing documents in `/content/docs`.
|
||||
Better-T-Stack is a modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations.
|
||||
|
||||
## What is Next?
|
||||
# Why Better-T-Stack?
|
||||
|
||||
<Cards>
|
||||
<Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
|
||||
<Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
|
||||
</Cards>
|
||||
Better-T-Stack lets you scaffold your projects for frontend, native apps, and backend with a single CLI command.
|
||||
|
||||
# Features
|
||||
|
||||
<Features />
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: Components
|
||||
description: Components
|
||||
---
|
||||
|
||||
## Code Block
|
||||
|
||||
```js
|
||||
console.log('Hello World');
|
||||
```
|
||||
|
||||
## Cards
|
||||
|
||||
<Cards>
|
||||
<Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
|
||||
<Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
|
||||
</Cards>
|
||||
@@ -1,45 +1,45 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev --turbopack",
|
||||
"start": "next start",
|
||||
"check": "biome check --write .",
|
||||
"postinstall": "fumadocs-mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@radix-ui/react-scroll-area": "^1.2.5",
|
||||
"@radix-ui/react-switch": "^1.2.2",
|
||||
"@radix-ui/react-tooltip": "^1.2.4",
|
||||
"@xyflow/react": "^12.5.5",
|
||||
"babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250405",
|
||||
"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",
|
||||
"nuqs": "^2.4.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-tweet": "^3.2.2",
|
||||
"tailwind-merge": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@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",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
"name": "web",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev --turbopack",
|
||||
"start": "next start",
|
||||
"check": "biome check --write .",
|
||||
"postinstall": "fumadocs-mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@radix-ui/react-scroll-area": "^1.2.5",
|
||||
"@radix-ui/react-switch": "^1.2.2",
|
||||
"@xyflow/react": "^12.5.5",
|
||||
"babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250405",
|
||||
"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",
|
||||
"nuqs": "^2.4.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-tweet": "^3.2.2",
|
||||
"tailwind-merge": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@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",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"tw-animate-css": "^1.0.0",
|
||||
"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,289 +1,319 @@
|
||||
"use client";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Github, Maximize2, Menu, X } from "lucide-react";
|
||||
import {
|
||||
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-[352px]" : "w-[245px]",
|
||||
)}
|
||||
>
|
||||
<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="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='/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.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.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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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(
|
||||
"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(
|
||||
"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>
|
||||
<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="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={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="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='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>
|
||||
|
||||
<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='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="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>
|
||||
<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">
|
||||
<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'>
|
||||
<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="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='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="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='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-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-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='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,46 +1,47 @@
|
||||
import { source } from "@/lib/source";
|
||||
import defaultMdxComponents from "fumadocs-ui/mdx";
|
||||
import Features from "components/features";
|
||||
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 }} />
|
||||
</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,4 +1,5 @@
|
||||
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
|
||||
import { BookMarked } from "lucide-react";
|
||||
|
||||
/**
|
||||
* Shared layout configurations
|
||||
@@ -8,15 +9,23 @@ import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
|
||||
* Docs Layout: app/docs/layout.tsx
|
||||
*/
|
||||
export const baseOptions: BaseLayoutProps = {
|
||||
nav: {
|
||||
title: "Better-T-Stack",
|
||||
enabled: false,
|
||||
},
|
||||
links: [
|
||||
{
|
||||
text: "Documentation",
|
||||
url: "/docs",
|
||||
active: "nested-url",
|
||||
},
|
||||
],
|
||||
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",
|
||||
};
|
||||
|
||||
3
bun.lock
3
bun.lock
@@ -72,6 +72,7 @@
|
||||
"eslint-config-next": "15.2.3",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"tw-animate-css": "^1.0.0",
|
||||
"typescript": "^5.8.3",
|
||||
},
|
||||
},
|
||||
@@ -1625,6 +1626,8 @@
|
||||
|
||||
"turbo-windows-arm64": ["turbo-windows-arm64@2.5.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-OUHCV+ueXa3UzfZ4co/ueIHgeq9B2K48pZwIxKSm5VaLVuv8M13MhM7unukW09g++dpdrrE1w4IOVgxKZ0/exg=="],
|
||||
|
||||
"tw-animate-css": ["tw-animate-css@1.2.7", "", {}, "sha512-7JejnC2dkGrV2ZqBioKslkPVRBAFZNuASkBzj2kJb08aoVkvWOFZD8LDfeTH3+l3vPjP7DtY8RppluF7wRrktA=="],
|
||||
|
||||
"type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
|
||||
|
||||
"typed-array-buffer": ["typed-array-buffer@1.0.3", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-typed-array": "^1.1.14" } }, "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw=="],
|
||||
|
||||
Reference in New Issue
Block a user