my website
add some view transitions
+65
-67
+1
-1
src/components/BaseHead.astro
+1
-1
src/components/BaseHead.astro
+2
-2
src/components/Header.astro
+2
-2
src/components/Header.astro
···
4
4
href?: string;
5
5
}
6
6
7
-
const { title = "Home", href = "/" } = Astro.props;
7
+
const { title = "Home", href = "/", ...props } = Astro.props;
8
8
---
9
9
10
10
<header>
11
11
<nav>
12
-
<a href={href}>← {title}</a>
12
+
<a transition:name="home" href={href} {...props}>← {title}</a>
13
13
</nav>
14
14
</header>
+5
-17
src/components/Intro.astro
+5
-17
src/components/Intro.astro
···
5
5
6
6
interface Props {
7
7
title: string | null;
8
-
created?: Date;
9
-
author?: string;
10
-
dateFormat?: DateFormat;
11
8
}
12
9
13
-
const { title, created, author, dateFormat } = Astro.props;
10
+
const { title, ...props } = Astro.props;
14
11
---
15
12
16
-
<div class="mt-12 mb-5">
17
-
<h1>{title}</h1>
18
-
{
19
-
created ? (
20
-
<>
21
-
<small class="uppercase text-fg/80">
22
-
<!-- {author && <span>{author || ""} on </span>} -->
23
-
<PrettyDate date={created} dateFormat={dateFormat} />
24
-
</small>
25
-
<br />
26
-
</>
27
-
) : null
28
-
}
13
+
<div class="mt-12 mb-5 flex flex-col gap-2 items-start">
14
+
<slot name="prefix" />
15
+
<h1 {...props}>{title}</h1>
16
+
<slot name="suffix" />
29
17
</div>
+13
-15
src/components/PostInfo.astro
+13
-15
src/components/PostInfo.astro
···
2
2
import type { CollectionEntry } from "astro:content";
3
3
import Intro from "./Intro.astro";
4
4
import Tags from "./Tags.astro";
5
+
import PrettyDate from "./PrettyDate.astro";
5
6
6
7
type Props = Pick<
7
8
CollectionEntry<"blog">["data"],
8
9
"title" | "description" | "publish_date" | "tags"
9
-
>;
10
+
> & {
11
+
id: string;
12
+
};
10
13
11
-
const { title, description, publish_date, tags } = Astro.props;
14
+
const { title, description, publish_date, tags, id } = Astro.props;
12
15
---
13
16
14
-
<>
15
-
<Intro title={title} created={publish_date} author="Angelo Verlain" />
16
-
<p class="text-xl text-fg/80">
17
-
{description}
18
-
<!-- {state.readtime && (
19
-
<span>
20
-
<br />
21
-
{post.readTime} min read.
22
-
</span>
23
-
)} -->
24
-
<br />
17
+
<Intro title={title} transition:name={`post-title-${id}`}>
18
+
<PrettyDate slot="prefix" class="text-sm" date={publish_date} />
19
+
<Fragment slot="suffix">
20
+
<p transition:name={`post-snippet-${id}`} class="text-xl text-fg/80 mb-0">
21
+
{description}
22
+
</p>
25
23
<Tags tags={tags} />
26
-
</p>
27
-
</>
24
+
</Fragment>
25
+
</Intro>
+6
-2
src/components/PostsIndex.astro
+6
-2
src/components/PostsIndex.astro
···
51
51
}) => (
52
52
<li>
53
53
<div class="flex gap-2 items-center">
54
-
<a href={`/blog/${id}`} class="leading-tight inline-block">
54
+
<a
55
+
href={`/blog/${id}`}
56
+
class="leading-tight inline-block"
57
+
transition:name={`post-title-${id}`}
58
+
>
55
59
{title}
56
60
</a>
57
61
<div class="border-b border-dashed self-center flex-1" />
58
62
<PrettyDate date={publish_date ?? new Date()} />
59
63
</div>
60
-
<p>{snippet}</p>
64
+
<p transition:name={`post-snippet-${id}`}>{snippet}</p>
61
65
</li>
62
66
),
63
67
)}
+7
-2
src/components/PrettyDate.astro
+7
-2
src/components/PrettyDate.astro
···
4
4
interface Props {
5
5
date: Date;
6
6
dateFormat?: DateFormat;
7
+
class?: string;
7
8
}
8
9
9
-
const { date, dateFormat } = Astro.props;
10
+
const { date, dateFormat, class: className, ...props } = Astro.props;
10
11
11
12
let formatted;
12
13
if (dateFormat) {
···
20
21
}
21
22
---
22
23
23
-
<time datetime={date.toISOString()}>{formatted}</time>
24
+
<time
25
+
class={`uppercase text-fg/80 tabular-nums ${className || ""}`}
26
+
datetime={date.toISOString()}
27
+
{...props}>{formatted}</time
28
+
>
+8
-5
src/layouts/BlogPost.astro
+8
-5
src/layouts/BlogPost.astro
···
7
7
import { AUTHOR, PUBLISH_YEAR, SITE_TITLE } from "../consts";
8
8
import MainContainer from "../components/MainContainer.astro";
9
9
10
-
type Props = CollectionEntry<"blog">["data"];
10
+
type Props = CollectionEntry<"blog">["data"] & {
11
+
id: string;
12
+
};
11
13
12
-
const { title, description, publish_date, hero_image, tags } = Astro.props;
14
+
const { title, description, publish_date, hero_image, tags, id } = Astro.props;
13
15
---
14
16
15
17
<html lang="en">
···
20
22
21
23
<body>
22
24
<MainContainer>
23
-
<Header title="vixalien's blog" href="/blog" />
25
+
<Header title="vixalien's blog" href="/blog" transition:name="blog" />
24
26
<PostInfo
25
27
title={title}
26
28
description={description}
27
29
publish_date={publish_date}
28
30
tags={tags}
31
+
id={id}
29
32
/>
30
33
{
31
34
hero_image ? (
32
35
<img
33
-
class="rounded-lg"
36
+
class="rounded-lg my-12"
34
37
src={hero_image}
35
38
alt="Banner Image for post"
36
39
/>
37
40
) : (
38
-
<hr />
41
+
<hr class="mt-6" />
39
42
)
40
43
}
41
44
<br />
+1
-1
src/pages/blog.astro
+1
-1
src/pages/blog.astro
+11
-11
src/pages/blog/[...slug].astro
+11
-11
src/pages/blog/[...slug].astro
···
1
1
---
2
-
import { type CollectionEntry, getCollection } from 'astro:content';
3
-
import BlogPost from '../../layouts/BlogPost.astro';
4
-
import { render } from 'astro:content';
2
+
import { type CollectionEntry, getCollection } from "astro:content";
3
+
import BlogPost from "../../layouts/BlogPost.astro";
4
+
import { render } from "astro:content";
5
5
6
6
export async function getStaticPaths() {
7
-
const posts = await getCollection('blog');
8
-
return posts.map((post) => ({
9
-
params: { slug: post.id },
10
-
props: post,
11
-
}));
7
+
const posts = await getCollection("blog");
8
+
return posts.map((post) => ({
9
+
params: { slug: post.id },
10
+
props: post,
11
+
}));
12
12
}
13
-
type Props = CollectionEntry<'blog'>;
13
+
type Props = CollectionEntry<"blog">;
14
14
15
15
const post = Astro.props;
16
16
const { Content } = await render(post);
17
17
---
18
18
19
-
<BlogPost {...post.data}>
20
-
<Content />
19
+
<BlogPost {...post.data} id={post.id}>
20
+
<Content />
21
21
</BlogPost>
+10
-6
src/pages/index.astro
+10
-6
src/pages/index.astro
···
18
18
<ul
19
19
class="flex-row list-none pl-0 gap-8 *:*:text-fg *:*:hover:text-link"
20
20
>
21
-
<li><a href="/blog">blog</a></li>
22
-
<li><a href="/portfolio">portfolio</a></li>
21
+
<li>
22
+
<a href="/blog">blog</a>
23
+
</li>
24
+
<li>
25
+
<a href="/portfolio">portfolio</a>
26
+
</li>
23
27
<li>
24
28
<a href="https://memories.vixalien.com" target="_blank"
25
29
>memories ↗</a
···
28
32
</ul>
29
33
</nav>
30
34
</header>
31
-
<Intro title={SITE_TITLE} />
35
+
<Intro transition:name="home" title={SITE_TITLE} />
32
36
<p>
33
37
Hello! I'm Angelo Verlain, but you can call me <i>vixalien</i>. I am a
34
38
web and GTK developer and this is my website, a collection of projects
···
46
50
>.
47
51
</p>
48
52
<p>
49
-
Also keep an eye on <a href="https://karabo.io">Karabo</a>, which is an
50
-
upcoming start-up I'm working on to help improve organisational
51
-
procedures in the region.
53
+
Also keep an eye on <a href="https://karabo.io">Karabo ↗</a>,
54
+
which is an upcoming start-up I'm working on to help improve
55
+
organisational procedures in the region.
52
56
</p>
53
57
<h2 id="contact">Contact & Links</h2>
54
58
<ContactLinks />
+1
-1
src/pages/portfolio.astro
+1
-1
src/pages/portfolio.astro
···
15
15
<body>
16
16
<MainContainer>
17
17
<Header title={SITE_TITLE} />
18
-
<Intro title={`vixalien's portfolio`} />
18
+
<Intro title={`vixalien's portfolio`} transition:name="portfolio" />
19
19
<p>Personal projects I've worked on in the past.</p>
20
20
<p>
21
21
For more projects (most of them are open source), see my