Remove content loader and animate plugins

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

.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,7 +91,6 @@ defineOgImage({
       >
     </div>
 
-    <ClientOnly>
     <div v-auto-animate class="space-y-5 my-5 px-4">
       <template v-for="post in paginatedData" :key="post.title">
         <ArchiveCard
@@ -114,13 +113,6 @@ defineOgImage({
       />
     </div>
 
-      <template #fallback>
-        <!-- this will be rendered on server side -->
-        <BlogLoader />
-        <BlogLoader />
-      </template>
-    </ClientOnly>
-
     <div class="flex justify-center items-center space-x-6 ">
       <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
         <Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }" />

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)
-})