nakada0907/n-daisuke897-blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve web page design

Browse source
This commit is contained in:
Daisuke Nakahara 2025-01-18 20:42:22 +09:00
parent 06d260ce07
commit 9c297424c5
7 changed files with 45 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/BlogPost.astro
View file

@ -1,5 +1,24 @@
--- ---
const { title, url } = Astro.props; const { title, url, datetime } = Astro.props;
--- ---
<li><a href={url}>{title}</a></li> <style>
.new-article {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.new-article-date {
font-size: 14px;
color: #666;
}
.new-article-title {
font-size: 18px;
font-weight: bold;
color: #333f;
}
</style>
<div class="new-article">
<div class="new-article-date">{datetime}</div>
<a class="new-article-title" href={url}>{title}</a>
</div>

2
src/components/Navigation.astro
View file

@ -4,7 +4,7 @@
<div class="nav-links"> <div class="nav-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about/">About Me</a> <a href="/about/">About</a>
<a href="/blog/">Blog</a> <a href="/blog/">Blog</a>
<a href="/tags/">Tags</a> <a href="/tags/">Tags</a>
</div> </div>

2
src/layouts/BaseLayout.astro
View file

@ -11,7 +11,7 @@ const { pageTitle } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title> <title>{pageTitle + " | Naputo"}</title>
</head> </head>
<body> <body>
<Header /> <Header />

70
src/pages/about.astro
View file

@ -1,6 +1,6 @@
--- ---
import BaseLayout from "../layouts/BaseLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "About Me"; const pageTitle = "About このブログについて";
const identity = { const identity = {
firstName: "Sarah", firstName: "Sarah",
@ -20,81 +20,13 @@ const fontWeight = "bold";
const textCase = "uppercase"; const textCase = "uppercase";
--- ---
<!-- <html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
<style define:vars={{skillColor, fontWeight, textCase}}>
h1 {
color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: var(--fontWeight);
text-transform: var(--textCase);
}
</style>
</head>
<body>
<Header />
<h1>{pageTitle}</h1> -->
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
<style is:global define:vars={{ skillColor, fontWeight, textCase }}> <style is:global define:vars={{ skillColor, fontWeight, textCase }}>
h1 {
color: purple;
font-size: 4rem;
}
.skill { .skill {
color: var(--skillColor); color: var(--skillColor);
font-weight: var(--fontWeight); font-weight: var(--fontWeight);
text-transform: var(--textCase); text-transform: var(--textCase);
} }
</style> </style>
<h2>... and my new Astro site!</h2>
<p>
I am working through Astro's introductory tutorial. This is the second
page on my website, and it's the first one I built myself!
</p>
<p>
This site will update as I complete more of the tutorial, so keep
checking back and see how my journey is going!
</p>
<p>Here are a few facts about me:</p>
<ul>
<li>My name is {identity.firstName}.</li>
<li>
I live in {identity.country} and I work as a {identity.occupation}.
</li>
{
identity.hobbies.length >= 2 && (
<li>
Two of my hobbies are: {identity.hobbies[0]} and{" "}
{identity.hobbies[1]}
</li>
)
}
</ul>
<p>My skills are:</p>
<ul>
{skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
{
goal === 3 ? (
<p>My goal is to finish in 3 days.</p>
) : (
<p>My goal is not 3 days.</p>
)
}
</BaseLayout> </BaseLayout>

4
src/pages/blog.astro
View file

@ -4,13 +4,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
import BlogPost from "../components/BlogPost.astro"; import BlogPost from "../components/BlogPost.astro";
const allPosts = await getCollection("blog"); const allPosts = await getCollection("blog");
const numberOfPosts = allPosts.length; const pageTitle = "新着記事";
const pageTitle = "My Astro Learning Blog";
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
<p>This is where I will post about my journey learning Astro.</p> <p>This is where I will post about my journey learning Astro.</p>
<p>I have written {numberOfPosts} blog posts.</p>
<ul> <ul>
{ {
allPosts.map((post: any) => ( allPosts.map((post: any) => (

31
src/pages/index.astro
View file

@ -7,16 +7,19 @@ const allPosts = await getCollection("blog");
--- ---
<style> <style>
.new-articles {
text-align: start;
margin-bottom: 2rem;
}
.header-new-posts { .header-new-posts {
text-align: center; text-align: center;
} }
.button-container { .button-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 2rem;
} }
.rounded-button { .rounded-button {
padding: 10px 20px; padding: 10px 20px;
background-color: rgba(192, 192, 192, 0.3); background-color: rgba(192, 192, 192, 0.3);
@ -27,18 +30,22 @@ const allPosts = await getCollection("blog");
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
<h2>20代のエンジニアによる技術や書評のアウトプットブログ</h2> <h2>20代のエンジニアによる技術や書評のアウトプットブログ</h2>
<h3 class="header-new-posts">新しい記事 一覧</h3> <h3 class="header-new-posts">新しい記事 一覧</h3>
<ul> <div class="new-articles">
{ {
allPosts allPosts.slice(0, 6).map((post: any) => (
.slice(0, 6) <BlogPost
.map((post: any) => ( url={`/posts/${post.id}/`}
<BlogPost title={post.data.title}
url={`/posts/${post.id}/`} datetime={post.data.pubDate.toLocaleDateString("ja-JP", {
title={post.data.title} year: "numeric",
/> month: "2-digit",
)) day: "2-digit",
})}
/>
))
} }
</ul> </div>
<div class="button-container"> <div class="button-container">
<a href="/blog/" class="rounded-button">記事の一覧</a> <a href="/blog/" class="rounded-button">記事の一覧</a>
</div> </div>

2
src/pages/tags/index.astro
View file

@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
import BaseLayout from "../../layouts/BaseLayout.astro"; import BaseLayout from "../../layouts/BaseLayout.astro";
const allPosts = await getCollection("blog"); const allPosts = await getCollection("blog");
const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())]; const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
const pageTitle = "Tag Index"; const pageTitle = "タグ一覧";
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>