ICDYCT / I Can Do, You Can Too

Config item add password No need to add a password entry in KV

配置项增加 password 不需要在KV中添加password条目 const config = {   password: " testpwd ", // 管理面板使用密码 // if password != null, then use this config; otherwise, read password from KV.   result_page: false, // 是否用特定的result页面来显示value // After get the value from KV, if use a page to show the result.   theme: "", // 管理面板的主题 // Homepage theme, use the empty value for default theme. To use urlcool theme, please fill with "theme/urlcool" .   cors: true, // 是否允许CORS使用API // Allow Cross-origin resource sharing for API requests.   unique_link: false, // 一个长链是否只有唯一的短链(会增加写入的使用量) // If it is true, the same long url will be shorten into the same short url   custom_link: true, // 允许自定义短链 // Allow users to customize the short url.   overwrite_kv: false, // 允许覆盖已存在的key // Allow user to overwrite an existed key.   snapchat_mode: false, // 短链只能访问一次(访问后就删除了) // The link will be distroyed after access.   visit_count: false, // 使用记数(会大大增加写入的使用量, 多人共用不推荐打开) // Count visit times....

Someone in the group was discussing how to use Markdown in Blogger Approach In the previous solution URL Shorten Worker - NetJournal Markdown , the page content was Markdown-formatted text inside a <textarea>, with a simple JS script attached on the outside to convert Markdown to HTML.

群里有人讨论如何在blogger中使用markdown 思路 以前在 短链转markdown日记本 的方案中, 页面内容<textarea>中是markdown格式文本, 外面再挂一段简单的JS转换markdown到HTML.

A very simple test. You create a worker, then modify hello world to * Note that there is a space at the end of the string. Deployment will report an error API Request Failed: PUT /api/v4/accounts/9e0d39b714fdd7b1b66d46589d33ba59/workers/services/fragrant-hill-498d/environments/production?include_subdomain_availability=true (403)

一个非常简单的测试. 你创建一个worker, 然后把hello world修改为 perl -pe空格 * 注意字符串的末尾有个空格. 部署就会报错 API Request Failed: PUT /api/v4/accounts/9e0d39b714fdd7b1b66d46589d33ba59/workers/services/fragrant-hill-498d/environments/production?include_subdomain_availability=true (403)

As mentioned last time , I went back to the approach of using blockquote to display code. Well, it's still inconvenient without a copy button.

上回书说到 , 我还是回到了用blockquote显示代码的方案. 那么, 没有复制按钮还是不方便呀.

Besides Google's  code-prettify , I've also tried Prism and highlight.js Prism

除了 google 的  code-prettify , 其实我也尝试过 Prism 和 highlight.js Prism

Previously we implemented adding highlighting to code blocks. https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html However, if a line is too long, it ends up looking like this. Using the mouse to drag and select is very inconvenient. It would be great if there were a copy button at this point. I always thought it was complicated before. Since I have the motivation again today, let's look into it.

之前我们实现了给代码段添加高亮. https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html 但是如果一行太长, 就会这样. 用鼠标拖着去选择, 很不方便. 这时候如果有个复制按钮就好了. 之前一直以为很复杂. 今天既然又有冲动了, 就查一查吧.

Initially, I used CSS-defined blockquote to implement a sort of code display . A couple of days ago, I came across a blog that recommended Google's code-prettify project https://www.shushen.xyz/ That made me think about how to bring this into Blogger.

最早的时候, 我是用 CSS定义blockquote来实现某种意义上的显示代码 . 这两天, 看到一个推荐google的code-prettify项目的博客 https://www.shushen.xyz/ 就想到怎么把这个引入到 blogger 里面来.

Referencing 233boy's QR code tool. https://233boy.github.io/tools/qr.html The QR code JS used is https://cdn.jsdelivr.net/gh/lrsjng/jquery-qrcode@0.18.0/dist/jquery-qrcode.min.js and depends on jQuery https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js Modify index.html. Add a "Generate QRcode" button after the existing short URL text field. Then, between the existing short URL row and the long URL row, add a div as a placeholder for the QR code. When the button is pressed, it generates the QR code and fills it into that placeholder div.

参考233boy的二维码工具. https://233boy.github.io/tools/qr.html 其中用到的二维码JS是 https://cdn.jsdelivr.net/gh/lrsjng/jquery-qrcode@0.18.0/dist/jquery-qrcode.min.js 并依赖 jQuery https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js 修改index.html. 在现有的短链文本框后再增加一个生成QRcode的按钮. 然后在现有的短链这一行与长链这一行之间, 添加一个div作为二维码的占位. 按下按钮的时候, 就生成二维码, 填充到那个占位的div里面.

Requirement A friend reported that if a custom short link uses Chinese characters, it doesn't work. Let me test it. Add a "Chinese short link" in the management page. Query the KV store, added correctly. Tested in the browser, got an error saying it doesn't exist.

需求 有朋友反馈, 如果短链自定义为中文, 就不行. 测试一下. 在管理页面中添加 "中文短链" 查询 KV 库, 添加正确. 在浏览器中测试, 报错不存在.

Requirements Previously I have already implemented Self-hosted URL Shortening Service Url-Shorten-Worker Turns into a Notebook NetJournal However, directly accessing the short link shows the raw Markdown source code, without displaying the rich text and image effect.

需求 之前已经实现了 自建短链服务Url-Shorten-Worker变身日记本NetJournal 但是, 直接访问短链显示的是Markdown源码, 没有显示图文效果.

In the previous post, we tackled the core backend logic of building the web journal NetJournal from scratch . Now it's time to address the user experience. Nobody wants a journal that only supports text + emoji + ASCII art.  So, thinking about it, the best solution would be Markdown. Inspiration I asked GPT, and it gave a great example. https://devv.ai/zh/search?threadId=dbr3kt6te3uo The core code is this little snippet document.getElementById('markdown-content').addEventListener('input', function () {   const markdownContent = document.getElementById('markdown-content').value;   const htmlPreview = document.getElementById('html-preview');   htmlPreview.innerHTML = marked.parse(markdownContent); });

上一篇我们解决了网络日记本 NetJournal 从无到有的核心后台逻辑 . 现在要来解决使用效果了. 谁也不想日记本里面只能用文字+emoji+ascii艺术吧.  那想一想, 最好的解决方案就是 Markdown 了. 启发 找 GPT 一问, 给了一个很好的例子. https://devv.ai/zh/search?threadId=dbr3kt6te3uo 核心代码就是这一小段 document.getElementById('markdown-content').addEventListener('input', function () {   const markdownContent = document.getElementById('markdown-content').value;   const htmlPreview = document.getElementById('html-preview');   htmlPreview.innerHTML = marked.parse(markdownContent); });

Previously we implemented the online notepad PasteBin , which is used to host a piece of text for yourself. Demo site:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue If you want to use it as your own diary, it would be a bit inconvenient. For example, if you use this page as the main operation page, rather than writing elsewhere and pasting it over, this page doesn't let you write a bit, save it, write a bit more, and save again. When you click save, it prompts that the key already exists. Another point is that when you want to modify a certain diary entry, you have to go to the display list to find it, which is a bit inconvenient. Approach First, when saving key-value to the database, do not check whether the key already exists (in the previous short link system, it was checked). Second, add a small feature to read a specified key-value. After clicking the Load button, read the value from the database and place the data into the original operation interface.  Subsequen...

前面我们已经实现了 网络记事本 PasteBin , 用于托管自己的一段文本. 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue 如果想作为自己的一份日记本的话, 用起来会有一点不顺手. 比如, 如果你把这个页面作为主要的操作页面, 而不是从别的地方写好了再复制粘贴过来, 那么这个页面并不能让你写一点了保存一下, 再写一点了再保存一下. 你点保存的时候会提示 key 存在冲突. 还有一点就是, 当你确定要修改某一篇日记时, 还要去显示列表中找到它, 有点不方便. 思路 一是实现一下, 在向数据库保存key-value时, 不要检测key是否已存在(在之前的短链系统中, 是检测了的) 二是增加读取指定key-value的小功能. 点击了 Load 按钮之后, 从数据库中把 value 读出来, 再把数据放到原本的操作界面上.  后续操作就可以按以前系统的操作方式使用就好了.

In the previous post, we found suitable code to display different types of content. Some are large chunks of text, displayed using textarea; some are images, displayed using img. But what kind of code structure should we use? I've thought about it and plan to do this: 1. Wrap different display methods as different functions and put them in main.js. For example: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. Set a function variable, and assign it to different functions in different index.html files, for example: In the short link's index.html buildValueItemFunc = buildValueTxt In Pastebin's index.html buildValueItemFunc = buildValueTxtarea In the image hosting's index.html buildValueItemFunc = buildValueImg 3. In main.js, use the same code logic: // Long url information Long url child.appendChild(buildValueItemFunc(longUrl))

上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示. 但是我们使用一个怎样的代码结构呢? 我想了一下准备这样: 1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如: 在短链的 index.html 中 buildValueItemFunc = buildValueTxt 在 Pastebin 的 index.html 中 buildValueItemFunc = buildValueTxtarea 在图床的 index.html 中 buildValueItemFunc = buildValueImg 3. 在 main.js 中, 使用同样的代码逻辑: // 长链接信息 Long url child.appendChild(buildValueItemFunc(longUrl))

Among the Short Link System, Web Notepad System, and Image Hosting System, the requirements for displaying the list of saved data are different. The Notepad System should display the value using a multi-line text box. As shown below: The Image Hosting System should display the value in the form of an image. As shown below: The Short Link System uses the original display method. Just display the entire value as text. The code is already written. The functionality is correct as well.  The current question is, how to design the code structure reasonably, so that the configuration items in worker.js can control the display method of the list. The configuration item for setting the system is in worker.js. At most, there is one more item, which controls which index.html to load. But the function of implementing the list display is in main.js.  The file main.js is on Github. It is specified to load in the index.html file. If the content of main.js is moved out and put into index.html, and the...

在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

Requirements In the previous step we implemented the core functionality of the image hosting service , saving and retrieving data. But to convert images to Base64 data, you have to open another page , that's too... So we "borrow" this page into our own image hosting operation page.

需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上.

Requirements Posting on NodeSeek requires you to bring your own image hosting. We have already implemented a simple KV database . So, by the same principle, isn't image hosting just the same thing? You send the system a path, and the system returns the image data to you.

需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据.

The original author of Url-Shorten-Worker designed it to support different themes from the start. It works by loading different index.html files. By default it's empty, which means it loads the default index.html from the Repo root directory. We create a new directory under theme called pastebin, then copy an index.html into it, and make some modifications based on that. Since this is for use as an online notepad PasteBin, the value often involves large blocks of text, so I changed it to a textarea element. The final result is as follows, ======== End Github:  https://github.com/crazypeace/Url-Shorten-Worker Demo:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

Url-Shorten-Worker 原作者本来就设计了可以支持不同的主题. 其实就是加载不同的index.html 默认是空, 也就是加载默认的 Repo 根目录下的 index.html 我们在 theme 下新建一个目录, pastebin, 再把 index.html 复制一份进来, 以此为基础做一些修改. 因为如果是当网络记事本PasteBin使用的话, value常常遇到大段文字的情况, 所以我修改为 textarea 元素. 最终效果如下, ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

Requirement When both visit_count and load_kv are enabled, the result will be displayed as follows. Comments also mentioned the hope to hide it. Approach When qryall assembles the returned data, skip data ending with '-count'. ======== End Github:  https://github.com/crazypeace/Url-Shorten-Worker Demo:  https://1way.eu.org/bodongshouqulveweifengci   You can view the visit count, but you cannot see the query result of -count

需求 当 visit_count 和 load_kv 同时打开的时候, 会显示出这样的结果. 评论也提到希望隐藏.

Requirement I believe everyone has already used many online notepad applications, such as:  https://gist.github.com/ https://pastebin.ubuntu.com/ Actually, I've had this idea for a long time. A short link service is essentially about inputting a Key and returning a Value. It just does one more step, treating the Value as the target URL and automatically redirecting to it. So what if we don't do the redirect? We simply display the Value corresponding to the Key, and that would be a simple online notepad.

需求 相信大家已经用过很多网络记事本的应用了. 比如:  https://gist.github.com/ https://pastebin.ubuntu.com/ 其实我很早就有这样的想法. 短链服务本质上就是输入一个Key, 返回一个Value. 只不过多做了一步, 把Value当作目标网址, 自动跳转. 那么如果我们不做跳转呢? 仅仅是显示Key对应的Value, 那么就是一个简单的网络记事本了.

Requirement Diet & Health, January 2, 2024, GMT+8 03:52:00 Hope you can add a feature to query previously added short links from Cloudflare. Otherwise, if the browser cache is wiped, or when I want to query and manage short links on another computer, I have to log into Cloudflare, which is quite troublesome. When I first designed this short link system, I intended it to be shared among people I know. That's why I used the browser's localStorage — the benefit is that each person only sees the short links they added themselves, without interfering with each other. Later I added a delete feature, so you won't accidentally delete someone else's short links either. However, since someone specifically asked for it, let me think again — if this system is only used by myself, then the need to read KV is reasonable.

需求 饮食健康 2024年1月2日 GMT+8 03:52:00 希望能添加从cloudflare查询以往添加的短链接的功能，不然如果清除了浏览器缓存或在另一台电脑上想要查询和管理短链接的话必须登录cloudflare才行，比较麻烦。 我一开始设计这个短链系统的时候, 是作为可以和熟悉的人共同使用的, 所以我使用浏览器的localStorage的好处是, 每个人都只看到自己添加过的短链. 不会互相干扰, 我后来添加了删除短链的功能, 你也不会误删别人的短链. 但是, 既然有人特别提出来了, 那么我再想想, 如果这个系统是只给我自己一个人用呢, 那么这个读取KV的需求是合理的.