valaxy 0.25.3 → 0.25.4

package/client/components/ValaxyDynamicComponent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { compile, defineAsyncComponent, onMounted, shallowRef } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    templateStr: string
+    data?: Record<string, any>
+  }>(),
+  {
+    data: () => ({}),
+  },
+)
+
+const dynamicComponent = shallowRef<Component | null>(null)
+
+async function createComponent() {
+  const render = compile(props.templateStr)
+  const componentDefinition = {
+    render,
+    data: () => props.data,
+  }
+  dynamicComponent.value = defineAsyncComponent(() => Promise.resolve(componentDefinition))
+}
+
+onMounted(() => {
+  createComponent()
+})
+</script>
+
+<template>
+  <component :is="dynamicComponent" />
+</template>

package/client/components/{ValaxyContainerBlockTitle.vue → builtin/ValaxyTranslate.vue}

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-// import { useValaxyI18n } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
-  title: string
+  content: string
 }>()
 
 const { t } = useI18n()
 </script>
 
 <template>
-  <span>
-    {{ t(title) }}
-  </span>
+  {{ t(content) }}
 </template>

package/client/main.ts

@@ -1,4 +1,3 @@
-import type { ViteSSGContext } from 'vite-ssg'
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
 import { dataSymbol, initValaxyConfig, valaxyConfigSymbol } from 'valaxy'
 import { setupLayouts } from 'virtual:generated-layouts'
@@ -9,10 +8,8 @@ import { routes } from 'vue-router/auto-routes'
 import App from './App.vue'
 
 import { initData } from './app/data'
-import AppLink from './components/AppLink.vue'
 
 import setupMain from './setup/main'
-
 import { setupValaxyDevTools } from './utils/dev'
 /**
  * user styles
@@ -23,14 +20,6 @@ import 'uno.css'
 
 const valaxyConfig = initValaxyConfig()
 
-/**
- * register global components
- * @param ctx
- */
-export function registerComponents(ctx: ViteSSGContext) {
-  ctx.app.component('AppLink', AppLink)
-}
-
 const { redirectRoutes, useVueRouter } = valaxyConfig.value.runtimeConfig.redirects
 if (useVueRouter)
   routes.push(...redirectRoutes)
@@ -84,7 +73,6 @@ export const createApp = ViteSSG(
 
     app.provide(valaxyConfigSymbol, valaxyConfig)
 
-    registerComponents(ctx)
     setupMain(ctx, valaxyConfig)
   },
 )

package/client/modules/components.ts

@@ -0,0 +1,13 @@
+import type { ViteSSGContext } from 'vite-ssg'
+
+import AppLink from '../components/AppLink.vue'
+import ValaxyTranslate from '../components/builtin/ValaxyTranslate.vue'
+
+/**
+ * register global components
+ * @param ctx
+ */
+export function registerGlobalComponents(ctx: ViteSSGContext) {
+  ctx.app.component('AppLink', AppLink)
+  ctx.app.component('VT', ValaxyTranslate)
+}

package/client/setup/main.ts

@@ -9,6 +9,7 @@ import type { ViteSSGContext } from 'vite-ssg'
 import type { ComputedRef } from 'vue'
 
 import { consola } from 'consola'
+import { registerGlobalComponents } from '../modules/components'
 import { install as installFloatingVue } from '../modules/floating-vue'
 import { install as installNprogress } from '../modules/nprogress'
 import { install as installPinia } from '../modules/pinia'
@@ -20,6 +21,7 @@ export default function setupMain(ctx: ViteSSGContext, config: ComputedRef<Valax
   // eslint-disable-next-line unused-imports/no-unused-vars
   const injection_arg = ctx
 
+  registerGlobalComponents(ctx)
   installValaxy(ctx, config)
   installUnhead(ctx)
   installPinia(ctx)

package/client/styles/common/code.scss

@@ -23,14 +23,14 @@ html:not(.dark) .vp-code-dark {
   }
 }
 
-@media (width >= 640px) {
+@media (width >=640px) {
   .markdown-body div[class*="language-"] {
     border-radius: 6px;
     margin: 16px 0;
   }
 }
 
-@media (width <= 639.9px) {
+@media (width <=639.9px) {
   .markdown-body li div[class*="language-"] {
     border-radius: 6px 0 0 6px;
   }
@@ -101,7 +101,7 @@ html:not(.dark) .vp-code-dark {
   }
 
   // copy
-  [class*='language-'] > button.copy {
+  [class*='language-']>button.copy {
     /* rtl:ignore */
     direction: ltr;
     position: absolute;
@@ -126,28 +126,28 @@ html:not(.dark) .vp-code-dark {
       background-color 0.25s,
       opacity 0.25s;
   }
-  
-  [class*='language-']:hover > button.copy,
-  [class*='language-'] > button.copy:focus {
+
+  [class*='language-']:hover>button.copy,
+  [class*='language-']>button.copy:focus {
     opacity: 1;
   }
-  
-  [class*='language-'] > button.copy:hover,
-  [class*='language-'] > button.copy.copied {
+
+  [class*='language-']>button.copy:hover,
+  [class*='language-']>button.copy.copied {
     border-color: var(--va-code-copy-code-hover-border-color);
     background-color: var(--va-code-copy-code-hover-bg);
   }
-  
-  [class*='language-'] > button.copy.copied,
-  [class*='language-'] > button.copy:hover.copied {
+
+  [class*='language-']>button.copy.copied,
+  [class*='language-']>button.copy:hover.copied {
     /* rtl:ignore */
     border-radius: 0 4px 4px 0;
     background-color: var(--va-code-copy-code-hover-bg);
     background-image: var(--va-icon-copied);
   }
-  
-  [class*='language-'] > button.copy.copied::before,
-  [class*='language-'] > button.copy:hover.copied::before {
+
+  [class*='language-']>button.copy.copied::before,
+  [class*='language-']>button.copy:hover.copied::before {
     position: relative;
     top: -1px;
 
@@ -173,7 +173,7 @@ html:not(.dark) .vp-code-dark {
     content: var(--va-code-copy-copied-text-content);
   }
 
-  [class*='language-'] > span.lang {
+  [class*='language-']>span.lang {
     position: absolute;
     top: 2px;
 
@@ -187,9 +187,9 @@ html:not(.dark) .vp-code-dark {
       color 0.4s,
       opacity 0.4s;
   }
-  
-  [class*='language-']:hover > button.copy + span.lang,
-  [class*='language-'] > button.copy:focus + span.lang {
+
+  [class*='language-']:hover>button.copy+span.lang,
+  [class*='language-']>button.copy:focus+span.lang {
     opacity: 0;
   }
 
@@ -227,7 +227,7 @@ html:not(.dark) .vp-code-dark {
   }
 
   // collapse
-  [class*='language-'] > button.collapse {
+  [class*='language-']>button.collapse {
     display: none;
     position: absolute;
     z-index: 10;
@@ -237,7 +237,7 @@ html:not(.dark) .vp-code-dark {
     height: 24px;
     opacity: 1;
     cursor: pointer;
-    background-image: linear-gradient(-180deg,rgb(0 0 0 / 0) 0%,var(--va-c-bg-dark) 100%);
+    background-image: linear-gradient(-180deg, rgb(0 0 0 / 0) 0%, var(--va-c-bg-dark) 100%);
 
     &::before {
       display: block;
@@ -251,7 +251,7 @@ html:not(.dark) .vp-code-dark {
     }
   }
 
-  [class*='language-'].folded > button.collapse {
+  [class*='language-'].folded>button.collapse {
     display: block;
   }
 }

package/client/styles/common/markdown.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 .markdown-body {
+
   h1,
   h2,
   h3,
@@ -94,11 +95,10 @@
 }
 
 
-@media (width >= 768px) {
+@media (width >=768px) {
   .markdown-body h1 {
     letter-spacing: -0.02em;
     line-height: 40px;
     font-size: 32px;
   }
 }
-

package/dist/{chunk-V3FAZBPQ.js → chunk-FQD2JPI3.js}

@@ -4,7 +4,7 @@ import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 
 // package.json
-var version = "0.25.3";
+var version = "0.25.4";
 
 // node/modules/fuse.ts
 import path4 from "path";
@@ -2075,7 +2075,7 @@ function createContainer(key, block = {}, md3) {
           let iconTag = "";
           if (block.icon)
             iconTag = `<i class="icon ${block.icon}" ${block.color ? `style="color: ${block.color}"` : ""}></i>`;
-          const title = `<ValaxyContainerBlockTitle title="blocks.${key}" />`;
+          const title = `<VT content="blocks.${key}" />`;
           const titleClass = `custom-block-title${info ? "" : " custom-block-title-default"}`;
           if (classes === "details")
             return `<details ${attrs}><summary>${title}</summary>
@@ -2531,6 +2531,24 @@ function snippetPlugin(md3, srcDir) {
   md3.block.ruler.before("fence", "snippet", parser);
 }
 
+// node/plugins/markdown/plugins/markdown-it/titleCollector.ts
+var globalTitleCollector = /* @__PURE__ */ new Set();
+function getGlobalTitleCollector() {
+  return globalTitleCollector;
+}
+function titleCollectorPlugin(md3) {
+  const fence = md3.renderer.rules.fence;
+  md3.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args;
+    const token = tokens[idx];
+    const title = extractTitle(token.info);
+    if (title && title !== extractTitle("")) {
+      globalTitleCollector.add(title);
+    }
+    return fence(...args);
+  };
+}
+
 // node/plugins/markdown/setup.ts
 var defaultCodeTheme = { light: "github-light", dark: "github-dark" };
 async function setupMarkdownPlugins(md3, options, base = "/") {
@@ -2539,7 +2557,7 @@ async function setupMarkdownPlugins(md3, options, base = "/") {
   const siteConfig = options?.config.siteConfig || {};
   if (mdOptions.preConfig)
     mdOptions.preConfig(md3);
-  md3.use(highlightLinePlugin).use(preWrapperPlugin, { theme, siteConfig }).use(snippetPlugin, options?.userRoot).use(containerPlugin, {
+  md3.use(highlightLinePlugin).use(titleCollectorPlugin).use(preWrapperPlugin, { theme, siteConfig }).use(snippetPlugin, options?.userRoot).use(containerPlugin, {
     languages: siteConfig.languages,
     ...mdOptions?.container,
     blocks: {
@@ -4052,6 +4070,7 @@ async function ViteValaxyPlugins(valaxyApp, serverOptions = {}) {
       console.log();
     }
   }
+  const codeBlockTitles = getGlobalTitleCollector();
   const builtinCustomIcon = {
     nodejs: "vscode-icons:file-type-node",
     playwright: "vscode-icons:file-type-playwright",
@@ -4067,7 +4086,8 @@ async function ViteValaxyPlugins(valaxyApp, serverOptions = {}) {
       defaultLabels: [
         ...valaxyConfig.groupIcons?.defaultLabels || [],
         ...Object.keys(builtinCustomIcon),
-        ...Object.keys(valaxyConfig.groupIcons?.customIcon || {})
+        ...Object.keys(valaxyConfig.groupIcons?.customIcon || {}),
+        ...Array.from(codeBlockTitles)
       ]
     })
   );

package/dist/node/cli/index.js

@@ -3,7 +3,7 @@ import {
   registerDevCommand,
   run,
   startValaxyDev
-} from "../../chunk-V3FAZBPQ.js";
+} from "../../chunk-FQD2JPI3.js";
 export {
   cli,
   registerDevCommand,

package/dist/node/index.js

@@ -50,7 +50,7 @@ import {
   startValaxyDev,
   toAtFS,
   transformObject
-} from "../chunk-V3FAZBPQ.js";
+} from "../chunk-FQD2JPI3.js";
 export {
   $t,
   ALL_ROUTE,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy",
   "type": "module",
-  "version": "0.25.3",
+  "version": "0.25.4",
   "description": "📄 Vite & Vue powered static blog generator.",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -58,7 +58,7 @@
     "@clack/prompts": "^0.11.0",
     "@iconify-json/ri": "^1.2.5",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@shikijs/transformers": "^3.7.0",
+    "@shikijs/transformers": "^3.8.0",
     "@types/katex": "^0.16.7",
     "@unhead/addons": "^2.0.12",
     "@unhead/schema-org": "^2.0.12",
@@ -112,7 +112,7 @@
     "qrcode": "^1.5.4",
     "resolve-global": "^2.0.0",
     "sass": "^1.89.2",
-    "shiki": "^3.7.0",
+    "shiki": "^3.8.0",
     "star-markdown-css": "^0.5.3",
     "table": "^6.9.0",
     "unhead": "^2.0.12",
@@ -132,8 +132,8 @@
     "vue-i18n": "^11.1.9",
     "vue-router": "^4.5.1",
     "yargs": "^18.0.0",
-    "@valaxyjs/devtools": "0.25.3",
-    "@valaxyjs/utils": "0.25.3"
+    "@valaxyjs/devtools": "0.25.4",
+    "@valaxyjs/utils": "0.25.4"
   },
   "devDependencies": {
     "@mdit-vue/plugin-component": "^2.1.4",