Yank Note 使用分享 #65

purocean · 2021-11-06T15:45:31Z

这里我将分享 Yank Note 的方方面面，也欢迎大家分享

purocean · 2021-11-06T15:57:19Z

我日常使用的一些小工具

File to Base64
SVG to Markdown Image
SVG to PNG
Unix 时间戳
URL 编码解码
Hash
Base64
进制转换

点击展开代码

# 小工具

```html
<!-- --applet-- File to Base64 -->
<script>
async function change (files) {
    const result = await ctx.utils.fileToBase64URL(files[0])
    document.getElementById('result').value = result
}
</script>

<input type="file" onchange="change(this.files)">
<textarea id="result"></textarea>
<button onclick="ctx.utils.copyText(document.getElementById('result').value)">拷贝</button>
```

```html
<!-- --applet-- SVG to Markdown Image -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    output.value = `![](data:image/svg+xml;base64,${ctx.lib.cryptojs.enc.Base64.stringify(ctx.lib.cryptojs.enc.Utf8.parse(input.value))})`
    // output.value = `data:image/svg+xml;base64,${ctx.lib.cryptojs.enc.Base64.stringify(ctx.lib.cryptojs.enc.Utf8.parse(input.value))}`

    output.focus()
    output.select()
}
</script>

<div>
    输入
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('encodeBase64')">Base64 编码</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
</div>
```

```html
<!-- --applet-- SVG to PNG -->

<script>
function svgToPng(svg, callback) {
    const url = getSvgUrl(svg);
    svgUrlToPng(url, (imgData) => {
        callback(imgData);
        URL.revokeObjectURL(url);
    });
}

function getSvgUrl(svg) {
    return  URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
}

function svgUrlToPng(svgUrl, callback) {
    const svgImage = document.createElement('img');
    // imgPreview.style.position = 'absolute';
    // imgPreview.style.top = '-9999px';
    document.body.appendChild(svgImage);
    svgImage.onload = function () {
        const canvas = document.createElement('canvas');
        canvas.width = svgImage.clientWidth;
        canvas.height = svgImage.clientHeight;
        const canvasCtx = canvas.getContext('2d');
        canvasCtx.drawImage(svgImage, 0, 0);
        const imgData = canvas.toDataURL('image/png');
        callback(imgData);
        setTimeout(() => {
            this.remove()
        }, 300)
    };
    svgImage.src = svgUrl;
}

function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    svgUrlToPng(input.value, imgData => {
        output.value = imgData
        output.focus()
        output.select()
    });
}
</script>

<div>
    输入
    <input id="input" style="display: block; width: 100%" placeholder="DATA URL">
    <button onclick="run()">转换</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
</div>
```

```html
<!-- --applet-- Unix 时间戳 -->
  
<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    const now = ctx.lib.dayjs()
    output.value = ''

    switch (type) {
        case 'current':
            input.value = now.format('YYYY-MM-DD HH:mm:ss')
            output.value = parseInt(now.valueOf() / 1000)
            break
        case 'current-ms':
            input.value = now.format('YYYY-MM-DD HH:mm:ss SSS')
            output.value = now.valueOf()
            break
        case 'a2b':
            output.value = parseInt(ctx.lib.dayjs(input.value).valueOf() / 1000)
            break
        case 'a2b-ms':
            output.value = ctx.lib.dayjs(input.value).valueOf()
            break
        case 'b2a':
            output.value = ctx.lib.dayjs(input.value * 1000).format('YYYY-MM-DD HH:mm:ss')
            break
        case 'b2a-ms':
            output.value = ctx.lib.dayjs(input.value * 1).format('YYYY-MM-DD HH:mm:ss SSS')
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    输入
    <input id="input" style="display: block; width: 100%">
    <button onclick="run('a2b')">时间->戳值</button>
    <button onclick="run('b2a')">戳值->时间</button>
    <button onclick="run('current')">当前时间</button>
    <button onclick="run('a2b-ms')">时间->戳值ms</button>
    <button onclick="run('b2a-ms')">戳值ms->时间</button>
    <button onclick="run('current-ms')">当前时间ms</button>
    <button style="float: right" onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
    <input id="output" style="display: block; width: 100%">
</div>
```

```html
<!-- --applet-- URL 编码解码 -->

<script>
function init () {
    // console.log('初始化', appletId, appletFrame, resize, Vue)
}

function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'encodeURI':
            output.value = encodeURI(input.value)
            break
        case 'encodeURIComponent':
            output.value = encodeURIComponent(input.value)
            break
        case 'decodeURI':
            output.value = decodeURI(input.value)
            break
        case 'decodeURIComponent':
            output.value = decodeURIComponent(input.value)
            break
        case 'encodeURIfull':
            output.value = '%' + [...input.value].map(x => x.charCodeAt().toString(16)).join('%')
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    输入2021-11-06 23:58:28    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('encodeURIfull')">URL 完全编码</button>
    <button onclick="run('encodeURI')">encodeURI</button>
    <button onclick="run('encodeURIComponent')">encodeURIComponent</button>
    <button onclick="run('decodeURI')">decodeURI</button>
    <button onclick="run('decodeURIComponent')">decodeURIComponent</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
    <button onclick="var x = document.getElementById('output'); x.value = x.value.toUpperCase()">结果大写</button>
</div>
```

```html
<!-- --applet-- Hash -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'md5':
            output.value = ctx.lib.cryptojs.MD5(input.value).toString().toLowerCase()
            break
        case 'sha1':
            output.value = ctx.lib.cryptojs.SHA1(input.value).toString().toLowerCase()
            break
        case 'sha256':
            output.value = ctx.lib.cryptojs.SHA256(input.value).toString().toLowerCase()
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    输入
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('md5')">MD5</button>
    <button onclick="run('sha1')">SHA1</button>
    <button onclick="run('sha256')">SHA256</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
    <button onclick="var x = document.getElementById('output'); x.value = x.value.toUpperCase()">结果大写</button>
</div>
```

```html
<!-- --applet-- Base64 -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'encodeBase64':
            output.value = ctx.lib.cryptojs.enc.Base64.stringify(
                ctx.lib.cryptojs.enc.Utf8.parse(input.value)
            );
            break
        case 'decodeBase64':
            output.value = ctx.lib.cryptojs.enc.Base64.parse(input.value)
                .toString(ctx.lib.cryptojs.enc.Utf8);
            break
    }
    output.focus()
    output.select()
}
</script>

<div>
    输入
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('encodeBase64')">Base64 编码</button>
    <button onclick="run('decodeBase64')">Base64 解码</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
</div>
```

```html
<!-- --applet-- 进制 -->

<script>
function run (type) {
    const input = document.getElementById('input')
    const prefix = document.getElementById('prefix')
    const output = document.getElementById('output')
    output.value = ''

    switch (type) {
        case 'encodeHex':
            output.value = prefix.value + [...input.value].map(x => x.charCodeAt().toString(16)).join(prefix.value)
            break
        // case 'decodeHex':
        //     output.value = prefix.value + [...input.value].map(x => x.charCodeAt().toString(16)).join(prefix.value)
        //     break
    }
    output.focus()
    output.select()
}
</script>

<div>
    前导
    <input id="prefix" value="\x" style="display: block; width: 100%">
    输入
    <textarea id="input" style="display: block; width: 100%"></textarea>
    <button onclick="run('encodeHex')">HEX编码</button>
    <textarea id="output" style="display: block; width: 100%"></textarea>
    <button onclick="document.getElementById('input').value = ''; document.getElementById('output').value = ''">清空</button>
    <button onclick="var x = document.getElementById('output'); x.value = x.value.toUpperCase()">结果大写</button>
</div>
```

purocean · 2021-11-06T16:02:42Z

Tello 遥控器

视频：https://www.bilibili.com/video/BV1W34y1Z7jf

点击展开代码

# Tello 遥控器{style="color:#00ffe9"}

使用 Markdown 控制 Tello

```html
<!-- --applet-- Tello 遥控器 -->
<script>
function exec (cmd) {
    ctx.ui.useToast().show('info', cmd);
    ctx.api.runCode('bash', `echo '${cmd}' | nc -cuw 1 192.168.10.1 8889`)
}
</script>


<div style="display: flex;justify-content: space-between">
    <div>
    <button onclick="exec('takeoff')">起飞</button>
    <button onclick="exec('land')">降落</button>
    </div>
    <button onclick="exec('command')">连接</button>
</div>
<br>
<br>
<div style="display: flex;justify-content: space-between">
    <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="exec('up 20')">上</button>
        <br>
        <br>
        <button onclick="exec('cw 20')">逆</button> &nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="exec('ccw 20')">顺</button>
        <br>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="exec('down 20')">下</button>
    </div>
    <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="exec('forward 20')">前</button>
        <br>
        <br>
        <button onclick="exec('left 20')">左</button> &nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="exec('right 20')">右</button>
        <br>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="exec('back 20')">后</button>
    </div>
</div>
```

purocean · 2021-11-06T16:04:44Z

Git 推送按钮

推送到 Git 仓库这个功能，现在可以编写插件实现。

window.registerPlugin({
  name: 'git-push',
  register: ctx => {
    ctx.statusBar.tapMenus(menus => {
      menus['git-push'] = {
        id: 'git-push',
        position: 'left',
        title: 'Git 提交',
        onClick: () => {
          const currentRepo = ctx.store.state.currentRepo;
          const path = currentRepo && currentRepo.path
          if (path) {
            ctx.action.getActionHandler('xterm.run')(`cd '${path}' && git add . && git ci -m 'update' && git push && exit`)
          }
        }
      }
    })
  }
});

将上述代码编写 git-push.js 文件放入<主目录>/plugins/ 中即可。(可在托盘菜单中打开主目录)

右键 Sublime Merge 菜单

window.registerPlugin({
  name: 'file-tree-context-menu-sublime-merge',
  register: ctx => {
    ctx.tree.tapContextMenus((items, node) => {
      const openInSublimeMerge = () => {
        const currentRepo = ctx.store.state.currentRepo;
        const path = currentRepo ? currentRepo.path + node.path : ''
        if (path) {
          if (node.type === 'dir') {
            ctx.api.runCode('bash', `smg '${path}'`);
          } else {
            ctx.api.runCode('bash', `cd '${currentRepo.path}' && smg blame '${path}'`);
          }
        }
      }

      if (node.type === 'file' || (node.type === 'dir' && node.path === '/')) {
        items.push(
          { type: 'separator' },
          { id: 'openInSublimeMerge', label: '在 Sublime Merge 中打开', onClick: openInSublimeMerge }
        );
      }

      return items;
    })
  }
});

注：苹果应用商店的版本因为审核原因不支持终端功能，上面的插件无效

purocean · 2021-11-17T03:32:33Z

在文档中嵌入天气预报

---
enableMacro: true
---

```{onclick="ctx.view.refresh()"}
Updated at: [= $ctx.lib.dayjs().format('YYYY-MM-DD HH:mm') =]

[= fetch('https://wttr.in?0AT').then(r => r.text()) =]
```

purocean · 2021-12-06T07:55:27Z

流畅的编辑体验

转换链接和图片

Emoji

路径补全

dislazy · 2022-02-12T15:10:08Z

authelia 这个和yn配合既能兼顾安全，也能兼顾内容

purocean · 2022-03-12T03:08:52Z

因为沙盒和审核机制的限制，Mac App Store 的 Yank Note 有如下缺陷：

没有内置终端
不能使用“在浏览器中打开”功能
不能使用“分享”功能
代码运行功能受限
一些插件能力受限，如上面的 “Git 提交” 插件
沙盒可能会产生一些问题 #102 #83

如果你更注重内容安全，可以使用 Mac App Store 的版本，否则还是使用 GitHub 的版本吧。

purocean pinned this issue Nov 6, 2021

purocean changed the title ~~Yank Note 使用案例~~ Yank Note 使用分享 Nov 6, 2021

purocean mentioned this issue Feb 26, 2022

【开源自荐】Yank Note - 一款面向程序员的 Markdown 笔记应用 521xueweihan/HelloGitHub#2098

Closed

purocean added this to the Yank-Note 2.0 milestone Mar 17, 2022

purocean removed this from the Yank-Note 2.0 milestone Mar 17, 2022

purocean mentioned this issue Apr 14, 2022

[咨询]: 使用问题咨询 #131

Closed

purocean / yn Public

Yank Note 使用分享 #65

Yank Note 使用分享 #65

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 17, 2021 •

edited

purocean commented Dec 6, 2021 •

edited

dislazy commented Feb 12, 2022

purocean commented Mar 12, 2022

purocean / yn Public

Yank Note 使用分享 #65

Yank Note 使用分享 #65

Comments

purocean commented Nov 6, 2021 • edited

purocean commented Nov 6, 2021 • edited

我日常使用的一些小工具

purocean commented Nov 6, 2021 • edited

Tello 遥控器

purocean commented Nov 6, 2021 • edited

Git 推送按钮

右键 Sublime Merge 菜单

purocean commented Nov 17, 2021 • edited

purocean commented Dec 6, 2021 • edited

dislazy commented Feb 12, 2022

purocean commented Mar 12, 2022

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 6, 2021 •

edited

purocean commented Nov 17, 2021 •

edited

purocean commented Dec 6, 2021 •

edited