Skip to content

Commit f3ee567

Browse files
brijrbrijr
committed
update to latest craft
1 parent d84715c commit f3ee567

File tree

11 files changed

+290
-125
lines changed

11 files changed

+290
-125
lines changed

‎app/globals.css

Lines changed: 54 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,76 @@
11
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
2+
@tailwind components;
3+
@tailwind utilities;
44

5-
@layer base {
6-
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 0 0% 3.9%;
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 20 14.3% 4.1%;
99

10-
--card: 0 0% 100%;
11-
--card-foreground: 0 0% 3.9%;
10+
--card: 0 0% 100%;
11+
--card-foreground: 20 14.3% 4.1%;
1212

13-
--popover: 0 0% 100%;
14-
--popover-foreground: 0 0% 3.9%;
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 20 14.3% 4.1%;
1515

16-
--primary: 0 0% 9%;
17-
--primary-foreground: 0 0% 98%;
16+
--primary: 24 9.8% 10%;
17+
--primary-foreground: 60 9.1% 97.8%;
1818

19-
--secondary: 0 0% 96.1%;
20-
--secondary-foreground: 0 0% 9%;
19+
--secondary: 60 4.8% 95.9%;
20+
--secondary-foreground: 24 9.8% 10%;
2121

22-
--muted: 0 0% 96.1%;
23-
--muted-foreground: 0 0% 45.1%;
22+
--muted: 60 4.8% 95.9%;
23+
--muted-foreground: 25 5.3% 44.7%;
2424

25-
--accent: 0 0% 96.1%;
26-
--accent-foreground: 0 0% 9%;
25+
--accent: 60 4.8% 95.9%;
26+
--accent-foreground: 24 9.8% 10%;
2727

28-
--destructive: 0 84.2% 60.2%;
29-
--destructive-foreground: 0 0% 98%;
28+
--destructive: 0 84.2% 60.2%;
29+
--destructive-foreground: 60 9.1% 97.8%;
3030

31-
--border: 0 0% 89.8%;
32-
--input: 0 0% 89.8%;
33-
--ring: 0 0% 3.9%;
31+
--border: 20 5.9% 90%;
32+
--input: 20 5.9% 90%;
33+
--ring: 20 14.3% 4.1%;
3434

35-
--radius: 0.5rem;
36-
}
37-
38-
.dark {
39-
--background: 0 0% 3.9%;
40-
--foreground: 0 0% 98%;
41-
42-
--card: 0 0% 3.9%;
43-
--card-foreground: 0 0% 98%;
35+
--radius: 0.5rem;
36+
}
4437

45-
--popover: 0 0% 3.9%;
46-
--popover-foreground: 0 0% 98%;
38+
.dark {
39+
--background: 20 14.3% 4.1%;
40+
--foreground: 60 9.1% 97.8%;
4741

48-
--primary: 0 0% 98%;
49-
--primary-foreground: 0 0% 9%;
42+
--card: 20 14.3% 4.1%;
43+
--card-foreground: 60 9.1% 97.8%;
5044

51-
--secondary: 0 0% 14.9%;
52-
--secondary-foreground: 0 0% 98%;
45+
--popover: 20 14.3% 4.1%;
46+
--popover-foreground: 60 9.1% 97.8%;
5347

54-
--muted: 0 0% 14.9%;
55-
--muted-foreground: 0 0% 63.9%;
48+
--primary: 60 9.1% 97.8%;
49+
--primary-foreground: 24 9.8% 10%;
5650

57-
--accent: 0 0% 14.9%;
58-
--accent-foreground: 0 0% 98%;
51+
--secondary: 12 6.5% 15.1%;
52+
--secondary-foreground: 60 9.1% 97.8%;
5953

60-
--destructive: 0 62.8% 30.6%;
61-
--destructive-foreground: 0 0% 98%;
54+
--muted: 12 6.5% 15.1%;
55+
--muted-foreground: 24 5.4% 63.9%;
6256

63-
--border: 0 0% 14.9%;
64-
--input: 0 0% 14.9%;
65-
--ring: 0 0% 83.1%;
66-
}
67-
}
57+
--accent: 12 6.5% 15.1%;
58+
--accent-foreground: 60 9.1% 97.8%;
6859

69-
@layer base {
70-
* {
71-
@apply border-border;
72-
}
60+
--destructive: 0 62.8% 30.6%;
61+
--destructive-foreground: 60 9.1% 97.8%;
7362

74-
body {
75-
@apply bg-background text-foreground;
76-
}
77-
}
78-
79-
.text-focus-in {
80-
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
81-
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
82-
}
83-
84-
@-webkit-keyframes text-focus-in {
85-
0% {
86-
-webkit-filter: blur(12px);
87-
filter: blur(12px);
88-
opacity: 0;
63+
--border: 12 6.5% 15.1%;
64+
--input: 12 6.5% 15.1%;
65+
--ring: 24 5.7% 82.9%;
66+
}
8967
}
9068

91-
100% {
92-
-webkit-filter: blur(0px);
93-
filter: blur(0px);
94-
opacity: 1;
95-
}
96-
}
97-
98-
@keyframes text-focus-in {
99-
0% {
100-
-webkit-filter: blur(12px);
101-
filter: blur(12px);
102-
opacity: 0;
103-
}
104-
105-
100% {
106-
-webkit-filter: blur(0px);
107-
filter: blur(0px);
108-
opacity: 1;
109-
}
110-
}
69+
@layer base {
70+
* {
71+
@apply border-border;
72+
}
73+
body {
74+
@apply bg-background text-foreground;
75+
}
76+
}

‎app/layout.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import type { Metadata } from "next";
22
import { GeistMono } from "geist/font/mono";
33
import "./globals.css";
4-
import { Layout } from "@/components/craft/layout";
4+
import { Layout } from "@/components/craft";
55
import { Analytics } from "@vercel/analytics/react";
6+
import { ThemeProvider } from "@/components/theme-provider";
67

78
export const metadata: Metadata = {
89
title: "9d8 :: software design and development",
@@ -16,8 +17,17 @@ export default function RootLayout({
1617
}) {
1718
return (
1819
<Layout className={GeistMono.className}>
19-
{children}
20-
<Analytics />
20+
<body>
21+
<ThemeProvider
22+
attribute="class"
23+
defaultTheme="system"
24+
enableSystem
25+
disableTransitionOnChange
26+
>
27+
{children}
28+
<Analytics />
29+
</ThemeProvider>
30+
</body>
2131
</Layout>
2232
);
2333
}

‎app/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Project from "@/components/project";
22
import projects from "@/projects.config";
3-
import { ModeToggle } from "@/components/craft/theme/theme-toggle";
3+
import { ModeToggle } from "@/components/mode-toggle";
44
import Image from "next/image";
55

66
export default function Home() {

‎components.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
"tailwind": {
77
"config": "tailwind.config.ts",
88
"css": "app/globals.css",
9-
"baseColor": "neutral",
9+
"baseColor": "stone",
1010
"cssVariables": true,
1111
"prefix": ""
1212
},
1313
"aliases": {
1414
"components": "@/components",
1515
"utils": "@/lib/utils"
1616
}
17-
}
17+
}

‎components/craft

Submodule craft deleted from 34be284

‎components/craft.tsx

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import * as React from "react";
2+
3+
// cn util
4+
import { type ClassValue, clsx } from "clsx";
5+
import { twMerge } from "tailwind-merge";
6+
7+
export function cn(...inputs: ClassValue[]) {
8+
return twMerge(clsx(inputs));
9+
}
10+
11+
// Layout Component
12+
type LayoutProps = {
13+
children: React.ReactNode;
14+
className?: string;
15+
};
16+
17+
const Layout = ({ children, className }: LayoutProps) => {
18+
return (
19+
<html
20+
lang="en"
21+
suppressHydrationWarning
22+
className={cn("scroll-smooth antialiased focus:scroll-auto", className)}
23+
>
24+
{children}
25+
</html>
26+
);
27+
};
28+
29+
// Main Component
30+
type MainProps = {
31+
children: React.ReactNode;
32+
className?: string;
33+
id?: string;
34+
};
35+
36+
const Main = ({ children, className, id }: MainProps) => {
37+
return (
38+
<main
39+
className={cn(
40+
// `Main` Specific Styles
41+
"max-w-none prose-p:m-0",
42+
// General Prose
43+
"prose prose-neutral prose:font-sans dark:prose-invert xl:prose-lg",
44+
// Prose Headings
45+
"prose-headings:font-normal",
46+
// Prose Strong
47+
"prose-strong:font-semibold",
48+
// Inline Links
49+
"prose-a:underline prose-a:decoration-primary/50 prose-a:underline-offset-2 prose-a:text-foreground/75 prose-a:transition-all",
50+
// Inline Link Hover
51+
"hover:prose-a:decoration-primary hover:prose-a:text-foreground",
52+
// Blockquotes
53+
"prose-blockquote:not-italic",
54+
// Pre and Code Blocks
55+
"prose-pre:border prose-pre:bg-muted/25 prose-pre:text-foreground",
56+
className
57+
)}
58+
id={id}
59+
>
60+
{children}
61+
</main>
62+
);
63+
};
64+
65+
// Section Component
66+
type SectionProps = {
67+
children: React.ReactNode;
68+
className?: string;
69+
id?: string;
70+
};
71+
72+
const Section = ({ children, className, id }: SectionProps) => {
73+
return (
74+
<section className={cn("py-8 md:py-12", className)} id={id}>
75+
{children}
76+
</section>
77+
);
78+
};
79+
80+
// Container Component
81+
type ContainerProps = {
82+
children: React.ReactNode;
83+
className?: string;
84+
id?: string;
85+
};
86+
87+
const Container = ({ children, className, id }: ContainerProps) => {
88+
return (
89+
<div className={cn("mx-auto max-w-5xl", "p-6 sm:p-8", className)} id={id}>
90+
{children}
91+
</div>
92+
);
93+
};
94+
95+
// Article Component
96+
type ArticleProps = {
97+
children: React.ReactNode;
98+
className?: string;
99+
id?: string;
100+
};
101+
102+
const Article = ({ children, className, id }: ArticleProps) => {
103+
return (
104+
<article
105+
className={cn(
106+
// General Prose
107+
"prose prose-neutral prose:font-sans dark:prose-invert xl:prose-lg max-w-none",
108+
// Prose Headings
109+
"prose-headings:font-normal",
110+
// Prose Paragraphs
111+
"prose-p:mb-0",
112+
// Prose Strong
113+
"prose-strong:font-semibold",
114+
// Inline Links
115+
"prose-a:underline prose-a:decoration-primary/50 prose-a:underline-offset-2 prose-a:text-foreground/75 prose-a:transition-all",
116+
// Inline Link Hover
117+
"hover:prose-a:decoration-primary hover:prose-a:text-foreground",
118+
// Blockquotes
119+
"prose-blockquote:not-italic",
120+
// Pre and Code Blocks
121+
"prose-pre:border prose-pre:bg-muted/25",
122+
className
123+
)}
124+
id={id}
125+
>
126+
{children}
127+
</article>
128+
);
129+
};
130+
131+
export { Layout, Main, Section, Container, Article };

‎components/mode-toggle.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import { Moon, Sun } from "lucide-react";
5+
import { useTheme } from "next-themes";
6+
7+
import { Button } from "@/components/ui/button";
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from "@/components/ui/dropdown-menu";
14+
15+
export function ModeToggle() {
16+
const { setTheme } = useTheme();
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button variant="ghost" size="icon">
22+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24+
<span className="sr-only">Toggle theme</span>
25+
</Button>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end">
28+
<DropdownMenuItem onClick={() => setTheme("light")}>
29+
Light
30+
</DropdownMenuItem>
31+
<DropdownMenuItem onClick={() => setTheme("dark")}>
32+
Dark
33+
</DropdownMenuItem>
34+
<DropdownMenuItem onClick={() => setTheme("system")}>
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
);
40+
}

0 commit comments

Comments
 (0)