chore: add eslint

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,8 +1,17 @@
 node_modules
-*.log*
+*.log
 .nuxt
-.nitro
-.cache
+nuxt.d.ts
 .output
 .env
-.vscode/
+package-lock.json
+framework
+dist
+.DS_Store
+
+# Yarn
+.yarn/cache
+.yarn/*state*
+
+# Local History
+.history

components/Header.vue

@@ -7,9 +7,9 @@ const theme = useTheme()
   <div
     v-if="
       theme.header.position &&
-      (theme.header.position === 'left' ||
-        theme.header.position === 'center' ||
-        theme.header.position === 'right')
+        (theme.header.position === 'left' ||
+          theme.header.position === 'center' ||
+          theme.header.position === 'right')
     "
     class="grid grid-cols-1 grid-rows-2 h-[127px] md:h-[143px] py-[24px] md:py-[32px] mb-[24px] md:mb-[32px]"
     :class="{
@@ -18,7 +18,9 @@ const theme = useTheme()
       'place-items-end': theme.header.position === 'right'
     }"
   >
-    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Alpine.</h1>
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+      Alpine.
+    </h1>
     <div class="grid grid-flow-col gap-x-[38px] auto-cols-max mt-[31px]">
       <NuxtLink
         v-for="link of navigation"
@@ -31,5 +33,5 @@ const theme = useTheme()
       </NuxtLink>
     </div>
   </div>
-  <div v-else></div>
+  <div v-else />
 </template>

components/content/Gallery.vue

@@ -11,13 +11,14 @@ const galleryProps = defineProps({
 const galleryImage1 = ref(null)
 const galleryImage2 = ref(null)
 const galleryImage3 = ref(null)
+
 onMounted(() => {
-  if (!galleryProps.images) return
-  if (!galleryProps.images[0]) return
+  if (!galleryProps.images) { return }
+  if (!galleryProps.images[0]) { return }
   galleryImage1.value = galleryProps.images[0]
-  if (!galleryProps.images[1]) return
+  if (!galleryProps.images[1]) { return }
   galleryImage2.value = galleryProps.images[1]
-  if (!galleryProps.images[2]) return
+  if (!galleryProps.images[2]) { return }
   galleryImage3.value = galleryProps.images[2]
 })
 </script>
@@ -40,21 +41,23 @@ onMounted(() => {
           class="object-cover w-full h-full rounded-xl"
           :src="galleryImage1"
           alt=":("
-        />
+        >
         <img
           v-if="galleryImage2"
           class="object-cover w-full h-full rounded-xl"
           :src="galleryImage1"
           alt=":("
-        />
+        >
         <img
           v-if="galleryImage3"
           class="object-cover w-full h-full md:col-span-2 lg:col-span-1 rounded-xl"
           :src="galleryImage1"
           alt=":("
-        />
+        >
       </div>
     </Container>
   </section>
-  <p v-else>:( a gallery block can not have more than 3 images !</p>
+  <p v-else>
+    :( a gallery block can not have more than 3 images !
+  </p>
 </template>

components/content/Hero.vue

@@ -53,8 +53,10 @@ defineProps({
         :class="layout === 'left' ? 'order-first lg:mr-[56px] mb-8' : 'lg:ml-[56px] mt-8'"
         :src="image"
         alt=":("
-      />
+      >
     </Container>
   </section>
-  <p v-else> :( a hero block must have a title !</p>
+  <p v-else>
+    :( a hero block must have a title !
+  </p>
 </template>

content/1.index.md

@@ -3,7 +3,7 @@ navTitle: 'Into'
 layout: 'default'
 ---
 
-# Whelcome to the Alpine Theme !!!
+# Welcome to the Alpine Theme !!!
 
 this is a blog theme and there is a lot of compenent that can help you crete yout own blogs :)
 
@@ -18,9 +18,9 @@ image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.
 Hello I am a title
 
 #description
-And here is a description.  
+And here is a description.
 This is the `right` layout (default)
-The title is required but the description and the image is optional.  
+The title is required but the description and the image is optional.
 You can also use `props` for the title and description instead of `slots`.
 ::
 --------------------------------------------------------------------------------
@@ -32,8 +32,8 @@ image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.
 This is the left layout
 
 #description
-Aou can even do markdown for the description and the title.  
-The title is required but the description and the image is optional.  
+Aou can even do markdown for the description and the title.
+The title is required but the description and the image is optional.
 You can also use `props` for the title and description instead of `slots`.
 ::
 --------------------------------------------------------------------------------
@@ -69,4 +69,4 @@ images:
   - 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80'
   - 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80'
 ---
-::
+::

nuxt.config.ts

@@ -15,8 +15,8 @@ export default defineNuxtConfig({
       fields: ['navTitle']
     },
     highlight: {
-      theme: 'github-dark',
-      preload: ['c']
+      theme: 'one-dark-pro',
+      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
     }
   },
   theme: {

package.json

@@ -11,11 +11,14 @@
     "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxthq/studio": "npm:@nuxthq/studio-edge@latest",
     "@nuxtjs/color-mode": "^3.1.4",
+    "@nuxtjs/eslint-config-typescript": "^10.0.0",
     "@nuxtjs/tailwindcss": "^5.1.3",
     "@tailwindcss/typography": "^0.5.2",
     "browser-style-dictionary": "^3.1.1-browser.1",
+    "eslint": "^8.19.0",
     "nuxt": "npm:nuxt3@latest",
-    "nuxt-theme-kit": "npm:nuxt-theme-kit-edge@latest"
+    "nuxt-theme-kit": "npm:nuxt-theme-kit-edge@latest",
+    "typescript": "^4.7.4"
   },
   "dependencies": {}
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["@nuxtjs"],
+  "lockFileMaintenance": {
+    "enabled": true
+  }
+}