otoyo · otoyo · Mar 5, 2023 · Mar 5, 2023 · Mar 5, 2023 · Mar 5, 2023
diff --git a/README.ja.md b/README.ja.md
@@ -21,7 +21,7 @@ astro-notion-blog を使えば [Notion](https://www.notion.so) で書けるブ
 
 ## デモ
 
-[https://astro-notion-blog.pages.dev/blog](https://astro-notion-blog.pages.dev/blog)
+[https://astro-notion-blog.pages.dev](https://astro-notion-blog.pages.dev)
 
 ## クイックスタート
 

diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ The blog is generated statically by [Astro](https://astro.build/) so very fast.
 
 ## Demo
 
-[https://astro-notion-blog.pages.dev/blog](https://astro-notion-blog.pages.dev/blog)
+[https://astro-notion-blog.pages.dev](https://astro-notion-blog.pages.dev)
 
 ## Quick Start
 

diff --git a/src/components/PostRelativeLink.astro b/src/components/PostRelativeLink.astro
@@ -35,7 +35,7 @@ const { prevPost, nextPost } = Astro.props
     }
   </div>
   <div>
-    <a href={getNavLink('/blog')} class="text">▲ Return to list</a>
+    <a href={getNavLink('/posts')} class="text">▲ Return to top</a>
   </div>
 </div>
 

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,10 +5,7 @@ import {
   PUBLIC_GA_TRACKING_ID,
   ENABLE_LIGHTBOX,
 } from '../server-constants.ts'
-import {
-  getNavLink,
-  getStaticFilePath,
-} from '../lib/blog-helpers.ts'
+import { getNavLink, getStaticFilePath } from '../lib/blog-helpers.ts'
 import '../styles/syntax-coloring.css'
 import GoogleAnalytics from '../components/GoogleAnalytics.astro'
 
@@ -25,11 +22,6 @@ const siteTitle = title ? `${title} - ${PUBLIC_SITE_TITLE}` : PUBLIC_SITE_TITLE
 const siteDescription = description ? description : PUBLIC_SITE_DESCRIPTION
 const siteURL = new URL(path, Astro.site).toString()
 const siteOGImage = new URL('/default-og-image.png', Astro.site)
-
-const navItems = [
-  { label: 'Home', path: '/' },
-  { label: 'Blog', path: '/blog' },
-]
 ---
 
 <!DOCTYPE html>
@@ -67,18 +59,6 @@ const navItems = [
       <div class="description">
         {PUBLIC_SITE_DESCRIPTION}
       </div>
-
-      <ul>
-        {
-          navItems.map(({ label, path: p }) => (
-            <li key={label}>
-              <a href={getNavLink(p)} class={p === path ? 'active' : null}>
-                {label}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
     </header>
     <div class="container">
       <slot />
@@ -92,7 +72,11 @@ const navItems = [
       </div>
     </footer>
 
-    {ENABLE_LIGHTBOX && <script src={getStaticFilePath('/scripts/fslightbox.js')} />}
+    {
+      ENABLE_LIGHTBOX && (
+        <script src={getStaticFilePath('/scripts/fslightbox.js')} />
+      )
+    }
   </body>
 </html>
 
@@ -114,24 +98,6 @@ const navItems = [
     padding: 0.3rem 0 0.6rem;
     font-size: 0.95rem;
   }
-  .header ul {
-    list-style: none;
-    margin: inherit;
-    padding: 0.5rem 0;
-    font-size: 1.1rem;
-  }
-  @media (max-width: 640px) {
-    .header ul {
-      font-size: 1rem;
-    }
-  }
-  .header ul li {
-    display: inline-block;
-    padding: 0 15px;
-  }
-  .header ul li :global(a.active) {
-    color: var(--accents-3);
-  }
 
   .container {
     width: 100%;

diff --git a/src/lib/blog-helpers.ts b/src/lib/blog-helpers.ts
@@ -131,23 +131,23 @@ export const getNavLink = (nav: string) => {
 }
 
 export const getPostLink = (slug: string) => {
-  return pathJoin(BASE_PATH, `/blog/${slug}`)
+  return pathJoin(BASE_PATH, `/posts/${slug}`)
 }
 
 export const getTagLink = (tag: string) => {
-  return pathJoin(BASE_PATH, `/blog/tag/${encodeURIComponent(tag)}`)
+  return pathJoin(BASE_PATH, `/posts/tag/${encodeURIComponent(tag)}`)
 }
 
 export const getPageLink = (page: number, tag: string) => {
   if (page === 1) {
-    return tag ? getTagLink(tag) : pathJoin(BASE_PATH, '/blog')
+    return tag ? getTagLink(tag) : pathJoin(BASE_PATH, '/posts')
   }
   return tag
     ? pathJoin(
         BASE_PATH,
-        `/blog/tag/${encodeURIComponent(tag)}/page/${page.toString()}`
+        `/posts/tag/${encodeURIComponent(tag)}/page/${page.toString()}`
       )
-    : pathJoin(BASE_PATH, `/blog/page/${page.toString()}`)
+    : pathJoin(BASE_PATH, `/posts/page/${page.toString()}`)
 }
 
 export const getDateStr = (date: string) => {

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,39 +1,60 @@
 ---
+import { NUMBER_OF_POSTS_PER_PAGE } from '../server-constants.ts'
+import {
+  getPosts,
+  getRankedPosts,
+  getAllTags,
+  getNumberOfPages,
+} from '../lib/notion/client.ts'
 import Layout from '../layouts/Layout.astro'
+import NoContents from '../components/NoContents.astro'
+import PostDate from '../components/PostDate.astro'
+import PostTags from '../components/PostTags.astro'
+import PostTitle from '../components/PostTitle.astro'
+import PostFeaturedImage from '../components/PostFeaturedImage.astro'
+import PostExcerpt from '../components/PostExcerpt.astro'
+import ReadMoreLink from '../components/ReadMoreLink.astro'
+import Pagination from '../components/Pagination.astro'
+import BlogPostsLink from '../components/BlogPostsLink.astro'
+import BlogTagsLink from '../components/BlogTagsLink.astro'
+import styles from '../styles/blog.module.css'
+
+const [posts, rankedPosts, tags, numberOfPages] = await Promise.all([
+  getPosts(NUMBER_OF_POSTS_PER_PAGE),
+  getRankedPosts(),
+  getAllTags(),
+  getNumberOfPages(),
+])
 ---
 
 <Layout>
-  <div class="container">
+  <div className={styles.container}>
     <main>
-      <h2>Welcome!</h2>
-      <p>Your astro-notion-blog deployed successfully!</p>
-      <p>Have fun!</p>
+      {
+        posts.length === 0 ? (
+          <NoContents contents={posts} />
+        ) : (
+          posts.map((post) => (
+            <div className={styles.post} key={post.Slug}>
+              <PostDate post={post} />
+              <PostTags post={post} />
+              <PostTitle post={post} />
+              <PostFeaturedImage post={post} />
+              <PostExcerpt post={post} />
+              <ReadMoreLink post={post} />
+            </div>
+          ))
+        )
+      }
+
+      <footer>
+        <Pagination currentPage={1} numberOfPages={numberOfPages} />
+      </footer>
     </main>
+
+    <aside>
+      <BlogPostsLink heading="Recommended" posts={rankedPosts} />
+      <BlogTagsLink heading="Categories" tags={tags} />
+    </aside>
   </div>
 </Layout>
-
-<style>
-  .container {
-    width: 640px;
-    max-width: 100%;
-    margin: 0 auto;
-  }
-
-  .container > main {
-    margin-bottom: 40px;
-  }
-  .container div:last-child {
-    margin-bottom: 0;
-  }
-
-  .container h2 {
-    margin: 0 0 14px;
-    font-size: 1.4rem;
-    font-weight: 400;
-  }
-
-  .container p {
-    margin: 0.3rem auto;
-    line-height: 2rem;
-  }
-</style>
diff --git a/src/pages/blog/[slug].astro → src/pages/posts/[slug].astro b/src/pages/blog/[slug].astro → src/pages/posts/[slug].astro
diff --git a/src/pages/blog/page/[page].astro → src/pages/posts/page/[page].astro b/src/pages/blog/page/[page].astro → src/pages/posts/page/[page].astro
@@ -39,7 +39,7 @@ const [posts, rankedPosts, tags, numberOfPages] = await Promise.all([
 ])
 ---
 
-<Layout title={`Posts ${page}/${numberOfPages}`} path={`/blog/page/${page}`}>
+<Layout title={`Posts ${page}/${numberOfPages}`} path={`/posts/page/${page}`}>
   <div className={styles.container}>
     <main>
       <header>

diff --git a/src/pages/blog/tag/[tag].astro → src/pages/posts/tag/[tag].astro b/src/pages/blog/tag/[tag].astro → src/pages/posts/tag/[tag].astro
@@ -38,7 +38,7 @@ const [posts, rankedPosts, tags, numberOfPages] = await Promise.all([
 const currentTag = posts[0].Tags.find((t) => t.name === tag)
 ---
 
-<Layout title={`Posts in ${tag}`} path={`/blog/tag/${tag}`}>
+<Layout title={`Posts in ${tag}`} path={`/posts/tag/${tag}`}>
   <div className={styles.container}>
     <main>
       <header>

diff --git a/src/pages/blog/tag/[tag]/page/[page].astro → src/pages/posts/tag/[tag]/page/[page].astro b/src/pages/blog/tag/[tag]/page/[page].astro → src/pages/posts/tag/[tag]/page/[page].astro
@@ -52,7 +52,7 @@ const currentTag = posts[0].Tags.find((t) => t.name === tag)
 
 <Layout
   title={`Posts in ${tag} ${page}/${numberOfPages}`}
-  path={`/blog/tag/${tag}/page/${page}`}
+  path={`/posts/tag/${tag}/page/${page}`}
 >
   <div className={styles.container}>
     <main>