diff --git a/components.json b/components.json
new file mode 100644
index 0000000..1e6a638
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+ "$schema": "https://shadcn-svelte.com/schema.json",
+ "tailwind": {
+ "css": "src/routes/layout.css",
+ "baseColor": "neutral"
+ },
+ "aliases": {
+ "components": "$lib/components",
+ "utils": "$lib/utils",
+ "ui": "$lib/components/ui",
+ "hooks": "$lib/hooks",
+ "lib": "$lib"
+ },
+ "typescript": true,
+ "registry": "https://shadcn-svelte.com/registry"
+}
diff --git a/package.json b/package.json
index 812044b..6e862e9 100644
--- a/package.json
+++ b/package.json
@@ -17,17 +17,22 @@
"db:studio": "drizzle-kit studio"
},
"devDependencies": {
+ "@lucide/svelte": "^0.563.1",
"@sveltejs/adapter-node": "^5.5.2",
"@sveltejs/kit": "^2.50.1",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/vite": "^4.1.18",
"@types/node": "^22",
+ "clsx": "^2.1.1",
"drizzle-kit": "^0.31.8",
"drizzle-orm": "^0.45.1",
"svelte": "^5.48.2",
"svelte-check": "^4.3.5",
+ "tailwind-merge": "^3.4.0",
+ "tailwind-variants": "^3.2.2",
"tailwindcss": "^4.1.18",
+ "tw-animate-css": "^1.4.0",
"typescript": "^5.9.3",
"vite": "^7.3.1"
},
@@ -41,6 +46,7 @@
"@tiptap/pm": "^3.18.0",
"@tiptap/starter-kit": "^3.18.0",
"marked": "^17.0.1",
+ "mode-watcher": "^1.1.0",
"postgres": "^3.4.8",
"tiptap": "^1.32.2"
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e966e63..8e6b7be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
marked:
specifier: ^17.0.1
version: 17.0.1
+ mode-watcher:
+ specifier: ^1.1.0
+ version: 1.1.0(svelte@5.49.0)
postgres:
specifier: ^3.4.8
version: 3.4.8
@@ -42,6 +45,9 @@ importers:
specifier: ^1.32.2
version: 1.32.2(vue-template-compiler@2.7.16)(vue@2.7.16)
devDependencies:
+ '@lucide/svelte':
+ specifier: ^0.563.1
+ version: 0.563.1(svelte@5.49.0)
'@sveltejs/adapter-node':
specifier: ^5.5.2
version: 5.5.2(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.49.0)(vite@7.3.1(@types/node@22.19.7)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.49.0)(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.7)(jiti@2.6.1)(lightningcss@1.30.2)))
@@ -60,6 +66,9 @@ importers:
'@types/node':
specifier: ^22
version: 22.19.7
+ clsx:
+ specifier: ^2.1.1
+ version: 2.1.1
drizzle-kit:
specifier: ^0.31.8
version: 0.31.8
@@ -72,9 +81,18 @@ importers:
svelte-check:
specifier: ^4.3.5
version: 4.3.5(picomatch@4.0.3)(svelte@5.49.0)(typescript@5.9.3)
+ tailwind-merge:
+ specifier: ^3.4.0
+ version: 3.4.0
+ tailwind-variants:
+ specifier: ^3.2.2
+ version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
tailwindcss:
specifier: ^4.1.18
version: 4.1.18
+ tw-animate-css:
+ specifier: ^1.4.0
+ version: 1.4.0
typescript:
specifier: ^5.9.3
version: 5.9.3
@@ -594,6 +612,11 @@ packages:
'@jridgewell/trace-mapping@0.3.31':
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+ '@lucide/svelte@0.563.1':
+ resolution: {integrity: sha512-Kt+MbnE5D9RsuI/csmf7M+HWxALe57x3A0DhQ8pPnnUpneh7zuldrYjlT+veWtk+tVnp5doQtaAAxLujzIlhBw==}
+ peerDependencies:
+ svelte: ^5
+
'@polka/url@1.0.0-next.29':
resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -1304,6 +1327,9 @@ packages:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true
+ inline-style-parser@0.2.7:
+ resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
is-core-module@2.16.1:
resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
engines: {node: '>= 0.4'}
@@ -1423,6 +1449,11 @@ packages:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
+ mode-watcher@1.1.0:
+ resolution: {integrity: sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g==}
+ peerDependencies:
+ svelte: ^5.27.0
+
mri@1.2.0:
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
engines: {node: '>=4'}
@@ -1553,6 +1584,16 @@ packages:
rope-sequence@1.3.4:
resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+ runed@0.23.4:
+ resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
+ peerDependencies:
+ svelte: ^5.7.0
+
+ runed@0.25.0:
+ resolution: {integrity: sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==}
+ peerDependencies:
+ svelte: ^5.7.0
+
sade@1.8.1:
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
engines: {node: '>=6'}
@@ -1575,6 +1616,9 @@ packages:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
+ style-to-object@1.0.14:
+ resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
supports-preserve-symlinks-flag@1.0.0:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
@@ -1587,10 +1631,29 @@ packages:
svelte: ^4.0.0 || ^5.0.0-next.0
typescript: '>=5.0.0'
+ svelte-toolbelt@0.7.1:
+ resolution: {integrity: sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ==}
+ engines: {node: '>=18', pnpm: '>=8.7.0'}
+ peerDependencies:
+ svelte: ^5.0.0
+
svelte@5.49.0:
resolution: {integrity: sha512-Fn2mCc3XX0gnnbBYzWOTrZHi5WnF9KvqmB1+KGlUWoJkdioPmFYtg2ALBr6xl2dcnFTz3Vi7/mHpbKSVg/imVg==}
engines: {node: '>=18'}
+ tailwind-merge@3.4.0:
+ resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+ tailwind-variants@3.2.2:
+ resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+ engines: {node: '>=16.x', pnpm: '>=7.x'}
+ peerDependencies:
+ tailwind-merge: '>=3.0.0'
+ tailwindcss: '*'
+ peerDependenciesMeta:
+ tailwind-merge:
+ optional: true
+
tailwindcss@4.1.18:
resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
@@ -1618,6 +1681,9 @@ packages:
resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
engines: {node: '>=6'}
+ tw-animate-css@1.4.0:
+ resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
typescript@5.9.3:
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
engines: {node: '>=14.17'}
@@ -1998,6 +2064,10 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5
+ '@lucide/svelte@0.563.1(svelte@5.49.0)':
+ dependencies:
+ svelte: 5.49.0
+
'@polka/url@1.0.0-next.29': {}
'@remirror/core-constants@3.0.0': {}
@@ -2618,6 +2688,8 @@ snapshots:
he@1.2.0: {}
+ inline-style-parser@0.2.7: {}
+
is-core-module@2.16.1:
dependencies:
hasown: 2.0.2
@@ -2712,6 +2784,12 @@ snapshots:
mini-svg-data-uri@1.4.4: {}
+ mode-watcher@1.1.0(svelte@5.49.0):
+ dependencies:
+ runed: 0.25.0(svelte@5.49.0)
+ svelte: 5.49.0
+ svelte-toolbelt: 0.7.1(svelte@5.49.0)
+
mri@1.2.0: {}
mrmime@2.0.1: {}
@@ -2891,6 +2969,16 @@ snapshots:
rope-sequence@1.3.4: {}
+ runed@0.23.4(svelte@5.49.0):
+ dependencies:
+ esm-env: 1.2.2
+ svelte: 5.49.0
+
+ runed@0.25.0(svelte@5.49.0):
+ dependencies:
+ esm-env: 1.2.2
+ svelte: 5.49.0
+
sade@1.8.1:
dependencies:
mri: 1.2.0
@@ -2912,6 +3000,10 @@ snapshots:
source-map@0.6.1: {}
+ style-to-object@1.0.14:
+ dependencies:
+ inline-style-parser: 0.2.7
+
supports-preserve-symlinks-flag@1.0.0: {}
svelte-check@4.3.5(picomatch@4.0.3)(svelte@5.49.0)(typescript@5.9.3):
@@ -2926,6 +3018,13 @@ snapshots:
transitivePeerDependencies:
- picomatch
+ svelte-toolbelt@0.7.1(svelte@5.49.0):
+ dependencies:
+ clsx: 2.1.1
+ runed: 0.23.4(svelte@5.49.0)
+ style-to-object: 1.0.14
+ svelte: 5.49.0
+
svelte@5.49.0:
dependencies:
'@jridgewell/remapping': 2.3.5
@@ -2944,6 +3043,14 @@ snapshots:
magic-string: 0.30.21
zimmerframe: 1.1.4
+ tailwind-merge@3.4.0: {}
+
+ tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18):
+ dependencies:
+ tailwindcss: 4.1.18
+ optionalDependencies:
+ tailwind-merge: 3.4.0
+
tailwindcss@4.1.18: {}
tapable@2.3.0: {}
@@ -2986,6 +3093,8 @@ snapshots:
totalist@3.0.1: {}
+ tw-animate-css@1.4.0: {}
+
typescript@5.9.3: {}
uc.micro@2.1.0: {}
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
index 17289f5..4ecac74 100644
--- a/src/lib/components/header.svelte
+++ b/src/lib/components/header.svelte
@@ -1,3 +1,9 @@
+
+
\ No newline at end of file
diff --git a/src/lib/components/ui/ThemeModeButton.svelte b/src/lib/components/ui/ThemeModeButton.svelte
new file mode 100644
index 0000000..20bfad5
--- /dev/null
+++ b/src/lib/components/ui/ThemeModeButton.svelte
@@ -0,0 +1,17 @@
+
+
+
\ No newline at end of file
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..a8296ae
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,82 @@
+
+
+
+
+{#if href}
+
+ {@render children?.()}
+
+{:else}
+
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..fb585d7
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+ type ButtonProps,
+ type ButtonSize,
+ type ButtonVariant,
+ buttonVariants,
+} from "./button.svelte";
+
+export {
+ Root,
+ type ButtonProps as Props,
+ //
+ Root as Button,
+ buttonVariants,
+ type ButtonProps,
+ type ButtonSize,
+ type ButtonVariant,
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..55b3a91
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild = T extends { child?: any } ? Omit : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren = T extends { children?: any } ? Omit : T;
+export type WithoutChildrenOrChild = WithoutChildren>;
+export type WithElementRef = T & { ref?: U | null };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7ad0b04..a96169b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
import './layout.css';
import favicon from '$lib/assets/favicon.svg';
import Header from '$lib/components/header.svelte';
+ import { ModeWatcher } from "mode-watcher"
let { children } = $props();
@@ -10,5 +11,6 @@
+
{@render children()}
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 613cb8b..ac256d3 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,16 +1,121 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/forms';
+@import "tailwindcss";
-/*@import 'quill/dist/quill.core.css';
-@import 'quill/dist/quill.bubble.css';
-@import 'quill/dist/quill.snow.css';*/
+@import "tw-animate-css";
-html {
- @apply py-3 px-4;
- @apply bg-[#252525] text-white
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
}
- html body {
- /*@apply font-[AmericanTypewriter];*/
- /* @apply w-full md:w-[68%] mx-auto h-full; */
- }
\ No newline at end of file
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file