update content render

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

app.vue

@@ -23,31 +23,33 @@ useState("blogData", () => (data.value as Array<ParsedContent>) || []);
 <template>
   <div>
     <NuxtLayout>
-      <NuxtLoadingIndicator />
+      <NuxtLoadingIndicator :height="5" :duration="3000" :throttle="400" />
       <NuxtPage />
     </NuxtLayout>
   </div>
 </template>
 <style>
-/* Page transition */
+.page-enter-active {
-.page-enter-active,
+  transition: all 0.1s ease-out;
+}
 .page-leave-active {
-  transition: all 0.2s;
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
 }
 .page-enter-from,
 .page-leave-to {
+  transform: translateY(20px);
   opacity: 0;
-  filter: blur(1rem);
 }
 
-/* Layout Transition */
+.layout-enter-active {
-.layout-enter-active,
+  transition: all 0.1s ease-out;
+}
 .layout-leave-active {
-  transition: all 0.3s;
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
 }
 .layout-enter-from,
 .layout-leave-to {
+  transform: translateY(-20px);
   opacity: 0;
-  filter: blur(1rem);
 }
 </style>

nuxt.config.ts

@@ -1,20 +1,47 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  // server side rendering mode
+  ssr: true,
+
+  // typescripts
+  typescript: {
+    strict: true,
+    typeCheck: true,
+  },
+
   app: {
     head: {
       viewport: "width=device-width, initial-scale=2",
       charset: "utf-16",
     },
+    // global transition
     pageTransition: { name: "page", mode: "out-in" },
     layoutTransition: { name: "layout", mode: "out-in" },
   },
-  typescript: {
+
-    strict: true,
+  // experimental features
+  experimental: {
+    reactivityTransform: false,
   },
+
+  // auto import components
+  components: true,
+
   modules: [
     "@nuxtjs/tailwindcss",
     "@nuxt/content",
     "@nuxtjs/robots",
     "nuxt-icon",
   ],
+
+  // content
+  content: {
+    documentDriven: true,
+    markdown: {
+      mdc: true,
+    },
+    highlight: {
+      theme: "github-dark",
+    },
+  },
 });

package.json

@@ -14,9 +14,9 @@
     "@tailwindcss/typography": "^0.5.8",
     "nuxt": "3.0.0",
     "nuxt-icon": "^0.1.8",
-    "prettier": "^2.8.0"
+    "prettier": "^2.8.0",
-  },
+    "typescript": "^4.9.4",
-  "dependencies": {
+    "vue-content-loader": "^2.0.1",
-    "vue-content-loader": "^2.0.1"
+    "vue-tsc": "^1.0.22"
   }
 }

pages/[...slug].vue

@@ -1,30 +1,13 @@
 <script setup lang="ts">
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
-
 definePageMeta({
   layout: "blog",
 });
-
-const route = useRoute();
-
-const path = computed(() => {
-  return route.path || "";
-});
-
-const data = useState("blogData");
-
-const content = computed(() => {
-  const allpost = (data.value as Array<ParsedContent>) || [];
-  return allpost.find((post) => post._path === path.value) || {};
-});
 </script>
 
 <template>
   <main
     class="container mx-auto bg-white max-w-6xl p-6 min-h-screen prose prose-slate"
   >
-    <ContentRenderer :value="content">
+    <ContentDoc />
-      <ContentRendererMarkdown :value="content" />
-    </ContentRenderer>
   </main>
 </template>

yarn.lock

@@ -828,6 +828,50 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
   integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==
 
+"@volar/language-core@1.0.22":
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.0.22.tgz#e6bb399d95724ff918234f73fbda5f0a6cf357e5"
+  integrity sha512-hiJeCOqxNdtG/04FRGLGI9H9DVz2l6cTqPDBzwqplHXAWfMxjzUaGUrn9sfTG7YMFNZUgK4EYxJnRfhqdtbSFQ==
+  dependencies:
+    "@volar/source-map" "1.0.22"
+    muggle-string "^0.1.0"
+
+"@volar/source-map@1.0.22":
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.0.22.tgz#b877325a8b63c4abcad409774e0182607715ed3e"
+  integrity sha512-cv4gypHSP4MWVR82ed/+1IpI6794qAl0Q0+KJ+VGMVF8rVugsiF9QbyMCgjel9wNRsssQsazzsf6txOR9vHQiw==
+  dependencies:
+    muggle-string "^0.1.0"
+
+"@volar/typescript@1.0.22":
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.0.22.tgz#2738b7dd803f836a7d67bbd26b043b64a7bf50de"
+  integrity sha512-VPyEicealSD4gqlE5/UQ1j3ietsO6Hfat40KtUEh/K+XEZ7h02b1KgFV64YEuBkBOaZ5hgvRW/WXKtQgXCl7Iw==
+  dependencies:
+    "@volar/language-core" "1.0.22"
+
+"@volar/vue-language-core@1.0.22":
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.0.22.tgz#676e56c41e36fd766a3b6a34753d296cbd6292b5"
+  integrity sha512-Ki0G/ZdBj2/GLw+/VVH3n9XR/JL6krMIth02EekFn6JV4PGN3mNxbvoh6lOPSDZLR6biOU5nJPnnjpKy8nuXhw==
+  dependencies:
+    "@volar/language-core" "1.0.22"
+    "@volar/source-map" "1.0.22"
+    "@vue/compiler-dom" "^3.2.45"
+    "@vue/compiler-sfc" "^3.2.45"
+    "@vue/reactivity" "^3.2.45"
+    "@vue/shared" "^3.2.45"
+    minimatch "^5.1.1"
+    vue-template-compiler "^2.7.14"
+
+"@volar/vue-typescript@1.0.22":
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-1.0.22.tgz#49db0b2c369491e278b8fc7ef711da121cd5968e"
+  integrity sha512-2T1o5z86PAev31OMtVOv/qp4P3ZVl9ln/2KTmykQE8Fh4A5F+868MW4nf5J7XQ6RNyx7RH9LhzgjvbqJpAfiYw==
+  dependencies:
+    "@volar/typescript" "1.0.22"
+    "@volar/vue-language-core" "1.0.22"
+
 "@vue/babel-helper-vue-transform-on@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
@@ -858,7 +902,7 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.45":
+"@vue/compiler-dom@3.2.45", "@vue/compiler-dom@^3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce"
   integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==
@@ -866,7 +910,7 @@
     "@vue/compiler-core" "3.2.45"
     "@vue/shared" "3.2.45"
 
-"@vue/compiler-sfc@3.2.45":
+"@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
   integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==
@@ -1764,6 +1808,11 @@ data-uri-to-buffer@^4.0.0:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
   integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2694,6 +2743,11 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 hookable@^5.4.2:
   version "5.4.2"
   resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.4.2.tgz#6a1d3c4b3cb5b4262f99b3070ce0ee92c9c78049"
@@ -3858,6 +3912,13 @@ minimatch@^5.0.1, minimatch@^5.1.0:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.2.tgz#0939d7d6f0898acbd1508abe534d1929368a8fff"
+  integrity sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@~3.0.4:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
@@ -3947,6 +4008,11 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+muggle-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c"
+  integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -5662,6 +5728,11 @@ type-is@^1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typescript@^4.9.4:
+  version "4.9.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
+  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
+
 ufo@^0.8.6:
   version "0.8.6"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.8.6.tgz#c0ec89bc0e0c9fa59a683680feb0f28b55ec323b"
@@ -6016,6 +6087,22 @@ vue-router@^4.1.6:
   dependencies:
     "@vue/devtools-api" "^6.4.5"
 
+vue-template-compiler@^2.7.14:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
+  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
+vue-tsc@^1.0.22:
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.0.22.tgz#555d0fa9bb5f7b4009e45059d0db5a8c2bef18bb"
+  integrity sha512-xSxwgWR3czhv7sLKHWu6lzj9Xq6AtsCURVL45AY4TLGFszv2L2YlMgygXvqslyCM5bz9cyoIKSaZnzHqHTHjzA==
+  dependencies:
+    "@volar/vue-language-core" "1.0.22"
+    "@volar/vue-typescript" "1.0.22"
+
 vue@^3.2.45:
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"