redesign draft 1

src/pages/about.md

@@ -11,6 +11,6 @@ I also like writing about stuff, so I put together this site to share whatever's
 
 If your interested in checking out my web dev projects, check out [my portfolio](https://ghall.dev/).
 
-If you want to get in touch, I'm on <a rel="me" href="https://home.social/@ghalldev">Mastodon</a>.
+If you want to get in touch, I'm on <a rel="me" href="https://mastodon.social/@ghalldev">Mastodon</a>.
 
 My portrait was drawn by [Natalia Vazquez](https://www.nataliavazquezgarcia.com).

src/pages/archive/[tag].astro

@@ -1,33 +1,37 @@
 ---
-import { getCollection } from 'astro:content'
+import { getCollection } from 'astro:content';
 
-import Layout from '@layouts/Layout.astro'
-import FormattedDate from '@components/FormattedDate.astro'
+import Layout from '@layouts/Layout.astro';
+import FormattedDate from '@components/FormattedDate.astro';
 
-const { tag } = Astro.params
+const { tag } = Astro.params;
 
-const page = Number.parseInt(Astro.url.searchParams.get('page'))
-const prevPage = page - 1
-const nextPage = page + 1
+const page = Number.parseInt(Astro.url.searchParams.get('page'));
+const prevPage = page - 1;
+const nextPage = page + 1;
 
 const posts = await getCollection('blog', ({ data }) => {
 	if (tag === 'all') {
-		return true
+		return true;
 	}
-	return data.tags.includes(tag)
-})
+	return data.tags.includes(tag);
+});
 
 if (posts.length === 0) {
-	return Astro.redirect('/404')
+	return Astro.redirect('/404');
 }
 
-posts.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
-const totalPosts = posts.length
+posts.sort(
+	(a, b) =>
+		Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
+);
 
-const start = (page - 1) * 10
-const end = page * 10
+const totalPosts = posts.length;
 
-const displayPosts = posts.slice(start, end)
+const start = (page - 1) * 10;
+const end = page * 10;
+
+const displayPosts = posts.slice(start, end);
 ---
 
 <Layout title="Blog Archive">
@@ -41,22 +45,10 @@ const displayPosts = posts.slice(start, end)
 	}
 	<div class="navigation">
 		<div>
-			{
-				page === 1 ? null : (
-					<a class="link-button blue-btn" href={`?page=${prevPage}`}>
-						← Previous
-					</a>
-				)
-			}
+			{page === 1 ? null : <a href={`?page=${prevPage}`}>← Previous</a>}
 		</div>
 		<div>
-			{
-				end >= totalPosts ? null : (
-					<a class="link-button blue-btn" href={`?page=${nextPage}`}>
-						Next →
-					</a>
-				)
-			}
+			{end >= totalPosts ? null : <a href={`?page=${nextPage}`}>Next →</a>}
 		</div>
 	</div>
 </Layout>

src/pages/index.astro

@@ -1,11 +1,11 @@
 ---
-export const prerender = true
-import { getCollection } from 'astro:content'
+export const prerender = true;
+import { getCollection } from 'astro:content';
 
-import Layout from '@layouts/Layout.astro'
-import PostPreview from '@components/PostPreview.astro'
+import Layout from '@layouts/Layout.astro';
+import PostPreview from '@components/PostPreview.astro';
 
-const posts = await getCollection('blog')
+const posts = await getCollection('blog');
 ---
 
 <Layout title="Home">
@@ -18,9 +18,7 @@ const posts = await getCollection('blog')
 	{
 		posts.length < 5 ? null : (
 			<div class="more-posts">
-				<a class="link-button blue-btn" href="/archive/all?page=1">
-					All Posts
-				</a>
+				<a href="/archive/all?page=1">All Posts</a>
 			</div>
 		)
 	}

src/pages/posts/[slug].astro

@@ -1,24 +1,24 @@
 ---
-export const prerender = true
-import { getCollection } from 'astro:content'
+export const prerender = true;
+import { getCollection } from 'astro:content';
 
-import Layout from '@layouts/Layout.astro'
-import BlogHeader from '@components/BlogHeader.astro'
-import Tags from '@components/Tags.astro'
+import Layout from '@layouts/Layout.astro';
+import BlogHeader from '@components/BlogHeader.astro';
+import Tags from '@components/Tags.astro';
 
 export async function getStaticPaths() {
-	const posts = await getCollection('blog')
+	const posts = await getCollection('blog');
 	return posts.map((post) => ({
 		params: { slug: post.slug },
 		props: { post },
-	}))
+	}));
 }
 
-const { post } = Astro.props
+const { post } = Astro.props;
 
-const { data } = post
+const { data } = post;
 
-const { Content } = await post.render()
+const { Content } = await post.render();
 ---
 
 <Layout title={data.title}>
@@ -39,11 +39,10 @@ const { Content } = await post.render()
 	.no-shadow {
 		box-shadow: none;
 	}
-	.footnotes li {
+	.footnotes {
 		font-size: 0.8rem;
 	}
 	.footnotes p {
-		font-size: 0.8rem;
 		display: inline;
 	}
 </style>

src/pages/rss.xml.js

@@ -1,11 +1,11 @@
-import rss from '@astrojs/rss'
-import { getCollection } from 'astro:content'
-import sanitizeHtml from 'sanitize-html'
-import MarkdownIt from 'markdown-it'
-const parser = new MarkdownIt({ html: true })
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import sanitizeHtml from 'sanitize-html';
+import MarkdownIt from 'markdown-it';
+const parser = new MarkdownIt({ html: true });
 
 export async function get(context) {
-	const blog = await getCollection('blog')
+	const blog = await getCollection('blog');
 	return rss({
 		title: 'ghall.blog',
 		description:
@@ -19,5 +19,5 @@ export async function get(context) {
 				link: `/posts/${post.slug}/`,
 				content: sanitizeHtml(parser.render(post.body)),
 			})),
-	})
+	});
 }