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

view transition draft

Browse Source
This commit is contained in:
Graham Hall
2025-02-12 10:11:23 -05:00
parent 1da3d2bc34
commit 85a04c276c
18 changed files with 137 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Avatar.astro
+30
View File
@@ -0,0 +1,30 @@
---
import { Image } from 'astro:assets';
import portrait from '../img/portrait.jpg';
interface Props {
size: number;
}
const { size } = Astro.props;
---
<Image
src={portrait}
alt="Illustrated portrait of a person with glasses and a beard, wearing a red and black plaid shirt. The background is a solid green color."
class="portrait"
width={`${size}`}
height={`${size}`}
/>
<style>
.portrait {
display: block;
margin: auto;
border-radius: 200px;
}
a > svg {
transform: translateY(0.18rem);
}
</style>
src/components/BlogHeader.astro
+2 -2
View File
@@ -4,9 +4,9 @@ import { format, add } from 'date-fns';
import CalendarIcon from '../img/svg/calendar.svg';
interface Props {
title: String;
title: string;
date: Date;
slug?: String;
slug?: string;
}
const { title, date, slug } = Astro.props;
src/components/Header.astro
+26 -9
View File
@@ -1,37 +1,54 @@
---
import Avatar from './Avatar.astro';
const { pathname } = Astro.url;
interface Props {}
interface NavLink {
label: string;
icon: string;
path: string;
}
const navLinks: NavLink[] = [
{ label: 'Home', icon: 'person', path: '' },
{ label: 'Blog', icon: 'pen', path: 'blog' },
{ label: 'Now', icon: 'clock', path: 'now' },
{ label: 'Blog', path: 'blog' },
{ label: 'Now', path: 'now' },
{ label: 'Projects', path: 'projects' },
];
const pathComponents = pathname.split('/').slice(1);
---
<header>
<h1>ghall.blog</h1>
<div>
{
pathComponents[0] !== '' ? (
<a href="/" transition:name="my-avatar">
<Avatar size={60} />
</a>
) : null
}
</div>
<nav>
{
navLinks.map((link) => (
<li>
<a
href={`/${link.path}`}
class={pathComponents[0] === link.path ? 'selected' : null}
>
<a href={`/${link.path}`}>
<span>{link.label}</span>
</a>
{pathComponents[0] === link.path ? (
<div class="underline" transition:name="menu-selection-indicator" />
) : null}
</li>
))
}
</nav>
</header>
<style>
.underline {
height: 2px;
width: 100%;
background-color: var(--orange);
}
</style>
src/components/LatestPost.astro
+2 -2
View File
@@ -9,10 +9,11 @@
)
.then((data) => {
const item = data.querySelector('item');
console.log(item)
this.latestPost = {
link: item.querySelector('link').textContent,
body: item.querySelector('description').textContent,
pubDate: item.querySelector('pubDate').textContent,
};
})
.catch((error) => {
@@ -27,7 +28,6 @@
<h2>Latest Mastodon Post</h2>
<p x-html="latestPost.body"></p>
<a x-bind:href="latestPost.link" target="_blank">View Post</a>
<small x-text="latestPost.pubDate"></small>
</div>
</template>
<template x-if="!latestPost">
src/components/PostPreview.astro
+3 -5
View File
@@ -19,9 +19,7 @@ const { post } = Astro.props;
const { data, slug } = post;
---
<article>
<div>
<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
<Tags tags={data.tags} />
</div>
<article transition:name={slug}>
<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
<Tags tags={data.tags} />
</article>
src/img/it-does-not-exist.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

src/img/svg/arrow-left.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 386 B

src/layouts/Layout.astro
+5 -7
View File
@@ -16,7 +16,7 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
---
<!doctype html>
<html lang="en" transition:animate="none">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
@@ -29,16 +29,14 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
type="application/rss+xml"
title="ghall.blog - RSS"
href={`${Astro.site}rss.xml`}
/><title>{`ghall.blog - ${title}`}</title></head
>
<ClientRouter />
<body class="layout-simple">
/><title>{`ghall.blog - ${title}`}</title>
<ClientRouter />
</head>
<body class="layout-simple" transition:animate="initial">
<Header />
<main>
<slot />
</main>
<Footer />
</body>
</html>
src/pages/404.astro
+28
View File
@@ -0,0 +1,28 @@
---
import Layout from '@layouts/Layout.astro';
import { Image } from 'astro:assets';
import DataGif from '../img/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'"
/>
</Layout>
<style>
h2 {
text-align: center;
}
.gif {
display: block;
margin: auto;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
</style>
src/pages/404.md
-10
View File
@@ -1,10 +0,0 @@
---
layout: ../layouts/Layout.astro
title: Page Not Found
---
## 404 - Page not found!
You're trying to find a page that does not exist.
[Click here](/) to find your way home.
src/pages/blog/[...slug].astro
+7 -7
View File
@@ -15,18 +15,18 @@ export async function getStaticPaths() {
const { post } = Astro.props;
const { data } = post;
const { data, slug } = post;
const { Content } = await post.render();
---
<Layout title={data.title}>
<BlogHeader title={data.title} date={data.pubDate} />
<article>
<article transition:name={slug}>
<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>
<a href="https://notbyai.fyi/">
<i class="not-by-ai"></i>
</a>
<Tags tags={data.tags} />
</Layout>
src/pages/blog/archive/[tag].astro
+7 -1
View File
@@ -50,7 +50,7 @@ posts.sort(
<ul>
{
posts.map(({ slug, data }) => (
<li>
<li transition:name={slug}>
<a href={`/posts/${slug}`}>{data.title}</a> -
<span>
{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
@@ -60,3 +60,9 @@ posts.sort(
}
</ul>
</Layout>
<style>
ul {
list-style: none;
}
</style>
src/pages/index.astro
+7 -23
View File
@@ -4,7 +4,7 @@ import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import LatestPost from '@components/LatestPost.astro';
import Avatar from '@components/Avatar.astro';
import portrait from '../img/portrait.jpg';
import MastodonIcon from '../img/svg/mastodon.svg';
@@ -20,13 +20,9 @@ const latestPost = posts.sort(
---
<Layout title="About">
<Image
src={portrait}
alt="Illustrated portrait of a person with glasses and a beard, wearing a red and black plaid shirt. The background is a solid green color."
class="portrait"
width="250"
height="250"
/>
<div transition:name="my-avatar">
<Avatar size={250} />
</div>
<p>
My name is <strong>Graham</strong> (he/him), a full-stack web developer, and
tech enthusiast.
@@ -42,8 +38,9 @@ const latestPost = posts.sort(
development, and whatever else strikes my fancy.
</p>
<p>
Read my latest blog post, <a href={`blog/${latestPost.slug}`}
>{latestPost.data.title}</a
Read my latest blog post, <a
transition:name={latestPost.slug}
href={`blog/${latestPost.slug}`}>{latestPost.data.title}</a
>, from {new Date(latestPost.data.pubDate).toLocaleDateString()}.
</p>
<p>
@@ -68,17 +65,4 @@ const latestPost = posts.sort(
target="_blank">Natalia Vazquez</a
>.
</p>
<LatestPost />
</Layout>
<style>
.portrait {
display: block;
margin: auto;
margin-bottom: 26px;
border-radius: 200px;
}
a > svg {
transform: translateY(0.18rem);
}
</style>
src/pages/now.md
-6
View File
@@ -7,12 +7,6 @@ Hey there, this is my [/now page](https://nownownow.com/about)!
_Last updated: February 4, 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
- [Tonight - Franz Ferdinand](https://music.apple.com/us/album/tonight/300683347)
src/pages/projects.md
+16
View File
@@ -0,0 +1,16 @@
---
layout: ../layouts/Layout.astro
title: Projects
---
### [AutoDock](https://github.com/ghall89/AutoDock)
A MacOS menubar utility for automatically hiding and showing the Dock based on the screen size of the connected displays.
### [KeyStash](https://github.com/ghall89/KeyStash)
A MacOS application for managing software license keys for software purchased outside the Mac App Store.
### BGG Search (Raycast Extension) - Coming Soon!
A Raycast extension for searching [BoardGameGeek.com](https://boardgamegeek.com).
src/styles/global.css
+1
View File
@@ -71,6 +71,7 @@ header {
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
height: 120px;
}
header > h1 > a {