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; const { className = "", dataPagefindBody = true } = Astro.props;
--- ---
<article class={`${className}`} data-pagefind-body={dataPagefindBody}> <article class={`${className} w-full`} data-pagefind-body={dataPagefindBody}>
<slot /> <slot />
<div id="myModal" class="modal"> <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 && ( socialImageURL && (
<div class="mb-6 aspect-video p-4"> <div class="mb-6 aspect-video">
<img <img
alt={socialImageURL} alt={socialImageURL}
class="rounded-lg object-cover" class="rounded-lg object-cover"

2
src/layouts/Base.astro
View File

@ -27,7 +27,7 @@ const {
/> />
</head> </head>
<body <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 /> <ThemeProvider />
<SkipLink /> <SkipLink />

6
src/layouts/BlogPost.astro
View File

@ -39,7 +39,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
tags: [category, ...tags].join(", "), 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" />} {!!headings.length && <TOC headings={headings} classname="lg:w-64 lg:flex-shrink-0" />}
<ArticleContainer className="grow break-words" dataPagefindBody={true}> <ArticleContainer className="grow break-words" dataPagefindBody={true}>
@ -48,7 +48,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
</div> </div>
<div class="flex flex-col gap-10 lg:flex-row lg:items-start"> <div class="flex flex-col gap-10 lg:flex-row lg:items-start">
<div <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 /> <slot />
<WebMentions /> <WebMentions />
@ -69,7 +69,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
<div class="flex flex-col gap-10 lg:flex-row lg:items-start"> <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" />} {!!headings.length && <TOC headings={headings} classname="lg:w-64 lg:flex-shrink-0" />}
<div <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 /> <slot />
<WebMentions /> <WebMentions />

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

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

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

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

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

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