valaxy 0.6.0 → 0.6.1

package/client/components/ValaxyMd.vue

@@ -3,6 +3,7 @@ import type { Post } from 'valaxy'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAplayer, useCodePen } from '~/composables'
+import { useCopyCode } from '~/composables/copy-code'
 import { wrapTable } from '~/utils'
 
 const props = defineProps<{
@@ -27,41 +28,47 @@ if (props.frontmatter.aplayer)
 
 if (props.frontmatter.codepen)
   useCodePen()
+
+useCopyCode()
 </script>
 
 <template>
-  <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
-    <slot ref="content" @vnode-updated="updateDom" />
-
-    <div text="center">
-      <a
-        v-if="frontmatter.url"
-        :href="frontmatter.url"
-        class="post-link-btn shadow hover:shadow-md"
-        rounded
-        target="_blank"
-        m="b-4"
-      >
-        {{ t('post.view_link') }}
-      </a>
-    </div>
+  <Transition appear>
+    <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
+      <slot ref="content" @vnode-updated="updateDom" />
 
-    <slot v-if="typeof frontmatter.end !== 'undefined'" name="end">
-      <div m="y-4" class="end flex justify-center items-center">
-        <hr class="line inline-flex" w="full" m="!y-2">
-        <span p="x-4" font="serif bold" class="whitespace-nowrap">
-          {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
-        </span>
-        <hr class="line inline-flex" w="full" m="!y-2">
+      <div text="center">
+        <a
+          v-if="frontmatter.url"
+          :href="frontmatter.url"
+          class="post-link-btn shadow hover:shadow-md"
+          rounded
+          target="_blank"
+          m="b-4"
+        >
+          {{ t('post.view_link') }}
+        </a>
       </div>
-    </slot>
-  </article>
+
+      <slot v-if="frontmatter.end !== undefined" name="end">
+        <div m="y-4" class="end flex justify-center items-center">
+          <hr class="line inline-flex" w="full" m="!y-2">
+          <span p="x-4" font="serif bold" class="whitespace-nowrap">
+            {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
+          </span>
+          <hr class="line inline-flex" w="full" m="!y-2">
+        </div>
+      </slot>
+    </article>
+  </Transition>
 </template>
 
 <style lang="scss">
-.end {
-  .line {
-    height: 1px;
+.markdown-body {
+  .end {
+    .line {
+      height: 1px;
+    }
   }
 }
 </style>

package/client/composables/copy-code.ts

@@ -0,0 +1,92 @@
+import { nextTick, watch } from 'vue'
+import { isClient } from '@vueuse/core'
+import { useRoute } from 'vue-router'
+
+export function useCopyCode() {
+  const route = useRoute()
+
+  if (isClient) {
+    watch(
+      () => route.path,
+      () => {
+        nextTick(() => {
+          document
+            .querySelectorAll<HTMLSpanElement>(
+              '.markdown-body div[class*="language-"]>span.copy',
+            )
+            .forEach(handleElement)
+        })
+      },
+      { immediate: true, flush: 'post' },
+    )
+  }
+}
+
+async function copyToClipboard(text: string) {
+  try {
+    return navigator.clipboard.writeText(text)
+  }
+  catch {
+    const element = document.createElement('textarea')
+    const previouslyFocusedElement = document.activeElement
+
+    element.value = text
+
+    // Prevent keyboard from showing on mobile
+    element.setAttribute('readonly', '')
+
+    element.style.contain = 'strict'
+    element.style.position = 'absolute'
+    element.style.left = '-9999px'
+    element.style.fontSize = '12pt' // Prevent zooming on iOS
+
+    const selection = document.getSelection()
+    const originalRange = selection
+      ? selection.rangeCount > 0 && selection.getRangeAt(0)
+      : null
+
+    document.body.appendChild(element)
+    element.select()
+
+    // Explicit selection workaround for iOS
+    element.selectionStart = 0
+    element.selectionEnd = text.length
+
+    document.execCommand('copy')
+    document.body.removeChild(element)
+
+    if (originalRange) {
+      selection!.removeAllRanges() // originalRange can't be truthy when selection is falsy
+      selection!.addRange(originalRange)
+    }
+
+    // Get the focus back on the previously focused element, if any
+    if (previouslyFocusedElement)
+      (previouslyFocusedElement as HTMLElement).focus()
+  }
+}
+
+function handleElement(el: HTMLElement) {
+  el.onclick = () => {
+    const parent = el.parentElement
+
+    if (!parent)
+      return
+
+    const isShell
+      = parent.classList.contains('language-sh')
+      || parent.classList.contains('language-bash')
+
+    let { innerText: text = '' } = parent
+
+    if (isShell)
+      text = text.replace(/^ *\$ /gm, '')
+
+    copyToClipboard(text).then(() => {
+      el.classList.add('copied')
+      setTimeout(() => {
+        el.classList.remove('copied')
+      }, 3000)
+    })
+  }
+}

package/client/composables/outline.ts

@@ -1,6 +1,5 @@
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, onUpdated } from 'vue'
-import { useRoute } from 'vue-router'
+import { onMounted, onUnmounted, onUpdated } from 'vue'
 import type { Header } from '../../types'
 import { throttleAndDebounce } from '~/utils'
 
@@ -52,18 +51,6 @@ function mapHeaders(
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56
 
-export function useOutline() {
-  const route = useRoute()
-
-  const hasOutline = computed(() => {
-    return route.meta?.headers?.length > 0
-  })
-
-  return {
-    hasOutline,
-  }
-}
-
 export function useActiveAnchor(
   container: Ref<HTMLElement>,
   marker: Ref<HTMLElement>,

package/client/composables/sidebar.ts

@@ -158,15 +158,3 @@ function throttleAndDebounce(fn: () => void, delay: number): () => void {
     }
   }
 }
-
-export function useOutline() {
-  const route = useRoute()
-
-  const hasOutline = computed(() => {
-    return route.meta.headers.length > 0
-  })
-
-  return {
-    hasOutline,
-  }
-}

package/client/modules/valaxy.ts

@@ -12,7 +12,7 @@ import { useStorage } from '@vueuse/core'
 
 import type { Router } from 'vue-router'
 import type { PageDataPayload } from '../../types'
-import { initConfig, initContext, valaxyConfigSymbol } from '../config'
+import { initConfig, valaxyConfigSymbol } from '../config'
 import { ensureSuffix } from '@antfu/utils'
 
 import type { UserModule } from '~/types'
@@ -45,7 +45,6 @@ function shouldHotReload(payload: PageDataPayload): boolean {
 
 export const install: UserModule = ({ app, router }) => {
   // inject valaxy config before modules
-  const ctx = initContext()
   const config = initConfig()
   app.provide(valaxyConfigSymbol, config)
 
@@ -62,18 +61,6 @@ export const install: UserModule = ({ app, router }) => {
   router.isReady().then(() => {
     handleHMR(router)
   })
-
-  function pathToUrl(path: string): string {
-    return `${location.origin}/@fs${ctx.value.userRoot}/pages${path}.md?import`
-  }
-
-  router.beforeEach(async (to) => {
-    try {
-      const { __pageData } = await import(/* @vite-ignore */pathToUrl(to.path))
-      to.meta = Object.assign(to.meta, __pageData)
-    }
-    catch {}
-  })
 }
 
 function handleHMR(router: Router): void {

package/client/styles/common/code.scss

@@ -1,8 +1,5 @@
 @use "~/styles/mixins" as *;
 
-/* https://github.com/antfu/prism-theme-vars */
-@use "prism-theme-vars/base.css" as *;
-
 @include mobile {
   .markdown-body {
     div[class*="language-"] {
@@ -11,17 +8,40 @@
   }
 }
 
+@media (min-width: 640px) {
+  .markdown-body div[class*="language-"] {
+    border-radius: 6px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 639px) {
+  .markdown-body li div[class*="language-"] {
+    border-radius: 6px 0 0 6px;
+  }
+}
+
 .markdown-body {
   div[class*="language-"] {
     position: relative;
-    padding: 0;
-    background-color: var(--smc-code-bg-color);
+    background-color: var(--va-code-block-bg);
+
+    code {
+      padding: 0 24px;
+      line-height: var(--va-code-line-height);
+      font-size: var(--va-code-font-size);
+      color: var(--va-code-block-color);
+      transition: color 0.5s;
+      width: fit-content;
+    }
 
     pre {
       position: relative;
-      padding: 1rem;
       z-index: 1;
-      background: none;
+      margin: 0;
+      padding: 1rem 0;
+      background: transparent;
+      overflow-x: auto;
 
       // expand
       code {
@@ -31,177 +51,181 @@
   }
 }
 
-/* Line highlighting */
-
-.highlight-lines {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding: 1rem 0;
-  width: 100%;
-  line-height: var(--prism-line-height);
-  user-select: none;
-  overflow: hidden;
-
-  .highlighted {
-    background-color: rgba(0, 0, 0, 0.08);
-  }
-}
-
-.dark {
+// marker
+.markdown-body {
   .highlight-lines {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px 0;
+    width: 100%;
+    line-height: var(--va-code-line-height);
+    font-family: var(--va-font-mono);
+    font-size: var(--va-code-font-size);
+    user-select: none;
+    overflow: hidden;
+
     .highlighted {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: var(--va-code-line-highlight-color);
+      transition: background-color 0.5s;
     }
   }
-}
 
-.markdown-body {
-  code {
-    color: var(--prism-foreground) !important;
+  [class*="language-"] > span.copy {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 2;
+    display: block;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    width: 40px;
+    height: 40px;
+    background-color: var(--va-code-block-bg);
+    opacity: 0;
+    cursor: pointer;
+    background-image: var(--va-icon-copy);
+    background-position: 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    transition: opacity 0.25s;
   }
-}
-
-// prism
-html:not(.dark) {
-  // text
-  --prism-foreground: #224466;
-
-  --prism-background: #f8f8f8;
-  --prism-comment: #758575;
-  --prism-namespace: #444444;
-  --prism-string: #bc8671;
-  --prism-punctuation: #80817d;
-  --prism-literal: #36acaa;
-  --prism-keyword: #248459;
-  --prism-function: #0088bb;
-  --prism-deleted: #9a050f;
-  --prism-class: #2b91af;
-  --prism-builtin: #800000;
-  --prism-property: #ce9178;
-  --prism-regex: #ad502b;
-}
-
-html.dark {
-  --prism-foreground: #a6accd;
-
-  --prism-background: #242424;
-  --prism-namespace: #aaaaaa;
-  --prism-comment: #758575;
-  --prism-namespace: #444444;
-  --prism-string: #c3e88d;
-  --prism-punctuation: #a6accd;
-  --prism-literal: #36acaa;
-  --prism-keyword: #89ddff;
-  --prism-function: #82aaff;
-  --prism-deleted: #9a050f;
-  --prism-class: #4ec9b0;
-  --prism-builtin: #d16969;
-  --prism-property: #c792ea;
-  --prism-regex: #ad502b;
-  --prism-selector: #c3e88d;
-}
-
-/* Language marker */
-// @use 'prism-theme-vars/marker.css' as *; * not div
-div[class*="language-"]:before {
-  position: absolute;
-  top: 0.6em;
-  right: 1em;
-  z-index: 2;
-  font-size: 0.8rem;
-  color: #888;
-}
-
-div[class~="language-html"]:before,
-div[class~="language-markup"]:before {
-  content: "html";
-}
-
-div[class~="language-md"]:before,
-div[class~="language-markdown"]:before {
-  content: "md";
-}
-
-div[class~="language-css"]:before {
-  content: "css";
-}
-
-div[class~="language-sass"]:before {
-  content: "sass";
-}
-
-div[class~="language-scss"]:before {
-  content: "scss";
-}
-
-div[class~="language-less"]:before {
-  content: "less";
-}
-
-div[class~="language-stylus"]:before {
-  content: "styl";
-}
-
-div[class~="language-js"]:before,
-div[class~="language-javascript"]:before {
-  content: "js";
-}
-
-div[class~="language-ts"]:before,
-div[class~="language-typescript"]:before {
-  content: "ts";
-}
-
-div[class~="language-json"]:before {
-  content: "json";
-}
-
-div[class~="language-rb"]:before,
-div[class~="language-ruby"]:before {
-  content: "rb";
-}
-
-div[class~="language-py"]:before,
-div[class~="language-python"]:before {
-  content: "py";
-}
-
-div[class~="language-sh"]:before,
-div[class~="language-bash"]:before {
-  content: "sh";
-}
 
-div[class~="language-php"]:before {
-  content: "php";
-}
-
-div[class~="language-go"]:before {
-  content: "go";
-}
+  [class*="language-"]:hover > span.copy {
+    opacity: 1;
+  }
 
-div[class~="language-rust"]:before {
-  content: "rust";
-}
+  [class*="language-"] > span.copy:hover {
+    background-color: var(--va-code-copy-code-hover-bg);
+  }
 
-div[class~="language-java"]:before {
-  content: "java";
-}
+  [class*="language-"] > span.copy.copied,
+  [class*="language-"] > span.copy:hover.copied {
+    border-radius: 0 4px 4px 0;
+    background-color: var(--va-code-copy-code-hover-bg);
+    background-image: var(--va-icon-copied);
+  }
 
-div[class~="language-c"]:before {
-  content: "c";
-}
+  [class*="language-"] > span.copy.copied::before,
+  [class*="language-"] > span.copy:hover.copied::before {
+    position: relative;
+    left: -65px;
+    display: block;
+    border-radius: 4px 0 0 4px;
+    padding-top: 8px;
+    width: 64px;
+    height: 40px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--va-code-copy-code-active-text);
+    background-color: var(--va-code-copy-code-hover-bg);
+    white-space: nowrap;
+    content: "Copied";
+  }
 
-div[class~="language-yml"]:before,
-div[class~="language-yaml"]:before {
-  content: "yaml";
-}
+  [class*="language-"]:before {
+    position: absolute;
+    top: 6px;
+    right: 12px;
+    z-index: 2;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--va-c-text-dark-3);
+    transition: color 0.5s, opacity 0.5s;
+  }
 
-div[class~="language-dockerfile"]:before {
-  content: "dockerfile";
-}
+  [class*="language-"]:hover:before {
+    opacity: 0;
+  }
 
-div[class~="language-vue"]:before {
-  content: "vue";
+  [class~="language-c"]:before {
+    content: "c";
+  }
+  [class~="language-css"]:before {
+    content: "css";
+  }
+  [class~="language-go"]:before {
+    content: "go";
+  }
+  [class~="language-html"]:before {
+    content: "html";
+  }
+  [class~="language-java"]:before {
+    content: "java";
+  }
+  [class~="language-javascript"]:before {
+    content: "js";
+  }
+  [class~="language-js"]:before {
+    content: "js";
+  }
+  [class~="language-json"]:before {
+    content: "json";
+  }
+  [class~="language-jsx"]:before {
+    content: "jsx";
+  }
+  [class~="language-less"]:before {
+    content: "less";
+  }
+  [class~="language-markdown"]:before {
+    content: "md";
+  }
+  [class~="language-md"]:before {
+    content: "md";
+  }
+  [class~="language-php"]:before {
+    content: "php";
+  }
+  [class~="language-python"]:before {
+    content: "py";
+  }
+  [class~="language-py"]:before {
+    content: "py";
+  }
+  [class~="language-rb"]:before {
+    content: "rb";
+  }
+  [class~="language-ruby"]:before {
+    content: "rb";
+  }
+  [class~="language-rust"]:before {
+    content: "rust";
+  }
+  [class~="language-sass"]:before {
+    content: "sass";
+  }
+  [class~="language-scss"]:before {
+    content: "scss";
+  }
+  [class~="language-sh"]:before {
+    content: "sh";
+  }
+  [class~="language-bash"]:before {
+    content: "sh";
+  }
+  [class~="language-stylus"]:before {
+    content: "styl";
+  }
+  [class~="language-vue-html"]:before {
+    content: "template";
+  }
+  [class~="language-typescript"]:before {
+    content: "ts";
+  }
+  [class~="language-ts"]:before {
+    content: "ts";
+  }
+  [class~="language-tsx"]:before {
+    content: "tsx";
+  }
+  [class~="language-vue"]:before {
+    content: "vue";
+  }
+  [class~="language-yaml"]:before {
+    content: "yaml";
+  }
 }

package/client/styles/common/markdown.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
 
 .markdown-body {
-  --prism-font-family: var(--va-font-mono);
-
   --smc-font-family: var(--va-font-sans);
 
   video {