Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated

* Temporary fix (maybe) of the Inline Code

* Update nuxt to version 4

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://blog.nurriyad.com" target="_blank">
-    <img  src="./assets/images/dark.png">
+    <img  src="./app/assets/images/dark.png">
   </a>
 </p>
 
@@ -9,10 +9,10 @@
 ### Built with
 
 <p align="center">
-    <img width="200" src="./assets/images/logo.png">
+    <img width="200" src="./app/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 [Nuxt4](https://nuxt.com), [Nuxt-Content3](https://content.nuxt.com/), [Vue3](https://vuejs.org) & [TailwindCss](https://tailwindcss.com/)
 
 ## Features
 
@@ -24,24 +24,24 @@ Nuxt Blog built with [Nuxt3](https://nuxt.com), [Nuxt-Content2](https://content.
 - Auto generate Sitemap
 - Url preview with Nuxt ogImage
 - Dark and light mode
-- Server Side Rendered(SSR) with Nuxt3
+- Server Side Rendered(SSR) with Nuxt4
 - RSS feed
 
 ## 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
+- Go to `./app/data/index.ts` file & add your personal info
-- Then head over to the ./content/blogs folder to add new blogs
+- Then head over to the `./content/blogs` folder to add new blogs
 - Voilà! You've got a personalized blog site!
 
 ## Preview
 
 <p align="center">
   <a href="https://blog.nurriyad.com" target="_blank">
-    <img width="1090" src="./assets/images/preview1.png">
+    <img width="1090" src="./app/assets/images/preview1.png">
-    <img width="1090" src="./assets/images/preview2.png">
+    <img width="1090" src="./app/assets/images/preview2.png">
-    <img width="1090" src="./assets/images/preview3.png">
+    <img width="1090" src="./app/assets/images/preview3.png">
-    <img width="1090" src="./assets/images/preview4.png">
+    <img width="1090" src="./app/assets/images/preview4.png">
     <br>
     Live Demo
   </a>
@@ -55,7 +55,7 @@ https://blog.nurriyad.com
 
 ## Build Setup
 
-**Requires Node.js 16+**
+**Requires Node.js 20.19+**
 
 ```bash
 # install dependencies
@@ -68,6 +68,6 @@ yarn run dev
 yarn run build
 
 # serve in production mode
-yarn run  preview
+yarn run preview
 
 ```

app/components/archive/card.vue

@@ -48,7 +48,7 @@ withDefaults(defineProps<Props>(), {
         </p>
         <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 />
+            <LogoDate class="-translate-y-[10%]" />
             <p>{{ date }}</p>
           </div>
           <div class="flex items-center gap-1 flex-wrap">

app/components/blog/card.vue

@@ -38,7 +38,7 @@ withDefaults(defineProps<Props>(), {
       <div class="px-3 pb-4">
         <div class="text-black dark:text-zinc-300 pt-3 pb-2">
           <div class="flex items-center">
-            <LogoDate />
+            <LogoDate class="-translate-y-[10%]" />
             {{ date }}
           </div>
           <div class="flex items-center gap-1 flex-wrap">

app/components/footer/developer.vue

@@ -17,7 +17,7 @@ import { footerData, socialLinks } from '~/data'
         class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="Github"
       >
-        <Icon name="fa:github" size="1em" />
+        <Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
       </NuxtLink>
       <NuxtLink
         :to="socialLinks.linkedinLink"
@@ -25,7 +25,7 @@ import { footerData, socialLinks } from '~/data'
         class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="LinkedIn"
       >
-        <Icon name="fa:linkedin-square" size="1em" />
+        <Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
       </NuxtLink>
       <NuxtLink
         :to="socialLinks.twitterLink"
@@ -33,7 +33,7 @@ import { footerData, socialLinks } from '~/data'
         class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="Twitter"
       >
-        <Icon name="fa:twitter-square" size="1em" />
+        <Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
       </NuxtLink>
       <NuxtLink
         :to="socialLinks.stackoverflowLink"
@@ -41,7 +41,7 @@ import { footerData, socialLinks } from '~/data'
         class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="StackOverflow"
       >
-        <Icon name="fa:stack-overflow" size="1em" />
+        <Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
       </NuxtLink>
     </div>
   </div>

app/components/main/footer.vue

@@ -22,7 +22,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
         anyway.
 
         <a href="/rss.xml" aria-label="Website RSS Feed">
-          <span class="px-3"><Icon name="bi:rss-fill" /></span
+          <span class="px-3"><Icon name="bi:rss-fill" class="-translate-y-[-20%]" /></span
         ></a>
       </div>
     </div>

app/components/main/header.vue

@@ -49,7 +49,7 @@ function isActive(path: string) {
               class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
               @click="onClick('dark')"
             >
-              <Icon name="icon-park:moon" size="20" />
+              <Icon name="icon-park:moon" size="20" class="-translate-y-[-20%]" />
             </button>
             <button
               v-if="colorMode.value === 'dark'"
@@ -58,11 +58,11 @@ function isActive(path: string) {
               class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
               @click="onClick('light')"
             >
-              <Icon name="noto:sun" size="20" />
+              <Icon name="noto:sun" size="20" class="-translate-y-[-20%]" />
             </button>
             <template #fallback>
               <!-- this will be rendered on server side -->
-              <Icon name="svg-spinners:180-ring" size="20" />
+              <Icon name="svg-spinners:180-ring" size="20" class="-translate-y-[-20%]" />
             </template>
           </ClientOnly>
         </li>

app/pages/about.vue

@@ -36,7 +36,7 @@ defineOgImageComponent('About', {
                 class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="Github"
               >
-                <Icon name="fa:github" size="1em" />
+                <Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
               </NuxtLink>
               <NuxtLink
                 :to="socialLinks.linkedinLink"
@@ -44,7 +44,7 @@ defineOgImageComponent('About', {
                 class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="LinkedIn"
               >
-                <Icon name="fa:linkedin-square" size="1em" />
+                <Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
               </NuxtLink>
               <NuxtLink
                 :to="socialLinks.twitterLink"
@@ -52,7 +52,7 @@ defineOgImageComponent('About', {
                 class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="Twitter"
               >
-                <Icon name="fa:twitter-square" size="1em" />
+                <Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
               </NuxtLink>
               <NuxtLink
                 :to="socialLinks.stackoverflowLink"
@@ -60,7 +60,7 @@ defineOgImageComponent('About', {
                 class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="StackOverflow"
               >
-                <Icon name="fa:stack-overflow" size="1em" />
+                <Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
               </NuxtLink>
             </div>
           </div>

nuxt.config.ts

@@ -1,11 +1,11 @@
-import { seoData } from './data'
+import { seoData } from './app/data'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-09-30',
 
   modules: [
-    'nuxt-icon',
+    '@nuxt/icon',
     '@nuxt/image',
     '@nuxt/fonts',
     '@nuxt/eslint',

package.json

@@ -15,27 +15,32 @@
     "format:fix": "prettier --write ./"
   },
   "devDependencies": {
-    "@formkit/auto-animate": "^0.8.2",
+    "@formkit/auto-animate": "^0.9.0",
+    "@iconify-json/bi": "^1.2.6",
+    "@iconify-json/fa": "^1.2.2",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/noto": "^1.2.7",
+    "@iconify-json/svg-spinners": "^1.2.4",
     "@nuxt/content": "^3.3.0",
     "@nuxt/eslint": "^1.4.1",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/image": "^1.8.0",
+    "@nuxt/icon": "^2.0.0",
+    "@nuxt/image": "^1.11.0",
     "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/robots": "^5.2.6",
+    "@nuxtjs/robots": "^5.5.5",
-    "@nuxtjs/sitemap": "^7.2.7",
+    "@nuxtjs/sitemap": "^7.4.7",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@stefanobartoletti/nuxt-social-share": "^0.6.1",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/typography": "^0.5.18",
-    "@vueuse/core": "^13.3.0",
+    "@vueuse/core": "^13.9.0",
-    "@vueuse/nuxt": "^13.3.0",
+    "@vueuse/nuxt": "^13.9.0",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-prettier": "^10.1.8",
     "feed": "^4.2.2",
     "fuse.js": "^7.0.0",
-    "nuxt": "^3.17.4",
+    "nuxt": "^4.1.2",
-    "nuxt-icon": "^0.6.8",
+    "nuxt-og-image": "^5.1.11",
-    "nuxt-og-image": "^5.0.2",
+    "prettier": "^3.6.2",
-    "prettier": "^3.5.3",
     "typescript": "^5.8.2",
     "unenv": "^1.10.0"
   }