upd: demo

help/FEATURES.md

@@ -30,6 +30,7 @@ Directory description
     :::
 1. plug-ins `<home>/yank-note/plugins`
 1. themes `<home>/yank-note/themes`
+1. extensions `<home>/yank-note/extensions`
 
 ## TOC Generation
 

help/FEATURES_ZH-CN.md

@@ -30,6 +30,7 @@ define:
     :::
 1. 插件 `<home>/yank-note/plugins`
 1. 主题 `<home>/yank-note/themes`
+1. 扩展 `<home>/yank-note/extensions`
 
 ## TOC 生成
 

package.json

@@ -12,7 +12,7 @@
     "dev": "vite",
     "start": "npm run build:main && electron ./dist/main/app.js",
     "build:fe": "vue-tsc --noEmit --esModuleInterop true && vite build",
-    "build:fe-demo": "yarn run build:fe --mode=demo && node scripts/copy-assets.js && cp help/* dist/renderer/ && cp src/main/resources/github.css dist/renderer/",
+    "build:fe-demo": "node scripts/install-demo-extensions.js && yarn run build:fe --mode=demo && node scripts/copy-assets.js && cp help/* dist/renderer/ && cp src/main/resources/github.css dist/renderer/",
     "serve:fe": "vite preview",
     "build:main": "tsc --esModuleInterop true src/main/app.ts --outDir ./dist && node ./scripts/copy-assets.js",
     "build": "npm run build:fe && npm run build:main",

scripts/install-demo-extensions.js

@@ -0,0 +1,77 @@
+// @ts-check
+
+const request = require('request');
+const fs = require('fs-extra');
+const path = require('path')
+const zlib = require('zlib')
+const tar = require('tar-stream')
+const stream = require('stream')
+
+function installExtension (extension) {
+  const extensionPath = path.join(__dirname, '../src/renderer/public/extensions', extension.name)
+  fs.ensureDirSync(extensionPath)
+
+  return new Promise((resolve, reject) => {
+    const url = extension.dist.tarball;
+    request({ url, encoding: null }, (err, _, body) => {
+      if (err) {
+        reject(err)
+        return
+      }
+
+      zlib.unzip(body, (err, data) => {
+        if (err) {
+          reject(err)
+          return
+        }
+
+        const extract = tar.extract()
+
+        extract.on('entry', (header, stream, next) => {
+          const filePath = path.join(extensionPath, header.name.replace(/^package/, ''))
+          console.log('[extension] write file', filePath)
+
+          fs.ensureFile(filePath).then(() => {
+            const fileStream = fs.createWriteStream(filePath)
+            stream.pipe(fileStream)
+            stream.on('end', next)
+          }).catch(reject)
+        })
+
+        extract.on('finish', () => {
+          resolve(undefined)
+        })
+
+        extract.on('error', reject)
+
+        stream.Readable.from(data).pipe(extract)
+      })
+    })
+  })
+}
+
+async function install (extensions) {
+  for (const extension of extensions) {
+    console.log('[extension] install', extension.name)
+    await installExtension(extension)
+  }
+}
+
+const registryUrl = 'https://raw.githubusercontent.com/purocean/yank-note-registry/main/index.json'
+console.log('Download registry')
+request(registryUrl, (err, _, body) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+
+  const registry = JSON.parse(body);
+
+  const extensions = registry.map(x => ({ id: x.name, enabled: true, isDev: false }))
+  const extensionsFile = path.join(__dirname, '../src/renderer/public/extensions.json')
+  console.log(`Writing extensions ${extensionsFile}`)
+  fs.writeJSONSync(extensionsFile, extensions);
+
+  console.log('Install extensions', extensions.length)
+  install(registry)
+})

src/renderer/components/ExtensionManager.vue

@@ -138,7 +138,7 @@
                 <div v-if="!iframeLoaded" class="placeholder">{{ $t('loading') }}</div>
               </template>
               <template v-else>
-                <div class="content">
+                <div v-show="iframeLoaded" class="content">
                   <iframe
                     v-if="contentMap[contentType][currentExtension.id]"
                     @load="iframeOnload"
@@ -766,6 +766,7 @@ onUnmounted(() => {
     height: 100%;
     border-top: 3px solid var(--g-color-86);
     overflow: hidden;
+    background: #fff;
   }
 }
 

src/renderer/others/demo.ts

@@ -40,7 +40,7 @@ if (FLAG_DEMO) {
   const fakeFetch = (uri: any, init: any) => Promise.resolve({
     headers: { get: () => 'application/json' },
     json: () => {
-      console.log('mock api >', uri, init)
+      console.log('mock api json >', uri, init)
 
       const url = new URL(location.origin + uri)
       const method = (init && init.method) || 'GET'
@@ -181,11 +181,36 @@ if (FLAG_DEMO) {
         }
       }
 
+      if (uri.startsWith('/api/extensions')) {
+        if (method === 'GET') {
+          return xFetch('/extensions.json').then(res => res.json()).then(json => {
+            return Promise.resolve({ status: 'ok', message: 'success', data: json })
+          })
+        }
+      }
+
+      if (uri.startsWith('/extensions/')) {
+        if (method === 'GET') {
+          return xFetch(uri).then(x => x.json())
+        }
+      }
+
       const message = t('demo-tips')
       useToast().show('warning', message)
 
       return Promise.resolve({ status: 'error', message })
-    }
+    },
+    text: () => {
+      console.log('mock api text >', uri, init)
+
+      const method = (init && init.method) || 'GET'
+
+      if (uri.startsWith('/extensions/')) {
+        if (method === 'GET') {
+          return xFetch(uri).then(r => r.text())
+        }
+      }
+    },
   } as any)
 
   window.fetch = (uri: any, init: any) => {

src/renderer/others/extension.ts

@@ -30,6 +30,10 @@ function changeRegistryOrigin (hostname: RegistryHostname, url: string) {
 }
 
 export function getInstalledExtensionFilePath (id: string, filename: string) {
+  if (/https?:\/\//.test(filename)) {
+    return filename
+  }
+
   return path.join('/extensions', id, filename)
 }