graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apply formatting rules

Browse Source
This commit is contained in:
Graham Hall
2025-11-05 09:45:08 -05:00
parent a1ea385448
commit 6b86b0adb2
24 changed files with 679 additions and 5080 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/404.astro
+15 -16
View File
@@ -1,5 +1,4 @@
---
import { Image } from "astro:assets";
import Layout from "@layouts/Layout.astro";
@@ -7,23 +6,23 @@ import DataGif from "../assets/it-does-not-exist.gif";
---
<Layout title="Not Found">
<h2>404 - Page Not Found</h2>
<Image
class="gif"
src={DataGif}
alt="Data from Star Trek with the caption 'It does not exist'"
/>
<h2>404 - Page Not Found</h2>
<Image
class="gif"
src={DataGif}
alt="Data from Star Trek with the caption 'It does not exist'"
/>
</Layout>
<style>
h2 {
text-align: center;
}
h2 {
text-align: center;
}
.gif {
display: block;
margin: auto;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.gif {
display: block;
margin: auto;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
</style>
src/pages/blog/[...slug].astro
+27 -29
View File
@@ -1,16 +1,15 @@
---
import { getCollection, render } from "astro:content";
import BlogHeader from "@components/BlogHeader.astro";
import Tags from "@components/Tags.astro";
import Layout from "@layouts/Layout.astro";
export async function getStaticPaths() {
const posts = await getCollection("blog");
return posts.map((post) => ({
params: { slug: post.id },
props: { post },
}));
const posts = await getCollection("blog");
return posts.map((post) => ({
params: { slug: post.id },
props: { post },
}));
}
const { post } = Astro.props;
@@ -21,31 +20,30 @@ const { Content } = await render(post);
---
<Layout title={data.title}>
<h1></h1>
<article>
<BlogHeader title={data.title} date={data.pubDate} />
<Content />
<a href="https://notbyai.fyi/">
<i class="not-by-ai"></i>
</a>
<Tags tags={data.tags} />
</article>
<article>
<BlogHeader title={data.title} date={data.pubDate} />
<Content />
<a href="https://notbyai.fyi/">
<i class="not-by-ai"></i>
</a>
<Tags tags={data.tags} />
</article>
</Layout>
<style>
.not-by-ai {
display: block;
width: 134px;
height: 45px;
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-white.svg);
background-repeat: no-repeat;
background-position: center;
margin: 1rem 0;
}
.not-by-ai {
display: block;
width: 134px;
height: 45px;
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-white.svg);
background-repeat: no-repeat;
background-position: center;
margin: 1rem 0;
}
@media (prefers-color-scheme: dark) {
.not-by-ai {
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-black.svg);
}
}
@media (prefers-color-scheme: dark) {
.not-by-ai {
background-image: url(../../assets/svg/Written-By-Human-Not-By-AI-Badge-black.svg);
}
}
</style>
src/pages/blog/page/[page].astro
+42 -43
View File
@@ -1,65 +1,64 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
import PostPreview from "@components/PostPreview.astro";
import { type CollectionEntry, getCollection } from 'astro:content';
import PostPreview from '@components/PostPreview.astro';
import Layout from '@layouts/Layout.astro';
import type { Page } from 'astro';
import Layout from "@layouts/Layout.astro";
import type { Page } from "astro";
export async function getStaticPaths({ paginate }) {
const allPosts = await getCollection('blog');
const allPosts = await getCollection("blog");
allPosts.sort(
(a, b) =>
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
);
allPosts.sort(
(a, b) =>
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate)),
);
return paginate(allPosts, { pageSize: 10 });
return paginate(allPosts, { pageSize: 10 });
}
interface Props {
page: Page<CollectionEntry<'blog'>>;
page: Page<CollectionEntry<"blog">>;
}
const { page } = Astro.props;
---
<Layout title="Blog Archive">
{page.data.map((post) => <PostPreview post={post} />)}
{page.data.map((post) => <PostPreview post={post} />)}
<div class="pagination">
{
page.currentPage !== 1 ? (
<a href={`/blog/page/${page.currentPage - 1}`}>Previous</a>
) : (
<span class="disabled">Previous</span>
)
}
{
page.currentPage !== page.lastPage ? (
<a href={`/blog/page/${page.currentPage + 1}`}>Next</a>
) : (
<span class="disabled">Next</span>
)
}
</div>
<div class="pagination">
{
page.currentPage !== 1 ? (
<a href={`/blog/page/${page.currentPage - 1}`}>Previous</a>
) : (
<span class="disabled">Previous</span>
)
}
{
page.currentPage !== page.lastPage ? (
<a href={`/blog/page/${page.currentPage + 1}`}>Next</a>
) : (
<span class="disabled">Next</span>
)
}
</div>
</Layout>
<style>
ul {
list-style: none;
}
ul {
list-style: none;
}
.pagination {
display: flex;
justify-content: center;
margin: auto;
margin-top: 2rem;
gap: 1rem;
}
.pagination {
display: flex;
justify-content: center;
margin: auto;
margin-top: 2rem;
gap: 1rem;
}
.disabled {
color: var(--text);
opacity: 0.5;
}
.disabled {
color: var(--text);
opacity: 0.5;
}
</style>
src/pages/blog/tag/[tag].astro
+46 -47
View File
@@ -1,73 +1,72 @@
---
import { getCollection } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import { add, format } from 'date-fns';
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import { add, format } from "date-fns";
export async function getStaticPaths() {
const posts = await getCollection('blog');
const posts = await getCollection("blog");
const tags = ['all'];
const tags = ["all"];
posts.forEach((post) => {
post.data.tags.forEach((tag) => {
if (!tags.includes(tag)) {
tags.push(tag);
}
});
});
posts.forEach((post) => {
post.data.tags.forEach((tag) => {
if (!tags.includes(tag)) {
tags.push(tag);
}
});
});
return tags.map((tag) => ({
params: { tag },
props: { tag },
}));
return tags.map((tag) => ({
params: { tag },
props: { tag },
}));
}
const { tag }: { tag?: string } = Astro.params;
const posts = await getCollection('blog', ({ data }) => {
if (!tag) {
return false;
}
const posts = await getCollection("blog", ({ data }) => {
if (!tag) {
return false;
}
if (tag === 'all') {
return true;
}
if (tag === "all") {
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(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
(a, b) =>
Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate)),
);
---
<Layout title={`Blog - ${tag}`}>
<h1>All posts tagged: {tag}</h1>
<ul>
{
posts.map((post) => (
<li>
<a href={`/posts/${post.id}`}>{post.data.title}</a> -
<span>
{format(
add(new Date(post.data.pubDate), { hours: 6 }),
'MMM do, y'
)}
</span>
</li>
))
}
</ul>
<h1>All posts tagged: {tag}</h1>
<ul>
{
posts.map((post) => (
<li>
<a href={`/posts/${post.id}`}>{post.data.title}</a> -
<span>
{format(
add(new Date(post.data.pubDate), { hours: 6 }),
"MMM do, y",
)}
</span>
</li>
))
}
</ul>
</Layout>
<style>
ul {
list-style: none;
}
ul {
list-style: none;
}
</style>
src/pages/index.astro
+53 -54
View File
@@ -1,5 +1,4 @@
---
export const prerender = true;
import { getCollection } from "astro:content";
@@ -13,64 +12,64 @@ const iconSize = 16;
const posts = await getCollection("blog");
const latestPost = posts.sort(
(a, b) =>
new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf(),
(a, b) =>
new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf(),
)[0];
---
<Layout title="Welcome">
<Avatar size={200} />
<p>
My name is <strong>Graham</strong> (he/him), a full-stack web developer, and
tech enthusiast.
</p>
<p>
When I'm not writing code, I'm usually enjoying one of my other hobbies;
video games, board games, music, photography, art, the list goes on...
</p>
<p>
I also like writing about stuff, so I put together this site to share
whatever's on my mind about the world of tech, gaming, life, web
development, and whatever else strikes my fancy.
</p>
<p>
Read my latest blog post, <a href={`blog/${latestPost.id}`}
>{latestPost.data.title}</a
>, posted on {new Date(latestPost.data.pubDate).toLocaleDateString()}.
</p>
<p>
If your interested in checking out my web dev projects, check out <a
href="https://ghall.dev/"
target="_blank"
rel="noopener noreferrer">my portfolio</a
>.
</p>
<p>
If you want to get in touch, I'm on <a
rel="me"
href="https://mastodon.social/@ghalldev"
target="_blank"
rel="noopener noreferrer"
><MastodonIcon width={iconSize} height={iconSize} />Mastodon</a
> and <a
href="https://bsky.app/profile/ghalldev.bsky.social"
target="_blank"
rel="noopener noreferrer"
><BlueskyIcon width={iconSize} height={iconSize} />Bluesky</a
>.
</p>
<p>
My portrait was drawn by <a
href="https://www.nataliavazquezgarcia.com"
target="_blank"
rel="noopener noreferrer">Natalia Vazquez</a
>.
</p>
<LatestPost />
<Avatar size={200} />
<p>
My name is <strong>Graham</strong> (he/him), a full-stack web developer, and
tech enthusiast.
</p>
<p>
When I'm not writing code, I'm usually enjoying one of my other hobbies;
video games, board games, music, photography, art, the list goes on...
</p>
<p>
I also like writing about stuff, so I put together this site to share
whatever's on my mind about the world of tech, gaming, life, web
development, and whatever else strikes my fancy.
</p>
<p>
Read my latest blog post, <a href={`blog/${latestPost.id}`}
>{latestPost.data.title}</a
>, posted on {new Date(latestPost.data.pubDate).toLocaleDateString()}.
</p>
<p>
If your interested in checking out my web dev projects, check out <a
href="https://ghall.dev/"
target="_blank"
rel="noopener noreferrer">my portfolio</a
>.
</p>
<p>
If you want to get in touch, I'm on <a
rel="me"
href="https://mastodon.social/@ghalldev"
target="_blank"
rel="noopener noreferrer"
><MastodonIcon width={iconSize} height={iconSize} />Mastodon</a
> and <a
href="https://bsky.app/profile/ghalldev.bsky.social"
target="_blank"
rel="noopener noreferrer"
><BlueskyIcon width={iconSize} height={iconSize} />Bluesky</a
>.
</p>
<p>
My portrait was drawn by <a
href="https://www.nataliavazquezgarcia.com"
target="_blank"
rel="noopener noreferrer">Natalia Vazquez</a
>.
</p>
<LatestPost />
</Layout>
<style>
a > svg {
transform: translateY(0.1rem);
}
a > svg {
transform: translateY(0.1rem);
}
</style>
src/pages/projects.astro
+33 -34
View File
@@ -1,5 +1,4 @@
---
import Card from "@components/Card.astro";
import { projects } from "@data/projects";
import Layout from "@layouts/Layout.astro";
@@ -8,41 +7,41 @@ const title = "Projects";
---
<Layout title={title}>
<h1>{title}</h1>
<div class="projects-grid">
{
projects.map((project) => (
<Card
title={project.title}
image={project.image}
links={[
{
label: 'More...',
href: project.link,
newWindow: true,
},
]}
>
<div class="project-content">
<p>{project.description}</p>
</div>
</Card>
))
}
</div>
<h1>{title}</h1>
<div class="projects-grid">
{
projects.map((project) => (
<Card
title={project.title}
image={project.image}
links={[
{
label: "More...",
href: project.link,
newWindow: true,
},
]}
>
<div class="project-content">
<p>{project.description}</p>
</div>
</Card>
))
}
</div>
</Layout>
<style>
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.project-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 8rem;
}
.project-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 8rem;
}
</style>