Merge pull request #70 from nurRiyad/riyad/fix

Upldate loader,animation & workflow

.eslintrc

@@ -1,4 +1,4 @@
 {
   "extends": "@antfu",
-  "ignorePatterns":["/content/**"]
+  "ignorePatterns":["/content/**","/.github/**"]
 }

.github/workflows/build.yml

@@ -0,0 +1,34 @@
+# This workflow will do a clean installation of node dependencies, check linting and build
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependency
+        run: npm ci
+
+      - name: Check Linting
+        run: npm run lint
+
+
+      - name: Playgourd build check
+        run: npm run build

.vscode/settings.json

@@ -14,6 +14,7 @@
   "cSpell.words": [
     "cloudinary",
     "Namecheap",
+    "nurriyad",
     "Nuxt",
     "spacegrotesk",
     "Tailwindcss",

components/blog/Loader.vue

@@ -1,23 +0,0 @@
-<script>
-import { ContentLoader } from 'vue-content-loader'
-
-export default {
-  components: { ContentLoader },
-}
-</script>
-
-<template>
-  <ContentLoader
-    viewBox="0 0 400 160"
-    :speed="2"
-    primary-color="#c9c9c9"
-    secondary-color="#ecebeb"
-  >
-    <rect x="10" y="13" rx="0" ry="0" width="95" height="86" />
-    <rect x="119" y="19" rx="0" ry="0" width="219" height="16" />
-    <rect x="119" y="49" rx="0" ry="0" width="277" height="16" />
-    <rect x="119" y="82" rx="0" ry="0" width="56" height="14" />
-    <rect x="195" y="82" rx="0" ry="0" width="56" height="14" />
-    <rect x="272" y="82" rx="0" ry="0" width="56" height="14" />
-  </ContentLoader>
-</template>

nuxt.config.ts

@@ -56,6 +56,7 @@ export default defineNuxtConfig({
     '@nuxtjs/fontaine',
     '@nuxtjs/color-mode',
     '@nuxtjs/tailwindcss',
+    '@formkit/auto-animate',
     '@stefanobartoletti/nuxt-social-share',
   ],
 

package.json

@@ -1,5 +1,8 @@
 {
+  "name": "@nurriyad/nuxt-blog",
+  "version": "1.4.0",
   "private": true,
+  "license": "MIT",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -11,7 +14,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.42.0",
-    "@formkit/auto-animate": "^0.8.1",
+    "@formkit/auto-animate": "^0.8.2",
     "@nuxt/content": "^2.12.1",
     "@nuxt/image": "^1.8.0",
     "@nuxtjs/color-mode": "^3.3.2",
@@ -29,8 +32,6 @@
     "nuxt": "^3.13.2",
     "nuxt-icon": "^0.6.8",
     "nuxt-og-image": "^3.0.0-rc.38",
-    "typescript": "^5.3.3",
+    "typescript": "^5.3.3"
-    "vue-content-loader": "^2.0.1"
+  }
-  },
-  "version": "1.4.0"
 }

pages/blogs/index.vue

@@ -91,35 +91,27 @@ defineOgImage({
       >
     </div>
 
-    <ClientOnly>
+    <div v-auto-animate class="space-y-5 my-5 px-4">
-      <div v-auto-animate class="space-y-5 my-5 px-4">
+      <template v-for="post in paginatedData" :key="post.title">
-        <template v-for="post in paginatedData" :key="post.title">
-          <ArchiveCard
-            :path="post.path"
-            :title="post.title"
-            :date="post.date"
-            :description="post.description"
-            :image="post.image"
-            :alt="post.alt"
-            :og-image="post.ogImage"
-            :tags="post.tags"
-            :published="post.published"
-          />
-        </template>
-
         <ArchiveCard
-          v-if="paginatedData.length <= 0"
+          :path="post.path"
-          title="No Post Found"
+          :title="post.title"
-          image="/not-found.jpg"
+          :date="post.date"
+          :description="post.description"
+          :image="post.image"
+          :alt="post.alt"
+          :og-image="post.ogImage"
+          :tags="post.tags"
+          :published="post.published"
         />
-      </div>
-
-      <template #fallback>
-        <!-- this will be rendered on server side -->
-        <BlogLoader />
-        <BlogLoader />
       </template>
-    </ClientOnly>
+
+      <ArchiveCard
+        v-if="paginatedData.length <= 0"
+        title="No Post Found"
+        image="/not-found.jpg"
+      />
+    </div>
 
     <div class="flex justify-center items-center space-x-6 ">
       <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">

plugins/formik.client.ts

@@ -1,6 +0,0 @@
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  // Doing something with nuxtApp
-  nuxtApp.vueApp.use(autoAnimatePlugin)
-})