valaxy 1.0.0-beta.2 → 1.0.0-rc.10

package/bin/valaxy.mjs

@@ -1,10 +1,14 @@
 #!/usr/bin/env node
 'use strict'
 
+import process from 'node:process'
 import { run } from '../dist/node/cli/index.mjs'
 
-function main() {
-  run()
+async function main() {
+  await run()
 }
 
-main()
+main().catch((error) => {
+  console.error(error)
+  process.exitCode = 1
+})

package/client/components/ValaxyDecrypt.vue

@@ -103,7 +103,7 @@ const hasWarning = computed(() => isClient && location.protocol !== 'https:')
     </div>
     <div v-else>
       <ValaxyDeprecatedContent :html="decryptedContent" />
-      <div w-full text-center mt-8>
+      <div class="decrypt-action mb-8 sm:mb-0" w-full text-center mt-8>
         <button m-auto class="btn" font-bold @click="encryptAgain">
           Encrypt Again
         </button>

package/client/components/ValaxyGalleryDecrypt.vue

@@ -65,7 +65,7 @@ defineExpose({
     </div>
     <div v-else>
       <slot :photos="photos" />
-      <div w-full text-center mt-8>
+      <div class="decrypt-action mb-8 sm:mb-0" w-full text-center mt-8>
         <button m-auto class="btn" font-bold @click="encryptAgain">
           Encrypt Again
         </button>

package/client/components/ValaxyMd.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { onContentUpdated, runContentUpdated, useCodePen, useCollapseCode, useCopyCode, useMediumZoom, wrapTable } from 'valaxy'
+import { onContentUpdated, runContentUpdated, setIframeAspectRatios, useCodePen, useCollapseCode, useCopyCode, useMediumZoom, wrapTable } from 'valaxy'
 import { onMounted, onUpdated, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useCodeGroups } from '../composables/codeGroups'
@@ -13,9 +13,14 @@ const props = defineProps<{
 
 const { t } = useI18n()
 
-const contentRef = ref()
+const contentRef = ref<HTMLElement>()
 onContentUpdated(() => {
-  wrapTable(contentRef.value)
+  const content = contentRef.value
+  if (!content)
+    return
+
+  wrapTable(content)
+  setIframeAspectRatios(content)
 })
 
 onMounted(() => {
@@ -41,8 +46,8 @@ useVanillaLazyLoad()
 </script>
 
 <template>
-  <article v-if="$slots.default" :class="frontmatter.markdownClass || 'markdown-body'">
-    <slot ref="contentRef" @vue:updated="runContentUpdated" />
+  <article v-if="$slots.default" ref="contentRef" :class="frontmatter.markdownClass || 'markdown-body'">
+    <slot @vue:updated="runContentUpdated" />
 
     <div v-if="frontmatter.url" text="center">
       <a
@@ -75,4 +80,12 @@ useVanillaLazyLoad()
 .medium-zoom-image--opened {
   z-index: 999;
 }
+
+// Keep dimensioned embeds proportional when their width is constrained by the
+// article. :where() deliberately leaves explicit author styles in control.
+:where(iframe[data-va-responsive-iframe]) {
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: var(--va-iframe-aspect-ratio);
+}
 </style>

package/client/composables/app/useValaxyApp.ts

@@ -5,10 +5,11 @@ import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useFrontmatter, useLocale, useValaxyHead, useValaxyI18n } from '../../composables'
 import { useTimezone } from '../../composables/global'
+import { useSiteConfig } from '../../config'
+import { resolveSiteUrl } from '../../utils'
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
-import { useSiteConfig } from '../../config'
 
 export function useValaxyApp() {
   const siteConfig = useSiteConfig()
@@ -27,8 +28,16 @@ export function useValaxyApp() {
   }
 
   // seo
-  const siteUrl = computed(() => fm.value.url || siteConfig.value.url)
+  const siteUrl = computed(() => resolveSiteUrl(
+    siteConfig.value.url,
+    fm.value.url || route.path,
+  ))
   const description = computed(() => $tO(fm.value.excerpt) || $tO(fm.value.description) || $t(siteConfig.value.description))
+  const ogImage = computed(() => resolveSiteUrl(
+    siteConfig.value.url,
+    fm.value.ogImage || fm.value.cover || fm.value.firstImage || siteConfig.value.favicon,
+  ))
+  const seoTitle = computed(() => $tO(fm.value.title) || $t(siteConfig.value.title))
 
   useSeoMeta({
     description,
@@ -36,10 +45,15 @@ export function useValaxyApp() {
     ogLocale: computed(() => locale.value || fm.value.lang || siteConfig.value.lang || 'en'),
     ogLocaleAlternate: computed(() => siteConfig.value.languages.filter(l => l !== locale.value)),
     ogSiteName: computed(() => $t(siteConfig.value.title)),
-    ogTitle: computed(() => $tO(fm.value.title) || $t(siteConfig.value.title)),
-    ogImage: computed(() => fm.value.ogImage || fm.value.cover || fm.value.firstImage || siteConfig.value.favicon),
+    ogTitle: seoTitle,
+    ogImage,
+    ogImageAlt: seoTitle,
     ogType: 'website',
     ogUrl: siteUrl,
+    twitterCard: 'summary_large_image',
+    twitterDescription: description,
+    twitterImage: ogImage,
+    twitterTitle: seoTitle,
   })
 
   // for SEO
@@ -48,7 +62,7 @@ export function useValaxyApp() {
     // Personal Website or Blog
     definePerson({
       name: $t(siteConfig.value.author.name),
-      url: siteUrl.value,
+      url: siteConfig.value.url,
       image: $t(siteConfig.value.author.avatar),
       sameAs: siteConfig.value.social.map(s => s.link),
     }),

package/client/composables/app/useValaxyHead.ts

@@ -1,16 +1,27 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import pkg from '../../../package.json' with { type: 'json' }
 
 import { useFrontmatter, useValaxyI18n } from '../../composables'
 import { useSiteConfig } from '../../config'
+import { resolveSiteUrl, withBase } from '../../utils'
 
 export function useValaxyHead() {
   const { $t, $tO, locale } = useValaxyI18n()
 
   const fm = useFrontmatter()
+  const route = useRoute()
   const siteConfig = useSiteConfig()
   const $title = computed(() => $tO(fm.value.title))
+  const canonicalUrl = computed(() => {
+    const siteUrl = siteConfig.value.url
+    if (!/^https?:\/\//.test(siteUrl))
+      return ''
+
+    const pagePath = fm.value.url || route.path
+    return resolveSiteUrl(siteUrl, pagePath)
+  })
 
   useHead({
     htmlAttrs: {
@@ -24,7 +35,7 @@ export function useValaxyHead() {
     link: [
       {
         rel: 'icon',
-        href: siteConfig.value.favicon,
+        href: withBase(siteConfig.value.favicon),
         type: siteConfig.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
       },
     ],
@@ -48,6 +59,10 @@ export function useValaxyHead() {
     },
   })
 
+  useHead(computed(() => canonicalUrl.value
+    ? { link: [{ rel: 'canonical', href: canonicalUrl.value }] }
+    : {}))
+
   // Add mac detection class on client side only, after hydration
   // to avoid SSR/client mismatch on the <html> element
   onMounted(() => {

package/client/composables/features/medium-zoom.ts

@@ -1,6 +1,8 @@
+import type { Zoom, ZoomSelector } from 'medium-zoom'
+import type { MaybeRefOrGetter } from 'vue'
 import mediumZoom from 'medium-zoom'
 import { useSiteConfig } from 'valaxy'
-import { onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, toValue } from 'vue'
 
 interface ZoomRectLike {
   left: number
@@ -97,55 +99,70 @@ function freezeOpenedImage(element: HTMLElement): SavedZoomImageStyle | null {
 /**
  * @description image preview by medium-zoom
  */
-export function useMediumZoom() {
+export function useMediumZoom(selector?: MaybeRefOrGetter<ZoomSelector | null | undefined>) {
   const siteConfig = useSiteConfig()
-  const mediumZoomConfig = siteConfig.value.mediumZoom
-
-  if (mediumZoomConfig.enable) {
-    onMounted(() => {
-      const zoom = mediumZoom(
-        mediumZoomConfig.selector || '.markdown-body img',
-        {
-          background: 'var(--medium-zoom-c-bg, rgba(0, 0, 0, 0.8))',
-          ...mediumZoomConfig.options,
-        },
-      )
-
-      let savedStyles: SavedZoomImageStyle[] = []
-
-      zoom.on('opened', () => {
-        savedStyles = Array
-          .from(document.querySelectorAll<HTMLElement>('.medium-zoom-image--opened'))
-          .map(freezeOpenedImage)
-          .filter((style): style is SavedZoomImageStyle => style !== null)
+  const enabled = computed(() => siteConfig.value.mediumZoom.enable)
+  let savedStyles: SavedZoomImageStyle[] = []
+  let zoom: Zoom | undefined
+
+  function restoreSavedStyles() {
+    if (!savedStyles.length)
+      return
+
+    for (const style of savedStyles) {
+      const { element } = style
+      if (!document.body.contains(element))
+        continue
+
+      applyWithoutTransformTransition(element, () => {
+        element.style.transform = style.transform
+        element.style.width = style.width
+        element.style.height = style.height
       })
 
-      zoom.on('close', () => {
-        if (!savedStyles.length)
-          return
-
-        for (const style of savedStyles) {
-          const { element } = style
-          if (!document.body.contains(element))
-            continue
-
-          // Restore original medium-zoom styles (without transition) so the element
-          // is back to the state medium-zoom expects for its close animation.
-          applyWithoutTransformTransition(element, () => {
-            element.style.transform = style.transform
-            element.style.width = style.width
-            element.style.height = style.height
-          })
-
-          // medium-zoom sets `transform = ''` BEFORE dispatching the close event,
-          // but we just overwrote it above. Re-apply `''` to actually trigger the
-          // close transition; otherwise transitionend never fires and the cloned
-          // image element is never removed from the DOM.
-          element.style.transform = ''
-        }
-
-        savedStyles = []
-      })
+      // medium-zoom clears transform before emitting close. Restore that state
+      // after replacing the frozen dimensions so its transition can finish.
+      element.style.transform = ''
+    }
+
+    savedStyles = []
+  }
+
+  function handleOpened() {
+    savedStyles = Array
+      .from(document.querySelectorAll<HTMLElement>('.medium-zoom-image--opened'))
+      .map(freezeOpenedImage)
+      .filter((style): style is SavedZoomImageStyle => style !== null)
+  }
+
+  onMounted(() => {
+    if (!enabled.value)
+      return
+
+    const mediumZoomConfig = siteConfig.value.mediumZoom
+    const target = selector === undefined
+      ? mediumZoomConfig.selector || '.markdown-body img'
+      : toValue(selector)
+    if (!target)
+      return
+
+    zoom = mediumZoom(target, {
+      background: 'var(--medium-zoom-c-bg, rgba(0, 0, 0, 0.8))',
+      ...mediumZoomConfig.options,
     })
+    zoom.on('opened', handleOpened)
+    zoom.on('close', restoreSavedStyles)
+  })
+
+  onBeforeUnmount(() => {
+    restoreSavedStyles()
+    zoom?.off('opened', handleOpened)
+    zoom?.off('close', restoreSavedStyles)
+    zoom?.detach()
+    zoom = undefined
+  })
+
+  return {
+    enabled,
   }
 }

package/client/composables/index.ts

@@ -15,7 +15,6 @@ export * from './features'
 export * from './helper'
 export * from './layout'
 export * from './locale'
-
 export * from './outline'
 export * from './post'
 

package/client/index.html

@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- head -->
 </head>
 <body>
   <div id="app"></div>
+  <div id="valaxy-teleports"></div>
   <script type="module" src="./main.ts"></script>
   <!-- body -->
 </body>

package/client/styles/global/reset.scss

@@ -10,10 +10,6 @@ a {
   font-weight: 500;
 }
 
-* {
-  outline: none;
-}
-
 hr {
   margin: 1rem;
 }

package/client/utils/iframe.ts

@@ -0,0 +1,34 @@
+const RESPONSIVE_IFRAME_ATTRIBUTE = 'data-va-responsive-iframe'
+const IFRAME_ASPECT_RATIO_PROPERTY = '--va-iframe-aspect-ratio'
+
+function parsePositiveDimension(value: string | null) {
+  if (value === null)
+    return
+
+  const dimension = Number(value)
+  if (Number.isFinite(dimension) && dimension > 0)
+    return dimension
+}
+
+/**
+ * Make dimensioned iframes responsive without assuming a fixed video ratio.
+ * The generated custom property is consumed by the low-specificity markdown
+ * styles, so an author's explicit height or aspect-ratio still takes priority.
+ */
+export function setIframeAspectRatios(container: ParentNode = document) {
+  container.querySelectorAll<HTMLIFrameElement>('iframe').forEach((iframe) => {
+    const width = parsePositiveDimension(iframe.getAttribute('width'))
+    const height = parsePositiveDimension(iframe.getAttribute('height'))
+
+    if (width && height) {
+      iframe.setAttribute(RESPONSIVE_IFRAME_ATTRIBUTE, '')
+      iframe.style.setProperty(IFRAME_ASPECT_RATIO_PROPERTY, `${width} / ${height}`)
+      return
+    }
+
+    if (iframe.hasAttribute(RESPONSIVE_IFRAME_ATTRIBUTE)) {
+      iframe.removeAttribute(RESPONSIVE_IFRAME_ATTRIBUTE)
+      iframe.style.removeProperty(IFRAME_ASPECT_RATIO_PROPERTY)
+    }
+  })
+}

package/client/utils/index.ts

@@ -3,6 +3,8 @@ export * from './cdn'
 export * from './code'
 export * from './content'
 export * from './helper'
+export * from './iframe'
+export * from './path'
 export * from './router'
 export * from './time'
 export * from './types'

package/client/utils/path.ts

@@ -0,0 +1,29 @@
+import { EXTERNAL_URL_RE } from '../../shared'
+
+/**
+ * Join two URL paths while resolving a slash collision.
+ */
+function joinPath(base: string, path: string): string {
+  return `${base}${path}`.replace(/\/+/g, '/')
+}
+
+/**
+ * Append Vite's resolved base to an internal root-absolute URL.
+ * External and relative URLs are returned unchanged.
+ */
+export function withBase(path: string): string {
+  return EXTERNAL_URL_RE.test(path) || !path.startsWith('/')
+    ? path
+    : joinPath(import.meta.env.BASE_URL, path)
+}
+
+/**
+ * Resolve an internal path against the configured canonical site URL.
+ * Root-absolute paths remain relative to a site URL's deployment subpath.
+ */
+export function resolveSiteUrl(siteUrl: string, path: string): string {
+  if (!path || EXTERNAL_URL_RE.test(path) || !/^https?:\/\//.test(siteUrl))
+    return path
+
+  return new URL(path.replace(/^\/+/, ''), `${siteUrl.replace(/\/+$/, '')}/`).href
+}

package/dist/node/cli/index.d.mts

@@ -1,4 +1,3 @@
-import * as yargs from 'yargs';
 import { Argv } from 'yargs';
 import { LogLevel, ViteDevServer } from 'vite';
 
@@ -11,7 +10,11 @@ declare function startValaxyDev({ root, port, remote, log, open, }: {
 }): Promise<ViteDevServer>;
 declare function registerDevCommand(cli: Argv): void;
 
-declare const cli: yargs.Argv<{}>;
-declare function run(): void;
+interface CreateCliOptions {
+    userRoot?: string;
+}
+declare function createCli(argv?: string[], options?: CreateCliOptions): Promise<Argv<object>>;
+declare function run(argv?: string[], options?: CreateCliOptions): Promise<void>;
 
-export { cli, registerDevCommand, run, startValaxyDev };
+export { createCli, registerDevCommand, run, startValaxyDev };
+export type { CreateCliOptions };

package/dist/node/cli/index.mjs

@@ -1,9 +1,9 @@
+import 'node:path';
 import 'node:process';
 import 'yargs';
 import 'yargs/helpers';
-export { c as cli, I as registerDevCommand, W as run, Y as startValaxyDev } from '../../shared/valaxy._QBHi6cy.mjs';
+export { c as createCli, J as registerDevCommand, Y as run, _ as startValaxyDev } from '../../shared/valaxy.B2Ey6Ph7.mjs';
 import 'node:os';
-import 'node:path';
 import 'consola';
 import 'consola/utils';
 import 'fast-glob';
@@ -26,7 +26,7 @@ import '@valaxyjs/utils';
 import 'node:fs/promises';
 import 'dayjs';
 import 'feed';
-import 'markdown-it';
+import 'markdown-exit';
 import 'table';
 import 'hookable';
 import 'node:fs';
@@ -38,7 +38,6 @@ import 'vitepress-plugin-group-icons';
 import 'p-map';
 import 'node:buffer';
 import 'minisearch';
-import 'markdown-it-async';
 import '@shikijs/transformers';
 import 'shiki';
 import 'css-i18n';