diff options
author | Valentin Popov <valentin@popov.link> | 2024-09-12 19:36:57 +0300 |
---|---|---|
committer | Valentin Popov <valentin@popov.link> | 2024-09-12 19:36:57 +0300 |
commit | 3376c53b2ee91041d5eaa0f9274da0affd7d4a9d (patch) | |
tree | a6b1e66a7e7f185128870b8f0ed671e2d7630f0e | |
parent | 0b57b888caf8817ff4992c59ed40ed29bee34fd4 (diff) | |
download | popov.link-3376c53b2ee91041d5eaa0f9274da0affd7d4a9d.tar.xz popov.link-3376c53b2ee91041d5eaa0f9274da0affd7d4a9d.zip |
Refactor Astro components and layouts
-rw-r--r-- | src/components/Head.astro | 6 | ||||
-rw-r--r-- | src/components/PostElement.astro | 5 | ||||
-rw-r--r-- | src/components/PostPagination.astro | 47 | ||||
-rw-r--r-- | src/layouts/BaseLayout.astro | 5 | ||||
-rw-r--r-- | src/layouts/PageLayout.astro | 9 | ||||
-rw-r--r-- | src/pages/blog/[...slug].astro | 19 | ||||
-rw-r--r-- | src/pages/index.astro | 2 |
7 files changed, 21 insertions, 72 deletions
diff --git a/src/components/Head.astro b/src/components/Head.astro index 42ae32b..7a575a9 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,6 +1,10 @@ --- -const canonicalURL = new URL(Astro.url.pathname, Astro.site); +type Props = { + readonly description?: string; + readonly title?: string; +}; +const canonicalURL = new URL(Astro.url.pathname, Astro.site); const { title, description } = Astro.props; --- diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro index 889cc47..2f98130 100644 --- a/src/components/PostElement.astro +++ b/src/components/PostElement.astro @@ -1,6 +1,11 @@ --- +import { type CollectionEntry } from "astro:content"; import dayjs from "dayjs"; +type Props = { + readonly post: CollectionEntry<"blog">; +}; + const { post } = Astro.props; --- diff --git a/src/components/PostPagination.astro b/src/components/PostPagination.astro deleted file mode 100644 index 6ae6bef..0000000 --- a/src/components/PostPagination.astro +++ /dev/null @@ -1,47 +0,0 @@ ---- -const { prevPost, nextPost } = Astro.props; ---- - -<style lang="scss"> - .pagination { - overflow: hidden; - padding: 5rem 0; - width: 100%; - } - - @media (width <=684px) { - .pagination { - padding: 2rem 0; - } - } - - .prev, - .next { - max-width: 40%; - } - - .prev { - float: left; - } - - .next { - float: right; - } -</style> - -<div class="pagination"> - { - prevPost && ( - <span class="prev"> - <a href={`/blog/${prevPost.slug}`}>< {prevPost.data.title}</a> - </span> - ) - } - { - nextPost && ( - <span class="next"> - <a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} ></a> - </span> - ) - } -</div> diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 54c9128..f867900 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -3,6 +3,11 @@ import Head from "../components/Head.astro"; import Header from "../components/Header.astro"; import "../scss/global.scss"; +type Props = { + readonly description?: string; + readonly title?: string; +}; + const { title, description } = Astro.props; --- diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro deleted file mode 100644 index eff37fb..0000000 --- a/src/layouts/PageLayout.astro +++ /dev/null @@ -1,9 +0,0 @@ ---- -import BaseLayout from "./BaseLayout.astro"; - -const { title, description } = Astro.props; ---- - -<BaseLayout title={title} description={description}> - <slot /> -</BaseLayout> diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 9262a66..6754653 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -1,25 +1,20 @@ --- import { type CollectionEntry, getCollection } from "astro:content"; import Comments from "../../components/Comments.astro"; -import Layout from "../../layouts/PageLayout.astro"; -import Pagination from "../../components/PostPagination.astro"; +import Layout from "../../layouts/BaseLayout.astro"; export async function getStaticPaths() { const posts = await getCollection("blog"); - const total = posts.length; - return posts.map((post, index) => ({ + return posts.map((post) => ({ params: { slug: post.slug }, - props: { - post, - prevPost: index + 1 === total ? null : posts[index + 1], - nextPost: index === 0 ? null : posts[index - 1], - }, + props: post, })); } + type Props = CollectionEntry<"blog">; -const { post, prevPost, nextPost } = Astro.props; +const post = Astro.props; const { Content, remarkPluginFrontmatter } = await post.render(); --- @@ -48,10 +43,6 @@ const { Content, remarkPluginFrontmatter } = await post.render(); </section> <section> - <Pagination prevPost={prevPost} nextPost={nextPost} /> - </section> - - <section> <Comments /> </section> </article> diff --git a/src/pages/index.astro b/src/pages/index.astro index 4380bbc..6df8f31 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- import { getCollection } from "astro:content"; import Element from "../components/PostElement.astro"; -import Layout from "../layouts/PageLayout.astro"; +import Layout from "../layouts/BaseLayout.astro"; const posts = await getCollection("blog"); --- |