redesign 🎨

astro.config.mjs

@@ -1,6 +1,4 @@
 import { defineConfig } from 'astro/config';
-import netlify from '@astrojs/netlify';
-import icon from 'astro-icon';
 
 // https://astro.build/config
 import mdx from '@astrojs/mdx';
@@ -9,11 +7,5 @@ import mdx from '@astrojs/mdx';
 export default defineConfig({
 	site: 'https://ghall.blog',
 	output: 'static',
-	adapter: netlify(),
+	integrations: [mdx()],
-	integrations: [
-		mdx(),
-		icon({
-			iconDir: 'src/styles/svg/icons',
-		}),
-	],
 });

package.json

@@ -13,31 +13,28 @@
   },
   "dependencies": {
     "@astrojs/mdx": "4.0.2",
-    "@astrojs/netlify": "6.0.0",
     "@astrojs/rss": "4.0.10",
     "@types/markdown-it": "^14.1.2",
-    "astro": "5.0.4",
+    "astro": "^5.1.8",
-    "astro-icon": "^1.1.4",
     "astro-pagefind": "^1.7.0",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
-    "date-fns-tz": "^1.3.8",
+    "markdown-it": "^14.1.0",
-    "markdown-it": "^13.0.2",
+    "pagefind": "^1.3.0",
-    "pagefind": "^1.2.0",
+    "sanitize-html": "^2.14.0",
-    "sanitize-html": "^2.13.1",
     "sharp": "^0.33.5"
   },
   "devDependencies": {
+    "@astrojs/ts-plugin": "^1.10.4",
     "bun-types": "latest",
-    "eslint": "^8.57.1",
+    "eslint": "^9.18.0",
-    "eslint-plugin-astro": "^0.31.4",
+    "eslint-plugin-astro": "^1.3.1",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
-    "inquirer": "^9.3.7",
+    "prettier": "^3.4.2",
-    "prettier": "^2.8.8",
+    "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-astro": "^0.7.2",
+    "typescript-eslint": "^8.21.0"
-    "typescript-eslint": "^7.18.0"
   },
   "module": "index.ts",
   "peerDependencies": {
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   }
 }

src/components/BlogHeader.astro

@@ -1,6 +1,5 @@
 ---
 import { format, add } from 'date-fns';
-import { Icon } from 'astro-icon/components';
 
 interface Props {
 	title: String;
@@ -15,28 +14,7 @@ const { title, date, slug } = Astro.props;
 	<h2>
 		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
 	</h2>
-	<div class="date">
+	<div>
-		<Icon size={24} class="calendar-icon" name="calendar" />
+		🗓️ <i>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</i>
-		<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
 	</div>
 </div>
-
-<style>
-	h2,
-	h2 a {
-		font-size: 1.6rem;
-		font-family: Oswald, sans-serif;
-		margin-bottom: 0.5rem;
-	}
-
-	.date {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
-
-	.date span {
-		font-family: Oswald, sans-serif;
-		font-size: 1.1rem;
-	}
-</style>

src/components/Footer.astro

@@ -1,17 +1,16 @@
 ---
 const year = new Date().getFullYear();
-
-interface Props {}
 ---
 
 <footer>
 	<p>
-		Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
+		Copyright {year}, Graham Hall
-			>Astro</a
+
-		>
+		<br />
+		Built with <a href="https://astro.build">Astro</a>
 	</p>
+
 	<p>
 		<a href="/rss.xml"> Subscribe with RSS</a>
 	</p>
-	<div id="wcb" class="carbonbadge"></div>
 </footer>

src/components/Header.astro

@@ -1,7 +1,4 @@
 ---
-import { Icon } from 'astro-icon/components';
-import type { NavLink } from 'src/types';
-
 const { pathname } = Astro.url;
 
 interface Props {}
@@ -22,94 +19,14 @@ const navLinks: NavLink[] = [
 <header>
 	<h1>ghall.blog</h1>
 	<nav>
-		<ul>
 		{
 			navLinks.map((link) => (
-					<li>
+				<li class={pathname === link.path ? 'selected' : null}>
-						<a
+					<a href={link.path}>
-							class={pathname === link.path ? 'active-nav' : null}
-							href={link.path}
-						>
-							<Icon size={26} name={link.icon} />
 						<span>{link.label}</span>
 					</a>
 				</li>
 			))
 		}
-		</ul>
 	</nav>
 </header>
-
-<style>
-	header {
-		margin: 0;
-		padding: 1.5rem 1rem;
-		max-width: 800px;
-		display: flex;
-		flex-direction: column;
-		margin: auto;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	h1 {
-		text-align: center;
-		font-size: 1.8rem;
-	}
-
-	.title {
-		text-decoration: none;
-	}
-
-	nav ul {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 1.5rem;
-		padding: 0;
-		margin: 0;
-	}
-
-	nav ul li {
-		height: 40px;
-		align-items: center;
-		margin: 0;
-	}
-
-	nav ul li a {
-		position: relative;
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-		text-decoration: none;
-	}
-
-	nav ul li a span {
-		font-size: 1.2rem;
-	}
-
-	nav ul li a::before {
-		content: '•';
-		font-size: 1.6rem;
-		position: absolute;
-		left: -12px;
-		color: var(--blue);
-		opacity: 0;
-	}
-
-	nav ul li a:hover {
-		text-decoration: none;
-	}
-
-	nav ul li a:hover::before {
-		opacity: 0.6;
-	}
-
-	.active-nav::before {
-		opacity: 1;
-	}
-
-	nav ul li::before {
-		content: '';
-	}
-</style>

src/components/PostPreview.astro

@@ -1,6 +1,4 @@
 ---
-import { Tag } from 'src/types';
-
 import BlogHeader from '@components/BlogHeader.astro';
 import Tags from '@components/Tags.astro';
 
@@ -8,7 +6,7 @@ interface Post {
 	data: {
 		title: string;
 		pubDate: Date;
-		tags: Tag[];
+		tags: string[];
 	};
 	slug: string;
 }
@@ -21,9 +19,9 @@ const { post } = Astro.props;
 const { data, slug } = post;
 ---
 
-<article class="post-preview">
+<section>
 	<div>
 		<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
 		<Tags tags={data.tags} />
 	</div>
-</article>
+</section>

src/components/Tags.astro

@@ -1,34 +1,17 @@
 ---
-import { Tag } from 'src/types';
-
 interface Props {
-	tags: Tag[];
+	tags: string[];
 }
 
 const { tags } = Astro.props;
 ---
 
-<div class="tag-container">
+<span>
 	{
-		tags.sort().map((tag: Tag) => (
+		tags.sort().map((tag: string, index: number) => (
 			<a class="tag" href={`/archive/${tag}`}>
-				#{tag}
+				{`${tag}${index < tags.length - 1 ? ', ' : ''}`}
 			</a>
 		))
 	}
-</div>
+</span>
-
-<style>
-	.tag-container {
-		margin: 10px 0;
-	}
-
-	.tag {
-		font-size: 1rem;
-		line-height: 2rem;
-	}
-
-	.tag:not(:last-child) {
-		margin-right: 6px;
-	}
-</style>

src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
 import '@styles/global.css';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 
 import Header from '@components/Header.astro';
 import Footer from '@components/Footer.astro';
@@ -15,33 +15,30 @@ export interface Props {
 const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" transition:animate="none">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
+		<meta name="robots" content="noindex" /><meta
-		<meta name="robots" content="noindex" />
-		<meta
 			name="description"
 			content="My personal blog about life, gaming, tech, and whatever else I feel like writing about."
-		/>
+		/><link
-
-		<link
 			rel="alternate"
 			type="application/rss+xml"
 			title="ghall.blog - RSS"
 			href={`${Astro.site}rss.xml`}
-		/>
+		/><title>{`ghall.blog - ${title}`}</title></head
-		<title>{`ghall.blog - ${title}`}</title>
+	>
-		<ViewTransitions />
+	<ClientRouter />
-	</head>
+	<body class="layout-simple">
-	<body class="container">
 		<Header />
 		<main>
 			<slot />
 		</main>
 		<Footer />
 	</body>
+
+
 </html>

src/pages/about.md

@@ -3,7 +3,7 @@ layout: ../layouts/About.astro
 title: About Me
 ---
 
-My name is **Graham**, a web developer from Rhode Island.
+My name is **Graham**, a full-stack web developer.
 
 When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, board games, music, hiking, photography, art, the list goes on...
 

src/pages/archive/[tag].astro

@@ -47,42 +47,16 @@ posts.sort(
 ---
 
 <Layout title="Blog Archive">
+	<ul>
 		{
 			posts.map(({ slug, data }) => (
-			<div class="archive-post">
+				<li>
-				<a href={`/posts/${slug}`}>{data.title}</a>
+					<a href={`/posts/${slug}`}>{data.title}</a> -
 					<span>
 						{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
 					</span>
-			</div>
+				</li>
 			))
 		}
+	</ul>
 </Layout>
-
-<style>
-	.archive-post {
-		display: flex;
-		justify-content: space-between;
-	}
-	.archive-post:not(:last-of-type) {
-		margin-bottom: 26px;
-	}
-	.archive-post a {
-		max-width: 400px;
-		font-weight: bold;
-	}
-
-	.navigation {
-		max-width: 400px;
-		margin: auto;
-		display: flex;
-		padding: 30px;
-		justify-content: space-between;
-	}
-
-	@media screen and (max-width: 800px) {
-		.archive-post {
-			flex-direction: column;
-		}
-	}
-</style>

src/pages/hello-computer.astro

@@ -16,7 +16,7 @@ import dictionary from '../dictionary.txt?raw';
 
 	function createParagraph() {
 		paragraph = document.createElement('p');
-		contentDiv.appendChild(paragraph);
+		contentDiv?.appendChild(paragraph);
 	}
 
 	createParagraph();
@@ -65,9 +65,3 @@ import dictionary from '../dictionary.txt?raw';
 		addRandomString();
 	}, 1);
 </script>
-
-<style>
-	ai-trap {
-		font-family: sans-serif;
-	}
-</style>

src/pages/index.astro

@@ -15,7 +15,7 @@ const posts = await getCollection('blog');
 					new Date(b.data.pubDate).valueOf() -
 					new Date(a.data.pubDate).valueOf()
 			)
-			.slice(0, 6)
+			.slice(0, 10)
 			.map((post) => <PostPreview post={post} />)
 	}
 	{
@@ -26,9 +26,3 @@ const posts = await getCollection('blog');
 		)
 	}
 </Layout>
-
-<style>
-	.more-posts {
-		text-align: center;
-	}
-</style>

src/pages/now.md

@@ -5,28 +5,30 @@ title: Now
 
 Hey there, this is my [/now page](https://nownownow.com/about)!
 
-_Last updated: November 21, 2024_
+_Last updated: January 21, 2025_
 
 ## 🔨 Making
 
 - This blog!
+- [AutoDock](https://github.com/ghall89/AutoDock) - A Mac menubar utility that automatically hides and shows your dock based on the size of your connected display.
 - [KeyStash](https://github.com/ghall89/KeyStash) - A native Mac app for managing registration codes for your apps, modelled on the feature from 1Password.
 
 ## 🎧 Listening
 
-- [Paramore](https://music.apple.com/us/artist/paramore/75950796)
+- [Dragon Age: The Veilguard - Original Soundtrack](https://music.apple.com/us/album/dragon-age-the-veilguard-original-soundtrack/1772114262)
-- [Metric](https://music.apple.com/us/artist/metric/4125821)
+- [Middle-Earth & Chill](https://music.apple.com/us/album/middle-earth-chill/1774281510)
-- [They Might Be Giants](https://music.apple.com/us/artist/they-might-be-giants/149020)
+- [This Is Why - Paramore](https://music.apple.com/us/album/this-is-why/1646945378)
 
 ## 🎮 Playing
 
-- [Dragon Age: The Veilguard](https://www.igdb.com/games/dragon-age-the-veilguard)
+- [Unicorn Overlord](https://www.igdb.com/games/unicorn-overlord--1)
-- [Paper Mario: The Thousand Year Door](https://www.igdb.com/games/paper-mario-the-thousand-year-door--1)
+- [Horizon Zero Dawn: Remastered](https://www.igdb.com/games/horizon-zero-dawn-remastered)
 - [Fortnite](https://www.igdb.com/games/fortnite)
 
 ## 📺 Watching
 
-- [Taskmaster](https://www.themoviedb.org/tv/63404-taskmaster)
+- [Foundation](https://www.themoviedb.org/tv/93740-foundation?language=en-US)
+- [Make Some Noise](https://www.themoviedb.org/tv/204031-make-some-noise?language=en-US)
 
 ## 💻 Using
 

src/pages/posts/[...slug].astro

@@ -30,21 +30,3 @@ const { Content } = await post.render();
 	</a>
 	<Tags tags={data.tags} />
 </Layout>
-
-<style is:global>
-	article img {
-		border-radius: var(--radius);
-		box-shadow: var(--shadow);
-		display: block;
-		margin: auto;
-	}
-	.no-shadow {
-		box-shadow: none;
-	}
-	.footnotes {
-		font-size: 0.8rem;
-	}
-	.footnotes p {
-		display: inline;
-	}
-</style>

src/styles/global.css

@@ -1,12 +1,14 @@
 @font-face {
-	font-family: CrimsonText;
+	font-family: Manrope;
-	src: url(./fonts/Poppins-Regular.ttf) format('truetype');
+	src: url(./fonts/Manrope-Regular.ttf) format('truetype');
+	font-weight: normal;
 	font-style: normal;
 }
 
 @font-face {
-	font-family: Oswald;
+	font-family: Manrope;
-	src: url(./fonts/Oswald-VariableFont_wght.ttf) format('truetype');
+	src: url(./fonts/Manrope-Bold.ttf) format('truetype');
+	font-weight: bold;
 	font-style: normal;
 }
 
@@ -18,276 +20,134 @@
 }
 
 :root {
-	--blue: #3274ce;
+	--blue: #1e66f5;
-	--red: #ce3446;
+	--red: #d20f39;
-	--orange: #e56045;
+	--orange: #fe640b;
-	--text: #444444;
+	--text: #4c4f69;
 	--background: white;
 	--radius: 5px;
 	--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-	--border: 1px solid #7f7f7f;
+	--border: 1px solid #8c8fa1;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--blue: #5996e9;
+		--blue: #89b4fa;
-		--red: #e75969;
+		--red: #f38ba8;
-		--orange: #e87c66;
+		--orange: #fab387;
-		--text: white;
+		--text: #cdd6f4;
-		--background: color(display-p3 0.141 0.149 0.216);
+		--background: #1e1e2e;
-		--border: 1px solid rgb(102, 102, 102);
+		--border: 1px solid rgb(131, 139, 167);
 	}
 }
 
-* {
-	font-family: 'CrimsonText', sans-serif;
-	font-size: 1rem;
-	color: var(--text);
-	letter-spacing: 0.03rem;
-}
-
 html {
-	color-scheme: dark light;
+	color: var(--text);
+	background-color: var(--background);
+	font-family: 'Manrope', sans-serif;
+	font-size: 1.05rem;
 }
 
 body {
-	background-color: var(--background);
-	margin: 0;
-}
-
-main {
-	padding: 1rem 3rem;
 	max-width: 800px;
 	margin: auto;
 }
 
-footer {
-	text-align: center;
-	padding: 3rem;
-}
-
-/* Typography */
-
-h1,
-h2,
-h3,
-h4 {
-	font-family: Oswald, sans-serif;
-	font-weight: 400;
-}
-
-h1 {
-	font-size: 2rem;
-}
-
-h2 {
-	font-size: 1.6rem;
-}
-
-h3 {
-	font-size: 1.4rem;
-}
-
-h4 {
-	font-size: 1.2rem;
-}
-
-p {
-	line-height: 1.8rem;
-}
-
-blockquote {
-	border-left: 3px solid;
-	border-color: var(--text);
-	margin-left: 0;
-	padding-left: 2rem;
-}
-
-hr {
-	border-top: 1px solid var(--border);
-	margin: 2rem 0;
-}
-
-kbd {
-	padding: 2px 8px;
-	font-size: 0.8rem;
-	font-family: sans-serif;
-	border: var(--border);
-	border-radius: var(--radius);
-	background: var(--flat-bg);
-	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
-		rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
-}
-
-sup > a {
-	font-size: 0.8rem;
-}
-
-/* Links */
-
 a {
 	color: var(--blue);
 	text-decoration: none;
 }
 
 a:hover {
-	text-decoration: underline;
+	opacity: 0.75;
-	filter: saturate(120%);
 }
 
-pre code,
+header {
-code {
+	display: flex;
-	color: var(--orange);
+	flex-direction: row;
-	font-family: 'JetBrainsMono', monospace;
+	justify-content: space-between;
-	font-size: 0.9rem;
+	align-items: center;
-	padding: 2px 4px;
-	border-radius: var(--radius);
-	background: rgba(155, 155, 155, 0.2);
 }
 
-/* List Styles */
+header > nav {
-
+	display: flex;
-ul,
+	flex-direction: row;
-ol {
 	list-style: none;
+	gap: 20px;
+	font-size: 1.15rem;
 }
 
-ol li {
+header > nav > li > a:hover {
-	counter-increment: li;
-}
-
-ul li::before {
-	content: '‣';
-	color: var(--orange);
-	display: inline-block;
-	width: 1em;
-	margin-left: -1em;
-}
-
-ol li::before {
-	content: '.' counter(li);
-	color: var(--orange);
-	display: inline-block;
-	width: 1em;
-	margin-left: -1.5em;
-	margin-right: 0.5em;
-	text-align: right;
-	direction: rtl;
-}
-
-li {
-	margin: 0.5rem 0;
-}
-
-/* Input Styles */
-button,
-.link-button {
-	background-color: gray;
-	color: white;
-	font-size: 1rem;
-	padding: 0.6rem 1.2rem;
-	outline: none;
-	border: none;
-	border-radius: 5px;
-	transition: filter 0.15s;
 	text-decoration: none;
 }
 
-button:hover,
+header > nav > li > .selected {
-.link-button:hover {
+	border-bottom: 1px solid #e56045;
-	text-decoration: none;
-	filter: saturate(120%);
 }
 
-button:active,
+footer {
-.link-button:active {
+	border-top: var(--border);
-	opacity: 0.9;
+	margin-top: 2rem;
-	scale: 0.98;
 }
 
-select {
+article img {
-	font-size: 0.9rem;
-	background: var(--background);
-}
-
-/* .select-container {
-  position: relative;
-  width: max-content;
 	border-radius: var(--radius);
 	box-shadow: var(--shadow);
-  overflow: hidden;
+	display: block;
+	margin: auto;
 }
 
-.select-container::before {
+.no-shadow {
-  position: absolute;
+	box-shadow: none;
-  content: "▾";
+}
-  top: 0px;
+.footnotes {
-  right: 0px;
-  height: 10px;
-  width: 10px;
-  color: white;
 	font-size: 1rem;
-  height: 100%;
+}
-  width: 30px;
+.footnotes p {
-  background-color: var(--blue);
+	display: inline;
+}
+
+.blog-header {
+	margin: 1rem 0;
+}
+
+.blog-header > h2 {
+	margin: 0;
+}
+
+.more-posts {
 	text-align: center;
-} */
+	padding: 1rem;
-
+	font-size: 1.2rem;
-/* Text Inputs */
-
-input,
-textarea {
-	appearance: none;
-	outline: none;
-	background-color: #e6e6e6;
-	color: --text;
-	border: 2px solid #dadada;
-	font-size: 1rem;
-	padding: 0.6rem;
-	border-radius: 5px;
-	transition: background 0.15s;
 }
 
-input:hover,
+blockquote {
-textarea:hover {
+	border-left: 4px solid;
-	background-color: #eaeaea;
+	border-color: var(--text);
+	margin-left: 1rem;
+	padding-left: 2rem;
+	font-style: italic;
 }
 
-input:focus,
+code {
-textarea:focus {
+	color: var(--orange);
-	background-color: #eaeaea;
+	border: var(--border);
-	box-shadow: 0px 0px 2px 1px var(--blue);
+	border-radius: var(--radius);
+	padding: 1px 4px;
+	margin: 0 2px;
+	user-select: all;
 }
 
-dialog {
+kbd {
-	border: none;
+	border: var(--border);
-	border-radius: 5px;
+	border-radius: var(--radius);
-	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+	padding: 1px 4px;
-	padding: 1.4rem;
-	text-align: center;
-	max-width: 900px;
 }
 
-/* Classes */
+code,
-
+kbd {
-.width-full {
+	font-size: 0.85rem;
-	width: 100%;
+	white-space: nowrap;
-}
-
-.blue-btn {
-	background-color: var(--blue);
-}
-
-.red-btn {
-	background-color: var(--red);
-}
-
-.post-preview {
-	padding: 0.1rem 0rem 1rem;
-}
-
-svg {
-	color: var(--text);
 }
 
 /* Not By AI badge */
@@ -299,7 +159,7 @@ svg {
 	background-image: url(svg/Written-By-Human-Not-By-AI-Badge-white.svg);
 	background-repeat: no-repeat;
 	background-position: center;
-	/* border: 1px solid red; */
+	margin: 1rem 0;
 }
 
 @media (prefers-color-scheme: dark) {

src/styles/svg/icons/calendar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4h-.8c-1.12 0-1.68 0-2.108.218a1.999 1.999 0 0 0-.874.874C4 5.52 4 6.08 4 7.2V8m4-4h8M8 4V2m8 2h.8c1.12 0 1.68 0 2.107.218c.377.192.683.497.875.874c.218.427.218.987.218 2.105V8m-4-4V2M4 8v8.8c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h9.606c1.118 0 1.677 0 2.104-.218c.377-.192.683-.498.875-.874c.218-.428.218-.986.218-2.104V8M4 8h16m-4 8h.002v.002H16zm-4 0h.002v.002H12zm-4 0h.002v.002H8zm8.002-4v.002H16V12zM12 12h.002v.002H12zm-4 0h.002v.002H8z"/></svg>

src/styles/svg/icons/clock.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5h5m-5 9a9 9 0 1 1 0-18a9 9 0 0 1 0 18"/></svg>

src/styles/svg/icons/pen.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h16M4 20v-4l8-8M4 20h4l8-8m-4-4l2.869-2.869l.001-.001c.395-.395.593-.593.821-.667a1 1 0 0 1 .618 0c.228.074.425.272.82.666l1.74 1.74c.396.396.594.594.668.822a1 1 0 0 1 0 .618c-.074.228-.272.426-.668.822h0L16 12.001m-4-4l4 4"/></svg>

src/styles/svg/icons/person.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21a7 7 0 1 0-14 0m7-10a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/></svg>

tsconfig.json

@@ -8,6 +8,7 @@
 			"@layouts/*": ["src/layouts/*"],
 			"@styles/*": ["src/styles/*"],
 			"@images/*": ["src/images/*"]
-		}
+		},
+		"plugins": [{ "name": "@astrojs/ts-plugin" }]
 	}
 }