Skip to content

Commit 4675d12

Browse files
davidhu2000davidhu2000
authored
chore: upgrade astro to v3 (#244)
1 parent 7825e1d commit 4675d12

20 files changed

+2198
-2348
lines changed

‎astro.config.mjs

+8-27
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import image from "@astrojs/image";
21
import mdx from "@astrojs/mdx";
32
import prefetch from "@astrojs/prefetch";
43
import sitemap from "@astrojs/sitemap";
@@ -8,26 +7,13 @@ import rehypePrettyCode from "rehype-pretty-code";
87

98
import { remarkReadingTime } from "./plugins/remark-reading-time.mjs";
109

11-
async function fetchTheme(name) {
12-
const res = await fetch(
13-
`https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/${name}.json`
14-
);
15-
return await res.json();
16-
}
17-
18-
const dark = await fetchTheme("github-dark");
19-
20-
console.log("successfully fetched dark theme");
21-
22-
const light = await fetchTheme("min-light");
23-
24-
console.log("successfully fetched light theme");
25-
10+
/** @type {import('rehype-pretty-code').Options} */
2611
const options = {
2712
theme: {
28-
dark,
29-
light,
13+
dark: "github-dark",
14+
light: "min-light",
3015
},
16+
keepBackground: false,
3117
onVisitLine(node) {
3218
// Prevent lines from collapsing in `display: grid` mode, and
3319
// allow empty lines to be copy/pasted
@@ -36,6 +22,9 @@ const options = {
3622
}
3723
},
3824
onVisitHighlightedLine(node) {
25+
if (!node.properties.className) {
26+
node.properties.className = [];
27+
}
3928
node.properties.className.push("highlighted");
4029
},
4130
onVisitHighlightedWord(node) {
@@ -46,15 +35,7 @@ const options = {
4635
// https://astro.build/config
4736
export default defineConfig({
4837
site: "https://www.davidhu.io",
49-
integrations: [
50-
mdx(),
51-
sitemap(),
52-
tailwind(),
53-
image({
54-
serviceEntryPoint: "@astrojs/image/sharp",
55-
}),
56-
prefetch(),
57-
],
38+
integrations: [mdx(), sitemap(), tailwind(), prefetch()],
5839
markdown: {
5940
syntaxHighlight: false,
6041
// TODO: this plugin does not work for mdx files, need to figure out why

‎package.json

+16-16
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,23 @@
1212
"ui": "yarn upgrade-interactive"
1313
},
1414
"devDependencies": {
15-
"@astrojs/image": "^0.14.1",
16-
"@astrojs/mdx": "^0.16.0",
17-
"@astrojs/prefetch": "^0.1.2",
18-
"@astrojs/rss": "^2.1.1",
19-
"@astrojs/sitemap": "^1.0.1",
20-
"@astrojs/tailwind": "^3.0.1",
21-
"@tailwindcss/typography": "^0.5.9",
22-
"@trivago/prettier-plugin-sort-imports": "^4.0.0",
23-
"astro": "^2.0.10",
24-
"astro-icon": "^0.8.0",
25-
"cypress": "^12.14.0",
26-
"mdast-util-to-string": "^3.1.1",
27-
"prettier": "^2.8.4",
15+
"@astrojs/mdx": "^1.1.0",
16+
"@astrojs/prefetch": "^0.4.0",
17+
"@astrojs/rss": "^3.0.0",
18+
"@astrojs/sitemap": "^3.0.0",
19+
"@astrojs/tailwind": "^5.0.0",
20+
"@tailwindcss/typography": "^0.5.10",
21+
"@trivago/prettier-plugin-sort-imports": "^4.2.0",
22+
"astro": "^3.1.2",
23+
"astro-icon": "^0.8.1",
24+
"cypress": "^13.2.0",
25+
"mdast-util-to-string": "^4.0.0",
26+
"prettier": "^3.0.3",
2827
"reading-time": "^1.5.0",
29-
"rehype-pretty-code": "^0.9.4",
30-
"sharp": "^0.31.3",
31-
"tailwindcss": "^3.2.6"
28+
"rehype-pretty-code": "^0.10.1",
29+
"sharp": "^0.32.6",
30+
"tailwindcss": "^3.3.3",
31+
"typescript": "^5.2.2"
3232
},
3333
"packageManager": "yarn@3.6.3"
3434
}

‎src/components/BlogListItem.astro

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2+
import { Image } from "astro:assets";
23
import { formatDate } from "../helpers/formatDate";
3-
import Picture from "./Picture.astro";
44
import PostTags from "./PostTags.astro";
55
66
const { post } = Astro.props;
@@ -18,13 +18,12 @@ if (description.length > maxLength) {
1818
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8 group">
1919
<a class="relative block" href={post.url} rel="prefetch">
2020
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] rounded shadow-lg">
21-
<Picture
22-
src={frontmatter.heroImage}
21+
<Image
22+
src={frontmatter.heroImageMetadata}
2323
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg group-hover:ring-4 group-hover:ring-sky-400 dark:group-hover:ring-sky-500 transition ease-in duration-300"
24-
widths={[400, 768]}
24+
alt={description}
2525
sizes="(max-width: 767px) 400px, 768px"
26-
alt={post.description}
27-
aspectRatio={1}
26+
2827
/>
2928
</div>
3029
</a>

‎src/components/HighlightedBlogs.astro

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2+
import { Image } from "astro:assets";
23
import { getPosts } from "../helpers/getPosts";
3-
import Picture from "./Picture.astro";
44
55
const posts = getPosts().slice(0, 4);
66
---
@@ -20,12 +20,10 @@ const posts = getPosts().slice(0, 4);
2020
posts.map((post) => (
2121
<article class="mb-6 transition">
2222
<a href={post.url} rel="prefetch" class="p-0 group flex-col">
23-
<Picture
24-
src={post.frontmatter.heroImage}
23+
<Image
24+
src={post.frontmatter.heroImageMetadata}
2525
class="object-cover w-full h-64 mb-6 rounded shadow-lg group-hover:ring-4 group-hover:ring-sky-400 dark:group-hover:ring-sky-500 transition ease-in duration-300"
26-
widths={[400]}
2726
alt={post.frontmatter.title}
28-
aspectRatio="16:9"
2927
/>
3028

3129
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading group-hover:text-sky-500 dark:group-hover:text-sky-400 transition ease-in duration-300">

‎src/components/Picture.astro

-41
This file was deleted.

‎src/env.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/// <reference types="@astrojs/image/client" />
1+
/// <reference types="astro/client" />

‎src/helpers/frontmatter.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { ImageMetadata } from "astro";
2+
13
export interface IPostFrontmatter {
24
layout: string;
35
title: string;
@@ -7,4 +9,5 @@ export interface IPostFrontmatter {
79
tags: string[];
810
readingTime: string;
911
file: string;
12+
heroImageMetadata: ImageMetadata;
1013
}

‎src/helpers/getPosts.ts

+16
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,22 @@ export function getPosts() {
1313
eager: true,
1414
});
1515

16+
const images = import.meta.glob("../assets/blog/**/*", {
17+
eager: true,
18+
});
19+
20+
Object.keys(postsMap).forEach((key) => {
21+
const post = postsMap[key];
22+
23+
if (!post) {
24+
return;
25+
}
26+
27+
const heroImageKey = post.frontmatter.heroImage;
28+
29+
post.frontmatter.heroImageMetadata = images[heroImageKey].default as ImageMetadata;
30+
});
31+
1632
const posts = Object.values(postsMap);
1733

1834
return posts.sort(sortPosts);

‎src/helpers/staticPathProps.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ export interface IPageProps {
77
next?: string;
88
};
99
data: TPost[];
10+
currentPage: number;
1011
};
1112
}

‎src/layouts/BlogPost.astro

+11-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import Picture from "../components/Picture.astro";
2+
import { Image } from "astro:assets";
33
import PostTags from "../components/PostTags.astro";
44
import { formatDate } from "../helpers/formatDate";
55
import type { IPostFrontmatter } from "../helpers/frontmatter";
@@ -11,7 +11,7 @@ interface Props {
1111
}
1212
1313
const {
14-
content: { title, description, pubDate, heroImage, url, readingTime, file, tags },
14+
content: { title, description, pubDate, heroImage, heroImageMetadata, url, readingTime, file, tags },
1515
} = Astro.props as Props;
1616
1717
const tweetLink = `https://twitter.com/intent/tweet?url=
@@ -51,13 +51,11 @@ const otherPosts = posts.slice(-3);
5151
<PostTags tags={tags} class="flex justify-center" />
5252
</header>
5353

54-
<Picture
55-
src={heroImage}
54+
<Image
55+
src={heroImageMetadata}
5656
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
57-
widths={[400, 900]}
5857
sizes="(max-width: 900px) 400px, 900px"
5958
alt="Blog Hero Image"
60-
aspectRatio="16:9"
6159
/>
6260

6361
<div
@@ -90,14 +88,13 @@ const otherPosts = posts.slice(-3);
9088
index === otherPosts.length - 1 ? "hidden" : ""
9189
}`}
9290
>
93-
<Picture
94-
src={post.frontmatter.heroImage}
95-
class="rounded-md bg-gray-400 dark:bg-slate-700 group-hover:ring-4 group-hover:ring-sky-400 dark:group-hover:ring-sky-500 transition ease-in duration-300"
96-
widths={[200]}
97-
sizes="(max-width: 900px) 400px, 900px"
98-
alt="Next Blog Hero Image"
99-
aspectRatio="16:9"
100-
/>
91+
<div class="flex w-52 h-32 rounded-md overflow-hidden">
92+
<Image
93+
src={post.frontmatter.heroImageMetadata}
94+
class="object-fill rounded-md bg-gray-400 dark:bg-slate-700 group-hover:ring-4 group-hover:ring-sky-400 dark:group-hover:ring-sky-500 transition ease-in duration-300"
95+
alt="Next Blog Hero Image"
96+
/>
97+
</div>
10198
<span class="block mt-2">{post.frontmatter.title}</span>
10299
</a>
103100
))

‎src/pages/[...tags]/[tag]/[...page].astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
1313
1414
const tags = getTags(posts);
1515
16-
return tags.map((tag) => {
16+
return tags.flatMap((tag) => {
1717
return paginate(
1818
posts.filter((post) => post.frontmatter.tags.includes(tag)),
1919
{

‎src/pages/about.astro

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
import { Icon } from "astro-icon";
3-
4-
import Picture from "../components/Picture.astro";
3+
import { Image } from 'astro:assets'
54
import Technologies from "../components/Technologies.astro";
65
import IconLoading from "../components/icons/IconLoading.astro";
76
import PageLayout from "../layouts/PageLayout.astro";
7+
import myImage from "../assets/main/me.webp"
88
99
const canonical = new URL(`about`, Astro.site);
1010
@@ -86,13 +86,11 @@ const steps = [
8686
}
8787
</div>
8888
<div class="relative hidden md:block">
89-
<Picture
89+
<Image
9090
alt="My Portrait"
91-
src="./src/assets/main/me.webp"
91+
src={myImage}
9292
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full dark:brightness-75"
93-
widths={[400, 768]}
9493
sizes="(max-width: 768px) 100vw, 432px"
95-
aspectRatio="500:644"
9694
/>
9795
</div>
9896
</div>

‎src/pages/blog/comparing-performance-between-old-new-sites.mdx

+5-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: "../../layouts/BlogPost.astro"
33
title: "Comparing Performance Between Old & New Sites"
44
description: "Taking a closer look at the performance between the two sites. The result may or may not shock you, but probably won't."
55
pubDate: "2022-09-05"
6-
heroImage: "./src/assets/blog/comparing-performance-between-old-new-sites/hero-image.webp"
6+
heroImage: "../assets/blog/comparing-performance-between-old-new-sites/hero-image.webp"
77
tags: ["astro", "web-performance"]
88
---
99

@@ -51,13 +51,12 @@ AstroJS is a huge part of the performance gain, but also reworking/optimizing th
5151

5252
In any case, the numbers are just:
5353

54-
import Picture from "../../components/Picture.astro";
54+
import { Image } from "astro:assets";
55+
import wowImage from "../../assets/blog/comparing-performance-between-old-new-sites/wow.webp";
5556

56-
<Picture
57-
src="./src/assets/blog/comparing-performance-between-old-new-sites/wow.webp"
57+
<Image
58+
src={wowImage}
5859
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
59-
widths={[400, 720]}
6060
sizes="(max-width: 720px) 400px, 720px"
6161
alt="wow!"
62-
aspectRatio="16:9"
6362
/>

‎src/pages/blog/first-post-on-my-new-blog.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: "../../layouts/BlogPost.astro"
33
title: "First Post on My New Blog"
44
description: "How did I like using Astro to rebuild my personal site?"
55
pubDate: "2022-08-30"
6-
heroImage: "./src/assets/blog/first-post-on-my-new-blog/hero-image.webp"
6+
heroImage: "../assets/blog/first-post-on-my-new-blog/hero-image.webp"
77
tags: ["astro", "web-performance"]
88
---
99

‎src/pages/blog/how-i-structure-my-terraform-code.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: "../../layouts/BlogPost.astro"
33
title: "How I Structure My Terraform Code"
44
description: "Infrastructure as code is awesome! Here's how I utilize it"
55
pubDate: "2022-09-27"
6-
heroImage: "./src/assets/blog/how-i-structure-my-terraform-code/hero-image.jpg"
6+
heroImage: "../assets/blog/how-i-structure-my-terraform-code/hero-image.jpg"
77
tags: ["technologies", "infrastructure"]
88
---
99

‎src/pages/blog/picking-technologies-for-your-personal-projects.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: "../../layouts/BlogPost.astro"
33
title: "How to pick technologies for your personal projects?"
44
description: "My take on how to pick what to use for your personal projects"
55
pubDate: "2022-09-14"
6-
heroImage: "./src/assets/blog/picking-technologies-for-your-personal-projects/hero-image.png"
6+
heroImage: "../assets/blog/picking-technologies-for-your-personal-projects/hero-image.png"
77
tags: ["technologies"]
88
---
99

0 commit comments

Comments
 (0)