move files along

Author: andrepg

plugins/markdown-render.config.ts

@@ -0,0 +1,11 @@
+import { Mode } from "vite-plugin-markdown";
+
+export const MarkdownRenderConfig = {
+  mode: [Mode.HTML, Mode.TOC, Mode.VUE],
+  markdownIt: {
+    typographer: true,
+    linkify: true,
+    html: true,
+    xhtmlOut: true,
+  },
+}

src/config/PrismJsConstants.ts plugins/primsjs.config.tssrc/config/PrismJsConstants.ts renamed to plugins/primsjs.config.ts

@@ -1,4 +1,4 @@
-export const PrismJsLanguages: string[] = [
+const SupportedLanguages: string[] = [
   'docker',
   'dockerfile',
   'gitignore',
@@ -22,8 +22,15 @@ export const PrismJsLanguages: string[] = [
   'shell'
 ];
 
-export const PrismJsPlugins: string[] = [
+const SupportedPlugins: string[] = [
   'show-language',
   'line-numbers',
   'match-braces'
 ];
+
+export const PrismJsConfig = {
+  css: true,
+  theme: 'tomorrow',
+  languages: SupportedLanguages,
+  plugins: SupportedPlugins
+}

src/assets/base-styles.css

@@ -47,3 +47,18 @@
     @apply mb-2;
   }
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}

src/main.js src/main.tssrc/main.js renamed to src/main.ts

@@ -4,7 +4,7 @@ import { computed, nextTick, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import Prism from 'prismjs'
 
-import { transformContent } from '@/config/MarkdownTransformers';
+import { transformContent } from '@/utils/transformers';
 import BadgeElement from '@/components/BadgeElement.vue';
 import { Icon } from '@iconify/vue';
 import { SitemapBridge } from '@/router/sitemap';

src/config/MarkdownTransformers.ts src/utils/transformers.tssrc/config/MarkdownTransformers.ts renamed to src/utils/transformers.ts

@@ -30,8 +30,9 @@
       "@/*": ["./src/*"],
       "@blog/*": ["./blog/*"],
       "@public/*": ["./public/*"],
-      "@data/*": ["./data/*"]
+      "@data/*": ["./data/*"],
+      "@plugins/*": ["./plugins/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.vue", "src/**/*.d.ts"]
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.vue", "src/**/*.d.ts", "plugins/**/*.ts"]
 }

src/views/PostSingleView.vue

@@ -8,12 +8,22 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "noEmit": true,
-    "allowJs": true
+    "allowJs": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@blog/*": ["./blog/*"],
+      "@public/*": ["./public/*"],
+      "@data/*": ["./data/*"],
+      "@plugins/*": ["./plugins/*"]
+    } 
   },
   "include": [
     "vite.config.js",
     "vitest.config.js",
     "eslint.config.js",
-    "postcss.config.js"
+    "postcss.config.js",
+    "plugins/**/*.ts"
   ]
 }

tsconfig.app.json

@@ -3,32 +3,18 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import { Mode, plugin as markdown } from 'vite-plugin-markdown'
+import { plugin as markdown } from 'vite-plugin-markdown'
 import prismjsPlugin from 'vite-plugin-prismjs'
 
-import { PrismJsLanguages, PrismJsPlugins } from './src/config/PrismJsConstants'
+import { PrismJsConfig } from './plugins/primsjs.config.ts'
+import { MarkdownRenderConfig } from './plugins/markdown-render.config.ts'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
-    markdown({
-      mode: [Mode.HTML, Mode.TOC, Mode.VUE],
-      markdownIt: {
-        typographer: true,
-        linkify: true,
-        html: true,
-        xhtmlOut: true,
-      },
-    }),
-
-    prismjsPlugin({
-      css: true,
-      theme: 'tomorrow',
-      languages: PrismJsLanguages,
-      plugins: PrismJsPlugins
-    })
+    markdown(MarkdownRenderConfig),
+    prismjsPlugin(PrismJsConfig)
   ],
   resolve: {
     alias: {