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.

Workers short link demo page, visiting the short link directly shows Markdown source code



========

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)

worker.js config object with the no_ref toggle highlighted in a red box

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.

three {Replace} placeholders highlighted in the no-ref.html redirect page


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).

In worker.js, no_ref.replace swaps {Replace} for the target long URL and returns 302


========

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.

result.html preview interface showing {FINAL_LINK} and {__FINAL_LINK__} markers

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

theme config set to theme/journal in worker.js


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.

system_type set to journal in the code, with a Markdown syntax demo link below

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

Code adding HTML5 hidden attribute to textarea to hide Markdown source

Add a hidden attribute.