lukeonline - commit ab92870

diff --git a/src/components/Header.astro b/src/components/Header.astro index a982e20..7213f66 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,13 +1,15 @@ --- const { title } = Astro.props; + +const linkStyling = "hover:bg-gray-300 grow text-center" --- -<header class="mb-4 flex flex-col gap-1"> +<header class="flex flex-col gap-1"> <h1 class="text-2xl font-bold">Luke Jones</h1> - <nav class="flex flex-row gap-6"> - <a href="/">Home</a> - <a href="/projects">Projects</a> - <a href="/blog">Blog</a> - <a href="/photos">Photos</a> - <a href="/about">About</a> + <nav class="flex flex-row justify-between"> + <a class={linkStyling} href="/">Home</a> + <a class={linkStyling} href="/projects">Projects</a> + <a class={linkStyling} href="/blog">Blog</a> + <a class={linkStyling} href="/photos">Photos</a> + <a class={linkStyling} href="/about">About</a> </nav> </header> diff --git a/src/content/blog/example1.md b/src/content/blog/example1.md index 416a219..e67c3bc 100644 --- a/src/content/blog/example1.md +++ b/src/content/blog/example1.md @@ -2,5 +2,6 @@ title: Example Blog 1 desc: An example of a blog date: 2026-01-01 +slug: 20260101 --- This is an example blog post diff --git a/src/content/blog/example2.md b/src/content/blog/example2.md index bff9592..9b42b7d 100644 --- a/src/content/blog/example2.md +++ b/src/content/blog/example2.md @@ -2,5 +2,6 @@ title: Example Blog 2 desc: An example of another blog date: 2026-01-02 +slug: 20260102 --- This is another example blog post diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index f0d4625..cb5ae8a 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -13,7 +13,7 @@ const { ...props } = Astro.props; <html class="bg-gray-200"> <Head title={`${SITE_TITLE} - ${props.title}`} /> <body class="w-full md:w-192 m-auto mt-8 text-base p-8"> - <div class="border-solid border-1 p-8 bg-white"> + <div class="border-solid border-1 p-8 bg-white flex flex-col gap-4"> <Header /> <main> <slot /> diff --git a/src/layouts/ContentList.astro b/src/layouts/ContentList.astro index dddf55a..b8a1a84 100644 --- a/src/layouts/ContentList.astro +++ b/src/layouts/ContentList.astro @@ -2,12 +2,15 @@ import Base from "./Base.astro"; const { ...props } = Astro.props; + +const postStyling = "flex flex-col bg-gray-100 " + + "p-1 pl-3 pr-3 hover:bg-gray-300 " --- <Base title={props.title}> <slot /> - <div class="flex flex-col gap-2"> + <div class="flex flex-col gap-3"> {props.content.map(post => ( - <a class="flex flex-col"> + <a class={postStyling} href={post.link}> <span>{post.title}</span> <span class="text-sm font-light">{post.desc}</span> </a> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index f1084cf..c585eee 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -8,9 +8,12 @@ const title = "Blog"; const posts = await getCollection('blog'); +const postViewUrl = "/blog/" + const contentData = posts.map((post) => ({ title: post.data.title, - desc: `${post.data.desc} - ${post.data.date.toLocaleDateString()}` + desc: `${post.data.desc} - ${post.data.date.toLocaleDateString()}`, + link: `${postViewUrl}${post.data.slug}` })); console.log('POSTS: ', posts)