Merge pull request #2 from hlassiege/nuxt3

Nuxt3

.editorconfig

@@ -3,7 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.gitignore

@@ -68,6 +68,12 @@ typings/
 # nuxt.js build output
 .nuxt
 
+node_modules
+*.log*
+.nitro
+.output
+
+
 # Nuxt generate
 dist
 

README.md

@@ -1,39 +1,9 @@
-# NuxtJs Tailwind Blog
+# TODO List 
 
-Inspired from [timlrx](https://github.com/timlrx/tailwind-nextjs-starter-blog) nextJs Blog
+- repair tailwind integration that seems to be broken since nuxt3 and nuxt content v2  
+=> the tailwind config is not loaded anymore, so, the animation is not working anymore on the home page
 
-This is a nuxtjs, Tailwind CSS blogging template. Its supported Markdown for blog
-![Drag Racing](thumbnail.png)
+- check syntax highlighting
 
-# Examples/Demo
+- repair related articles 
 
-- [Demo blog - This repo](https://nuxt-tailwind-blog.netlify.app)
-
-## Build Setup
-
-```bash
-# install dependencies
-$ npm install
-
-# serve with hot reload at localhost:3000
-$ npm run dev
-
-```
-
-For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
-
-<a href="https://www.buymeacoffee.com/mdrathik" target="_blank"
-    ><img
-      src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-      alt="Buy Me A Coffee"
-      style="height: 60px !important; width: 217px !important"
-  /></a>
-
-## Spacial Thanks to :
-
-i made the design inspired from them.
-[ansango](https://github.com/ansango/resume) , [einargudni](https://www.einargudni.com/projects) , [leohuynh](https://www.leohuynh.dev)
-
-# Licence
-
-This project can be modified, edited and whatever you want to do. But i wish that you would love to contribute

components/BlogCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isFiltered" class="mb-4 bg-white border border-gray-200 min-h-[400px] border-b-2 border-b-slate-400
   hover:drop-shadow-xl hover:border-gray-300 transition-all hover:-translate-y-1">
-    <nuxt-link class="overflow-hidden " :to="postLink">
+    <NuxtLink class="overflow-hidden " :to="postLink">
       <img
         v-if="img"
         class="object-cover w-full h-52"
@@ -14,15 +14,15 @@
         src="/images/post-anonymous.jpg"
         alt=""
       />
-    </nuxt-link>
+    </NuxtLink>
       <div class="p-3">
         <div class="text-xs text-slate-400 left-2">
           {{ formatDate(postDate)}}
         </div>
         <h5 class="text-lg font-bold ">
-          <nuxt-link class="overflow-hidden " :to="postLink">
+          <NuxtLink class="overflow-hidden " :to="postLink">
           {{ postTitle }}
-          </nuxt-link>
+          </NuxtLink>
         </h5>
 
         <p class="mt-2 text-[12px] my-3 flex flex-wrap -m-1 ">
@@ -34,32 +34,54 @@
 
   </div>
 </template>
-<script>
-export default {
-  name: 'BlogCard',
-  props: ["title", "description", "date", "slug", "path", "img", "tags", "currentTag"],
-  emits: ['changeCurrentTag'],
-  data() {
-    return {
-      postTitle: this.title,
-      postDescription: this.description,
-      postSlug: this.slug,
-      postDate: this.date,
-      postLink: this.path.replace("articles/", ""),
-    };
-  },
-  computed: {
-    isFiltered() {
-      return !this.currentTag || (this.tags && this.tags.includes(this.currentTag));
+<script setup lang="ts">
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
     },
-  },
-  methods: {
-    formatDate(date) {
-      return new Date(date).toLocaleDateString("fr", {
+    description: {
+        type: String,
+        required: true,
+    },
+    date: {
+        type: String,
+        required: false,
+    },
+    path: {
+        type: String,
+        required: true,
+    },
+    img: {
+        type: String,
+        required: false,
+    },
+    tags: {
+        type: Array,
+        required: false,
+    },
+    currentTag: {
+        type: String,
+        required: false,
+    },
+    });
+
+const emit = defineEmits(['changeCurrentTag']);
+
+function formatDate(date) {
+    return new Date(date).toLocaleDateString("fr", {
         weekday: 'short', year: 'numeric', month: 'short',
         day: 'numeric'
-      });
-    },
-  },
+    })
 }
+
+const isFiltered = computed(() => {
+    return !props.currentTag || (props.tags && props.tags.includes(props.currentTag));
+});
+
+const postTitle = ref(props.title);
+const postDate = ref(props.date);
+const postLink = ref(props.path.replace("articles/", ""));
+
 </script>
+

components/BlogCardHorizontal.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="card-lateral mb-4 bg-white border border-gray-200 border-b-2 border-b-slate-400
   hover:drop-shadow-xl hover:border-gray-300 transition-all hover:-translate-y-1 flex flex-row">
-    <nuxt-link class="w-1/4" :to="postLink">
+    <NuxtLink class="w-1/4" :to="postLink">
       <img class="object-cover w-56 h-56" :src="'/images/' + img" :alt="postTitle"/>
-    </nuxt-link>
+    </NuxtLink>
     <div class="p-3 w-3/4 my-auto">
       <div class="text-xs text-slate-400 left-2">
         {{ formatDate(postDate) }}
       </div>
       <h5 class="text-lg font-bold ">
-        <nuxt-link class="overflow-hidden " :to="postLink">
+        <NuxtLink class="overflow-hidden " :to="postLink">
           {{ postTitle }}
-        </nuxt-link>
+        </NuxtLink>
       </h5>
 
       <p class="mt-2 text-[12px] my-3 flex flex-wrap -m-1 ">

components/HeroSection.vue

@@ -11,7 +11,7 @@
   </section>
 </template>
 <script>
-import heroThree from "@/plugins/hero-three";
+import heroThree from "@/sources/hero-three";
 
 export default {
   name: 'HeroSection',

components/TheHeader.vue

@@ -132,7 +132,7 @@ export default {
   text-decoration: none;
   @apply block  text-base font-medium px-3 ;
 
-  &.nuxt-link-exact-active {
+  &.NuxtLink-exact-active {
 
     &::after {
       left: 0;