Update to Nuxt 3.14 and Replace npm with pnpm (#72)

Signed-off-by: nurRiyad <[email protected]>

.github/workflows/build.yml

@@ -14,21 +14,26 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Check Code
+      - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+
+      - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: 22
+          cache: 'pnpm'
 
-      - name: Install dependency
-        run: npm ci
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Check Linting
-        run: npm run lint
+        run: pnpm run lint
 
+      - name: Check Format
+        run: pnpm run format
 
       - name: Playgourd build check
-        run: npm run build
+        run: pnpm run build

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 100
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

LICENSE.md

@@ -17,4 +17,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -12,9 +12,10 @@
     <img width="200" src="./assets/images/logo.png">
 </p>
 
- Nuxt Blog built with [Nuxt3](https://nuxt.com), [Nuxt-Content2](https://content.nuxtjs.org/blog/announcing-v2/), [Vue3](https://vuejs.org) & [TailwindCss](https://tailwindcss.com/)
+Nuxt Blog built with [Nuxt3](https://nuxt.com), [Nuxt-Content2](https://content.nuxtjs.org/blog/announcing-v2/), [Vue3](https://vuejs.org) & [TailwindCss](https://tailwindcss.com/)
 
 ## Features
+
 - Write blog with markdown file
 - Auto generate category from blog post
 - Blog list page with search and pagination
@@ -25,8 +26,8 @@
 - Dark and light mode
 - Server Side Rendered(SSR) with Nuxt3
 
-
 ## How to Make This Blog Template Yours in 5 Minutes
+
 - Clone this repo or use it as a template
 - Go to ./data/index.ts file & add your personal info
 - Then head over to the ./content/blogs folder to add new blogs

app.vue

@@ -10,7 +10,7 @@ useHead({
 </script>
 
 <template>
-  <div class="bg-[#F1F2F4] dark:text-zinc-300   dark:bg-slate-950">
+  <div class="bg-[#F1F2F4] dark:text-zinc-300 dark:bg-slate-950">
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />
@@ -39,7 +39,7 @@ useHead({
   filter: blur(1rem);
 }
 
-html.dark{
+html.dark {
   color-scheme: dark;
 }
 </style>

assets/css/tailwind.css

@@ -1,4 +1,3 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

components/OgImage/About.vue

@@ -1,10 +1,4 @@
 <script lang="ts" setup>
-/**
- * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
- */
-import { computed } from 'vue'
-
 interface Props {
   title?: string
   description?: string
@@ -33,7 +27,10 @@ const title = computed(() => props.title.slice(0, 60))
       xmlns="http://www.w3.org/2000/svg"
     >
       <g filter="url(#filter0_f_199_94966)">
-        <path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
       </g>
       <defs>
         <filter
@@ -65,7 +62,7 @@ const title = computed(() => props.title.slice(0, 60))
     </div>
 
     <div v-if="link" class="absolute top-[200px] right-[200px]">
-      <img :src="link" :alt="title" class="w-52 h-52 rounded-full object-cover">
+      <img :src="link" :alt="title" class="w-52 h-52 rounded-full object-cover" />
     </div>
   </div>
 </template>

components/OgImage/Test.vue

@@ -1,10 +1,4 @@
 <script lang="ts" setup>
-/**
- * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
- */
-import { computed } from 'vue'
-
 interface Props {
   title?: string
   description?: string
@@ -19,11 +13,14 @@ const props = withDefaults(defineProps<Props>(), {
   link: '',
 })
 
-const formattedTitle = computed(() => props.title.length > 70 ? `${props.title.slice(0, 60)}...` : props.title)
-const formattedDescription = computed(() => props.description.length > 100 ? `${props.description}...` : props.description)
+const formattedTitle = computed(() =>
+  props.title.length > 70 ? `${props.title.slice(0, 60)}...` : props.title,
+)
+const formattedDescription = computed(() =>
+  props.description.length > 100 ? `${props.description}...` : props.description,
+)
 const formattedLink = computed(() => {
-  if (props.link.endsWith('jpg') || props.link.endsWith('png'))
-    return props.link
+  if (props.link.endsWith('jpg') || props.link.endsWith('png')) return props.link
   else return '/blogs-img/blog.jpg'
 })
 </script>
@@ -39,7 +36,10 @@ const formattedLink = computed(() => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <g filter="url(#filter0_f_199_94966)">
-        <path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
       </g>
       <defs>
         <filter
@@ -71,7 +71,7 @@ const formattedLink = computed(() => {
     </div>
 
     <div v-if="formattedLink" class="absolute top-[200px] right-[70px]">
-      <img :src="formattedLink" :alt="title" class="w-96 h-52 rounded-lg object-cover">
+      <img :src="formattedLink" :alt="title" class="w-96 h-52 rounded-lg object-cover" />
     </div>
   </div>
 </template>

components/archive/card.vue

@@ -25,7 +25,9 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border dark:border-gray-800  m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300  ">
+  <article
+    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300"
+  >
     <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
       <div class="sm:col-span-3">
         <NuxtImg
@@ -36,20 +38,26 @@ withDefaults(defineProps<Props>(), {
         />
       </div>
       <div class="sm:col-span-7 p-5">
-        <h2 class="text-xl font-semibold text-black dark:text-zinc-300   pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
+        <h2
+          class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
+        >
           {{ title }}
         </h2>
         <p class="text-ellipsis line-clamp-2">
           {{ description }}
         </p>
-        <div class="text-black dark:text-zinc-300   text-sm mt-2 mb-1 md:flex md:space-x-6">
+        <div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
           <div class="flex items-center">
             <LogoDate />
-            <p> {{ date }}</p>
+            <p>{{ date }}</p>
           </div>
           <div class="flex items-center gap-1 flex-wrap">
             <LogoTag />
-            <p v-for="tag in tags" :key="tag" class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">
+            <p
+              v-for="tag in tags"
+              :key="tag"
+              class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold"
+            >
               {{ tag }}
             </p>
           </div>

components/archive/hero.vue

@@ -6,7 +6,9 @@ import { blogsPage } from '~/data'
   <div class="container mx-auto mb-5">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
-        <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
           {{ blogsPage.title }}
         </h1>
         <p class="dark:text-zinc-300">

components/blog/Header.vue

@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {
   alt: 'no-img',
   description: 'no description',
   date: 'no-date',
-  tags: () => ([]),
+  tags: () => [],
 })
 </script>
 
@@ -29,7 +29,9 @@ withDefaults(defineProps<Props>(), {
       width="600"
       class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
     />
-    <p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400">
+    <p
+      class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400"
+    >
       {{ description }}
     </p>
     <div class="flex w-full justify-center text-xs md:text-base my-8">
@@ -41,7 +43,9 @@ withDefaults(defineProps<Props>(), {
         <div class="flex items-center gap-2 flex-wrap my-5">
           <LogoTag />
           <template v-for="tag in tags" :key="tag">
-            <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
+            <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{
+              tag
+            }}</span>
           </template>
         </div>
       </div>

components/blog/Toc.vue

@@ -6,13 +6,13 @@ const links = articles?.body?.toc?.links || []
 </script>
 
 <template>
-  <div class="lg:col-span-3 sticky top-28 h-96  hidden lg:block  justify-self-end">
+  <div class="lg:col-span-3 sticky top-28 h-96 hidden lg:block justify-self-end">
     <div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px] dark:bg-slate-900">
-      <h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">
-        Table Of Content
-      </h1>
+      <h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">Table Of Content</h1>
       <NuxtLink
-        v-for="link in links" :key="link.id" :to="`#${link.id}`"
+        v-for="link in links"
+        :key="link.id"
+        :to="`#${link.id}`"
         class="block text-xs mb-3 hover:underline"
       >
         {{ link.text }}

components/blog/card.vue

@@ -25,7 +25,9 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border dark:border-gray-800  m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300  ">
+  <article
+    class="group border dark:border-gray-800 m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300"
+  >
     <NuxtLink :to="path">
       <NuxtImg
         class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
@@ -34,19 +36,23 @@ withDefaults(defineProps<Props>(), {
         :alt="alt"
       />
       <div class="px-3 pb-4">
-        <div class="text-black dark:text-zinc-300    pt-3 pb-2">
+        <div class="text-black dark:text-zinc-300 pt-3 pb-2">
           <div class="flex items-center">
             <LogoDate />
             {{ date }}
           </div>
           <div class="flex items-center gap-1 flex-wrap">
             <LogoTag />
             <template v-for="tag in tags" :key="tag">
-              <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
+              <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{
+                tag
+              }}</span>
             </template>
           </div>
         </div>
-        <h2 class="text-xl font-semibold  text-black dark:text-zinc-300   pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
+        <h2
+          class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
+        >
           {{ title }}
         </h2>
         <p class="text-ellipsis line-clamp-2 text-base">

components/blog/empty.vue

@@ -1,13 +1,17 @@
 <template>
-  <article class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
+  <article
+    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700"
+  >
     <NuxtLink to="/">
       <div
         class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500"
       >
         <LogoConfused />
       </div>
       <div class="p-5">
-        <h2 class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
+        <h2
+          class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
+        >
           No Post Available
         </h2>
 

components/category/card.vue

@@ -35,8 +35,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <template>
   <div
-    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline
-    rand-bg-color hover:scale-[1.05] transition-all duration-500"
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500"
   >
     <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
       <h1>#{{ title }}({{ count }})</h1>

components/category/hero.vue

@@ -6,7 +6,9 @@ import { categoryPage } from '~/data'
   <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
-        <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
           {{ categoryPage.title }}
         </h1>
         <p class="dark:text-zinc-300">

components/category/topic.vue

@@ -8,8 +8,7 @@ const category = computed(() => {
   const name = route.params.category || ''
   let strName = ''
 
-  if (Array.isArray(name))
-    strName = name.at(0) || ''
+  if (Array.isArray(name)) strName = name.at(0) || ''
   else strName = name
   return makeFirstCharUpper(strName)
 })