Owen Young's Blog - Random

Simple bash to generate template markdown file for the initial blog post

2022-07-25T10:50:28+08:00

When you’re using markdown to write your blog, you can use the following template to generate a new markdown file, you may use some template like this to generate a new markdown file:</p> </span>

---
</span>title</span>: 
</span>date</span>: </span>${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}+08:00
</span>updated</span>: </span>${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}
</span>draft</span>: </span>true
</span>taxonomies</span>:
</span>  </span>categories</span>:
</span>    - </span>Random
</span>  </span>tags</span>:
</span>    - 
</span>---
</span></code></pre>
I used to generate these markdown articles with VSCode extention foam-lite</a>, which is like this:</p>
</p>
The problem is that it’s an VSCode extention, not an general tool, and the tool also has a little limitations.
for example, the default generated file path is based on the current directory, so I always need to navigate to the correct directory to generate the markdown file.</p>
And recent days, I started to use Dotfiles</a> to manage all my configuration files, and I used a lot of bash scripts to manage my dotfiles. So why not to use bash scripts to generate the initial markdown files? It’s general enough, and it’s easy to use, and it can be reused in any editors.</p>
Here is the final workflow for creating a daily markdown file:</p>
</p>
Here is the workflow for creating a normal post:</p>
</p>
How to do this?🔗</a></h2>
I use Bash Mustache</a> as the template engine, it’s simple but powerful, and it’s just a simple bash file, I place it in my blog repo ./scripts/mo.sh</code>, then I write an function in ./scripts/common.sh</code></p>
#!/bin/bash
</span>export </span>CURRENT_YEAR</span>=$</span>(</span>date</span> +</span>%</span>Y</span>)
</span>export </span>CURRENT_MONTH</span>=$</span>(</span>date</span> +</span>%</span>m</span>)
</span>export </span>CURRENT_DATE</span>=$</span>(</span>date</span> +</span>%</span>d</span>)
</span>export </span>CURRENT_HOUR</span>=$</span>(</span>date</span> +</span>%</span>H</span>)
</span>export </span>CURRENT_MINUTE</span>=$</span>(</span>date</span> +</span>%</span>M</span>)
</span>export </span>CURRENT_SECOND</span>=$</span>(</span>date</span> +</span>%</span>S</span>)
</span>
</span># template functions
</span>function </span>template</span>() {
</span>  </span>template_path</span>="$</span>1</span>"
</span>  </span>target_path</span>="$</span>2</span>"
</span>  </span>target_dir</span>="$</span>(</span>dirname </span>$</span>target_path</span>)</span>"
</span>  </span># check target dir is exist, if not, create it
</span>  </span>if </span>[ </span>! </span>-d </span>"$</span>target_dir</span>" </span>]</span>; </span>then
</span>      </span>mkdir -p </span>$</span>target_dir
</span>  </span>fi
</span>
</span>  </span># check target file is exists
</span>  </span>if </span>[ </span>-f </span>$</span>target_path </span>]</span>; </span>then
</span>      </span>echo </span>"$</span>target_path</span> file exists</span>"
</span>      </span>exit</span> 1
</span>  </span>fi
</span>  </span>cat </span>$</span>template_path </span>| </span>./scripts/mo.sh </span>> $</span>target_path
</span>  </span>echo </span>"$</span>target_path</span> created!</span>"
</span>}
</span></code></pre>
For daily journal article(./scripts/daily.sh</code>):</p>
#!/bin/bash
</span>source</span> ./scripts/common.sh
</span>template_path</span>="</span>./scripts/templates/daily.md.tmpl</span>"
</span>target_path</span>="</span>./content/blog/journals/</span>$</span>(</span>date</span> +</span>%</span>Y</span>-</span>%</span>m</span>-</span>%</span>d</span>).md</span>"
</span>
</span>template </span>$</span>template_path </span>$</span>target_path</span>;
</span>code </span>$</span>target_path</span>;
</span></code></pre>
This script will create a file named ./content/blog/journals/2022-07-25.md</code> with the ./scripts/templates/daily.md.tmpl</code> template:</p>
---
</span>title: </span>{{CURRENT_YEAR}}-{{CURRENT_MONTH}}-{{CURRENT_DATE}}的各种链接
</span>date: </span>{{CURRENT_YEAR}}-{{CURRENT_MONTH}}-{{CURRENT_DATE}}T{{CURRENT_HOUR}}:{{CURRENT_MINUTE}}:{{CURRENT_SECOND}}+08:00
</span>updated: </span>{{CURRENT_YEAR}}-{{CURRENT_MONTH}}-{{CURRENT_DATE}}
</span>draft:</span> false
</span>taxonomies:
</span>  </span>categories:
</span>    </span>-</span> Journal
</span>  </span>tags:
</span>    </span>-</span> Journal
</span>---
</span></code></pre>
For convinient to use, I also add a alias in Makefile</code>:</p>
.Phony</span>: </span>daily
</span>daily</span>:
</span>	</span>./scripts/daily.sh
</span></code></pre>
So if I want to generate a new daily article, I just need to run make daily</code></p>
Or, If I’m in VSCode, I created a task for VSCode in .vscode/tasks.json</code>:</p>
{
</span>  "</span>version</span>": "</span>2.0.0</span>",
</span>  "</span>tasks</span>": [
</span>    {
</span>      "</span>label</span>": "</span>daily</span>",
</span>      "</span>type</span>": "</span>shell</span>",
</span>      "</span>command</span>": "</span>make daily</span>",
</span>      "</span>presentation</span>": {
</span>        "</span>reveal</span>": "</span>silent</span>",
</span>        "</span>close</span>": </span>true
</span>      }
</span>    },
</span>    {
</span>      "</span>label</span>": "</span>random</span>",
</span>      "</span>type</span>": "</span>shell</span>",
</span>      "</span>command</span>": "</span>./scripts/random.sh ${input:filename}</span>",
</span>      "</span>presentation</span>": {
</span>        "</span>reveal</span>": "</span>silent</span>",
</span>        "</span>close</span>": </span>true
</span>      }
</span>    },
</span>    {
</span>      "</span>label</span>": "</span>notes</span>",
</span>      "</span>type</span>": "</span>shell</span>",
</span>      "</span>command</span>": "</span>./scripts/notes.sh ${input:filename}</span>",
</span>      "</span>presentation</span>": {
</span>        "</span>reveal</span>": "</span>silent</span>",
</span>        "</span>close</span>": </span>true
</span>      }
</span>    },
</span>    {
</span>      "</span>label</span>": "</span>book</span>",
</span>      "</span>type</span>": "</span>shell</span>",
</span>      "</span>command</span>": "</span>./scripts/book.sh ${input:filename}</span>",
</span>      "</span>presentation</span>": {
</span>        "</span>reveal</span>": "</span>silent</span>",
</span>        "</span>close</span>": </span>true
</span>      }
</span>    }
</span>
</span>  ],
</span>  "</span>inputs</span>": [
</span>    {
</span>      "</span>type</span>": "</span>promptString</span>",
</span>      "</span>id</span>": "</span>filename</span>",
</span>      "</span>description</span>": "</span>You article path.</span>",
</span>      "</span>default</span>": "",
</span>    }
</span>  ]
</span>}
</span></code></pre>
All source codes are in my blog repo</a></p>



Adding search to zola blog with meilisearch deployed on Mogenius
2022-07-17T08:50:12+08:00
I deployed Meilisearch</a> on my VPS a couple of days ago</a>, but I’m panic, because I mess up my VPS a lot, and I rebuild my VPS a lot, so it’s not a stable environment to deploy meilisearch. So I started to browse free-for-dev</a>, see if there are some good(and cheap) solutions for me. I saw this:</p>

mogenius</a> - A code-to-cloud platform to easily deploy any service, from static website to advanced microservice architectures. mogenius comes with fully managed hyper-scaling cloud resources, Kubernetes, CI/CD and security from Cloudflare. Free tier includes 1 CPU core, 2 GB RAM, 10 GB traffic, 4 GB SSD persistent storage.</p>
</blockquote>
The main point:</strong></p>

Free tier includes 1 CPU core, 2 GB RAM, 10 GB traffic, 4 GB SSD persistent storage.</li>
from static website to advanced microservice architectures.</li>
</ul>
I think it’s enough for my blog’s search index.</p>
</span>
Mogenius</a> said they “from static website to advanced microservice architectures”, and they also have a decent plan for free tier. I decided to try it out. After completing the registration, it requires a mandatory mobile number verification. It’s a bit annoying, but I’m glad to have a free tier, and it’s a good way to avoid abuse. (There is a bug when you verify your mobile number, I’am using firefox, it seems the country code select can not show list correctly, so I just change a vpn to fix it. (maybe I should use chrome to test it, I almost give up because of this bug))</p>
For those who want to see the final results, here is the final result:</p>
</p>
Let’s see how to set it up:</p>
Step 1: Create cloudspace🔗</a></h2>
Just click ADD button, and fill in the form.</p>
Step 2: Create a new servicee🔗</a></h2>
Enter to the cloudspace, and click the add button to create a new service with Use a template</code>, and search meilisearch</code></p>
Step 3: Configure the service🔗</a></h2>


Fill the servicename, for me I just type meilisearch</code></p>
</li>

Connect your github account(you can give it only selected repo permissions, you must selected at least one repo, it can be any public repo)</p>
Screenshot:
</p>
</li>

Click Add repository</code>, input the repo name, I input it as meili</code>, and with public</code> permission.</p>
Screenshot:</p>
</p>
</li>

set resources limit (if needed, the default value is a recomendation from Mogenius).</p>
</li>

set environment variables:</p>


add MEILI_MASTER_KEY</code> as key vault to protect your master key. (Click create new secret</code> to fill the secret)</p>
</li>

the following environment variables can be plain text type.</p>
MEILI_NO_ANALYTICS</span>=</span>true
</span>MEILI_ENV</span>=</span>production
</span></code></pre>
All environment options are here</a></p>
</li>
</ol>
Screenshot:</p>
</p>
</li>

optional, set custom domain. I set it to meili.owenyoung.com</code>, I set a CNAME record meili.owenyoung.com</code> to meilisearch-prod-meilisearch-r4efxz.mo2.mogenius.io</code>, you will get the endpoint after the service created.</p>
Screenshot:</p>
</p>
</li>

Then, click the Create Service</code> button. It may take 1 minute to build and deploy the service.</p>
</li>
</ol>
Step 5: Get your meilisearch admin key, and user key🔗</a></h2>
After the service is created, the meilisearch is ready to use, you can visit https://meili.owenyoung.com/</a> to test if everything is worked fine. At this moment, the default meilisearch template version is v0.27.0rc1</code></a>, the following is the success output:</p>
{ "</span>status</span>": "</span>Meilisearch is running</span>" }
</span></code></pre>
You need to run the bash script to get the admin key and user key:</p>
curl </span>\
</span>  -X</span> GET '</span>https://meili.owenyoung.com/keys</span>' \
</span>  -H </span>"</span>Authorization: Bearer you-master-key</span>" \
</span>  | </span>json_pp
</span></code></pre>
We’ll use them in the next step.</p>
Step 6: Setup doc-scraper🔗</a></h2>
We need to build search index after every updates of our blogs, I use Github Actions to build my blog, so I just add a job after the site is deployed. We’ll use docs-scraper</a> to scrape our whole site with sitemap.xml</code> file. docs-scraper</a> will help us to build heading and content level search index, it’ll bring the best search experience for our readers.</p>

The current docs-scrape is only adapted with 0.27.x</code></a>, at this moment, the latest meilisearch version 0.28 is not supported, I have submitted an issue</a>, so the default Mogenius meilisearch template version 0.27.0rc1</code> is fine, we can also upgrade it to v0.27.2</code>.(I have done this by change the Dockerfile</a>, Mongenius will monitor the updates, and automatically deploy the updates)</p>
</blockquote>
See the .github/workflows/build.yml</code></a></p>
name</span>: </span>Deploy Site
</span>on</span>:
</span>  </span>workflow_dispatch</span>:
</span>  </span>push</span>:
</span>    </span>branches</span>:
</span>      - </span>main
</span>jobs</span>:
</span>  </span>build-deploy</span>:
</span>    </span>runs-on</span>: </span>ubuntu-latest
</span>    </span>steps</span>:
</span>      - </span>uses</span>: </span>actions/checkout@v3
</span>      - </span>run</span>: </span>make install
</span>      - </span>name</span>: </span>Build Site
</span>        </span>run</span>: </span>make build
</span>      - </span>name</span>: </span>Deploy
</span>        </span>uses</span>: </span>peaceiris/actions-gh-pages@v3
</span>        </span>with</span>:
</span>          </span>publish_dir</span>: </span>./public
</span>          </span>github_token</span>: </span>${{ secrets.GITHUB_TOKEN }}
</span>  </span>scrape-and-build-search-index</span>:
</span>    </span>needs</span>: </span>build-deploy
</span>    </span>runs-on</span>: </span>ubuntu-latest
</span>    </span>steps</span>:
</span>      </span># wait github pages publish
</span>      - </span>run</span>: </span>sleep 1m
</span>      - </span>uses</span>: </span>actions/checkout@v3
</span>      - </span>name</span>: </span>Run docs-scraper
</span>        </span>env</span>:
</span>          </span>HOST_URL</span>: "</span>https://meili.owenyoung.com</span>"
</span>          </span>API_KEY</span>: </span>${{ secrets.MEILISEARCH_API_KEY }}
</span>          </span>CONFIG_FILE_PATH</span>: </span>${{ github.workspace }}/meilisearch-docs-scraper-config.json
</span>        </span>run</span>: </span>|
</span>          docker run -t --rm \
</span>            -e MEILISEARCH_HOST_URL=$HOST_URL \
</span>            -e MEILISEARCH_API_KEY=$API_KEY \
</span>            -v $CONFIG_FILE_PATH:/docs-scraper/config.json \
</span>            getmeili/docs-scraper:v0.12.2 pipenv run ./docs_scraper config.json
</span></code></pre>
MEILISEARCH_API_KEY</code> will be the admin key from the previous step.</p>
meilisearch-docs-scraper-config.json</code></a> will be placed in the root of the repository, and it will be used by docs-scraper</code> to scrape the site. Here is my config file:</p>
{
</span>  "</span>index_uid</span>": "</span>owen-blog</span>",
</span>  "</span>sitemap_urls</span>": ["</span>https://www.owenyoung.com/sitemap.xml</span>"],
</span>  "</span>start_urls</span>": [""],
</span>  "</span>scrap_start_urls</span>": </span>false</span>,
</span>  "</span>stop_urls</span>": [
</span>    "</span>https://www.owenyoung.com/categories/</span>",
</span>    "</span>https://www.owenyoung.com/tags/</span>",
</span>    "</span>https://www.owenyoung.com/en/tags/</span>",
</span>    "</span>https://www.owenyoung.com/en/categories/</span>",
</span>    "</span>https://www.owenyoung.com/pages/</span>",
</span>    "</span>https://www.owenyoung.com/en/pages/</span>"
</span>  ],
</span>  "</span>selectors</span>": {
</span>    "</span>lvl0</span>": {
</span>      "</span>selector</span>": "</span>.detail-page .p-category</span>",
</span>      "</span>default_value</span>": "</span>Random</span>"
</span>    },
</span>    "</span>lvl1</span>": {
</span>      "</span>selector</span>": "</span>.detail-page .p-tags</span>",
</span>      "</span>default_value</span>": "</span>Notes</span>"
</span>    },
</span>    "</span>lvl2</span>": "</span>.detail-page .entry-title</span>",
</span>    "</span>lvl3</span>": "</span>.e-content h2</span>",
</span>    "</span>lvl4</span>": "</span>.e-content h3</span>",
</span>    "</span>text</span>": "</span>.e-content p, .e-content li</span>"
</span>  },
</span>  "</span>strip_chars</span>": "</span> .,;:#</span>",
</span>  "</span>min_indexed_level</span>": </span>2</span>,
</span>  "</span>custom_settings</span>": {
</span>    "</span>synonyms</span>": {
</span>      "</span>js</span>": ["</span>javascript</span>", "</span>nodejs</span>"]
</span>    },
</span>    "</span>stopWords</span>": ["</span>一</span>", "</span>的</span>", "</span>是</span>"]
</span>  }
</span>}
</span></code></pre>

Cause I’m using Chinese and English, so I added a lot of stop words of Chinese.</a></p>
</blockquote>
Then the Github Actions workflow will run docs-scraper</code> to scrape the site after the site is deployed.</p>
Step 7: Setup the frontend🔗</a></h2>
See my search template</a>, basically, you need to include the docs-searchbar</a> css and js, and add an <input type="search" id="search-bar-input" placeholder="Search" /></code> to whereever you want to include the search bar. And add the following script to init:</p>
docsSearchBar</span>({
</span>  hostUrl: "</span>https://meili.owenyoung.com</span>",
</span>  apiKey: "</span>your-user-api-key</span>",
</span>  indexUid: "</span>owen-blog</span>",
</span>  inputSelector: "</span>#search-bar-input</span>",
</span>});
</span></code></pre>
Conclusion🔗</a></h2>
You can see the all source code on my blog source code</a>.</p>
As a programmer, it’s not a big deal to setup those things with mogenius</a>, sometimes their UI prompts are not very friendly, for example:</p>

Firstly, I tried to create meilisearch without the template, the git address I entered at the beginning was https://github.com/meilisearch/meilisearch</code>, then I can’t create the service, the error message is: This field is required.</code>, finally I tried another git url with suffix .git</code>, then the form is valid, and I can choose the git branch. I don’t know why they don’t allow me to choose a tag branch, only the normal branches are allowed, luckily, Meilisearch has one normal release branch</a>, so I can choose it.</li>
Their log UI is broken on Firefox browser, the edge browser is okay.</li>
Even in Edge browser, the CI/CD monitor UI is broken, with an always refreshed page.</li>
</ol>

Update: 2. it’s not their fault, it’s my default broswer settings that disabled the canvas rendering.</p>
</blockquote>
I don’t know if they will offer a config file to setup those form, like vercel.json</code> or netlify.toml</code>, if so, it’ll be easy for other non-programmers to setup those things.</p>
Finally, I’m appreciate that they can offer a so decent free plan, I hope I don’t need to migrate it to another service. Let’s see.</p>


Now, I'm in IndieWeb?
2022-06-12T03:40:31+08:00
Since I saw the concept of IndieWeb</a> last year, I’ve been wanting to support it on my Zola blog</a>. Before that my blog had never had a commenting system, and this time with Webmention I was finally able to get a static blog to display responses to articles on the web in plain html. I will document how I did it in this article.</p>
</span>

The IndieWeb</a> IndieWeb</strong> is a community of independent & personal websites connected by simple standards, based on the principles</a></strong> of: owning your domain</a></strong> & using it as your primary identity</a></strong>, publishing on your own site (optionally syndicating elsewhere)</a></strong>, and owning your data</a></strong>.</p>
</blockquote>
1. Support IndieWeb Auth🔗</a></h2>
IndieAuth is a federated login protocol for Web sign-in, so by enabling this, we can use our own domain to sign in to other sites and services which support IndieAuth</a>. Learn more about why IndieAuth</a> and how to IndieAuth</a>, here’s how I enabled it:</p>

By editing my index template file</a>, add this to the head:</li>
</ol>
<</span>link </span>rel</span>="</span>me</span>" </span>href</span>="</span>https://twitter.com/TheOwenYoung</span>" />
</span><</span>link </span>rel</span>="</span>me</span>" </span>href</span>="</span>https://github.com/theowenyoung</span>" />
</span><</span>link </span>rel</span>="</span>me</span>" </span>href</span>="</span>mailto:owen@owenyoung.com</span>" />
</span></code></pre>


Editing Twitter/GitHub profile bio, add my website URL https://www.owenyoung.com</code></p>
</li>

Test it at https://indielogin.com/</a></p>
</li>
</ol>
2. Add Profile Info🔗</a></h2>
When you sign in with IndieAuth or using web mention</a>, some sites will try to get your profile info, like name, image, and bio. So we can add this to our homepage, you can learn more about h-card</a> here. Here’s how I added it:</p>
By editing my index template file</a>, add this in the aside</code> (Cause I don’t want this to affect the layout of my site, so use css display: none</code> to hide it for human, but the bot will see it):</p>
<</span>div </span>class</span>="</span>display-none h-card pt</span>">
</span>  <</span>img </span>class</span>="</span>u-photo icon</span>" </span>alt</span>="</span>Owen</span>"
</span>  </span>src</span>="</span>{{get_url(path=</span>"</span>site</span>/</span>images</span>/</span>favicon-96x96.png</span>"</span>,cachebust</span>=</span>true)}}</span>"</span> />
</span>  <</span>a </span>class</span>="</span>p-name u-url</span>" </span>href</span>="</span>{{ config.base_url }}</span>"
</span>    >{{ config.extra.author }}</</span>a
</span>  >
</span>  <</span>p </span>class</span>="</span>p-note</span>">{{ config.extra.bio }}</</span>p</span>>
</span></</span>div</span>>
</span></code></pre>
3. Joining IndieWeb Webring</a>🔗</a></h2>

A webring (or web ring) is a collection of websites linked together in a circular structure, and usually organized around a specific theme, often educational or social. They were popular in the 1990s and early 2000s, particularly among amateur websites.</p>
</blockquote>
Now, IndieWeb has one IndieWeb Webring</a>! by adding webring in our sites, so people can find (and be found by) other folks with IndieWeb building blocks on their sites!</p>
So, I’m in it! By joining this, my blog has been listed in the IndieWeb Webring Directory</a>, you can see I already have a profile</a> there.</p>
It’s easy to join the webring, just click the link</a>, and login with my domain www.owenyoung.com</code>, then I can get my webring code, my webring code like this:</p>
<</span>a </span>href</span>="</span>https://xn--sr8hvo.ws/%F0%9F%93%AE%F0%9F%86%99%F0%9F%93%A9/previous</span>"
</span>  >←</</span>a
</span>>
</span>An IndieWeb Webring 🕸💍
</span><</span>a </span>href</span>="</span>https://xn--sr8hvo.ws/%F0%9F%93%AE%F0%9F%86%99%F0%9F%93%A9/next</span>">→</</span>a</span>>
</span></code></pre>
Then, I add this code to my homepage aside</a>, you can see it on the aside footer</a></p>
4. Adding Webmention</a> Response to articles🔗</a></h2>
Webmention</a> is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web.</p>

“An @ mention that works across websites; so that you don’t feel immovable from Twitter or Fb.” — Rony Ngala</a></p>
</blockquote>
Learn more about Webmention</a> and How to support webmention</a></p>
Basically, I use Webmention.io</a> to collect all webmentions about this blog, and then I use Denoflow</a> to cache them to my blog repo</a>, and then I use Zola</a> load_data</code> function to load them, and render them.</p>


First, go webmention.io</a> and create a new account with my domain www.owenyoung.com</code>, then I can get my webmention endpoint, and I connected my twitter and github account to the service.</p>
</li>

Second, let other services know your webmention endpoint. Add this to the head:</p>
</li>
</ol>
<</span>link
</span>  </span>rel</span>="</span>webmention</span>"
</span>  </span>href</span>="</span>https://webmention.io/www.owenyoung.com/webmention</span>"
</span>/>
</span></code></pre>

Use Denoflow</a> to cache all webmentions to my blog repo</a></li>
</ol>
Workflow file(workflows/fetch-webmention.yml</code></a>):</p>

Fetch webmention API</a> to get updates, then save to webmentions</code> directory.</p>
</blockquote>
sources</span>:
</span>  - </span>use</span>: </span>fetch
</span>    </span>args</span>:
</span>      - </span>https://webmention.io/api/mentions.jf2?domain=www.owenyoung.com&per-page=999&token=${{ctx.env.WEBMENTION_TOKEN}}
</span>    </span>run</span>: </span>return ctx.result.json()
</span>    </span>itemsPath</span>: </span>children
</span>    </span>key</span>: "</span>wm-id</span>"
</span>filter</span>:
</span>  </span>run</span>: </span>|
</span>    const {ensureDir} = await import("https://deno.land/std@0.121.0/fs/mod.ts");
</span>    const { dirname } = await import("https://deno.land/std@0.121.0/path/mod.ts");
</span>    for(const item of ctx.items){
</span>      const id = item["wm-id"];
</span>      const target = new URL(item["wm-target"]);
</span>      const pathname = target.pathname;
</span>      const filename = pathname.slice(1).replace(/\/$/, "");
</span>      const filepath = "webmentions/"+filename+".json";
</span>      await ensureDir(dirname(filepath));
</span>      let webmentionData = {};
</span>      try {
</span>        const dataString = await Deno.readTextFile(filepath);
</span>        webmentionData = JSON.parse(dataString);
</span>      } catch (_e) {
</span>        // ignore
</span>      }
</span>      webmentionData[id] = item;
</span>      console.log("write file:", filepath);
</span>      await Deno.writeTextFile(filepath, JSON.stringify(webmentionData,null,2));
</span>    }
</span>    return ctx.items.map(()=>true);
</span></code></pre>
Github Workflow file(.github/workflows/denoflow.yml</code></a>):</p>

Run denoflow every day at midnight, if there are any new updates, it will create a new pull request.</p>
</blockquote>
name</span>: </span>Denoflow
</span>on</span>:
</span>  </span>repository_dispatch</span>:
</span>  </span>workflow_dispatch</span>:
</span>  </span># push:
</span>  </span>#   branches:
</span>  </span>#     - main
</span>  </span>schedule</span>:
</span>    - </span>cron</span>: "</span>1 0 * * *</span>"
</span>jobs</span>:
</span>  </span>denoflow</span>:
</span>    </span>runs-on</span>: </span>ubuntu-latest
</span>    </span>concurrency</span>: </span>denoflow
</span>    </span>steps</span>:
</span>      - </span>name</span>: </span>Check out repository code
</span>        </span>uses</span>: </span>actions/checkout@v2
</span>      - </span>uses</span>: </span>denoland/setup-deno@v1
</span>        </span>with</span>:
</span>          </span>deno-version</span>: </span>v1.x
</span>      - </span>run</span>: </span>make webmention
</span>        </span>env</span>:
</span>          </span>WEBMENTION_TOKEN</span>: </span>${{secrets.WEBMENTION_TOKEN}}
</span>        </span>continue-on-error</span>: </span>true
</span>      - </span>name</span>: </span>chown
</span>        </span>run</span>: </span>sudo chown -R $USER:$USER ./
</span>      - </span>name</span>: </span>git config
</span>        </span>run</span>: </span>git config --global user.name "github-actions[bot]" && git config --global user.email github-actions-bot@users.noreply.github.com
</span>      - </span>name</span>: </span>git add
</span>        </span>run</span>: </span>git add data && git add webmentions
</span>      - </span>run</span>: </span>git status
</span>      - </span>id</span>: </span>isChanged
</span>        </span>run</span>: </span>git diff-index --cached --quiet HEAD || echo '::set-output name=changed::true'
</span>      - </span>name</span>: </span>Create pull request
</span>        </span>uses</span>: </span>peter-evans/create-pull-request@v3
</span>        </span>if</span>: </span>${{ steps.isChanged.outputs.changed == 'true' }}
</span>        </span>with</span>:
</span>          </span>token</span>: </span>${{ secrets.PERSONAL_TOKEN }}
</span>          </span>labels</span>: </span>automerge
</span>          </span>add-paths</span>: </span>data,webmentions
</span>          </span>commit-message</span>: "</span>chore: new item</span>"
</span>          </span>committer</span>: "</span>github-actions[bot] <github-actions-bot@users.noreply.github.com></span>"
</span>          </span>author</span>: "</span>github-actions[bot] <github-actions-bot@users.noreply.github.com></span>"
</span>          </span>branch</span>: </span>new-item
</span>          </span>delete-branch</span>: </span>true
</span>          </span>title</span>: </span>New item update
</span></code></pre>
Github auto merge workflow file(.github/workflows/auto-merge.yml</code></a>):</p>

When a pull request is created, the workflow will automatically merge it if the pull request is from the same author</p>
</blockquote>
name</span>: </span>Auto merge
</span>on</span>:
</span>  </span>workflow_dispatch</span>:
</span>  </span>pull_request_target</span>:
</span>jobs</span>:
</span>  </span>auto-approve</span>:
</span>    </span>runs-on</span>: </span>ubuntu-latest
</span>    </span>steps</span>:
</span>      - </span>name</span>: </span>Merge
</span>        </span>if</span>: </span>(github.actor=='theowenyoung') && (startsWith(github.head_ref,'new-item'))
</span>        </span>uses</span>: "</span>pascalgn/automerge-action@v0.14.3</span>"
</span>        </span>env</span>:
</span>          </span>GITHUB_TOKEN</span>: "</span>${{ secrets.PERSONAL_TOKEN }}</span>"
</span>          </span>MERGE_DELETE_BRANCH</span>: </span>true
</span>          </span>MERGE_LABELS</span>: ""
</span></code></pre>

Add response block to page tempalte</li>
</ol>
This part may take a while to finish, here is the main page template code</a>, I’ll only show the main part.</p>
Use Zola load_data function</a> to load the webmention data JSON file.</p>
{% set current_webmention_file_name = current_path | trim_end_matches(pat="/")
</span>%} {% set webmention_data =
</span>load_data(path="webmentions"~current_webmention_file_name~".json",required=false)
</span>%}
</span></code></pre>
Show response:</p>
{% if webmention_data %} {% set_global mentions = [] %} {% for ignored, item in
</span>webmention_data %} {% set_global mentions = mentions | concat(with=item) %} {%
</span>endfor %}
</span><</span>p </span>class</span>="</span>muted text-sm</span>">
</span>  {{trans(key="label_response_description",lang=lang)| markdown(inline=true) |
</span>  safe}}
</span></</span>p</span>>
</span>{% for type, items in mentions | group_by(attribute="wm-property") %}
</span><</span>h3</span>>
</span>  {{trans(key="label_"~type,lang=lang)}} ({{items | length}})<</span>a
</span>    </span>href</span>="</span>#{{type}}</span>"
</span>    </span>id</span>="</span>{{type}}</span>"
</span>    </span>class</span>="</span>zola-anchor</span>"
</span>    >🔗</</span>a
</span>  >
</span></</span>h3</span>>
</span>{% if type == 'like-of' or type == "repost-of" or type == "bookmark-of" or type
</span>== "follow-of" %}
</span><</span>ul </span>class</span>="</span>list-none flex items-center flex-wrap</span>">
</span>  {% for item in items %} {{ macro::webmention(type=type, item=item) }} {%
</span>  endfor %}
</span></</span>ul</span>>
</span>{% else %}
</span><</span>ul </span>class</span>="</span>list-none</span>">
</span>  {% for item in items %} {{ macro::webmention(type=type, item=item) }} {%
</span>  endfor %}
</span></</span>ul</span>>
</span>{% endif %} {% endfor %} {% endif %}
</span></code></pre>
Then, I add a webmention form, so if people want to submit their mentions, they can directly submit it.</p>
<</span>form
</span>  </span>class</span>="</span>webmention-form</span>"
</span>  </span>action</span>="</span>https://webmention.io/www.owenyoung.com/webmention</span>"
</span>  </span>method</span>="</span>post</span>"
</span>>
</span>  <</span>div </span>class</span>="</span>flex items-center flex-wrap pb</span>">
</span>    <</span>input </span>type</span>="</span>url</span>" </span>name</span>="</span>source</span>" </span>class</span>="</span>flex-3 mr-sm w-full py-sm px-sm</span>" />
</span>    <</span>input </span>type</span>="</span>submit</span>" </span>class</span>="</span>px py-sm</span>" </span>value</span>="</span>Send Webmention</span>" />
</span>  </</span>div</span>>
</span>  <</span>input </span>type</span>="</span>hidden</span>" </span>name</span>="</span>target</span>" </span>value</span>="</span>{{current_url}}</span>" />
</span></</span>form</span>>
</span></code></pre>

Optional: I also added an activity page for aggregating all response, the activity template page is here</a></p>
</blockquote>

Cause I don’t have too many mentions, so I use sebastiandedeyne’s</a> mention data as this article’s webmention data.</p>
</blockquote>
5. Send webmention when you publish a new article🔗</a></h2>
When we publish a new article, we want to send a webmention to the mentioned links. We can do this by using
Denoflow</a> and the
Webmention.app</a> API.
Webmention.app</a> can check all the mentioned links in
the new article and send all webmentions to them. Before
Webmention.app</a> can recognize the mentioned links, we
need to add some extra microformats2</a> to
our article html. Basically, it’s some html tag class names. These took me quite
a few time to update my templates, so now I have supported
h-card</a>, h-entry</a>
and h-feed</a>. It looks like this:</p>
<</span>article </span>class</span>="</span>h-entry</span>">
</span>  <</span>h1 </span>class</span>="</span>p-name</span>">Microformats are amazing</</span>h1</span>>
</span>  <</span>p</span>>
</span>    Published by
</span>    <</span>a </span>class</span>="</span>p-author h-card</span>" </span>href</span>="</span>http://example.com</span>">W. Developer</</span>a</span>> on
</span>    <</span>time </span>class</span>="</span>dt-published</span>" </span>datetime</span>="</span>2013-06-13 12:00:00</span>"
</span>      >13<</span>sup</span>>th</</span>sup</span>> June 2013</</span>time
</span>    >
</span>  </</span>p</span>>
</span>  <</span>p </span>class</span>="</span>p-summary</span>">In which I extoll the virtues of using microformats.</</span>p</span>>
</span>  <</span>div </span>class</span>="</span>e-content</span>">
</span>    <</span>p</span>>Blah blah blah</</span>p</span>>
</span>  </</span>div</span>>
</span></</span>article</span>>
</span></code></pre>
I have updated page.html</a>, index.html</a>, taxonomy_single.html</a> and section.html</a> to support these new microformats. I have to say this is the most demanding job, good luck!</p>
Once finished, I went to indiewebify</a> to test if it can recognize my new microformats. It works!</p>
Next, I went to webmention.app</a> to apply for a token. Then I can add a denoflow workflow file to fetch it’s service every day.</p>
Here is the workflow file(workflows/send-webmention.yml</code></a>):</p>
sources</span>:
</span>  - </span>from</span>: </span>https://deno.land/x/denoflow@0.0.35/sources/rss.ts
</span>    </span>args</span>:
</span>      - </span>https://www.owenyoung.com/blog/atom.xml
</span>  - </span>from</span>: </span>https://deno.land/x/denoflow@0.0.35/sources/rss.ts
</span>    </span>args</span>:
</span>      - </span>https://www.owenyoung.com/en/blog/atom.xml
</span>steps</span>:
</span>  - </span>use</span>: </span>fetch
</span>    </span>args</span>:
</span>      - </span>https://webmention.app/check?token=${{ctx.env.WEBMENTION_APP_TOKEN}}&url=${{encodeURIComponent(ctx.item.links[0].href)}}
</span>      - </span>method</span>: </span>GET
</span>        </span>headers</span>:
</span>          </span>Content-Type</span>: </span>application/json
</span>    </span>run</span>: </span>|
</span>      console.log(ctx.item.links[0].href);
</span>      const json = await ctx.result.json();
</span>      console.log(json);
</span></code></pre>
Don’t forget to add enviroment variables WEBMENTION_APP_TOKEN</code> to your denoflow workflow file(.github/workflows/denoflow.yml</code>).</p>
- </span>run</span>: </span>deno run -A https://deno.land/x/denoflow/cli.ts run
</span>  </span>env</span>:
</span>    </span>WEBMENTION_TOKEN</span>: </span>${{secrets.WEBMENTION_TOKEN}}
</span>    </span>WEBMENTION_APP_TOKEN</span>: </span>${{secrets.WEBMENTION_APP_TOKEN}}
</span></code></pre>
Conclusion🔗</a></h2>
I really like the concept of IndieWeb and their API design philosophy, it took some time but I still think it was worth it. It gave me renewed confidence in the Internet.</p>
You can find the all source code of this blog on Github</a></p>
Resources🔗</a></h2>

Bird.gy</a> - Bridgy connects your web site to social media.
Likes, retweets, mentions, cross-posting</li>
Indie Webring</a></li>
Telegraph</a> - Easily send Webmentions from your website</li>
Webmention.app</a> - Automate your outgoing webmentions</li>
Webmention.io</a> - Webmention.io is a hosted service created to easily receive webmentions on any web page.</li>
Fediring</a></li>
Webmentions on a static site with GitHub Actions</a></li>
</ul>


How to Live a Happy Life
2022-04-04T00:00:00+00:00

“If we want to be happier, I think the first place to start is looking at the available options and then working out which to pursue. The way I see it, there are only three avenues to take. We can change how we think, how we spend our time, or the external facts of our life.”</p>
</blockquote>

“If you look at what people actually do to be happier, it seems nearly everyone tries to change the external facts: we try to become richer, thinner, more successful, to find a better house in a nicer area, and so on. A few of us think about trying to spend less time working, and more time on hobbies or with friends and family. Almost no one thinks about actively retraining the way they think. In fact, I don’t think this last one even crosses most of our minds.”</p>
</blockquote>
How to live a happy life</a> Tell us 4 suggestions:</p>

Write down three things you’re grateful for each day.</li>
Practise mindfulness.</li>
Learn about Cognitive Behavioural Therapy and use it.</li>
Track your happiness, then do more of what you like and less of what you don’t.</li>
</ol>
</span>Quotes🔗</a></h2>

The first is ‘hedonic adaptation’. Simply: as a species, we are extraordinary good at getting used to things, such that very few events in life have a long-term impact on our happiness: births, marriages, deaths, promotions, demotions, etc can all occur to us or around us and typically, after 6 months, our self-reported happiness levels will be back where there were before.</p>
</blockquote>

Perhaps the most important case of adaptation comes from the Easterlin Paradox, named after the economist who found it, which is that self-reported life satisfaction scores in the developed world have barely improved over the last 60 years (since we started asking these questions) despite massive increases in GDP.</p>
</blockquote>


Wiki Links to Markdown Links for VSCode
2022-03-27T00:00:00+00:00
Recently, I migrated my Wiki</a> to
Zola</a>. Zola does not support relative internal links,
it only support @/xxx.md</code> internal link format. This is a bit painful, I posted
a
feature request</a>
to Zola. But for now, I will use my own edited version of Zola, this change will
allow me to use /content/xxx.md</code> internal link format.</p>
</span>
So, the second thing is to input absolute internal link quickly,
Obsidian</a> does have a feature that allows you type wiki
links, then they will be converted to markdown links. I like this feature, but
when I tried Obsidian</a> seconds time, I still can’t use to
it, and it’s also a bit slow compared to VSCode.
Foam</a> can only auto generate markdown
reference link, but that feature not a one-time task, it sometimes makes
mistakes, like add multiple "</code> at the end of reference zone. So, I decided to
fork foam extension, and turn off the most features that I don’t need, only keep
creating notes from template, and convert wiki links to markdown links.</p>
</p>
I’m so lucky, Foam’s code structure is very clean, so I just changed a little
bit to achieve what I wanted. Here is my final result:
Foam</a>, if you need this, I also publish
it on
VSCode marketplace</a>.</p>


A new Gatsby theme [Timeline] - Show your all posts, tweets, instagram posts into one
2021-01-29T00:00:00+00:00
Don’t you think there are too many different personal profile for us? Like
twitter, instagram, facebook, blog, etc, So do I, I suppose there is an elegant
site to show all my creative work, that’s the new gatsby theme
Timeline</a>, a
Gatsby</a> theme, you can use it to show your all
posts, tweets, instagram posts etc into one blog. In my opinion, this is a real
personal home.</p>
Checkout my blog: https://blog.owenyoung.com/</p>
Source Repo</a></p>
Live Demo</a></p>
</span>
</p>
Here are the features for now:</p>

Support markdown, tweet, instagram posts, youtube videos, hacker news, reddit
post</li>
Support i18n by
gatsby-theme-i18n</a>, you
can choose your own
i18n library</a></li>
Support comments platform disqus</a> or
utterances</a></li>
Support Tags</li>
Pagination, even tag pages support pagination</li>
SEO Optimization</li>
</ul>
Just start a new blog for yourself:</p>
gatsby</span> new my-themed-blog https://github.com/theowenyoung/gatsby-starter-timeline
</span></code></pre>

For more about installation please see
here</a></p>
</blockquote>
Note🔗</a></h2>
In the starter demo, I use two gatsby plugins
gatsby-source-twitter</a> and
gatsby-source-instagram</a>
as the blog’s sources. But in my blog</a>, I use
Actionsflow</a> to get my tweets,
instagram data, sync the JSON file to
my content source repository</a> ((Why
Actionsflow? For more stably, and I can store all my creative work into one)),
and site repository</a>
use plugin
gatsby-source-git</a> to sync
those data, and my markdown posts, for more tech stack, you can see
How I Built my Blog?</a></p>

Disclaimer: I made the
Actionsflow</a> :)</p>
</blockquote>