franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

begin docs (#167)

Browse Source
This commit is contained in:
Neville Brem
2025-04-24 06:02:15 +02:00
committed by GitHub
parent bb38677253
commit 5633d947e0
9 changed files with 432 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/web/components/features.tsx Normal file
View 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>
);
}

16
apps/web/content/docs/index.mdx
View File

@@ -1,13 +1,13 @@
--- ---
title: Hello World title: Introduction
description: Your first document
--- ---
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> Better-T-Stack lets you scaffold your projects for frontend, native apps, and backend with a single CLI command.
<Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
<Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" /> # Features
</Cards>
<Features />

17
apps/web/content/docs/test.mdx
View File

@@ -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>

2
apps/web/package.json
View File

@@ -13,7 +13,6 @@
"@heroicons/react": "^2.2.0", "@heroicons/react": "^2.2.0",
"@radix-ui/react-scroll-area": "^1.2.5", "@radix-ui/react-scroll-area": "^1.2.5",
"@radix-ui/react-switch": "^1.2.2", "@radix-ui/react-switch": "^1.2.2",
"@radix-ui/react-tooltip": "^1.2.4",
"@xyflow/react": "^12.5.5", "@xyflow/react": "^12.5.5",
"babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250405", "babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250405",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
@@ -40,6 +39,7 @@
"eslint-config-next": "15.2.3", "eslint-config-next": "15.2.3",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.3",
"tw-animate-css": "^1.0.0",
"typescript": "^5.8.3" "typescript": "^5.8.3"
} }
} }

186
apps/web/src/app/(home)/_components/Navbar.tsx
View File

@@ -1,6 +1,13 @@
"use client"; "use client";
import { cn } from "@/lib/utils"; 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 Link from "next/link";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons"; import PackageIcon from "./Icons";
@@ -50,76 +57,88 @@ const Navbar = () => {
<nav <nav
className={cn( 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", "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", scrolled ? "bg-transparent" : "bg-background/80 backdrop-blur-xl"
)} )}
> >
<div <div
className={cn( className={cn(
"flex flex-row items-center space-x-3 transition-opacity duration-300", "flex flex-row items-center space-x-3 transition-opacity duration-300",
scrolled ? "opacity-0" : "opacity-100", scrolled ? "opacity-0" : "opacity-100"
)} )}
> >
<div className="flex h-4 w-4 items-center justify-center rounded-sm"> <div className='flex h-4 w-4 items-center justify-center rounded-sm'>
<span className="text-md text-primary">$_</span> <span className='text-md text-primary'>$_</span>
</div> </div>
<span className="font-semibold text-foreground text-md"> <span className='font-semibold text-foreground text-md'>
Better-T Stack Better-T Stack
</span> </span>
</div> </div>
<div className="-translate-x-1/2 absolute left-1/2 hidden transform md:block"> <div className='-translate-x-1/2 absolute left-1/2 hidden transform md:block'>
<div <div
className={cn( 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", "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]", scrolled ? "w-[420px]" : "w-[313px]"
)} )}
> >
<div <div
className="absolute rounded-md bg-background transition-all duration-200 ease-in-out" className='absolute rounded-md bg-background transition-all duration-200 ease-in-out'
style={bgStyles} style={bgStyles}
/> />
<Link <Link
href="/" href='/'
ref={(ref) => { ref={(ref) => {
linkRefs.current.home = ref; linkRefs.current.home = ref;
}} }}
onMouseOver={() => setActiveLink("home")} 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" 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> <span className='text-primary'>~/</span>
home home
</Link> </Link>
<Link <Link
href="https://my-better-t-app-client.pages.dev/" href='https://my-better-t-app-client.pages.dev/'
target="_blank" target='_blank'
ref={(ref) => { ref={(ref) => {
linkRefs.current.demo = ref; linkRefs.current.demo = ref;
}} }}
onMouseOver={() => setActiveLink("demo")} onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")} 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" 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> <span>demo</span>
</Link> </Link>
<Link <Link
href="https://www.npmjs.com/package/create-better-t-stack" href='/docs'
target="_blank" 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) => { ref={(ref) => {
linkRefs.current.npm = ref; linkRefs.current.npm = ref;
}} }}
onMouseOver={() => setActiveLink("npm")} onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")} 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" 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" />{" "} <PackageIcon pm='npm' className='h-4 w-4 rounded-full' />{" "}
<span>npm</span> <span>npm</span>
</Link> </Link>
<Link <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href='https://www.github.com/better-t-stack/create-better-t-stack'
target="_blank" target='_blank'
ref={(ref) => { ref={(ref) => {
linkRefs.current.github = ref; linkRefs.current.github = ref;
}} }}
@@ -129,10 +148,10 @@ const Navbar = () => {
"relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary", "relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-muted-foreground transition-colors hover:text-primary",
scrolled scrolled
? "translate-y-0 opacity-100" ? "translate-y-0 opacity-100"
: "pointer-events-none opacity-0", : "pointer-events-none opacity-0"
)} )}
> >
<Github className="size-4"> <Github className='size-4'>
<title>GitHub</title> <title>GitHub</title>
</Github> </Github>
Github Github
@@ -143,22 +162,22 @@ const Navbar = () => {
<div <div
className={cn( className={cn(
"hidden justify-end gap-2 transition-opacity duration-300 md:flex", "hidden justify-end gap-2 transition-opacity duration-300 md:flex",
scrolled ? "pointer-events-none opacity-0" : "opacity-100", scrolled ? "pointer-events-none opacity-0" : "opacity-100"
)} )}
> >
<Link <Link
href="/new" 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" 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" /> <Maximize2 className='mr-1 size-4' />
Stack Builder Stack Builder
</Link> </Link>
<Link <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href='https://www.github.com/better-t-stack/create-better-t-stack'
target="_blank" 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" 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"> <Github className='mr-1 size-4'>
<title>GitHub</title> <title>GitHub</title>
</Github> </Github>
Star on GitHub Star on GitHub
@@ -166,17 +185,17 @@ const Navbar = () => {
</div> </div>
<button <button
type="button" type='button'
onClick={toggleMobileMenu} onClick={toggleMobileMenu}
className="flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted/50 focus:outline-none md:hidden" className='flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted/50 focus:outline-none md:hidden'
aria-expanded={mobileMenuOpen} aria-expanded={mobileMenuOpen}
> >
{mobileMenuOpen ? ( {mobileMenuOpen ? (
<X className="size-5" aria-hidden="true" /> <X className='size-5' aria-hidden='true' />
) : ( ) : (
<Menu className="size-5" aria-hidden="true" /> <Menu className='size-5' aria-hidden='true' />
)} )}
<span className="sr-only">Toggle menu</span> <span className='sr-only'>Toggle menu</span>
</button> </button>
</nav> </nav>
@@ -185,66 +204,77 @@ const Navbar = () => {
"fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out md:hidden", "fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out md:hidden",
mobileMenuOpen mobileMenuOpen
? "pointer-events-auto opacity-100" ? "pointer-events-auto opacity-100"
: "pointer-events-none opacity-0", : "pointer-events-none opacity-0"
)} )}
> >
<div className="mx-4 mt-4 overflow-hidden rounded-lg border border-border bg-background/95"> <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='flex items-center bg-muted px-4 py-2'>
<div className="mr-4 flex space-x-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-red-500' />
<div className="h-3 w-3 rounded-full bg-yellow-500" /> <div className='h-3 w-3 rounded-full bg-yellow-500' />
<div className="h-3 w-3 rounded-full bg-green-500" /> <div className='h-3 w-3 rounded-full bg-green-500' />
</div> </div>
<div className="font-mono text-muted-foreground text-sm"> <div className='font-mono text-muted-foreground text-sm'>
better-t-stack:~ better-t-stack:~
</div> </div>
</div> </div>
<div className="p-4 font-mono text-sm"> <div className='p-4 font-mono text-sm'>
<div className="pb-3"> <div className='pb-3'>
<span className="text-[--color-chart-4]"> <span className='text-[--color-chart-4]'>
user@better-t-stack user@better-t-stack
</span> </span>
<span className="text-muted-foreground">:~$</span> <span className='text-muted-foreground'>:~$</span>
<span className="ml-2 text-foreground">ls -la</span> <span className='ml-2 text-foreground'>ls -la</span>
</div> </div>
<div className="space-y-2 border-border border-l-2 pl-4"> <div className='space-y-2 border-border border-l-2 pl-4'>
<Link <Link
href="/" href='/'
className="block text-primary hover:underline" className='block text-primary hover:underline'
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
~/home ~/home
</Link> </Link>
<Link <Link
href="https://my-better-t-app-client.pages.dev/" href='https://my-better-t-app-client.pages.dev/'
target="_blank" target='_blank'
className="block text-primary hover:underline" className='block text-primary hover:underline'
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
~/demo ~/demo
</Link> </Link>
<div className="flex items-center"> <div className='flex items-center'>
<PackageIcon pm="npm" className="mr-1 h-4 w-4" /> <PackageIcon pm='npm' className='mr-1 h-4 w-4' />
<Link <Link
href="https://www.npmjs.com/package/create-better-t-stack" href='https://www.npmjs.com/package/create-better-t-stack'
target="_blank" target='_blank'
className="block text-primary hover:underline" className='block text-primary hover:underline'
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
~/npm ~/npm
</Link> </Link>
</div> </div>
<div className="flex items-center"> <div className='flex items-center'>
<Github className="mr-1 size-4 text-foreground" /> <BookMarked className='mr-1 h-4 w-4' />
<Link <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href='/docs'
target="_blank" className='block text-primary hover:underline'
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)} onClick={() => setMobileMenuOpen(false)}
> >
~/github ~/github
@@ -252,32 +282,32 @@ const Navbar = () => {
</div> </div>
</div> </div>
<div className="mt-6 pb-3"> <div className='mt-6 pb-3'>
<span className="text-[--color-chart-4]"> <span className='text-[--color-chart-4]'>
user@better-t-stack user@better-t-stack
</span> </span>
<span className="text-muted-foreground">:~$</span> <span className='text-muted-foreground'>:~$</span>
<span className="ml-2 text-foreground">star-repo</span> <span className='ml-2 text-foreground'>star-repo</span>
</div> </div>
<div className="border-border border-l-2 pb-2 pl-4"> <div className='border-border border-l-2 pb-2 pl-4'>
<Link <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href='https://www.github.com/better-t-stack/create-better-t-stack'
target="_blank" target='_blank'
className="inline-flex items-center rounded-md bg-muted px-4 py-2 text-foreground transition-colors hover:bg-muted/80" className='inline-flex items-center rounded-md bg-muted px-4 py-2 text-foreground transition-colors hover:bg-muted/80'
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >
<Github className="mr-1 size-5" /> <Github className='mr-1 size-5' />
Star on GitHub Star on GitHub
</Link> </Link>
</div> </div>
<div className="mt-4"> <div className='mt-4'>
<span className="text-[--color-chart-4]"> <span className='text-[--color-chart-4]'>
user@better-t-stack user@better-t-stack
</span> </span>
<span className="text-muted-foreground">:~$</span> <span className='text-muted-foreground'>:~$</span>
<span className="ml-2 animate-pulse text-foreground">█</span> <span className='ml-2 animate-pulse text-foreground'>█</span>
</div> </div>
</div> </div>
</div> </div>

3
apps/web/src/app/docs/[[...slug]]/page.tsx
View File

@@ -1,5 +1,6 @@
import { source } from "@/lib/source"; import { source } from "@/lib/source";
import defaultMdxComponents from "fumadocs-ui/mdx"; import defaultMdxComponents from "fumadocs-ui/mdx";
import Features from "components/features";
import { import {
DocsBody, DocsBody,
DocsDescription, DocsDescription,
@@ -22,7 +23,7 @@ export default async function Page(props: {
<DocsTitle>{page.data.title}</DocsTitle> <DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription> <DocsDescription>{page.data.description}</DocsDescription>
<DocsBody> <DocsBody>
<MDX components={{ ...defaultMdxComponents }} /> <MDX components={{ ...defaultMdxComponents, Features }} />
</DocsBody> </DocsBody>
</DocsPage> </DocsPage>
); );

15
apps/web/src/app/layout.config.tsx
View File

@@ -1,4 +1,5 @@
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
import { BookMarked } from "lucide-react";
/** /**
* Shared layout configurations * Shared layout configurations
@@ -14,9 +15,17 @@ export const baseOptions: BaseLayoutProps = {
}, },
links: [ links: [
{ {
text: "Documentation", children: (
url: "/docs", <a
active: "nested-url", 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
View File

@@ -72,6 +72,7 @@
"eslint-config-next": "15.2.3", "eslint-config-next": "15.2.3",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.3",
"tw-animate-css": "^1.0.0",
"typescript": "^5.8.3", "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=="], "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=="], "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=="], "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=="],