  pwsh  npm run publish

> [email protected] publish
> wrangler publish

Proxy environment variables detected. We'll use your proxy for fetch requests.

 ⛅️ wrangler 3.60.3
-------------------

▲ [WARNING] `wrangler publish` is deprecated and will be removed in the next major version.

  Please use `wrangler deploy` instead, which accepts exactly the same arguments.


Total Upload: 39.15 KiB / gzip: 11.42 KiB
Your worker has access to the following bindings:
- KV Namespaces:
  - NOTES: 82faa7b7043c4a04b0db7cae1fea637b
  - SHARE: da3d6dc4a5874f5a8229327d9aa9d11d

✘ [ERROR] A request to the Cloudflare API (/accounts/5af061ede7b10b1738bd475c1bc74a97/workers/scripts/cloud-notepad) failed.

  Uncaught ReferenceError: SCN_SALT is not defined
    at null.<anonymous> (file:///E:/gh/serverless-cloud-notepad/src/constant.js:5:21)
    at null.<anonymous> (worker.js:921:3)
   [code: 10021]


  If you think this is a bug, please open an issue at:
  https://github.com/cloudflare/workers-sdk/issues/new/choose

 [WARNING] Processing wrangler.toml configuration:

    - Unexpected fields found in top-level field: "SCN_SALT"


Attempting to login via OAuth...
F:\js\serverless-cloud-notepad\node_modules\wrangler\wrangler-dist\cli.js:16259
            throw ex;
            ^

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at Response.json (F:\js\serverless-cloud-notepad\node_modules\wrangler\wrangler-dist\cli.js:72475:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async exchangeAuthCodeForAccessToken (F:\js\serverless-cloud-notepad\node_modules\wrangler\wrangler-dist\cli.js:105671:23)
    at async Server.<anonymous> (F:\js\serverless-cloud-notepad\node_modules\wrangler\wrangler-dist\cli.js:105807:30)

Node.js v20.10.0

src/constant.js
// supported language
export const SUPPORTED_LANG = {
    'en': {
        //
        save: 'Save',
        autoSave: 'autoSave',
    },
    'zh': {
        //
        save: '保存',
        autoSave: '自动保存',
    }
}

src/template.js
const FOOTER = ({ lang, isEdit, updateAt, pw, mode, share, save, autoSave }) => `
    <div class="footer">
        ${isEdit ? `
            <div class="opt">
                <button class="opt-button opt-pw">${pw ? SUPPORTED_LANG[lang].changePW : SUPPORTED_LANG[lang].setPW}</button>
                <button class="opt-button opt-save">${SUPPORTED_LANG[lang].save}</button>
                ${SWITCHER('Markdown', mode === 'md', 'opt-mode')}
                ${SWITCHER(SUPPORTED_LANG[lang].share, share, 'opt-share')}
                ${SWITCHER(SUPPORTED_LANG[lang].autoSave, autoSave, 'opt-autoSave')}
            </div>
            ` : ''
    }
    </div>
`

static/css/app.css
.opt-button {
    //
    margin-right: 10px;
}

static/js/app.js
window.addEventListener('DOMContentLoaded', function () {
    const $saveBtn = document.querySelector('.opt-save')    //保存按钮
    const $autosaveBtn = document.querySelector('.opt-autoSave > input')        //自动保存选项
//略

    if ($textarea) {
        // 只在自动保存按钮被选中时设置 oninput 事件
        if ($autosaveBtn) { // 自动保存
            const autosaveHandler = throttle(function () {
                renderMarkdown($previewMd, $textarea.value);

                if ($autosaveBtn.checked) { // 检查自动保存开关状态
                    $loading.style.display = 'inline-block';
                    const data = { t: $textarea.value };

                    window.fetch('', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        body: new URLSearchParams(data),
                    })
                    .then(res => res.json())
                    .then(res => {
                        if (res.err !== 0) { errHandle(res.msg); }
                    })
                    .catch(err => errHandle(err))
                    .finally(() => { $loading.style.display = 'none'; });
                }
            }, 5000); 

            $textarea.oninput = autosaveHandler;
        }
        if($saveBtn){
            $saveBtn.onclick = function(){
                $saveBtn.disabled = true;
                renderMarkdown($previewMd, $textarea.value)
    
                $loading.style.display = 'inline-block'
                const data = {t: $textarea.value,}
    
                window.fetch('', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded',},
                    body: new URLSearchParams(data),
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.err !== 0) {errHandle(res.msg)}
                    })
                    .catch(err => errHandle(err))
                    .finally(() => {$loading.style.display = 'none'})
        
                setTimeout(function() {
                    $saveBtn.disabled = false;
                }, 3000); 
            }
        }
        
    }

// 处理 /list 路由
router.get('/list', async () => {
    const keys = await NOTES.list() // 获取所有笔记的键

    // 生成表格行，每行显示每个键的所有字段信息
    const rows = keys.keys.map(key => `
      <tr>
        <td><a href="/${key.name}">${key.name}</a></td>
        <td>${key.metadata ? (() => {
            const date = new Date(key.metadata.updateAt * 1000);
            const pad = num => num.toString().padStart(2, '0');
            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
        })() : 'N/A'}
        </td>
      </tr>
    `).join('<br>')

    // 生成包含表格的HTML
    const html = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>Note List</title>
          <style>
            body { font-family: Arial, sans-serif; padding: 20px; }
            table { width: 100%; border-collapse: collapse; }
            th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
            th { background-color: #f4f4f4; }
          </style>
        </head>
        <body>
          <h1>Note List</h1>
          <table>
            <thead>
              <tr>
                <th>Note Link</th>
                <th>Modify Time</th>
              </tr>
            </thead>
            <tbody>
              ${rows}
            </tbody>
          </table>
        </body>
      </html>`

    return new Response(html, {
        headers: { 'Content-Type': 'text/html' },
    })
})