Url-Shorten-Worker: Render Markdown for Journal Mode

查看相关主题:

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.



========

Approach

Actually the original author of the project has a feature for a redirect page. If this option is enabled, it will first redirect to a new page, and then automatically redirect to the target page. (The original author's purpose was to remove the referrer)

We can borrow the same code logic, enable this setting, and when in journal mode, accessing the short link will display a result page, in which the Markdown content is converted to HTML and then displayed.


Let's take a look at the original author's code logic.

In the project root directory, there is a no-ref.html, the content is very simple, it just implements automatic redirect. 

Note that no-ref.html contains a magic string {Replace}, and this magic string is the redirect target.



In worker.js, after loading this no_ref.html, the magic string {Replace} is replaced with the target long link. You can think of it as this html file being modified. Then it is returned to the browser to display (execute).


========

Practice

result.html

First create a result.html in the \theme\journal directory

The content is very simple, reuse our successful experience of displaying Markdown as HTML, refer to the index.html of the web notebook. 

Copy a div for displaying HTML

Then copy a textarea for storing the Markdown source code

Copy the JS for loading Markdown to HTML conversion

Then copy the call that converts Markdown to HTML

Then copy the logic from main.js for automatically executing a function after the page loads, calling the conversion function just now

The complete result looks like this:


  Url-Shorten-Worker



 

 

Open it with a browser.

Replace {__FINAL_LINK__} with the Markdown source code. Save, refresh the browser. Hmm, looks like it works well.


worker.js

For the modification to worker.js, the link of the result page needs to include theme

let result_html = "https://crazypeace.github.io/Url-Shorten-Worker/" + config.theme + "/result.html"



========

Optimization

After submitting the project and deploying it to the worker, I found some minor issues.


At the bottom of the result page, you can see the textarea containing the Markdown source code, it needs to be hidden.

I asked GPT  https://devv.ai/search?threadId=dhqolkt1mmf4

Add a hidden attribute.