diff options
| -rw-r--r-- | src/components/BlogItem.astro | 33 | ||||
| -rw-r--r-- | src/components/Link.astro | 6 | ||||
| -rw-r--r-- | src/components/TerminalBorder.astro | 10 | ||||
| -rw-r--r-- | src/content/blogs/blog-0.md | 5 | ||||
| -rw-r--r-- | src/content/blogs/blog-1.md | 5 | ||||
| -rw-r--r-- | src/pages/blogs/index.astro | 35 |
6 files changed, 62 insertions, 32 deletions
diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro index 5f6b0e5..1535621 100644 --- a/src/components/BlogItem.astro +++ b/src/components/BlogItem.astro @@ -5,18 +5,33 @@ interface Props { title: string; description: string; date: string; + href: string; } -const { title, description, date } = Astro.props; +const { title, description, date, href } = Astro.props; --- -<TerminalBorder footer={date} margin="0 0 20px"> - <span> - <h1 class="text-[130%] text-[var(--accent)]"> - {title} - </h1> - <p class="text-[var(--secondary)]"> - {description} - </p> +<TerminalBorder footer={date} margin="0 0 20px;"> + <span class="cursor-pointer group block w-full"> + <a href={href} style="all: unset;"> + <h1 class="text-[130%] text-[var(--accent)] group-hover:underline"> + {title} + </h1> + <p class="text-[var(--secondary)]"> + {description} + </p> + </a> </span> </TerminalBorder> + +<style> + .section:hover() { + position: relative; + padding: 10.8rem; + padding-top: 0.85rem; + display: flex; + border-style: solid; + border-width: 1px; + border-color: var(--alt); + } +</style> diff --git a/src/components/Link.astro b/src/components/Link.astro index 72a0e0a..e8396ec 100644 --- a/src/components/Link.astro +++ b/src/components/Link.astro @@ -1,12 +1,12 @@ --- interface Props { - href: string; - newTab?: boolean; + href: string; + newTab?: boolean; } const { href, newTab = true } = Astro.props; --- <a href={href} {...newTab && { target: "_blank", rel: "noopener noreferrer" }}> - <slot /> + <slot /> </a> diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro index 0d9a75d..a6af7dc 100644 --- a/src/components/TerminalBorder.astro +++ b/src/components/TerminalBorder.astro @@ -3,18 +3,12 @@ interface Props { header?: string; footer?: string; margin?: string; - class?: string; } -const { - header = "", - footer = "", - margin = "-1px", - class: htmlClass, -} = Astro.props; +const { header = "", footer = "", margin = "-1px" } = Astro.props; --- -<div class="section" style={`margin: ${margin};`} class={htmlClass}> +<div class="section" style={`margin: ${margin};`}> <span class="tag-top">{header}</span> <span class="tag-bottom">{footer}</span> <slot /> diff --git a/src/content/blogs/blog-0.md b/src/content/blogs/blog-0.md index c954f97..228ff63 100644 --- a/src/content/blogs/blog-0.md +++ b/src/content/blogs/blog-0.md @@ -1,3 +1,8 @@ +--- +title: The search for the perfect ed25519 key pair +date: 2024-12-11 +--- + # The search for the perfect ed25519 key pair Todo write intro to catch attention diff --git a/src/content/blogs/blog-1.md b/src/content/blogs/blog-1.md index 4630f17..21304c2 100644 --- a/src/content/blogs/blog-1.md +++ b/src/content/blogs/blog-1.md @@ -1,3 +1,8 @@ +--- +title: Test +description: This is a test blog to... well.. test things! +date: 1970-01-01 +--- # My Title ## Secondary diff --git a/src/pages/blogs/index.astro b/src/pages/blogs/index.astro index de5252a..e91e580 100644 --- a/src/pages/blogs/index.astro +++ b/src/pages/blogs/index.astro @@ -4,19 +4,29 @@ import TerminalBorder from "../../components/TerminalBorder.astro"; import BlogItem from "../../components/BlogItem.astro"; import { getCollection } from "astro:content"; -const blogEntries = await getCollection("blogs"); +function formatDate(date) { + const day = date.getDate(); + const month = date.toLocaleString("default", { month: "long" }); // Get full month name + const year = date.getFullYear(); -const blogs = [ - { - title: "The search for the perfect ed25519 key pair", - description: ` -This is the description about this thing which shoud be very -long and cause this to wrap so that I can see how about 3 lines -of paragraph will look int this so now I am gonna continue -yapping to make it even longer`.trimStart(), - date: "November 12th 2024", - }, -]; + let suffix = "th"; + if (day === 1 || day === 21 || day === 31) { + suffix = "st"; + } else if (day === 2 || day === 22) { + suffix = "nd"; + } else if (day === 3 || day === 23) { + suffix = "rd"; + } + + return `${month} ${day}${suffix} ${year}`; +} + +const blogs = (await getCollection("blogs")).map((blog) => ({ + title: blog.data.title, + description: blog.data.description, + date: formatDate(blog.data.date), + href: "/blogs/" + blog.slug, +})); --- <Layout dir="blogs/"> @@ -31,6 +41,7 @@ yapping to make it even longer`.trimStart(), title={blog.title} description={blog.description} date={blog.date} + href={blog.href} /> </> )) |