valaxy 0.14.45 → 0.14.46

package/client/components/ValaxyDecrypt.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { useDecrypt, useFrontmatter } from 'valaxy'
+import type { Ref } from 'vue'
+import { defineComponent, h, inject, ref } from 'vue'
+
+const props = defineProps<{
+  encryptedContent: string
+}>()
+
+const password = ref('')
+const decryptedContent = ref('')
+
+const hasError = ref(false)
+
+const onContentUpdated = inject('onContentUpdated') as Ref<() => void>
+
+const { decrypt } = useDecrypt()
+async function decryptContent() {
+  const ciphertext = props.encryptedContent
+  if (!ciphertext)
+    return
+  try {
+    const result = await decrypt(password.value, ciphertext)
+    decryptedContent.value = result || ''
+
+    setTimeout(() => {
+      onContentUpdated.value?.()
+    }, 16)
+  }
+  catch (e) {
+    hasError.value = true
+  }
+}
+
+function encryptAgain() {
+  decryptedContent.value = ''
+  password.value = ''
+
+  setTimeout(() => {
+    onContentUpdated.value?.()
+  }, 16)
+}
+
+const ValaxyDeprecatedContent = defineComponent({
+  name: 'ValaxyDeprecatedContent',
+  props: {
+    html: String,
+  },
+  render() {
+    const content = `<div>${this.html}</div>`
+    return h({
+      setup: () => {
+        const fm = useFrontmatter()
+        return {
+          frontmatter: fm,
+        }
+      },
+      template: content,
+    })
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div v-if="!decryptedContent" w-full pt-14 pb-10>
+      <div
+        class="decrypt-password-container w-full sm:w-1/2"
+        flex-center m-auto relative
+      >
+        <input
+          v-model="password"
+          w-full
+          border pl-5 pr-11 py-3 rounded hover:shadow transition
+          type="password" placeholder="Enter password"
+          :class="hasError && 'border-red'"
+          @input="hasError = false"
+          @keyup.enter="decryptContent"
+        >
+        <div
+          cursor-pointer
+          absolute text-2xl
+          i-ri-arrow-right-circle-line right-3
+          text-gray hover:text-black
+          @click="decryptContent"
+        />
+      </div>
+    </div>
+    <div v-else>
+      <ValaxyDeprecatedContent :html="decryptedContent" />
+      <div w-full text-center mt-8>
+        <button m-auto class="btn" font-bold @click="encryptAgain">
+          Encrypt Again
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/client/components/ValaxyMd.vue

@@ -14,9 +14,9 @@ const onContentUpdated = inject('onContentUpdated') as Ref<() => void>
 
 const { t } = useI18n()
 
-const content = ref()
+const contentRef = ref()
 function updateDom() {
-  wrapTable(content.value)
+  wrapTable(contentRef.value)
   onContentUpdated.value?.()
 }
 
@@ -39,11 +39,14 @@ if (typeof props.frontmatter.medium_zoom === 'undefined' || props.frontmatter.me
 
 <template>
   <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
-    <slot ref="content" @vue:updated="updateDom" />
+    <template v-if="frontmatter.encryptedContent">
+      <ValaxyDecrypt :encrypted-content="frontmatter.encryptedContent" />
+    </template>
+    <slot v-else ref="contentRef" @vue:updated="updateDom" />
 
-    <div text="center">
+    <div v-if="frontmatter.url" text="center">
       <a
-        v-if="frontmatter.url"
+
         :href="frontmatter.url"
         class="post-link-btn shadow hover:shadow-md"
         rounded

package/client/composables/decrypt.ts

@@ -0,0 +1,66 @@
+import { useSiteConfig } from 'valaxy'
+
+/**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/SubtleCrypto/deriveKey#pbkdf2_2
+ * @param password
+ * @returns
+ */
+export function getKeyMaterial(password: string) {
+  const enc = new TextEncoder()
+  return window.crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    'PBKDF2',
+    false,
+    ['deriveBits', 'deriveKey'],
+  )
+}
+
+export function getKey(keyMaterial: CryptoKey, salt: Uint8Array) {
+  return window.crypto.subtle.deriveKey(
+    {
+      name: 'PBKDF2',
+      salt,
+      iterations: 100000,
+      hash: 'SHA-256',
+    },
+    keyMaterial,
+    {
+      name: 'AES-CBC',
+      length: 256,
+    },
+    true,
+    ['encrypt', 'decrypt'],
+  )
+}
+
+export function useDecrypt() {
+  const siteConfig = useSiteConfig()
+
+  const { encrypt } = siteConfig.value
+  const iv = Uint8Array.from(Object.values(encrypt.iv))
+  const salt = Uint8Array.from(Object.values(encrypt.salt))
+
+  return {
+    decrypt: async (password: string, ciphertext: string) => {
+      if (!password)
+        return
+
+      const keyMaterial = await getKeyMaterial(password)
+      const key = await getKey(keyMaterial, salt)
+
+      const ciphertextData = Uint8Array.from(ciphertext, c => c.charCodeAt(0))
+
+      const decrypted = await window.crypto.subtle.decrypt(
+        {
+          name: 'AES-CBC',
+          iv,
+        },
+        key,
+        ciphertextData,
+      )
+
+      return new TextDecoder().decode(decrypted)
+    },
+  }
+}

package/client/composables/index.ts

@@ -15,3 +15,6 @@ export * from './locale'
 export * from './sidebar'
 export * from './outline'
 export * from './body-scroll-lock'
+
+// utils
+export * from './decrypt'

package/client/main.ts

@@ -2,6 +2,7 @@ import { ViteSSG } from 'vite-ssg'
 import generatedRoutes from 'virtual:generated-pages'
 import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
+import AppLinkVue from './components/AppLink.vue'
 
 import '@unocss/reset/tailwind.css'
 
@@ -31,6 +32,7 @@ export const createApp = ViteSSG(
     },
   },
   (ctx) => {
+    ctx.app.component('AppLink', AppLinkVue)
     setupMain(ctx)
   },
 )