Skip to content

Commit 663d916

Browse files
DiscusserDiscusser
committed
More work on pages
1 parent 5226466 commit 663d916

File tree

20 files changed

+715
-379
lines changed

20 files changed

+715
-379
lines changed

‎package.json‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,37 @@
1212
"lint": "prettier --check . && eslint ."
1313
},
1414
"devDependencies": {
15-
"@sveltejs/adapter-auto": "^3.0.0",
15+
"@sveltejs/adapter-auto": "^3.3.1",
1616
"@sveltejs/adapter-static": "^3.0.6",
17-
"@sveltejs/kit": "^2.0.0",
17+
"@sveltejs/kit": "^2.8.0",
1818
"@sveltejs/vite-plugin-svelte": "^4.0.0",
19-
"@types/eslint": "^9.6.0",
20-
"@types/node": "^22.8.7",
19+
"@types/eslint": "^9.6.1",
20+
"@types/node": "^22.9.0",
2121
"autoprefixer": "^10.4.20",
2222
"bits-ui": "1.0.0-next.46",
2323
"clsx": "^2.1.1",
24-
"eslint": "^9.7.0",
24+
"embla-carousel-svelte": "^8.3.1",
25+
"eslint": "^9.14.0",
2526
"eslint-config-prettier": "^9.1.0",
26-
"eslint-plugin-svelte": "^2.36.0",
27-
"globals": "^15.0.0",
27+
"eslint-plugin-svelte": "^2.46.0",
28+
"globals": "^15.12.0",
29+
"lucide-svelte": "^0.456.0",
2830
"mode-watcher": "^0.4.1",
29-
"prettier": "^3.3.2",
30-
"prettier-plugin-svelte": "^3.2.6",
31-
"prettier-plugin-tailwindcss": "^0.6.5",
31+
"prettier": "^3.3.3",
32+
"prettier-plugin-svelte": "^3.2.7",
33+
"prettier-plugin-tailwindcss": "^0.6.8",
3234
"stylelint-config-recommended": "^14.0.1",
3335
"stylelint-config-standard": "^36.0.1",
3436
"stylelint-config-tailwindcss": "^0.0.7",
35-
"svelte": "^5.0.0",
36-
"svelte-check": "^4.0.0",
37+
"svelte": "^5.1.12",
38+
"svelte-check": "^4.0.6",
3739
"svelte-sonner": "^0.3.28",
3840
"tailwind-merge": "^2.5.4",
3941
"tailwind-variants": "^0.2.1",
40-
"tailwindcss": "^3.4.9",
41-
"typescript": "^5.0.0",
42-
"typescript-eslint": "^8.0.0",
43-
"vite": "^5.0.3"
42+
"tailwindcss": "^3.4.14",
43+
"typescript": "^5.6.3",
44+
"typescript-eslint": "^8.13.0",
45+
"vite": "^5.4.10"
4446
},
4547
"dependencies": {
4648
"@tabler/icons-svelte": "^3.21.0",

‎pnpm-lock.yaml‎

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

‎src/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,3 +119,7 @@ a {
119119
ul {
120120
@apply pl-4;
121121
}
122+
123+
code {
124+
@apply bg-secondary p-0.5;
125+
}

‎src/lib/components/projects/ProjectsTable.svelte‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
import * as Table from '$lib/components/ui/table';
55
import { getCoreRowModel } from '@tanstack/table-core';
66
7+
let {
8+
categories
9+
}: {
10+
categories?: string[];
11+
} = $props();
12+
713
const table = createSvelteTable({
814
data: projects,
915
columns: columns,
@@ -31,13 +37,15 @@
3137
</Table.Header>
3238
<Table.Body>
3339
{#each table.getRowModel().rows as row (row.id)}
34-
<Table.Row data-state={row.getIsSelected() && 'selected'}>
35-
{#each row.getVisibleCells() as cell (cell.id)}
36-
<Table.Cell>
37-
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
38-
</Table.Cell>
39-
{/each}
40-
</Table.Row>
40+
{#if !categories || categories.includes(row.original.category)}
41+
<Table.Row data-state={row.getIsSelected() && 'selected'}>
42+
{#each row.getVisibleCells() as cell (cell.id)}
43+
<Table.Cell>
44+
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
45+
</Table.Cell>
46+
{/each}
47+
</Table.Row>
48+
{/if}
4149
{/each}
4250
</Table.Body>
4351
</Table.Root>

‎src/lib/components/shared/Image.svelte‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
import type { HTMLImgAttributes } from 'svelte/elements';
3+
import { twMerge } from 'tailwind-merge';
4+
import { Skeleton } from '$lib/components/ui/skeleton';
5+
6+
let {
7+
alt,
8+
class: className,
9+
...restProps
10+
}: {
11+
alt?: string;
12+
class?: string;
13+
} & HTMLImgAttributes = $props();
14+
15+
let loading: boolean = $state(true);
16+
</script>
17+
18+
<div class="h-full space-y-2 text-center">
19+
<div class="h-full w-full">
20+
<Skeleton class="h-full w-full {!loading ? 'hidden' : ''}" />
21+
<img
22+
onload={() => (loading = false)}
23+
onerror={() => (loading = false)}
24+
{...restProps}
25+
{alt}
26+
class={twMerge(
27+
'flex h-full w-full items-center justify-center rounded-sm border-2 border-foreground/30 bg-secondary/50 hover:border-foreground/40 hover:bg-secondary/60',
28+
className,
29+
loading ? 'hidden' : ''
30+
)}
31+
/>
32+
</div>
33+
<p class="text-sm">{alt}</p>
34+
</div>

‎src/lib/components/shared/SideNav.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
<li>
99
<NavAnchor href="/projects">Projects</NavAnchor>
1010
<ul>
11-
<li><NavAnchor href="/projects/web">Web</NavAnchor></li>
12-
<li><NavAnchor href="/projects/cpp">C/C++</NavAnchor></li>
13-
<li><NavAnchor href="/projects/python">Python</NavAnchor></li>
11+
<li><NavAnchor fuzzy href="/projects/web">Web</NavAnchor></li>
12+
<li><NavAnchor fuzzy href="/projects/cpp">C/C++</NavAnchor></li>
13+
<li><NavAnchor fuzzy href="/projects/python">Python</NavAnchor></li>
14+
<li><NavAnchor fuzzy href="/projects/other">Other</NavAnchor></li>
1415
</ul>
1516
</li>
1617
<li><NavAnchor href="/blog">Blog</NavAnchor></li>

‎src/lib/components/shared/Video.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
import type { HTMLVideoAttributes } from 'svelte/elements';
4+
import { twMerge } from 'tailwind-merge';
5+
6+
let {
7+
src,
8+
children,
9+
alt,
10+
class: className,
11+
...restProps
12+
}: {
13+
children?: Snippet;
14+
src: string;
15+
alt?: string;
16+
class?: string;
17+
} & HTMLVideoAttributes = $props();
18+
</script>
19+
20+
<!-- svelte-ignore a11y_media_has_caption -->
21+
<div class="space-y-2 text-center">
22+
<video
23+
{...restProps}
24+
controls
25+
{src}
26+
class={twMerge(
27+
'flex h-full w-full items-center justify-center rounded-sm border-2 border-foreground/30 bg-secondary/50 hover:border-foreground/40 hover:bg-secondary/60',
28+
className
29+
)}
30+
>
31+
{@render children?.()}
32+
<source {src} />
33+
<p>
34+
Your browser can't display videos! Download the video <a href={src}>here</a>
35+
</p>
36+
</video>
37+
<p class="text-sm">{alt}</p>
38+
</div>

‎src/lib/components/ui/aspect-ratio/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
2+
3+
const Root = AspectRatioPrimitive.Root;
4+
5+
export { Root, Root as AspectRatio };

‎src/lib/components/ui/button/button.svelte‎

Lines changed: 69 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,74 @@
1+
<script lang="ts" module>
2+
import type { WithElementRef } from "bits-ui";
3+
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
4+
import { type VariantProps, tv } from "tailwind-variants";
5+
6+
export const buttonVariants = tv({
7+
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8+
variants: {
9+
variant: {
10+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
11+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
12+
outline:
13+
"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
14+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
15+
ghost: "hover:bg-accent hover:text-accent-foreground",
16+
link: "text-primary underline-offset-4 hover:underline",
17+
},
18+
size: {
19+
default: "h-10 px-4 py-2",
20+
sm: "h-9 rounded-md px-3",
21+
lg: "h-11 rounded-md px-8",
22+
icon: "h-10 w-10",
23+
},
24+
},
25+
defaultVariants: {
26+
variant: "default",
27+
size: "default",
28+
},
29+
});
30+
31+
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
32+
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
33+
34+
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
35+
WithElementRef<HTMLAnchorAttributes> & {
36+
variant?: ButtonVariant;
37+
size?: ButtonSize;
38+
};
39+
</script>
40+
141
<script lang="ts">
2-
import { Button as ButtonPrimitive } from "bits-ui";
3-
import { type Events, type Props, buttonVariants } from "./index.js";
442
import { cn } from "$lib/utils.js";
543
6-
type $$Props = Props;
7-
type $$Events = Events;
8-
9-
let className: $$Props["class"] = undefined;
10-
export let variant: $$Props["variant"] = "default";
11-
export let size: $$Props["size"] = "default";
12-
export let builders: $$Props["builders"] = [];
13-
export { className as class };
44+
let {
45+
class: className,
46+
variant = "default",
47+
size = "default",
48+
ref = $bindable(null),
49+
href = undefined,
50+
type = "button",
51+
children,
52+
...restProps
53+
}: ButtonProps = $props();
1454
</script>
1555

16-
<ButtonPrimitive.Root
17-
{builders}
18-
class={cn(buttonVariants({ variant, size, className }))}
19-
type="button"
20-
{...$$restProps}
21-
on:click
22-
on:keydown
23-
>
24-
<slot />
25-
</ButtonPrimitive.Root>
56+
{#if href}
57+
<a
58+
bind:this={ref}
59+
class={cn(buttonVariants({ variant, size, className }))}
60+
{href}
61+
{...restProps}
62+
>
63+
{@render children?.()}
64+
</a>
65+
{:else}
66+
<button
67+
bind:this={ref}
68+
class={cn(buttonVariants({ variant, size, className }))}
69+
{type}
70+
{...restProps}
71+
>
72+
{@render children?.()}
73+
</button>
74+
{/if}

‎src/lib/components/ui/button/index.ts‎

Lines changed: 10 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,17 @@
1-
import { type VariantProps, tv } from "tailwind-variants";
2-
import type { Button as ButtonPrimitive } from "bits-ui";
3-
import Root from "./button.svelte";
4-
5-
const buttonVariants = tv({
6-
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
7-
variants: {
8-
variant: {
9-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
10-
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
11-
outline:
12-
"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
13-
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
14-
ghost: "hover:bg-accent hover:text-accent-foreground",
15-
link: "text-primary underline-offset-4 hover:underline",
16-
},
17-
size: {
18-
default: "h-10 px-4 py-2",
19-
sm: "h-9 rounded-md px-3",
20-
lg: "h-11 rounded-md px-8",
21-
icon: "h-10 w-10",
22-
},
23-
},
24-
defaultVariants: {
25-
variant: "default",
26-
size: "default",
27-
},
28-
});
29-
30-
type Variant = VariantProps<typeof buttonVariants>["variant"];
31-
type Size = VariantProps<typeof buttonVariants>["size"];
32-
33-
type Props = ButtonPrimitive.Props & {
34-
variant?: Variant;
35-
size?: Size;
36-
};
37-
38-
type Events = ButtonPrimitive.Events;
1+
import Root, {
2+
type ButtonProps,
3+
type ButtonSize,
4+
type ButtonVariant,
5+
buttonVariants,
6+
} from "./button.svelte";
397

408
export {
419
Root,
42-
type Props,
43-
type Events,
10+
type ButtonProps as Props,
4411
//
4512
Root as Button,
46-
type Props as ButtonProps,
47-
type Events as ButtonEvents,
4813
buttonVariants,
14+
type ButtonProps,
15+
type ButtonSize,
16+
type ButtonVariant,
4917
};

0 commit comments

Comments
 (0)