From d1f2e9813f8b9970e8d478899c483b8058ae0dc8 Mon Sep 17 00:00:00 2001
From: ashcolor <ashcolor27@gmail.com>
Date: Tue, 15 Aug 2023 13:32:58 +0900
Subject: [PATCH 1/4] =?UTF-8?q?chg:=20=E6=96=87=E5=AD=97=E3=81=AE=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E3=83=A9=E3=82=B9=E3=83=88=E3=82=92=E4=B8=8A?=
 =?UTF-8?q?=E3=81=92=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/tailwind.css          | 6 ------
 components/content/PointList.vue | 2 +-
 components/parts/ArticleCard.vue | 8 ++++----
 pages/blog/[...slug].vue         | 2 +-
 pages/index.vue                  | 2 +-
 5 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 6e339e7..d69bbee 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -20,9 +20,3 @@ body {
 .marker {
     background: linear-gradient(transparent 60%, #ff6 60%);
 }
-
-.text-mute {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / 1);
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-}
diff --git a/components/content/PointList.vue b/components/content/PointList.vue
index 2f77620..22d06ce 100644
--- a/components/content/PointList.vue
+++ b/components/content/PointList.vue
@@ -18,7 +18,7 @@ const quotedListStyle = computed(() => {
 <template>
     <div class="my-8 border-2 px-4 py-8">
         <div v-if="props.title" class="mb-4 px-4">
-            <p class="text-mute text-sm">{{ props.title }}</p>
+            <p class="text-sm text-slate-500">{{ props.title }}</p>
         </div>
         <div class="px-4">
             <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
diff --git a/components/parts/ArticleCard.vue b/components/parts/ArticleCard.vue
index 2e04281..93085a1 100644
--- a/components/parts/ArticleCard.vue
+++ b/components/parts/ArticleCard.vue
@@ -30,19 +30,19 @@ const props = withDefaults(defineProps<Props>(), {
         <div class="card-body justify-center">
             <h2 class="card-title">{{ props.title }}</h2>
 
-            <div class="text-mute flex grow-0 flex-row items-center gap-1 text-sm">
+            <div class="flex grow-0 flex-row items-center gap-1 text-sm text-slate-500">
                 <Icon icon="bi:folder" />
                 <p>{{ props.category }}</p>
             </div>
-            <!-- <div class="flex flex-row items-center gap-1 text-sm text-mute">
+            <!-- <div class="flex flex-row items-center gap-1 text-sm text-slate-500">
                 <Icon icon="bi:tags" />
                 <div class="flex flex-row gap-2">
-                    <span v-for="tag in props.tags" :key="tag" class="badge text-mute">
+                    <span v-for="tag in props.tags" :key="tag" class="badge text-slate-500">
                         {{ tag }}
                     </span>
                 </div>
             </div> -->
-            <div class="text-mute flex flex-row items-center gap-2 text-sm">
+            <div class="flex flex-row items-center gap-2 text-sm text-slate-500">
                 <div v-if="props.createdAt" class="flex flex-row items-center gap-1">
                     <Icon icon="ph:clock"></Icon>
                     <span>{{ props.createdAt }}</span>
diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
index 6ac580b..9b1cec6 100644
--- a/pages/blog/[...slug].vue
+++ b/pages/blog/[...slug].vue
@@ -29,7 +29,7 @@ const navigations = computed(() => {
             <div class="mb-8">
                 <BreadCrumb :navigations="navigations"></BreadCrumb>
                 <ProseH1>{{ article.title }}</ProseH1>
-                <div class="text-mute flex flex-row items-center gap-2 text-sm">
+                <div class="flex flex-row items-center gap-2 text-sm text-slate-500">
                     <div v-if="article.createdAt" class="flex flex-row items-center gap-1">
                         <Icon icon="ph:clock"></Icon>
                         <span>{{ article.createdAt }}</span>
diff --git a/pages/index.vue b/pages/index.vue
index 3f9834d..6895f2c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,7 +20,7 @@ const listCategories = BLOG_CATEGORIES.filter((category) => category.isShowList)
 <template>
     <NuxtLayout>
         <ProseH1 class="my-4 text-center font-logo text-4xl">{{ BLOG_TITLE }}</ProseH1>
-        <div class="text-center font-logo text-slate-400">
+        <div class="text-center font-logo text-slate-500">
             <p>{{ BLOG_SUBTITLE }}</p>
         </div>
         <div

From f639e6701cfc86ce07ae1225243cfe81a79903dd Mon Sep 17 00:00:00 2001
From: ashcolor <ashcolor27@gmail.com>
Date: Tue, 15 Aug 2023 14:07:49 +0900
Subject: [PATCH 2/4] =?UTF-8?q?add:=20meta=E3=83=87=E3=83=BC=E3=82=BF?=
 =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.vue                   |  3 --
 pages/[...slug].vue       | 68 ++++++++++++++++++++++-----------------
 pages/blog/[...slug].vue  | 10 +++++-
 pages/blog/[category].vue |  8 +++++
 pages/index.vue           | 11 ++++++-
 pages/search.vue          |  5 +++
 6 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/app.vue b/app.vue
index d22121b..554a58a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 useHead({
-    titleTemplate: (titleChunk) => {
-        return titleChunk ? `${titleChunk} - ${BLOG_TITLE}` : `${BLOG_TITLE}`;
-    },
     htmlAttrs: { "data-theme": "mytheme" },
 });
 </script>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 77abd64..858b7c8 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,38 +1,48 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { BLOG_TITLE } from "@/utils/const";
+
+const route = useRoute();
+
+const article = await queryContent(route.path)
+    .findOne()
+    .catch(() => null);
+
+useSeoMeta({
+    title: `${article?.title} | ${BLOG_TITLE}`,
+    ogTitle: `${article?.title} | ${BLOG_TITLE}`,
+});
+</script>
 
 <template>
     <NuxtLayout>
-        <ProseH1 class="text-center">{{ BLOG_TITLE }}</ProseH1>
-
-        <ContentDoc>
-            <template #default="{ doc }">
-                <div class="mb-8">
-                    <ProseH1>{{ doc.title }}</ProseH1>
-                    <p class="text-sm font-light">{{ doc.createdAt }}</p>
-                </div>
-                <div class="grid grid-cols-12">
-                    <div class="col-span-12 flex flex-col gap-4 lg:col-span-8">
-                        <div v-if="doc.thumbnail" class="mx-auto mb-8">
-                            <img :src="doc.thumbnail" />
-                        </div>
-                        <div class="col-span-4 mb-8 block lg:hidden">
-                            <PageToc></PageToc>
-                        </div>
-                        <ContentRenderer :value="doc" />
+        <div v-if="article">
+            <ProseH1 class="text-center">{{ BLOG_TITLE }}</ProseH1>
+            <div class="mb-8">
+                <ProseH1>{{ article.title }}</ProseH1>
+                <p class="text-sm font-light">{{ article.createdAt }}</p>
+            </div>
+            <div class="grid grid-cols-12">
+                <div class="col-span-12 flex flex-col gap-4 lg:col-span-8">
+                    <div v-if="article.thumbnail" class="mx-auto mb-8">
+                        <img :src="article.thumbnail" />
                     </div>
-                    <div class="col-span-4 hidden px-4 lg:block">
-                        <div class="sticky top-24 flex flex-col">
-                            <PageToc></PageToc>
-                        </div>
+                    <div class="col-span-4 mb-8 block lg:hidden">
+                        <PageToc></PageToc>
                     </div>
+                    <ContentRenderer :value="article" />
                 </div>
-            </template>
-            <template #not-found>
-                <div class="flex flex-col gap-4">
-                    <h1 class="text-xl">お探しのページが見つかりませんでした</h1>
-                    <ProseA to="/">TOPへ</ProseA>
+                <div class="col-span-4 hidden px-4 lg:block">
+                    <div class="sticky top-24 flex flex-col">
+                        <PageToc></PageToc>
+                    </div>
                 </div>
-            </template>
-        </ContentDoc>
+            </div>
+        </div>
+        <div v-else class="flex flex-col gap-4">
+            <div class="flex flex-col gap-4">
+                <h1 class="text-xl">お探しのページが見つかりませんでした</h1>
+                <ProseA to="/">TOPへ</ProseA>
+            </div>
+        </div>
     </NuxtLayout>
 </template>
diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
index 9b1cec6..42303ac 100644
--- a/pages/blog/[...slug].vue
+++ b/pages/blog/[...slug].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue";
-import { BLOG_CATEGORIES } from "@/utils/const";
+import { BLOG_TITLE, BLOG_CATEGORIES } from "@/utils/const";
 
 const route = useRoute();
 
@@ -8,6 +8,14 @@ const article = await queryContent(route.path)
     .findOne()
     .catch(() => null);
 
+useSeoMeta({
+    title: `${article?.title} | ${BLOG_TITLE}`,
+    ogTitle: `${article?.title} | ${BLOG_TITLE}`,
+    description: article?.description,
+    ogDescription: article?.description,
+    ogImage: article?.thumbnail,
+});
+
 const navigations = computed(() => {
     return [
         {
diff --git a/pages/blog/[category].vue b/pages/blog/[category].vue
index cea3374..c002a6f 100644
--- a/pages/blog/[category].vue
+++ b/pages/blog/[category].vue
@@ -6,6 +6,14 @@ const category = typeof route.params.category === "string" ? route.params.catego
 const categoryName = BLOG_CATEGORY_MAP.get(category);
 const categoryThumbnail = BLOG_CATEGORIES.find((c) => c.key === category)?.thumbnail;
 
+useSeoMeta({
+    title: `${categoryName} | ${BLOG_TITLE}`,
+    ogTitle: `${categoryName} | ${BLOG_TITLE}`,
+    description: BLOG_SUBTITLE,
+    ogDescription: BLOG_SUBTITLE,
+    ogImage: categoryThumbnail,
+});
+
 const articleTags = await queryContent(`/blog/${category}`).only("tags").find();
 const tags = articleTags.map((article) => article.tags).flat();
 const tagCounts = new Map();
diff --git a/pages/index.vue b/pages/index.vue
index 6895f2c..ff943bb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue";
-import { BLOG_TITLE } from "@/utils/const";
+import { BLOG_TITLE, BLOG_SUBTITLE } from "@/utils/const";
+
+useSeoMeta({
+    title: `${BLOG_TITLE} | ${BLOG_SUBTITLE}`,
+    ogTitle: `${BLOG_TITLE} | ${BLOG_SUBTITLE}`,
+    description: BLOG_SUBTITLE,
+    ogDescription: BLOG_SUBTITLE,
+    ogImage:
+        "https://ashcolor-blog.s3.ap-northeast-1.amazonaws.com/img/blog/gadget/desk-tour/overall.jpg",
+});
 
 const articleTags = await queryContent("/blog").only("tags").find();
 const tags = articleTags.map((article) => article.tags).flat();
diff --git a/pages/search.vue b/pages/search.vue
index 208f782..7e287f9 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+useSeoMeta({
+    title: `記事検索 | ${BLOG_TITLE}`,
+    ogTitle: `記事検索 | ${BLOG_TITLE}`,
+});
+
 const navigations = computed(() => {
     return [
         {

From b1810a4f8c415e571b233f8758adf1559c3868c7 Mon Sep 17 00:00:00 2001
From: ashcolor <ashcolor27@gmail.com>
Date: Tue, 15 Aug 2023 14:12:11 +0900
Subject: [PATCH 3/4] =?UTF-8?q?chg:=20=E3=82=BF=E3=83=83=E3=83=97=E3=82=BF?=
 =?UTF-8?q?=E3=83=BC=E3=82=B2=E3=83=83=E3=83=88=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index ff943bb..8d8cb66 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -98,7 +98,7 @@ const listCategories = BLOG_CATEGORIES.filter((category) => category.isShowList)
                         <button class="join-item btn">Search</button>
                     </div>
                     <ProseH4>タグから探す</ProseH4>
-                    <div class="flex flex-row flex-wrap gap-2 border p-4">
+                    <div class="flex flex-row flex-wrap gap-3 border p-4 text-slate-500">
                         <NuxtLink
                             v-for="tagCount in tagCounts"
                             :key="tagCount[0]"

From 0276bb0b0375bc227b5944d77d599cd261a1b235 Mon Sep 17 00:00:00 2001
From: ashcolor <ashcolor27@gmail.com>
Date: Tue, 15 Aug 2023 14:17:53 +0900
Subject: [PATCH 4/4] =?UTF-8?q?chg:=20=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/{[...slug].vue => [content].vue} |  0
 pages/blog/[category].vue              |  4 ++--
 pages/index.vue                        | 13 ++++++-------
 3 files changed, 8 insertions(+), 9 deletions(-)
 rename pages/{[...slug].vue => [content].vue} (100%)

diff --git a/pages/[...slug].vue b/pages/[content].vue
similarity index 100%
rename from pages/[...slug].vue
rename to pages/[content].vue
diff --git a/pages/blog/[category].vue b/pages/blog/[category].vue
index c002a6f..2969d5e 100644
--- a/pages/blog/[category].vue
+++ b/pages/blog/[category].vue
@@ -48,13 +48,13 @@ const navigations = computed(() => {
             <div class="hero-overlay opacity-60"></div>
             <div class="hero-content text-center text-neutral-content"></div>
         </div>
-        <ProseH3>オススメ記事</ProseH3>
+        <ProseH2>オススメ記事</ProseH2>
         <div class="flex flex-col">
             <div class="my-8">
                 <TopRecommendArticles :category="categoryName"></TopRecommendArticles>
             </div>
         </div>
-        <ProseH3>新着記事</ProseH3>
+        <ProseH2>新着記事</ProseH2>
         <div class="flex flex-col">
             <div class="my-8">
                 <TopRecentArticles :category="categoryName"></TopRecentArticles>
diff --git a/pages/index.vue b/pages/index.vue
index 8d8cb66..1ea2872 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -43,13 +43,13 @@ const listCategories = BLOG_CATEGORIES.filter((category) => category.isShowList)
                 </div>
             </div>
         </div>
-        <ProseH3>オススメ記事</ProseH3>
+        <ProseH2>オススメ記事</ProseH2>
         <div class="flex flex-col">
             <div class="my-8">
                 <TopRecommendArticles></TopRecommendArticles>
             </div>
         </div>
-        <ProseH3>新着記事</ProseH3>
+        <ProseH2>新着記事</ProseH2>
         <div class="flex flex-col">
             <div class="my-8">
                 <TopRecentArticles></TopRecentArticles>
@@ -58,11 +58,10 @@ const listCategories = BLOG_CATEGORIES.filter((category) => category.isShowList)
                 >もっと見る
             </NuxtLink>
         </div>
-        <ProseH3>記事を探す</ProseH3>
-
+        <ProseH2>記事を探す</ProseH2>
         <div class="flex flex-col xl:flex-row">
             <div class="shrink-0 basis-1/2">
-                <ProseH4>カテゴリーから探す</ProseH4>
+                <ProseH3>カテゴリーから探す</ProseH3>
                 <div class="flex flex-row flex-wrap justify-evenly gap-2">
                     <NuxtLink
                         v-for="category in listCategories"
@@ -86,7 +85,7 @@ const listCategories = BLOG_CATEGORIES.filter((category) => category.isShowList)
             </div>
             <div class="shrink-0 basis-1/2">
                 <div>
-                    <ProseH4>ワード検索</ProseH4>
+                    <ProseH3>ワード検索</ProseH3>
                     <div class="join w-full">
                         <div class="join-item btn pointer-events-none cursor-default">
                             <Icon icon="bi:search"></Icon>
@@ -97,7 +96,7 @@ const listCategories = BLOG_CATEGORIES.filter((category) => category.isShowList)
                         />
                         <button class="join-item btn">Search</button>
                     </div>
-                    <ProseH4>タグから探す</ProseH4>
+                    <ProseH3>タグから探す</ProseH3>
                     <div class="flex flex-row flex-wrap gap-3 border p-4 text-slate-500">
                         <NuxtLink
                             v-for="tagCount in tagCounts"