Skip to content

Commit a6a8f3c

Browse files
DiscusserDiscusser
committed
Add blog page
1 parent 935c68e commit a6a8f3c

File tree

13 files changed

+314
-27
lines changed

13 files changed

+314
-27
lines changed

‎src/lib/components/blog/Article.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
import type { Article } from '$lib/constants/articles';
3+
import type { Snippet } from 'svelte';
4+
import { twMerge } from 'tailwind-merge';
5+
6+
const {
7+
children,
8+
article,
9+
class: className,
10+
...restProps
11+
}: {
12+
children?: Snippet;
13+
article: Article;
14+
class?: string;
15+
} = $props();
16+
</script>
17+
18+
<div class={twMerge('flex flex-col space-y-4', className)} {...restProps}>
19+
<div class="flex items-center space-x-4">
20+
<p class=" text-foreground text-2xl font-bold">
21+
{article.title}
22+
</p>
23+
</div>
24+
25+
{#if children}
26+
{@render children()}
27+
{/if}
28+
</div>

‎src/lib/components/blog/ArticleCard.svelte‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,42 @@
11
<script lang="ts">
2-
import {
3-
Card,
4-
CardContent,
5-
CardDescription,
6-
CardFooter,
7-
CardHeader,
8-
CardTitle
9-
} from '$lib/components/ui/card';
2+
import * as Card from '$lib/components/ui/card/index.js';
3+
import type { Article } from '@/constants/articles';
4+
import { cn } from '@/utils';
5+
6+
const {
7+
article,
8+
class: className,
9+
...restProps
10+
}: {
11+
article: Article;
12+
class?: string;
13+
} = $props();
1014
</script>
1115

12-
<div>
13-
<Card>
14-
<CardHeader>
15-
<CardTitle>Card Title</CardTitle>
16-
<CardDescription>Card Description</CardDescription>
17-
</CardHeader>
18-
<CardContent>
19-
<p>Card Content</p>
20-
</CardContent>
21-
<CardFooter>
22-
<p>Card Footer</p>
23-
</CardFooter>
24-
</Card>
16+
<div class={cn('flex', className)} {...restProps}>
17+
<Card.Root class="flex-grow justify-between">
18+
<Card.Header>
19+
<Card.Title
20+
><a href={'/blog/articles/' + article.id} class="text-blue-500">{article.title}</a
21+
></Card.Title
22+
>
23+
{#if article.tags != undefined}
24+
<div class="mt-1 space-x-1">
25+
{#each article.tags as tag}
26+
<span class="text-muted-foreground bg-muted rounded-md px-1 py-0.5 text-xs">
27+
{tag}
28+
</span>
29+
{/each}
30+
</div>
31+
{/if}
32+
</Card.Header>
33+
<Card.Content class="text-muted-foreground">
34+
{article.description}
35+
</Card.Content>
36+
<Card.Footer>
37+
<span class="text-muted-foreground text-sm">
38+
{article.date.toLocaleDateString()}
39+
</span>
40+
</Card.Footer>
41+
</Card.Root>
2542
</div>

‎src/lib/components/ui/card/card-action.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import { cn, type WithElementRef } from "$lib/utils.js";
3+
import type { HTMLAttributes } from "svelte/elements";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="card-action"
16+
class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
17+
{...restProps}
18+
>
19+
{@render children?.()}
20+
</div>

‎src/lib/components/ui/card/card-content.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn, type WithElementRef } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
14+
{@render children?.()}
15+
</div>

‎src/lib/components/ui/card/card-description.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn, type WithElementRef } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
11+
</script>
12+
13+
<p
14+
bind:this={ref}
15+
data-slot="card-description"
16+
class={cn("text-muted-foreground text-sm", className)}
17+
{...restProps}
18+
>
19+
{@render children?.()}
20+
</p>

‎src/lib/components/ui/card/card-footer.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import { cn, type WithElementRef } from "$lib/utils.js";
3+
import type { HTMLAttributes } from "svelte/elements";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="card-footer"
16+
class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
17+
{...restProps}
18+
>
19+
{@render children?.()}
20+
</div>

‎src/lib/components/ui/card/card-header.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { cn, type WithElementRef } from "$lib/utils.js";
3+
import type { HTMLAttributes } from "svelte/elements";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="card-header"
16+
class={cn(
17+
"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
18+
className
19+
)}
20+
{...restProps}
21+
>
22+
{@render children?.()}
23+
</div>

‎src/lib/components/ui/card/card-title.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn, type WithElementRef } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="card-title"
16+
class={cn("font-semibold leading-none", className)}
17+
{...restProps}
18+
>
19+
{@render children?.()}
20+
</div>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn, type WithElementRef } from "$lib/utils.js";
4+
5+
let {
6+
ref = $bindable(null),
7+
class: className,
8+
children,
9+
...restProps
10+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11+
</script>
12+
13+
<div
14+
bind:this={ref}
15+
data-slot="card"
16+
class={cn(
17+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
18+
className
19+
)}
20+
{...restProps}
21+
>
22+
{@render children?.()}
23+
</div>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Root from "./card.svelte";
2+
import Content from "./card-content.svelte";
3+
import Description from "./card-description.svelte";
4+
import Footer from "./card-footer.svelte";
5+
import Header from "./card-header.svelte";
6+
import Title from "./card-title.svelte";
7+
import Action from "./card-action.svelte";
8+
9+
export {
10+
Root,
11+
Content,
12+
Description,
13+
Footer,
14+
Header,
15+
Title,
16+
Action,
17+
//
18+
Root as Card,
19+
Content as CardContent,
20+
Description as CardDescription,
21+
Footer as CardFooter,
22+
Header as CardHeader,
23+
Title as CardTitle,
24+
Action as CardAction,
25+
};

0 commit comments

Comments
 (0)