Merge pull request #25 from ashcolor/develop

deploy
ashcolor · Aug 26, 2023 · 86798be · 86798be
2 parents 32c8887 + 9ee18b5
commit 86798be
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 30 deletions.
diff --git a/components/pages/Top/RecentArticles.vue b/components/pages/Top/RecentArticles.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-    category: string;
+    category?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -31,7 +31,7 @@ const articles = await query.find();
             :link-path="article._path"
             :thumbnail="article.thumbnail"
             :title="article.title"
-            :category="article.category"
+            :category="article?.category"
             :tags="article.tags"
             :created-at="article.createdAt"
             :updated-at="article.updatedAt"

diff --git a/components/pages/Top/RecommendArticles.vue b/components/pages/Top/RecommendArticles.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-    category: string;
+    category?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {

diff --git a/components/pages/common/Footer.vue b/components/pages/common/Footer.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue";
+import { BLOG_CATEGORIES } from "@/utils/const";
+
+const showCategories = BLOG_CATEGORIES.filter((category) => category.isShowList);
 </script>
 
 <template>
     <footer class="footer justify-evenly bg-base-200 p-10 text-base-content">
         <div class="flex w-full flex-col gap-4">
             <span class="footer-title">BLOG</span>
             <NuxtLink
-                v-for="category in BLOG_CATEGORIES"
+                v-for="category in showCategories"
                 :key="category.name"
                 :to="category.path"
                 class="link-hover link"

diff --git a/components/parts/PageToc.vue b/components/parts/PageToc.vue
@@ -2,7 +2,7 @@
 import { Icon } from "@iconify/vue";
 
 const route = useRoute();
-const { data: article } = await useAsyncData("hello", () => queryContent(route.path).findOne());
+const { data: article } = await useAsyncData(() => queryContent(route.path).findOne());
 
 const links = article.value?.body.toc?.links;
 

diff --git a/components/parts/SnsShareContainer.vue b/components/parts/SnsShareContainer.vue
@@ -10,7 +10,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const encodedTitle = computed(() => encodeURIComponent(props.title));
-const url = computed(() => new URL(props.url));
+const isValidUrl = computed(() => Util.isValidUrl(props.url));
+const url = computed(() => (isValidUrl.value ? new URL(props.url) : ""));
 const encodedHref = computed(() => encodeURIComponent(url.value.href));
 const encodedHostPath = computed(() =>
     encodeURIComponent(`${url.value.host}${url.value.pathname}`)

diff --git a/content/blog/programming/0.nuxt-blog.md b/content/blog/programming/0.nuxt-blog.md
@@ -175,13 +175,8 @@ daisyUIでは2つのクラスを付けるだけで簡単に実装することが
 
 最初は**AWS Amplify Hosting**にホスティングしていました。
 
-しかし、NuxtJSのオプションで[SSRをオフ]{.marker}にすると
-
-- マークダウンを編集中にホットリロードが効かない
-- Google Search Consoleがsitemap.xmlを認識しない
-
-というトラブルが発生しました。
-どちらも原因を調べてはみたのですが、解決策がはっきりしなかったため、[SSRモードで動かせるようにNode環境にデプロイ]{.marker}しました。
+しかし、NuxtJSのオプションで[SSRをオフ]{.marker}にすると[Google Search Consoleがsitemap.xmlを認識しない]{.marker}というトラブルが発生しました。
+原因を調べてはみたのですが、解決策がはっきりしなかったため、[SSRモードで動かせるようにNode環境にデプロイ]{.marker}しました。
 
 既に他のプロジェクトでもVercelは使っており、[設定の手間がほぼなくデプロイできる]{.marker}のも魅力です。
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -35,7 +35,6 @@ export default defineNuxtConfig({
 
     content: {
         // https://content.nuxtjs.org/api/configuration
-        documentDriven: true,
         markdown: {
             remarkPlugins: ["remark-breaks"],
         },

diff --git a/pages/[content].vue b/pages/[content].vue
@@ -3,7 +3,7 @@ import { BLOG_TITLE } from "@/utils/const";
 
 const route = useRoute();
 
-const { data: article } = await useAsyncData("hello", () => queryContent(route.path).findOne());
+const { data: article } = await useAsyncData(() => queryContent(route.path).findOne());
 
 useSeoMeta({
     title: `${article.value?.title} | ${BLOG_TITLE}`,

diff --git a/pages/_story/index.vue b/pages/_story/index.vue
@@ -9,7 +9,7 @@ if (import.meta.env.PROD) {
 
 const route = useRoute();
 
-const { data: article } = await useAsyncData("article", () => queryContent(route.path).findOne());
+const { data: article } = await useAsyncData(() => queryContent(route.path).findOne());
 
 const links = article.value?.body.toc?.links;
 </script>

diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
@@ -4,18 +4,18 @@ import { BLOG_TITLE, BLOG_CATEGORIES } from "@/utils/const";
 
 const route = useRoute();
 
-const { data: article } = await useAsyncData("hello", () => queryContent(route.path).findOne());
+const { data: article } = await useAsyncData(() => queryContent(route.path).findOne());
 
-const title = `${article.value?.title} | ${BLOG_TITLE}`;
-const url = `${import.meta.env.VITE_NUXT_PUBLIC_SITE_URL}${article.value?._path}`;
+const title = computed(() => `${article.value?.title} | ${BLOG_TITLE}`);
+const url = computed(() => `${import.meta.env.VITE_NUXT_PUBLIC_SITE_URL}${article.value?._path}`);
 
 useSeoMeta({
-    title,
-    ogTitle: `${article.value?.title} | ${BLOG_TITLE}`,
+    title: title.value,
+    ogTitle: title.value,
     description: article.value?.description,
     ogDescription: article.value?.description,
     ogImage: article.value?.thumbnail,
-    ogUrl: url,
+    ogUrl: url.value,
     ogType: "article",
     ogSiteName: BLOG_TITLE,
     twitterCard: "summary_large_image",
@@ -41,17 +41,17 @@ const navigations = computed(() => {
         <div v-if="article">
             <div class="mb-8">
                 <BreadCrumb :navigations="navigations"></BreadCrumb>
-                <ProseH1>{{ article.title }}</ProseH1>
+                <ProseH1>{{ article?.title }}</ProseH1>
                 <div class="flex flex-row items-center gap-2 text-sm text-slate-500">
-                    <IconWithText v-if="article.createdAt" icon="ph:clock">
-                        {{ article.createdAt }}
+                    <IconWithText v-if="article?.createdAt" icon="ph:clock">
+                        {{ article?.createdAt }}
                     </IconWithText>
-                    <IconWithText v-if="article.updatedAt" icon="ph:clock-clockwise">
-                        {{ article.updatedAt }}
+                    <IconWithText v-if="article?.updatedAt" icon="ph:clock-clockwise">
+                        {{ article?.updatedAt }}
                     </IconWithText>
                     <div class="flex flex-row gap-1">
                         <NuxtLink
-                            v-for="tag in article.tags"
+                            v-for="tag in article?.tags"
                             :key="tag"
                             :to="`/search?word=${tag}`"
                             class="badge badge-sm gap-1"
@@ -65,10 +65,10 @@ const navigations = computed(() => {
             <div class="grid grid-cols-12">
                 <div class="col-span-12 flex flex-col gap-4 lg:col-span-8">
                     <div class="mx-auto mb-8">
-                        <img :src="article.thumbnail" />
+                        <img :src="article?.thumbnail" />
                     </div>
                     <div class="col-span-4 mb-8 block lg:hidden">
-                        <!-- <PageToc></PageToc> -->
+                        <PageToc></PageToc>
                     </div>
                     <ContentRenderer :value="article" />
                     <div class="divider"></div>

diff --git a/utils/util.ts b/utils/util.ts
@@ -2,4 +2,14 @@ export class Util {
     static kebabToCamelCase = (kebabCase: string): string => {
         return kebabCase.replace(/-([a-z])/g, (_, match) => match.toUpperCase());
     };
+
+    static isValidUrl(url: string): boolean {
+        try {
+            // eslint-disable-next-line no-new
+            new URL(url);
+            return true;
+        } catch (err) {
+            return false;
+        }
+    }
 }