Skip to content

Commit 9d5325b

Browse files
DiscusserDiscusser
committed
Add shadcn
1 parent 4f1f99e commit 9d5325b

File tree

11 files changed

+319
-15
lines changed

11 files changed

+319
-15
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
name: Deploy to GitHub Pages
2+
on:
3+
push:
4+
branches:
5+
- main
6+
jobs:
7+
build_site:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout
11+
uses: actions/checkout@v4
12+
13+
# If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
14+
- name: Install pnpm
15+
uses: pnpm/action-setup@v3
16+
with:
17+
version: 8
18+
cache: pnpm
19+
20+
- name: Install dependencies
21+
run: pnpm install
22+
23+
- name: build
24+
env:
25+
BASE_PATH: '/${{ github.event.repository.name }}'
26+
run: |
27+
pnpm run build
28+
29+
- name: Upload Artifacts
30+
uses: actions/upload-pages-artifact@v3
31+
with:
32+
path: 'build/'
33+
34+
deploy:
35+
needs: build_site
36+
runs-on: ubuntu-latest
37+
38+
permissions:
39+
pages: write
40+
id-token: write
41+
42+
environment:
43+
name: github-pages
44+
url: ${{ steps.deployment.outputs.page_url }}
45+
46+
steps:
47+
- name: Deploy
48+
id: deployment
49+
uses: actions/deploy-pages@v4

‎components.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"$schema": "https://shadcn-svelte.com/schema.json",
3+
"style": "default",
4+
"tailwind": {
5+
"config": "tailwind.config.ts",
6+
"css": "src/app.css",
7+
"baseColor": "slate"
8+
},
9+
"aliases": {
10+
"components": "$lib/components",
11+
"utils": "$lib/utils"
12+
},
13+
"typescript": true
14+
}

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
},
1414
"devDependencies": {
1515
"@sveltejs/adapter-auto": "^3.0.0",
16+
"@sveltejs/adapter-static": "^3.0.6",
1617
"@sveltejs/kit": "^2.0.0",
1718
"@sveltejs/vite-plugin-svelte": "^4.0.0",
1819
"@types/eslint": "^9.6.0",
1920
"autoprefixer": "^10.4.20",
21+
"clsx": "^2.1.1",
2022
"eslint": "^9.7.0",
2123
"eslint-config-prettier": "^9.1.0",
2224
"eslint-plugin-svelte": "^2.36.0",
@@ -26,6 +28,8 @@
2628
"prettier-plugin-tailwindcss": "^0.6.5",
2729
"svelte": "^5.0.0",
2830
"svelte-check": "^4.0.0",
31+
"tailwind-merge": "^2.5.4",
32+
"tailwind-variants": "^0.2.1",
2933
"tailwindcss": "^3.4.9",
3034
"typescript": "^5.0.0",
3135
"typescript-eslint": "^8.0.0",

‎pnpm-lock.yaml‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.css‎

Lines changed: 78 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,78 @@
1-
@import 'tailwindcss/base';
2-
@import 'tailwindcss/components';
3-
@import 'tailwindcss/utilities';
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 84% 4.9%;
9+
10+
--muted: 210 40% 96.1%;
11+
--muted-foreground: 215.4 16.3% 46.9%;
12+
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 222.2 84% 4.9%;
15+
16+
--card: 0 0% 100%;
17+
--card-foreground: 222.2 84% 4.9%;
18+
19+
--border: 214.3 31.8% 91.4%;
20+
--input: 214.3 31.8% 91.4%;
21+
22+
--primary: 222.2 47.4% 11.2%;
23+
--primary-foreground: 210 40% 98%;
24+
25+
--secondary: 210 40% 96.1%;
26+
--secondary-foreground: 222.2 47.4% 11.2%;
27+
28+
--accent: 210 40% 96.1%;
29+
--accent-foreground: 222.2 47.4% 11.2%;
30+
31+
--destructive: 0 72.2% 50.6%;
32+
--destructive-foreground: 210 40% 98%;
33+
34+
--ring: 222.2 84% 4.9%;
35+
36+
--radius: 0.5rem;
37+
}
38+
39+
.dark {
40+
--background: 222.2 84% 4.9%;
41+
--foreground: 210 40% 98%;
42+
43+
--muted: 217.2 32.6% 17.5%;
44+
--muted-foreground: 215 20.2% 65.1%;
45+
46+
--popover: 222.2 84% 4.9%;
47+
--popover-foreground: 210 40% 98%;
48+
49+
--card: 222.2 84% 4.9%;
50+
--card-foreground: 210 40% 98%;
51+
52+
--border: 217.2 32.6% 17.5%;
53+
--input: 217.2 32.6% 17.5%;
54+
55+
--primary: 210 40% 98%;
56+
--primary-foreground: 222.2 47.4% 11.2%;
57+
58+
--secondary: 217.2 32.6% 17.5%;
59+
--secondary-foreground: 210 40% 98%;
60+
61+
--accent: 217.2 32.6% 17.5%;
62+
--accent-foreground: 210 40% 98%;
63+
64+
--destructive: 0 62.8% 30.6%;
65+
--destructive-foreground: 210 40% 98%;
66+
67+
--ring: 212.7 26.8% 83.9%;
68+
}
69+
}
70+
71+
@layer base {
72+
* {
73+
@apply border-border;
74+
}
75+
body {
76+
@apply bg-background text-foreground;
77+
}
78+
}

‎src/error.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<p>Error occurred when loading page:</p>
2+
%sveltekit.status% %sveltekit.error.message%

‎src/lib/utils.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { type ClassValue, clsx } from "clsx";
2+
import { twMerge } from "tailwind-merge";
3+
import { cubicOut } from "svelte/easing";
4+
import type { TransitionConfig } from "svelte/transition";
5+
6+
export function cn(...inputs: ClassValue[]) {
7+
return twMerge(clsx(inputs));
8+
}
9+
10+
type FlyAndScaleParams = {
11+
y?: number;
12+
x?: number;
13+
start?: number;
14+
duration?: number;
15+
};
16+
17+
export const flyAndScale = (
18+
node: Element,
19+
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
20+
): TransitionConfig => {
21+
const style = getComputedStyle(node);
22+
const transform = style.transform === "none" ? "" : style.transform;
23+
24+
const scaleConversion = (
25+
valueA: number,
26+
scaleA: [number, number],
27+
scaleB: [number, number]
28+
) => {
29+
const [minA, maxA] = scaleA;
30+
const [minB, maxB] = scaleB;
31+
32+
const percentage = (valueA - minA) / (maxA - minA);
33+
const valueB = percentage * (maxB - minB) + minB;
34+
35+
return valueB;
36+
};
37+
38+
const styleToString = (
39+
style: Record<string, number | string | undefined>
40+
): string => {
41+
return Object.keys(style).reduce((str, key) => {
42+
if (style[key] === undefined) return str;
43+
return str + `${key}:${style[key]};`;
44+
}, "");
45+
};
46+
47+
return {
48+
duration: params.duration ?? 200,
49+
delay: 0,
50+
css: (t) => {
51+
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
52+
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
53+
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
54+
55+
return styleToString({
56+
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
57+
opacity: t
58+
});
59+
},
60+
easing: cubicOut
61+
};
62+
};

‎src/routes/+layout.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import '../app.css';
3+
34
let { children } = $props();
45
</script>
56

‎src/routes/+layout.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const prerender = true;

‎svelte.config.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import adapter from '@sveltejs/adapter-auto';
1+
import adapter from '@sveltejs/adapter-static';
22
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
33

44
/** @type {import('@sveltejs/kit').Config} */
@@ -8,10 +8,10 @@ const config = {
88
preprocess: vitePreprocess(),
99

1010
kit: {
11-
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12-
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13-
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14-
adapter: adapter()
11+
// We use adapter-static for a static site
12+
adapter: adapter({
13+
fallback: '404.html'
14+
})
1515
}
1616
};
1717

0 commit comments

Comments
 (0)