alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: refactor pass along pages

Browse Source
This commit is contained in:
Alex Lebens
2026-02-18 13:42:45 -06:00
parent 21085a1620
commit e52d85f931
8 changed files with 64 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.astro
View File

@@ -90,7 +90,7 @@ const currentYear = new Date().getFullYear();
</div> </div>
</div> </div>
<!-- Bottom section --> <!-- Bottom section -->
<div class="border-t border-neutral-400/30 dark:border-neutral-600/50 pt-8 mt-12"> <div class="border-t border-divider pt-8 mt-12">
<div class="flex flex-col md:flex-row items-center justify-between gap-4"> <div class="flex flex-col md:flex-row items-center justify-between gap-4">
<p class="text-secondary text-sm"> <p class="text-secondary text-sm">
&copy; {currentYear} All rights reserved. &copy; {currentYear} All rights reserved.

7
src/components/cards/BlogCard.astro
View File

@@ -5,6 +5,7 @@ import type { Post } from '@lib/directusTypes';
import Image from '@components/ui/images/Image.astro'; import Image from '@components/ui/images/Image.astro';
import { getDirectusImageURL } from '@lib/directusFunctions'; import { getDirectusImageURL } from '@lib/directusFunctions';
import { formatDate } from '@support/time';
interface Props { interface Props {
post: Post; post: Post;
@@ -44,11 +45,7 @@ const { post } = Astro.props;
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1" class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
/> />
<p class="card-text-description text-sm ml-auto"> <p class="card-text-description text-sm ml-auto">
{new Date(post.published_date).toLocaleDateString('en-US', { {formatDate(post.published_date)}
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</p> </p>
</div> </div>
</div> </div>

101
src/pages/blog/[...slug].astro
View File

@@ -11,7 +11,7 @@ import SocialShareButton from '@components/buttons/SocialShareButton.astro';
import BaseLayout from '@layouts/BaseLayout.astro'; import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus'; import directus from '@lib/directus';
import { getDirectusImageURL } from '@lib/directusFunctions'; import { getDirectusImageURL } from '@lib/directusFunctions';
import { formatDateTime } from '@support/time'; import { formatDate } from '@support/time';
const post = Astro.props; const post = Astro.props;
@@ -31,7 +31,7 @@ const category: CollectionEntry<'categories'> = (await getCollection('categories
const readingTime = getReadingTime(post.content); const readingTime = getReadingTime(post.content);
const highlighter = await createHighlighter({ const highlighter = await createHighlighter({
themes: ['github-light', 'github-dark', 'monokai'], themes: ['github-light', 'github-dark'],
langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'], langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'],
}); });
@@ -68,9 +68,7 @@ const content = marked.parse(post.content);
name: global.name, name: global.name,
description: global.about, description: global.about,
}, },
image: [ image: [],
// post.data.banner,
],
headline: post.title, headline: post.title,
datePublished: post.published_date, datePublished: post.published_date,
dateModified: post.updated_date, dateModified: post.updated_date,
@@ -84,11 +82,11 @@ const content = marked.parse(post.content);
}} }}
> >
<section class="mx-auto max-w-6xl px-4 pt-8 pb-12 sm:px-6 lg:px-8 lg:pt-12"> <section class="max-w-6xl px-4 sm:px-6 lg:px-8 pt-8 lg:pt-12 pb-12 mx-auto">
<div class="smooth-reveal relative w-full"> <div class="smooth-reveal relative w-full">
<div class="mt-4 rounded-2xl shadow-none sm:mt-0 sm:shadow-sm"> <div class="sm:shadow-xs sm:dark:shadow-md rounded-2xl mt-4 sm:mt-0">
<Image <Image
class="max-h-[600px] w-full rounded-t-2xl object-cover" class="rounded-2xl sm:rounded-b-none w-full max-h-150 object-cover"
src={getDirectusImageURL(post.image)} src={getDirectusImageURL(post.image)}
alt={post.image_alt} alt={post.image_alt}
draggable="false" draggable="false"
@@ -96,81 +94,54 @@ const content = marked.parse(post.content);
loading="lazy" loading="lazy"
inferSize={true} inferSize={true}
/> />
<div <div class="sm:bg-background-card rounded-b-2xl px-0 sm:px-6 md:px-10 lg:px-14 py-6">
class="rounded-b-2xl px-0 py-6 sm:bg-neutral-100 sm:px-6 md:px-10 lg:px-14 sm:dark:bg-neutral-900/30" <div class="text-center sm:text-left mt-4">
> <h2 class="card-text-header block">
<div class="mb-16">
<h2
class="mb-6 block text-3xl font-bold tracking-tight text-balance text-neutral-800 md:text-4xl lg:text-5xl dark:text-neutral-300"
>
{post.title} {post.title}
</h2> </h2>
<ol class="mt-8 flex items-center whitespace-nowrap"> <ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
<li class="inline-flex items-center"> <li class="inline-flex items-center">
<a <a
class="flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
href=`/categories/${category.slug}` href=`/categories/${category.slug}`
data-astro-prefetch
> >
{category?.data?.title} {category?.data?.title}
</a> </a>
<svg <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500" /
width="16" </span>
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
</svg>
</li> </li>
<li <li class="inline-flex items-center">
class="inline-flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" <span class="shrink-0 text-secondary text-sm">
> {formatDate(post.published_date)}
{formatDateTime(post.published_date)} </span>
<svg <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500" /
width="16" </span>
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
</svg>
</li> </li>
<li <li class="inline-flex items-center">
class="inline-flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" <span class="shrink-0 text-secondary text-sm">
aria-current="page" {readingTime.minutes.toPrecision(1)} minutes to read
> </span>
{readingTime.minutes.toPrecision(1)} minutes to read
</li> </li>
</ol> </ol>
</div> </div>
<div class="border-t border-divider mt-10 mb-10"/>
<article <article class="text-header prose prose-blog sm:prose-lg dark:prose-invert max-w-none">
class="prose prose-blog sm:prose-lg dark:prose-invert max-w-none text-neutral-800 dark:text-neutral-200"
>
<div set:html={content} /> <div set:html={content} />
</article> </article>
<div <div class="grid sm:flex sm:items-center sm:justify-between gap-y-5 sm:gap-y-0 max-w-5xl mx-auto mt-10 md:mt-14">
class="mx-auto mt-10 grid max-w-screen-lg gap-y-5 sm:flex sm:items-center sm:justify-between sm:gap-y-0 md:mt-14" <div class="flex flex-wrap sm:flex-nowrap sm:items-center gap-x-2 gap-y-1 sm:gap-y-0">
> {post.tags.map((tag: string) => (
<div class="flex flex-wrap gap-x-2 gap-y-1 sm:flex-nowrap sm:items-center sm:gap-y-0"> <span class="inline-flex items-center button-base bg-cobalt dark:bg-turquoise text-neutral-100 text-xs font-bold rounded-lg gap-x-1.5 px-3 py-1.5">
{ {tag}
post.tags.map((tag: string) => ( </span>
<span class="bg-steel/30 dark:bg-bermuda/60 inline-flex items-center gap-x-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-neutral-700 outline-none focus:outline-none focus-visible:ring focus-visible:outline-none dark:text-neutral-200"> ))}
{tag}
</span>
))
}
</div> </div>
<SocialShareButton <SocialShareButton pageTitle={post.title}/>
pageTitle={post.title}
/>
</div> </div>
</div> </div>
</div> </div>

10
src/pages/categories/[...slug].astro
View File

@@ -4,11 +4,13 @@ import { readItems, readSingleton } from '@directus/sdk';
import type { Post } from '@lib/directusTypes'; import type { Post } from '@lib/directusTypes';
import BlogCard from '@components/cards/BlogCard.astro';
import HeaderSection from '@components/sections/HeaderSection.astro'; import HeaderSection from '@components/sections/HeaderSection.astro';
import BlogCard from '@components/cards/BlogCard.astro';
import BaseLayout from '@layouts/BaseLayout.astro'; import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus'; import directus from '@lib/directus';
const { category } = Astro.props;
export async function getStaticPaths() { export async function getStaticPaths() {
const categories = await getCollection('categories'); const categories = await getCollection('categories');
return categories.map((category) => ({ return categories.map((category) => ({
@@ -17,8 +19,6 @@ export async function getStaticPaths() {
})); }));
} }
const { category } = Astro.props;
const global = await directus.request(readSingleton('site_global')); const global = await directus.request(readSingleton('site_global'));
const posts = await directus.request( const posts = await directus.request(
readItems('posts', { readItems('posts', {
@@ -62,8 +62,8 @@ const categoriesPosts = posts
btnURL="/categories" btnURL="/categories"
/> />
<section class="max-w-340 2xl:max-w-full mx-auto mt-10 mb-10 px-4 py-8 sm:px-6 lg:px-8"> <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{categoriesPosts.map((b) => {categoriesPosts.map((b) =>
<BlogCard post={b} /> <BlogCard post={b} />
)} )}

4
src/pages/categories/index.astro
View File

@@ -1,10 +1,10 @@
--- ---
import { readSingleton } from '@directus/sdk'; import { readSingleton } from '@directus/sdk';
import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import HeroSection from '@components/sections/HeroSection.astro'; import HeroSection from '@components/sections/HeroSection.astro';
import CategorySection from '@components/sections/CategorySection.astro'; import CategorySection from '@components/sections/CategorySection.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus';
import categoryImg from '@images/autumn_bench.png'; import categoryImg from '@images/autumn_bench.png';

8
src/styles/global.css
View File

@@ -9,8 +9,8 @@
/* https://tailwindcss.com/docs/dark-mode */ /* https://tailwindcss.com/docs/dark-mode */
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
/* Custom colors */
@theme { @theme {
/* Custom colors */
--color-midnight: #0c354d; --color-midnight: #0c354d;
--color-ocean: #134e70; --color-ocean: #134e70;
@@ -26,18 +26,24 @@
--color-gitea-primary: #609926; --color-gitea-primary: #609926;
--color-gitea-secondary: #4c7a33; --color-gitea-secondary: #4c7a33;
/* Theme colors */
--color-main: light-dark(var(--color-steel), var(--color-bermuda)); --color-main: light-dark(var(--color-steel), var(--color-bermuda));
--color-accent: light-dark(var(--color-bronze), var(--color-desert)); --color-accent: light-dark(var(--color-bronze), var(--color-desert));
--color-active: light-dark(var(--color-orange-500), var(--color-orange-300)); --color-active: light-dark(var(--color-orange-500), var(--color-orange-300));
/* Text colors */
--color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200)); --color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200));
--color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400)); --color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400));
--color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400)); --color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
--color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200));
/* Object colors */
--color-background: light-dark(var(--color-neutral-200), var(--color-stone-700)); --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
--color-background-accent: light-dark(color-mix(in srgb, var(--color-stone-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent)); --color-background-accent: light-dark(color-mix(in srgb, var(--color-stone-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
--color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
--color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
} }
@layer base { @layer base {

4
src/styles/utilities.css
View File

@@ -43,7 +43,7 @@
@utility button-bg-neutral { @utility button-bg-neutral {
@apply transition-all duration-300 @apply transition-all duration-300
border border-neutral-100 dark:border-stone-500/20 border border-neutral-100 dark:border-stone-500/20
bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90 bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90
} }
@utility button-bg-gitea { @utility button-bg-gitea {
@@ -56,7 +56,7 @@
@apply transition-all duration-300 @apply transition-all duration-300
rounded-xl rounded-xl
border border-neutral-100 dark:border-stone-500/20 border border-neutral-100 dark:border-stone-500/20
bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90 bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90
shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
} }

25
src/support/time.ts
View File

@@ -17,21 +17,6 @@ const TimeAgoConfiguration: string[][] = [
['%s years ago', 'in %s years'], ['%s years ago', 'in %s years'],
]; ];
function formatDate(date: Date): string {
const year = new Date(date).getFullYear();
const month = String(new Date(date).getMonth() + 1).padStart(2, '0');
const day = String(new Date(date).getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function formatDateTime(date: Date): string {
const hours = String(new Date(date).getHours()).padStart(2, '0');
const minutes = String(new Date(date).getMinutes()).padStart(2, '0');
return `${formatDate(date)} ${hours}:${minutes}`;
}
function timeago(date?: Date): string { function timeago(date?: Date): string {
if (!date) { if (!date) {
return 'today'; return 'today';
@@ -46,4 +31,12 @@ function timeago(date?: Date): string {
return format(date, 'timeago'); return format(date, 'timeago');
} }
export { formatDate, timeago, formatDateTime }; function formatDate(date: Date): string {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
})
}
export { formatDate, timeago };