buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-24 03:01:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Improve layout and styling across multiple components

Browse Source
This commit is contained in:
KazooTTT
2025-02-08 18:32:57 +08:00
parent 1653e679fc
commit 8e8dc71801
9 changed files with 17 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ArticleContainer.astro
View File

@ -8,7 +8,7 @@ export interface Props {
const { className = "", dataPagefindBody = true } = Astro.props;
---
<article class={`${className}`} data-pagefind-body={dataPagefindBody}>
<article class={`${className} w-full`} data-pagefind-body={dataPagefindBody}>
<slot />
<div id="myModal" class="modal">

2
src/components/blog/Masthead.astro
View File

@ -26,7 +26,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
{
socialImageURL && (
<div class="mb-6 aspect-video p-4">
<div class="mb-6 aspect-video">
<img
alt={socialImageURL}
class="rounded-lg object-cover"

2
src/layouts/Base.astro
View File

@ -27,7 +27,7 @@ const {
/>
</head>
<body
class="bg-global-bg text-global-text mx-auto flex min-h-screen max-w-5xl flex-col px-4 pt-16 font-mono text-sm font-normal antialiased sm:px-8"
class="bg-global-bg text-global-text mx-auto flex min-h-screen max-w-4xl flex-col px-4 pt-16 font-mono text-sm font-normal antialiased sm:px-8"
>
<ThemeProvider />
<SkipLink />

6
src/layouts/BlogPost.astro
View File

@ -39,7 +39,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
tags: [category, ...tags].join(", "),
}}
>
<div class="hidden flex-col gap-10 lg:flex lg:flex-row lg:items-start">
<div class="hidden w-full flex-col gap-10 lg:flex lg:flex-row lg:items-start">
{!!headings.length && <TOC headings={headings} classname="lg:w-64 lg:flex-shrink-0" />}
<ArticleContainer className="grow break-words" dataPagefindBody={true}>
@ -48,7 +48,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
</div>
<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
<div
class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none lg:!max-w-none"
class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none w-full lg:!max-w-none"
>
<slot />
<WebMentions />
@ -69,7 +69,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
{!!headings.length && <TOC headings={headings} classname="lg:w-64 lg:flex-shrink-0" />}
<div
class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none lg:!max-w-none"
class="prose prose-base prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-headings:before:content-['#'] sm:prose-th:before:content-none w-full lg:!max-w-none"
>
<slot />
<WebMentions />

2
src/pages/categories/[category]/[...page].astro
View File

@ -15,7 +15,7 @@ export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
return uniqueCategories.flatMap((category) => {
const filterPosts = sortedPosts.filter((post) => post.data.category === category);
return paginate(filterPosts, {
pageSize: 10,
pageSize: 20,
params: { category },
});
});

2
src/pages/category/[category]/[...page].astro
View File

@ -12,7 +12,7 @@ export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
return uniqueCategories.flatMap((category) => {
const filterPosts = sortedPosts.filter((post) => post.data.category === category);
return paginate(filterPosts, {
pageSize: 10,
pageSize: 20,
params: { category },
});
});

18
src/pages/posts/[...page].astro
View File

@ -85,12 +85,14 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
<Pagination {...paginationProps} />
</div>
<aside class="flex flex-col gap-2">
<aside class="flex flex-col gap-8">
{
!!uniqueTags.length && (
<div>
<h2 class="title mb-4 flex items-center gap-2 text-lg">
<a href="/tags/" class="hover:text-link cactus-link">
Tags
</a>
<svg
aria-hidden="true"
class="h-6 w-6"
@ -119,12 +121,6 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="hover:text-link" href="/tags/">
View all <span aria-hidden="true">→</span>
<span class="sr-only">blog tags</span>
</a>
</span>
</div>
)
}
@ -133,7 +129,9 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
!!uniqueCategories.length && (
<div>
<h2 class="title mb-4 flex items-center gap-2 text-lg">
<a href="/categories/" class="hover:text-link cactus-link">
Categories
</a>
<svg
aria-hidden="true"
class="h-6 w-6"
@ -165,12 +163,6 @@ const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="hover:text-link" href="/categories/">
View all <span aria-hidden="true">→</span>
<span class="sr-only">blog categories</span>
</a>
</span>
</div>
)
}

2
src/pages/tag/[tag]/[...page].astro
View File

@ -12,7 +12,7 @@ export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
return uniqueTags.flatMap((tag) => {
const filterPosts = sortedPosts.filter((post) => post.data.tags.includes(tag));
return paginate(filterPosts, {
pageSize: 10,
pageSize: 20,
params: { tag },
});
});

2
src/pages/tags/[tag]/[...page].astro
View File

@ -15,7 +15,7 @@ export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
return uniqueTags.flatMap((tag) => {
const filterPosts = sortedPosts.filter((post) => post.data.tags.includes(tag));
return paginate(filterPosts, {
pageSize: 10,
pageSize: 20,
params: { tag },
});
});