Merge pull request #24 from ashcolor/develop

deploy

components/content/LinkCard.vue

@@ -10,36 +10,33 @@ const props = withDefaults(defineProps<Props>(), {
 const params = { url: props.url };
 const query = new URLSearchParams(params);
 
-let data: Object | null = null;
-
-try {
+const { state } = useAsyncState(async () => {
     const response = await fetch(`${import.meta.env.VITE_NUXT_PUBLIC_SITE_URL}/api/ogp?${query}`);
-
     if (response.ok) {
-        data = await response?.json();
+        return await response?.json();
     }
-} catch (error) {}
+}, null);
 </script>
 
 <template>
-    <div v-if="!data">
+    <div v-if="!state">
         <NuxtLink :href="props.url" target="_blank"></NuxtLink>
     </div>
     <NuxtLink
         v-else
-        :href="data?.ogUrl ?? data?.requestUrl"
+        :href="state?.ogUrl ?? state?.requestUrl"
         target="_blank"
         class="card card-side card-compact my-2 max-h-[8rem] border bg-base-100"
     >
         <div class="card-body justify-between">
             <div class="flex flex-col gap-2">
-                <p>{{ data?.ogTitle }}</p>
-                <p class="line-clamp-2 text-xs text-slate-500">{{ data?.ogDescription }}</p>
+                <p>{{ state?.ogTitle }}</p>
+                <p class="line-clamp-2 text-xs text-slate-500">{{ state?.ogDescription }}</p>
             </div>
-            <p class="grow-0 text-xs">{{ data?.ogUrl ?? data?.requestUrl }}</p>
+            <p class="grow-0 text-xs">{{ state?.ogUrl ?? state?.requestUrl }}</p>
         </div>
-        <figure v-show="!data?.ogImage" class="!hidden w-56 shrink-0 sm:!flex">
-            <img :src="data?.ogImage[0]?.url" :alt="data?.ogTitle" />
+        <figure v-show="!state?.ogImage" class="!hidden w-56 shrink-0 sm:!flex">
+            <img :src="state?.ogImage[0]?.url" :alt="state?.ogTitle" />
         </figure>
     </NuxtLink>
 </template>

content/blog/programming/0.nuxt-blog.md

@@ -17,7 +17,7 @@ isRecommend: true
 
 はじめまして、[職業はシステムエンジニア、趣味はDTM]{.marker}の**あっしゅからー**と申します。
 
-今回はNuxt Contentを使ってブログを作成してみたので、使用したライブラリやNuxtJSでブログを作成するメリット等をまとめました。
+今回はNuxtJSを使ってブログを作成してみたので、使用したライブラリやNuxtJSでブログを作成するメリット等をまとめました。
 
 ::point-list{title="この記事の要約"}
 
@@ -33,8 +33,6 @@ isRecommend: true
 
 :link-card{url="https://blog.ashcolor.jp/"}
 
-<!-- :link-card{url="https://local"} -->
-
 ソースコードはGitHubに公開しています。
 
 :link-card{url="https://github.com/ashcolor/ashcolor-blog"}
@@ -267,3 +265,11 @@ NuxtJSでしっかりとしたブログを作成するためには、[自前で
 APIはバックエンドが必要となるため、Nodeが動作する環境でデプロイするか、他の言語で開発する必要があります。
 
 正直、[コメント機能が必須なブログを作成するのであればWordPressを選択してしまった方が圧倒的に楽]{.marker}です。
+
+## まとめ
+
+今回はNuxtJSでブログを作成してみた際の技術スタックとメリット等をまとめてみました。
+
+NuxtJSでのブログ作成はWordPressでのブログ作成とは、[ライティング方法から記事の公開方法まであらゆる点が異なります]{.marker}。
+
+どちらの方法もメリット・デメリットがあるため、どちらの方がうまく運用できるか考えながら選択するのがよさそうです。

content/blog/programming/1.chat-scroll.md

@@ -2,7 +2,7 @@
 createdAt: "2023/08/01"
 updatedAt: ""
 title: "【TypeScript/Vue.js】チャットUIによくあるメッセージ送受信時にスクロール位置を最下部に維持する処理を実装する"
-description: ""
+description: "チャットUIによくあるメッセージ送受信時にスクロール位置を最下部に維持する処理を実装する方法を解説します。"
 category: "プログラミング"
 tags:
     - "JavaScript"