Merge pull request #24 from komura-c/fix/actions_and_style

Fix/actions and style

.github/workflows/deploy.yaml

@@ -15,10 +15,25 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v3
-      - name: Install, build, and upload your site
-        uses: withastro/action@v0
+      - name: Setup Node
+        uses: actions/setup-node@v4
         with:
-            node-version: 18
+          node-version: "18"
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm ci
+      - run: npm run build
+        env:
+          PUBLIC_GA_ID: ${{ secrets.PUBLIC_GA_ID }}
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: "${{ inputs.path }}/dist/"
   deploy:
     needs: build
     runs-on: ubuntu-latest

src/components/BlogHeader.astro

@@ -1,18 +1,22 @@
 ---
-import AstroLink from "./AstroLink.astro";
-import { SITE_TITLE } from "../config";
+import AstroLink from './AstroLink.astro';
+
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
 ---
 
-<header class="blog-header" transition:name="blog-header">
-  <div class="blog-header__menu">
+<header class="blog-header">
+  <div class="blog-header__content">
     <AstroLink href="/blog/">
       <h2 class="site-title">
-        {SITE_TITLE}/blog/
+        {title}
       </h2>
     </AstroLink>
-    <nav class="nav">
-      <AstroLink href="/" class="nav__item">About</AstroLink>
-    </nav>
+    <p class="site-description">{description}</p>
   </div>
 </header>
 
@@ -23,48 +27,37 @@ import { SITE_TITLE } from "../config";
     margin: 0;
     padding: 8px 20px;
     background-color: #424242;
-    position: fixed;
     width: 100%;
-    z-index: 1;
 
-    &__menu {
+    &__content {
       margin: 0 auto;
       max-width: 900px;
       width: 100%;
-      display: flex;
-      align-items: center;
     }
 
     .site-title {
+      padding: 8px 0;
+      margin: 0;
+
       color: #fff;
       font-size: 20px;
       font-weight: bold;
-      padding: 16px;
-      margin: 0;
+      text-align: center;
 
       @include mx.sp {
         font-size: 18px;
-        padding: 16px 0;
       }
     }
-    .nav {
-      margin-left: auto;
-      .nav__item + .nav__item {
-        margin-left: 16px;
+    .site-description {
+      padding: 8px 0;
+      margin: 0;
 
-        @include mx.sp {
-          margin: 0px;
-        }
-      }
-      &__item {
-        color: #fff;
-        padding: 12px;
-        font-size: 18px;
-        font-weight: bold;
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
 
-        @include mx.sp {
-          padding: 12px;
-        }
+      @include mx.sp {
+        font-size: 12px;
       }
     }
   }

src/config.ts

@@ -2,4 +2,6 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 export const SITE_TITLE = "komura-c.page";
-export const SITE_DESCRIPTION = "komura-cのポートフォリオ、ブログサイトです。";
+export const SITE_DESCRIPTION = "komura-cのポートフォリオ";
+export const BLOG_SITE_TITLE = "komura-c.log";
+export const BLOG_SITE_DESCRIPTION = "komura-cのWeb技術、音、生活のメモの備忘ログ";

src/content/blog/website-update-astro-v3.md

@@ -45,7 +45,7 @@ Animationをカスタムしない場合は、ビルトインで`fade`と`slide`
 --
 import { fade } from "astro:transitions";
 --
-  <main class="main-container" transition:animate={fade({ duration: '0.5s' })}>
+  <main transition:animate={fade({ duration: '0.5s' })}>
 ```
 もうこれだけで、ページ遷移時に指定したViewTransitionのアニメーションが動いてくれます。
 ただ、ViewTransitionAPIの凄い所の1つは指定した要素をリッチに遷移させることができることです。

src/pages/blog.astro

@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import BlogHeader from "../components/BlogHeader.astro";
 import Footer from "../components/Footer.astro";
-import { SITE_TITLE } from "../config";
+import { BLOG_SITE_TITLE, BLOG_SITE_DESCRIPTION  } from "../config";
 import type { Article } from "../types/Article";
 import ExternalLinkIcon from "../assets/external-link.svg";
 import GoogleAnalytics from "../lib/GoogleAnalytics.astro";
@@ -31,9 +31,9 @@ allPosts.sort(
 );
 ---
 
-<Layout title={`${SITE_TITLE}/blog/`} description="komura-cのブログです。">
-  <BlogHeader />
-  <main class="main-container" transition:animate={fade({ duration: '0.5s' })}>
+<Layout title={BLOG_SITE_TITLE} description={BLOG_SITE_DESCRIPTION}>
+  <BlogHeader title={BLOG_SITE_TITLE} description={BLOG_SITE_DESCRIPTION} />
+  <main transition:animate={fade({ duration: '0.5s' })}>
     <section class="section">
       <ul>
         {
@@ -79,10 +79,6 @@ allPosts.sort(
 <style lang="scss">
   @use "../styles/mixins.scss" as mx;
 
-  .main-container{
-    // header分の余白
-    padding-top: 70px;
-  }
   .section {
     margin: 0 auto;
     max-width: 910px;

src/pages/blog/[...slug].astro

@@ -5,6 +5,8 @@ import Footer from "../../components/Footer.astro";
 import GoogleAnalytics from "../../lib/GoogleAnalytics.astro";
 import { getCollection } from "astro:content";
 import { slide } from "astro:transitions";
+import { BLOG_SITE_DESCRIPTION, BLOG_SITE_TITLE } from "../../config";
+import AstroLink from "../../components/AstroLink.astro";
 
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
@@ -23,8 +25,8 @@ const { Content } = await entry.render();
 ---
 
 <Layout title={title} description={description}>
-  <BlogHeader />
-  <main class="main-container" transition:animate={slide({ duration: '0.5s' })}>
+  <BlogHeader title={BLOG_SITE_TITLE} description={BLOG_SITE_DESCRIPTION} />
+  <main transition:animate={slide({ duration: '0.5s' })}>
     <article class="article">
       {heroImage && <img width={720} height={360} src={heroImage} alt="" />}
       <h1 class="title" transition:name={"blog-title-" + entry.slug}>{title}</h1>
@@ -58,6 +60,10 @@ const { Content } = await entry.render();
       }
       <hr />
       <Content />
+      <hr />
+      <AstroLink href="/blog/">
+        &gt; 一覧に戻る
+      </AstroLink>
     </article>
   </main>
   <Footer />
@@ -73,11 +79,6 @@ const { Content } = await entry.render();
     color: #333;
   }
 
-  .main-container{
-    // header分の余白
-    padding-top: 70px;
-  }
-
   h1,
   h2,
   h3,

src/pages/rss.xml.js → src/pages/blog/rss.xml.js

@@ -1,14 +1,14 @@
 import rss from "@astrojs/rss";
-import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
+import { BLOG_SITE_TITLE, BLOG_SITE_DESCRIPTION } from "../../config";
 import { getCollection } from "astro:content";
 
 export async function get() {
   const blogEntries = await getCollection("blog", ({ data }) => {
     return data.draft !== true;
   });
   return rss({
-    title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
+    title: BLOG_SITE_TITLE,
+    description: BLOG_SITE_DESCRIPTION,
     site: import.meta.env.SITE,
     items: blogEntries.map((entry) => ({
       title: entry.data.title,