Skip to content

Commit 6c67bd0

Browse files
jermspeaksjermspeaks
authored
Merge pull request #472 from jermspeaks/feature/shadcn-ready
Ready for shadcn components
2 parents cca047f + b21e6c1 commit 6c67bd0

File tree

11 files changed

+291
-25
lines changed

11 files changed

+291
-25
lines changed

‎astro.config.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ export default defineConfig({
3434
sitemap(),
3535
svelte(),
3636
tailwind({
37-
configFile: "./tailwind.config.cjs",
38-
applyBaseStyles: true,
37+
configFile: "./tailwind.config.js",
38+
applyBaseStyles: false,
3939
}),
4040
astroAsides(),
4141
mdx({

‎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.js",
6+
"css": "src/styles/app.css",
7+
"baseColor": "slate"
8+
},
9+
"aliases": {
10+
"components": "$lib/components",
11+
"utils": "$lib/utils"
12+
},
13+
"typescript": true
14+
}

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@types/html-escaper": "^3.0.2",
3030
"astro": "^4.10.1",
3131
"astro-auto-import": "^0.4.2",
32+
"clsx": "^2.1.1",
3233
"codemirror": "^6.0.1",
3334
"d3": "^7.9.0",
3435
"hast-util-to-string": "^3.0.0",
@@ -41,6 +42,8 @@
4142
"rehype-slug": "^6.0.0",
4243
"remark-directive": "^3.0.0",
4344
"svelte": "^4.2.18",
45+
"tailwind-merge": "^2.3.0",
46+
"tailwind-variants": "^0.2.1",
4447
"tailwindcss": "^3.4.4",
4548
"unist-util-remove": "^4.0.0",
4649
"unist-util-visit": "^5.0.0"

‎src/components/BaseHead.astro

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
// Import the global.css file here so that it is included on
33
// all pages through the use of the <BaseHead /> component.
4-
import "../styles/global.css";
4+
import "$lib/styles/global.css";
5+
import "$lib/styles/app.css";
56
67
export interface Props {
78
title: string;

‎src/pages/index.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const combination = [
8686
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
8787
.slice(0, TOTAL_NUMBER_OF_CURATED_ITEMS);
8888
89-
const curations = await getCollection("curation");
89+
// const curations = await getCollection("curation");
9090
---
9191

9292
<!doctype html>
@@ -220,7 +220,7 @@ const curations = await getCollection("curation");
220220
</ul>
221221
</div>
222222
</div>
223-
<ul
223+
<!-- <ul
224224
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 list-none p-0 mt-8"
225225
>
226226
{
@@ -238,7 +238,7 @@ const curations = await getCollection("curation");
238238
)
239239
)
240240
}
241-
</ul>
241+
</ul> -->
242242

243243
<hr class="mt-5 mb-5" />
244244

‎src/styles/app.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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: hsl(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+
}
79+

‎src/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+
};

‎tailwind.config.cjs

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎tailwind.config.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { fontFamily } from "tailwindcss/defaultTheme";
2+
3+
/** @type {import('tailwindcss').Config} */
4+
const config = {
5+
darkMode: ["class"],
6+
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
7+
safelist: ["dark"],
8+
theme: {
9+
container: {
10+
center: true,
11+
padding: "2rem",
12+
screens: {
13+
"2xl": "1400px",
14+
},
15+
},
16+
extend: {
17+
colors: {
18+
border: "hsl(var(--border) / <alpha-value>)",
19+
input: "hsl(var(--input) / <alpha-value>)",
20+
ring: "hsl(var(--ring) / <alpha-value>)",
21+
background: "hsl(var(--background) / <alpha-value>)",
22+
foreground: "hsl(var(--foreground) / <alpha-value>)",
23+
primary: {
24+
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
25+
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
26+
},
27+
secondary: {
28+
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
29+
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
30+
},
31+
destructive: {
32+
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
33+
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
34+
},
35+
muted: {
36+
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
37+
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
38+
},
39+
accent: {
40+
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
41+
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
42+
},
43+
popover: {
44+
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
45+
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
46+
},
47+
card: {
48+
DEFAULT: "hsl(var(--card) / <alpha-value>)",
49+
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
50+
},
51+
},
52+
borderRadius: {
53+
lg: "var(--radius)",
54+
md: "calc(var(--radius) - 2px)",
55+
sm: "calc(var(--radius) - 4px)",
56+
},
57+
fontFamily: {
58+
sans: [...fontFamily.sans],
59+
},
60+
typography: {
61+
quoteless: {
62+
css: {
63+
"blockquote p:first-of-type::before": { content: "none" },
64+
"blockquote p:first-of-type::after": { content: "none" },
65+
},
66+
},
67+
},
68+
},
69+
},
70+
plugins: [require("@tailwindcss/typography")],
71+
};
72+
73+
export default config;

0 commit comments

Comments
 (0)