Skip to content

Commit 67fd7ad

Browse files
eluce2eluce2
committed
fix template
1 parent 341ea5d commit 67fd7ad

12 files changed

Lines changed: 182 additions & 70 deletions

File tree

‎packages/cli/src/helpers/createProject.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const createBareProject = async ({
4545
"tailwind-merge",
4646
"tailwindcss",
4747
"tw-animate-css",
48+
"next-themes",
4849
] as AvailableDependencies[];
4950
const SHADCN_BASE_DEV_DEPS = [
5051
"prettier",

‎packages/cli/src/installers/dependencyVersionMap.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,5 +88,16 @@ export const dependencyVersionMap = {
8888

8989
// Icons (for shadcn/ui)
9090
"lucide-react": "^0.518.0",
91+
92+
// Mantine UI
93+
"@mantine/core": "^7.15.0",
94+
"@mantine/dates": "^7.15.0",
95+
"@mantine/hooks": "^7.15.0",
96+
"@mantine/modals": "^7.15.0",
97+
"@mantine/notifications": "^7.15.0",
98+
"mantine-react-table": "^2.0.0",
99+
100+
// Theme utilities
101+
"next-themes": "^0.4.6",
91102
} as const;
92103
export type AvailableDependencies = keyof typeof dependencyVersionMap;

‎packages/cli/template/nextjs-shadcn/components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"css": "src/config/theme/globals.css",
99
"baseColor": "neutral",
1010
"cssVariables": true,
11-
"prefix": "tw:"
11+
"prefix": ""
1212
},
1313
"aliases": {
1414
"components": "@/components",

‎packages/cli/template/nextjs-shadcn/src/app/(main)/page.tsx‎

Lines changed: 72 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,116 @@
1-
import { IconBrandGithub, IconExternalLink } from "@tabler/icons-react";
1+
"use client";
2+
3+
import {
4+
IconBrandGithub,
5+
IconExternalLink,
6+
IconCopy,
7+
IconCheck,
8+
IconTerminal,
9+
} from "@tabler/icons-react";
10+
import { Button } from "@/components/ui/button";
11+
import { useState } from "react";
12+
13+
function InlineSnippet({ command }: { command: string }) {
14+
const [copied, setCopied] = useState(false);
15+
16+
const onCopy = () => {
17+
if (typeof window === "undefined" || !navigator.clipboard?.writeText)
18+
return;
19+
navigator.clipboard.writeText(command).then(
20+
() => {
21+
setCopied(true);
22+
setTimeout(() => setCopied(false), 2000);
23+
},
24+
() => {},
25+
);
26+
};
27+
28+
return (
29+
<div className="bg-muted relative w-full overflow-hidden rounded-md border text-left">
30+
<div className="flex items-center gap-2 px-3 py-2">
31+
<IconTerminal size={16} className="text-muted-foreground" />
32+
<div className="flex-1 overflow-x-auto text-left">
33+
<code className="font-mono text-sm whitespace-nowrap md:text-base">
34+
{command}
35+
</code>
36+
</div>
37+
<Button
38+
onClick={onCopy}
39+
size="icon"
40+
variant="ghost"
41+
aria-label={copied ? "Copied" : "Copy"}
42+
>
43+
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
44+
</Button>
45+
</div>
46+
</div>
47+
);
48+
}
249

350
export default function Home() {
451
return (
5-
<>
52+
<div className="flex min-h-[calc(100dvh-var(--header-height,56px))] flex-col">
653
<div className="mx-auto mt-20 max-w-screen-md px-4">
754
<div className="flex flex-col items-center gap-6 text-center">
855
<img
956
src="https://raw.githubusercontent.com/proofgeist/proofkit/dde6366c529104658dfba67a8fc2910a8644fc64/docs/src/assets/proofkit.png"
1057
alt="ProofKit"
1158
className="h-auto max-h-64 w-auto"
1259
/>
13-
<h1 className="text-3xl font-bold">Welcome!</h1>
60+
<h1 className="text-foreground text-3xl font-bold">Welcome!</h1>
1461

15-
<p className="text-balance text-base text-zinc-700 dark:text-zinc-300">
62+
<p className="text-muted-foreground text-base text-balance">
1663
This is the base template home page. To add more pages, components,
1764
or other features, run the ProofKit CLI from within your project.
1865
</p>
19-
<code className="rounded bg-zinc-100 px-2 py-1 font-mono text-sm dark:bg-zinc-800">
20-
__PNPM_COMMAND__ proofkit
21-
</code>
2266

23-
<p className="text-balance text-base text-zinc-700 dark:text-zinc-300">
67+
<InlineSnippet command="pnpm proofkit" />
68+
69+
<p className="text-muted-foreground text-base text-balance">
2470
To change this page, open <code>src/app/(main)/page.tsx</code>
2571
</p>
2672
<div>
27-
<a
28-
href="https://proofkit.dev"
29-
target="_blank"
30-
rel="proofkit-app"
31-
className="inline-flex items-center gap-1 text-blue-600 hover:underline"
32-
>
33-
ProofKit Docs <IconExternalLink size={16} />
34-
</a>
73+
<Button asChild variant="outline">
74+
<a href="https://proofkit.dev" target="_blank" rel="noreferrer">
75+
ProofKit Docs <IconExternalLink size={16} />
76+
</a>
77+
</Button>
3578
</div>
3679
</div>
3780
</div>
38-
<footer className="mt-10 border-t border-zinc-200 py-4 dark:border-zinc-800">
81+
<div className="border-border mt-auto border-t py-4">
3982
<div className="mx-auto flex max-w-screen-md items-center justify-between px-4">
40-
<div className="text-sm text-zinc-600 dark:text-zinc-400">
41-
Sponsored by {" "}
83+
<div className="text-muted-foreground text-sm">
84+
Sponsored by{" "}
4285
<a
4386
href="https://proofgeist.com"
4487
target="_blank"
4588
rel="proofkit-app"
46-
className="underline"
89+
className="text-foreground hover:text-primary underline"
4790
>
4891
Proof+Geist
4992
</a>{" "}
50-
and {" "}
93+
and{" "}
5194
<a
5295
href="https://ottomatic.cloud"
5396
target="_blank"
5497
rel="proofkit-app"
55-
className="underline"
98+
className="text-foreground hover:text-primary underline"
5699
>
57100
Ottomatic
58101
</a>
59102
</div>
60103
<div>
61-
<a href="https://github.com/proofgeist/proofkit" target="_blank" className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white">
104+
<a
105+
href="https://github.com/proofgeist/proofkit"
106+
target="_blank"
107+
className="text-muted-foreground hover:text-foreground"
108+
>
62109
<IconBrandGithub size={20} />
63110
</a>
64111
</div>
65112
</div>
66-
</footer>
67-
</>
113+
</div>
114+
</div>
68115
);
69116
}

‎packages/cli/template/nextjs-shadcn/src/app/layout.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,31 @@ export const metadata: Metadata = {
77
icons: [{ rel: "icon", url: "/favicon.ico" }],
88
};
99

10+
import { Geist, Geist_Mono } from "next/font/google";
11+
12+
import Providers from "@/components/providers";
13+
14+
const geistSans = Geist({
15+
variable: "--font-geist-sans",
16+
subsets: ["latin"],
17+
});
18+
19+
const geistMono = Geist_Mono({
20+
variable: "--font-geist-mono",
21+
subsets: ["latin"],
22+
});
23+
1024
export default function RootLayout({
1125
children,
12-
}: Readonly<{ children: React.ReactNode }>) {
26+
}: Readonly<{
27+
children: React.ReactNode;
28+
}>) {
1329
return (
1430
<html lang="en" suppressHydrationWarning>
15-
<body className="min-h-dvh bg-white text-black antialiased dark:bg-black dark:text-white">
16-
{children}
31+
<body
32+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
33+
>
34+
<Providers>{children}</Providers>
1735
</body>
1836
</html>
1937
);

‎packages/cli/template/nextjs-shadcn/src/components/AppShell/internal/AppShell.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ export default function MainAppShell({
88
children: React.ReactNode;
99
}) {
1010
return (
11-
<div className="min-h-dvh">
12-
<header style={{ height: headerHeight }}>
11+
<div
12+
className="min-h-dvh"
13+
style={{ ["--header-height" as any]: `${headerHeight}px` }}
14+
>
15+
<header style={{ height: "var(--header-height)" }}>
1316
<Header />
1417
</header>
1518
<main className="min-h-[calc(100dvh-var(--header-height,56px))]">

‎packages/cli/template/nextjs-shadcn/src/components/AppShell/internal/Header.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ import HeaderMobileMenu from "./HeaderMobileMenu";
77

88
export function Header() {
99
return (
10-
<header className={classes.header} style={{ height: headerHeight }}>
11-
<div className={"mx-auto max-w-screen-md h-full px-4"}>
10+
<header
11+
className={classes.header}
12+
style={{ height: "var(--header-height)" }}
13+
>
14+
<div className={"mx-auto h-full max-w-screen-md px-4"}>
1215
<div className="flex h-full w-full items-center justify-between">
1316
<SlotHeaderLeft />
1417
<div className="hidden md:block">

‎packages/cli/template/nextjs-shadcn/src/components/AppShell/slot-header-right.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { primaryRoutes } from "@/app/navigation";
22

33
import HeaderNavLink from "./internal/HeaderNavLink";
4+
import { ModeToggle } from "../mode-toggle";
45

56
/**
67
* DO NOT REMOVE / RENAME THIS FILE
@@ -12,10 +13,11 @@ import HeaderNavLink from "./internal/HeaderNavLink";
1213
*/
1314
export function SlotHeaderRight() {
1415
return (
15-
<div className="hidden gap-1 xs:flex">
16+
<div className="flex items-center space-x-1">
1617
{primaryRoutes.map((route) => (
1718
<HeaderNavLink key={route.label} {...route} />
1819
))}
20+
<ModeToggle />
1921
</div>
2022
);
2123
}

‎packages/cli/template/nextjs-shadcn/src/components/providers.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
"use client";
2+
3+
import { ThemeProvider } from "./theme-provider";
4+
import { Toaster } from "./ui/sonner";
5+
6+
export default function Providers({ children }: { children: React.ReactNode }) {
7+
return (
8+
<ThemeProvider attribute="class" disableTransitionOnChange>
9+
{children}
10+
<Toaster richColors />
11+
</ThemeProvider>
12+
);
13+
}

‎packages/cli/template/nextjs-shadcn/src/components/theme-provider.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client";
2+
3+
import { ThemeProvider as NextThemesProvider } from "next-themes";
4+
import type * as React from "react";
5+
6+
export function ThemeProvider({
7+
children,
8+
...props
9+
}: React.ComponentProps<typeof NextThemesProvider>) {
10+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
11+
}

0 commit comments

Comments
 (0)