Merge pull request #11 from data-miner00/dev

Mitigate broken previous and next links

README.md

@@ -132,7 +132,7 @@ To run this template project in your local for personal use or contribution, sim
 ## Roadmap
 
 - [x] Add Dark Mode
-- [ ] Add i18n
+- [x] Add i18n
 - [x] Add Styling
   - [x] Sass
   - [x] Tailwind
@@ -193,6 +193,7 @@ List of resources that are helpful and would like to give credit to.
 - [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)
+- [Nuxt Image](https://image.nuxtjs.org/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

app.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLayout>
     <SeoKit />
-    <OgImageStatic />
+    <!-- <OgImageStatic /> -->
     <NuxtPage />
   </NuxtLayout>
 </template>

components/MobileSidebar.vue

@@ -34,7 +34,7 @@ const links = [
     @click="toggleSidebar"
   >
     <div
-      class="w-96 h-screen bg-white dark:bg-slate-800"
+      class="w-full md:w-96 h-screen bg-white dark:bg-slate-800"
       @click.stop
       role="navigation"
     >

nuxt.config.ts

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
     "@nuxtjs/tailwindcss",
     "@nuxtjs/color-mode",
     "@nuxtjs/i18n",
+    "@nuxt/image",
   ],
   extends: ["nuxt-seo-kit"],
   tailwindcss: {

package.json

@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@nuxt/content": "^2.7.0",
+    "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/i18n": "8.0.0-beta.10",
     "@nuxtjs/tailwindcss": "^6.8.0",