Merge pull request #8 from ashcolor/develop

seo
ashcolor · Aug 15, 2023 · fede04e · fede04e
2 parents 1b05be3 + 0276bb0
commit fede04e
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 66 deletions.
diff --git 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/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
@@ -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
@@ -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/[...slug].vue b/pages/[...slug].vue
diff --git a/pages/[content].vue b/pages/[content].vue
@@ -0,0 +1,48 @@
+<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>
+        <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 mb-8 block lg:hidden">
+                        <PageToc></PageToc>
+                    </div>
+                    <ContentRenderer :value="article" />
+                </div>
+                <div class="col-span-4 hidden px-4 lg:block">
+                    <div class="sticky top-24 flex flex-col">
+                        <PageToc></PageToc>
+                    </div>
+                </div>
+            </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
@@ -1,13 +1,21 @@
 <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();
 
 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 [
         {
@@ -29,7 +37,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/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();
@@ -40,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
@@ -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();
@@ -20,7 +29,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
@@ -34,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>
@@ -49,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"
@@ -77,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>
@@ -88,8 +96,8 @@ 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">
+                    <ProseH3>タグから探す</ProseH3>
+                    <div class="flex flex-row flex-wrap gap-3 border p-4 text-slate-500">
                         <NuxtLink
                             v-for="tagCount in tagCounts"
                             :key="tagCount[0]"

diff --git 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 [
         {