diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | astro.config.mjs | 6 | ||||
| -rw-r--r-- | src/components/Header.astro | 22 | ||||
| -rw-r--r-- | src/components/Pagination.astro | 35 | ||||
| -rw-r--r-- | src/components/PostElement.astro | 32 | ||||
| -rw-r--r-- | src/layouts/BaseLayout.astro | 5 | ||||
| -rw-r--r-- | src/pages/[...page].astro | 33 | ||||
| -rw-r--r-- | src/pages/blog/[...slug].astro | 10 | ||||
| -rw-r--r-- | src/pages/blog/index.astro | 19 | ||||
| -rw-r--r-- | src/pages/index.astro | 17 |
10 files changed, 100 insertions, 81 deletions
@@ -51,4 +51,4 @@ Comments on the site are powered by [giscus.app](https://giscus.app) and stored ## License -This project is licensed under the [MIT License](LICENSE.txt).
\ No newline at end of file +This project is licensed under the [MIT License](LICENSE.txt). diff --git a/astro.config.mjs b/astro.config.mjs index d8e7708..07e5d30 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -15,10 +15,4 @@ export default defineConfig({ theme: "vitesse-dark", }, }, - redirects: { - "/blog": { - destination: "/", - status: 301, - }, - }, }); diff --git a/src/components/Header.astro b/src/components/Header.astro new file mode 100644 index 0000000..4571a5c --- /dev/null +++ b/src/components/Header.astro @@ -0,0 +1,22 @@ +<style lang="scss"> + @import "../scss/_variables.scss"; + + header { + padding-bottom: 1rem; + text-align: right; + } + + a { + text-decoration: none; + margin-right: 1.5rem; + + &:last-child { + margin-right: 0; + } + } +</style> + +<header> + <a href="/">Home</a> + <a href="/blog/">Blog</a> +</header> diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro deleted file mode 100644 index 0d656df..0000000 --- a/src/components/Pagination.astro +++ /dev/null @@ -1,35 +0,0 @@ ---- -type Props = { - readonly nextUrl?: string; - readonly prevUrl?: string; -}; - -const { nextUrl, prevUrl } = Astro.props; ---- - -<style lang="scss"> - div { - text-align: center; - } - - span { - margin: 0 2em; - } -</style> - -<div> - { - prevUrl && ( - <span> - <a href={prevUrl}>< Prev</a> - </span> - ) - } - { - nextUrl && ( - <span> - <a href={nextUrl}>Next ></a> - </span> - ) - } -</div> diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro new file mode 100644 index 0000000..703189e --- /dev/null +++ b/src/components/PostElement.astro @@ -0,0 +1,32 @@ +--- +import { type CollectionEntry } from "astro:content"; +import dayjs from "dayjs"; + +type Props = { + readonly post: CollectionEntry<"blog">; +}; + +const { post } = Astro.props; +const { remarkPluginFrontmatter } = await post.render(); +const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"); +--- + +<style lang="scss"> + @import "../scss/_variables.scss"; + + small { + font-size: $fontSizeBase * 0.75; + opacity: 0.5; + } +</style> + +<li> + <a href={`/blog/${post.slug}`}>{post.data.title}</a> + <div> + <small> + <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> + <span>•</span> + <span>{remarkPluginFrontmatter.minutesRead}</span> + </small> + </div> +</li> diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index ca8826a..0209c58 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,6 +1,7 @@ --- import Analytics from "../components/Analytics.astro"; import Head from "../components/Head.astro"; +import Header from "../components/Header.astro"; import "../scss/global.scss"; type Props = { @@ -19,6 +20,10 @@ const { description, title } = Astro.props; <body> <main> + <section> + <Header /> + </section> + <slot /> </main> <Analytics title={title ?? import.meta.env.DEFAULT_TITLE} /> diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro deleted file mode 100644 index 6d513b2..0000000 --- a/src/pages/[...page].astro +++ /dev/null @@ -1,33 +0,0 @@ ---- -import type { GetStaticPaths, InferGetStaticPropsType } from "astro"; -import { getCollection } from "astro:content"; -import Layout from "../layouts/BaseLayout.astro"; -import Pagination from "../components/Pagination.astro"; -import PostSummary from "../components/PostSummary.astro"; - -type Props = InferGetStaticPropsType<typeof getStaticPaths>; - -export const getStaticPaths = (async ({ paginate }) => { - const posts = await getCollection("blog", ({ data }) => { - return data.draft !== true; - }); - - posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()); - - return paginate(posts, { - pageSize: 10, - }); -}) satisfies GetStaticPaths; - -const { page } = Astro.props; ---- - -<Layout> - <section style={{ "margin-top": "3rem" }}> - {page.data.map((post) => <PostSummary post={post} />)} - </section> - - <section> - <Pagination nextUrl={page.url.next} prevUrl={page.url.prev} /> - </section> -</Layout> diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 41b0f5c..c4e542c 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -33,10 +33,12 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY" <Layout description={post.data.description} title={post.data.title}> <article> <section> + <h1>{post.data.title}</h1> + </section> + + <section> <p> <small> - <a href="/">< Home</a> - <span> • </span> Posted <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> by {post.data.author} @@ -47,10 +49,6 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY" </section> <section> - <h1>{post.data.title}</h1> - </section> - - <section> <Content /> </section> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro new file mode 100644 index 0000000..48d33e8 --- /dev/null +++ b/src/pages/blog/index.astro @@ -0,0 +1,19 @@ +--- +import { getCollection } from "astro:content"; +import Layout from "../../layouts/BaseLayout.astro"; +import PostElement from "../../components/PostElement.astro"; + +const posts = await getCollection("blog", ({ data }) => { + return data.draft !== true; +}); + +posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()); +--- + +<Layout> + <section style={{ "margin-top": "3rem" }}> + <ul> + {posts.map((post) => <PostElement post={post} />)} + </ul> + </section> +</Layout> diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..56ccdff --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,17 @@ +--- +import { getCollection } from "astro:content"; +import Layout from "../layouts/BaseLayout.astro"; +import PostSummary from "../components/PostSummary.astro"; + +const posts = await getCollection("blog", ({ data }) => { + return data.draft !== true; +}); + +posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()); +--- + +<Layout> + <section style={{ "margin-top": "3rem" }}> + {posts.map((post) => <PostSummary post={post} />)} + </section> +</Layout> |