Merge pull request #9 from data-miner00/dev

Seo & update dependencies

.env.example

@@ -0,0 +1,2 @@
+NUXT_PUBLIC_SITE_URL=https://nuxt-content-template.netlify.app
+NUXT_INDEXABLE=true

README.md

@@ -191,6 +191,8 @@ List of resources that are helpful and would like to give credit to.
 - [How to add class attribute to the body tag in NuxtJs](https://postsrc.com/code-snippets/how-to-add-class-attribute-to-the-body-tag-in-nuxtjs)
 - [Nuxt i18n](https://v8.i18n.nuxtjs.org/)
 - [How to Build a Multi-Language Application with NuxtJS](https://crowdin.com/blog/2023/01/24/nuxt-js-i18n-tutorial)
+- [Vue i18n](https://vue-i18n.intlify.dev/)
+- [Nuxt Seo Kit](https://github.com/harlan-zw/nuxt-seo-kit)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

app.vue

@@ -1,5 +1,7 @@
 <template>
-  <VHeader />
-  <NuxtPage />
-  <VFooter />
+  <NuxtLayout>
+    <SeoKit />
+    <OgImageStatic />
+    <NuxtPage />
+  </NuxtLayout>
 </template>

error.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const localePath = useLocalePath();
+
+// Clean error state
+function handleError() {
+  clearError({ redirect: "/" });
+}
+</script>
+
+<template>
+  <NuxtLayout>
+    <div
+      class="h-96 max-w-screen-xl mx-auto flex justify-center items-center mt-24 xl:mt-48"
+    >
+      <section class="sm:flex">
+        <p class="text-4xl font-semibold text-green-600 sm:text-5xl">404</p>
+        <div class="sm:ml-6">
+          <div class="sm:border-l border-gray-400 sm:pl-6">
+            <h1
+              class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
+            >
+              {{ $t("errorPage.message") }}
+            </h1>
+            <p class="mt-1 text-xl text-gray-500">
+              {{ $t("errorPage.message") }}
+            </p>
+          </div>
+          <div
+            class="flex gap-3 mt-10 sm:border-l sm:border-transparent sm:pl-6"
+          >
+            <NuxtLink
+              class="px-6 py-3 rounded transition-colors duration-200 bg-green-600 text-white border-2 border-solid border-green-600"
+              :to="localePath('/')"
+            >
+              {{ $t("errorPage.action") }}
+            </NuxtLink>
+          </div>
+        </div>
+      </section>
+    </div>
+  </NuxtLayout>
+</template>

layouts/default.vue

@@ -1,3 +1,5 @@
 <template>
+  <VHeader />
   <slot />
+  <VFooter />
 </template>

locales/en.json

@@ -55,5 +55,9 @@
   "error": {
     "title": "404 Not Found",
     "description": "The content does not exist. Please try another one. "
+  },
+  "errorPage": {
+    "message": "Page not found",
+    "action": "Go back home"
   }
 }

locales/fr.json

@@ -55,5 +55,9 @@
   "error": {
     "title": "404 Non trouvé",
     "description": "Le contenu n'existe pas. Veuillez en essayer un autre."
+  },
+  "errorPage": {
+    "message": "Page non trouvée",
+    "action": "Rentrer à la maison"
   }
 }

nuxt.config.ts

@@ -33,6 +33,7 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode",
     "@nuxtjs/i18n",
   ],
+  extends: ["nuxt-seo-kit"],
   tailwindcss: {
     configPath: "./tailwind.config.js",
     cssPath: "./assets/css/styles.scss",
@@ -85,4 +86,13 @@ export default defineNuxtConfig({
     lazy: true,
     defaultLocale: "en",
   },
+  runtimeConfig: {
+    public: {
+      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || "https://example.com",
+      siteName: "Nuxt Content Template",
+      siteDescription:
+        "A Nuxt3 template built specifically for documentations and blogs.",
+      language: "en",
+    },
+  },
 });

package.json

@@ -1,24 +1,29 @@
 {
+  "name": "nuxt-content-template",
+  "description": "An opinionated template built for documentations and static websites.",
   "private": true,
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "nuxt preview"
+    "preview": "nuxt preview",
+    "clean": "nuxi cleanup"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.3.0",
-    "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxt/content": "^2.7.0",
+    "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/i18n": "8.0.0-beta.10",
-    "@nuxtjs/tailwindcss": "^6.2.0",
+    "@nuxtjs/tailwindcss": "^6.8.0",
     "@tailwindcss/typography": "^0.5.9",
-    "nuxt": "^3.0.0",
+    "nuxt": "^3.6.1",
+    "nuxt-seo-kit": "^1.3.9",
     "rehype-mathjax": "^4.0.2",
     "remark-math": "^5.1.1",
-    "sass": "^1.57.1",
-    "sass-loader": "^13.2.0"
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2"
   },
   "dependencies": {
-    "@vueuse/core": "^9.11.1"
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/motion": "^2.0.0"
   }
 }