Daisuke
62aa324e16
- Introduce CSS variables for theming in `global.css` - Add `ThemeIcon` component for toggling light/dark modes - Integrate theme initialization script in `BaseLayout` to prevent FOUC - Update navigation, buttons, and tag styles for dark mode compatibility - Configure Shiki for dual-theme syntax highlighting in `astro.config.mjs` - Adjust link colors to accessible blue shades for both themes
70 lines
1.6 KiB
Text
70 lines
1.6 KiB
Text
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
import BlogPost from "../components/BlogPost.astro";
|
|
import { getCollection } from "astro:content";
|
|
const pageTitle = "Naputo";
|
|
const allPosts = await getCollection("blog");
|
|
const sortedPosts = allPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
|
---
|
|
|
|
<style>
|
|
.new-articles {
|
|
text-align: start;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.header-new-posts {
|
|
text-align: center;
|
|
}
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 2rem;
|
|
}
|
|
.list-of-articles-button {
|
|
display: inline-block;
|
|
background-color: #e0e0e0;
|
|
color: #333333;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
:global(.dark) .list-of-articles-button {
|
|
background-color: #1e293b;
|
|
color: #f8fafc;
|
|
border: 1px solid #334155;
|
|
}
|
|
.list-of-articles-button:hover {
|
|
background-color: #cacaca;
|
|
}
|
|
:global(.dark) .list-of-articles-button:hover {
|
|
background-color: #334155;
|
|
}
|
|
</style>
|
|
<BaseLayout pageTitle={pageTitle}>
|
|
<h3 class="header-new-posts">New Posts</h3>
|
|
<div class="new-articles">
|
|
{
|
|
sortedPosts.slice(0, 5).map((post: any) => (
|
|
<BlogPost
|
|
url={`/posts/${post.id}/`}
|
|
title={post.data.title}
|
|
datetime={post.data.pubDate.toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<a href="/blog/" class="list-of-articles-button">List of Article</a>
|
|
</div>
|
|
</BaseLayout>
|