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

95
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 directus from '@lib/directus';
import { getDirectusImageURL } from '@lib/directusFunctions';
import { formatDateTime } from '@support/time';
import { formatDate } from '@support/time';
const post = Astro.props;
@@ -31,7 +31,7 @@ const category: CollectionEntry<'categories'> = (await getCollection('categories
const readingTime = getReadingTime(post.content);
const highlighter = await createHighlighter({
themes: ['github-light', 'github-dark', 'monokai'],
themes: ['github-light', 'github-dark'],
langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'],
});
@@ -68,9 +68,7 @@ const content = marked.parse(post.content);
name: global.name,
description: global.about,
},
image: [
// post.data.banner,
],
image: [],
headline: post.title,
datePublished: post.published_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="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
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)}
alt={post.image_alt}
draggable="false"
@@ -96,81 +94,54 @@ const content = marked.parse(post.content);
loading="lazy"
inferSize={true}
/>
<div
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="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"
>
<div class="sm:bg-background-card rounded-b-2xl px-0 sm:px-6 md:px-10 lg:px-14 py-6">
<div class="text-center sm:text-left mt-4">
<h2 class="card-text-header block">
{post.title}
</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">
<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}`
data-astro-prefetch
>
{category?.data?.title}
</a>
<svg
class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500"
width="16"
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>
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
/
</span>
</li>
<li
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"
>
{formatDateTime(post.published_date)}
<svg
class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500"
width="16"
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 class="inline-flex items-center">
<span class="shrink-0 text-secondary text-sm">
{formatDate(post.published_date)}
</span>
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
/
</span>
</li>
<li
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"
aria-current="page"
>
<li class="inline-flex items-center">
<span class="shrink-0 text-secondary text-sm">
{readingTime.minutes.toPrecision(1)} minutes to read
</span>
</li>
</ol>
</div>
<div class="border-t border-divider mt-10 mb-10"/>
<article
class="prose prose-blog sm:prose-lg dark:prose-invert max-w-none text-neutral-800 dark:text-neutral-200"
>
<article class="text-header prose prose-blog sm:prose-lg dark:prose-invert max-w-none">
<div set:html={content} />
</article>
<div
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 gap-x-2 gap-y-1 sm:flex-nowrap sm:items-center sm:gap-y-0">
{
post.tags.map((tag: string) => (
<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">
<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">
<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) => (
<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}
</span>
))
}
))}
</div>
<SocialShareButton
pageTitle={post.title}
/>
<SocialShareButton pageTitle={post.title}/>
</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 BlogCard from '@components/cards/BlogCard.astro';
import HeaderSection from '@components/sections/HeaderSection.astro';
import BlogCard from '@components/cards/BlogCard.astro';
import BaseLayout from '@layouts/BaseLayout.astro';
import directus from '@lib/directus';
const { category } = Astro.props;
export async function getStaticPaths() {
const categories = await getCollection('categories');
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 posts = await directus.request(
readItems('posts', {
@@ -62,8 +62,8 @@ const categoriesPosts = posts
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">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<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 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{categoriesPosts.map((b) =>
<BlogCard post={b} />
)}

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

@@ -1,10 +1,10 @@
---
import { readSingleton } from '@directus/sdk';
import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import HeroSection from '@components/sections/HeroSection.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';

8
src/styles/global.css
View File

@@ -9,8 +9,8 @@
/* https://tailwindcss.com/docs/dark-mode */
@custom-variant dark (&:where(.dark, .dark *));
/* Custom colors */
@theme {
/* Custom colors */
--color-midnight: #0c354d;
--color-ocean: #134e70;
@@ -26,18 +26,24 @@
--color-gitea-primary: #609926;
--color-gitea-secondary: #4c7a33;
/* Theme colors */
--color-main: light-dark(var(--color-steel), var(--color-bermuda));
--color-accent: light-dark(var(--color-bronze), var(--color-desert));
--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-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-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
--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-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 {

4
src/styles/utilities.css
View File

@@ -43,7 +43,7 @@
@utility button-bg-neutral {
@apply transition-all duration-300
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 {
@@ -56,7 +56,7 @@
@apply transition-all duration-300
rounded-xl
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
}

25
src/support/time.ts
View File

@@ -17,21 +17,6 @@ const TimeAgoConfiguration: string[][] = [
['%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 {
if (!date) {
return 'today';
@@ -46,4 +31,12 @@ function timeago(date?: Date): string {
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 };