commit 95bcd236bacfb437bb809e8e1750557a1fe4d98c parent dd6aafaacbc8f96afb8b5d8e225afce07d2f0c1d Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Sun, 3 May 2020 15:50:19 +0700 content: add checklist capability and style tweak Diffstat:
| M | assets/content.scss | | | 16 | ++++++++++++++++ |
| M | content/posts/Migrating My Blog to Hugo.md | | | 39 | +++++++++++++++++++++++++++++---------- |
| M | layouts/partials/components/headline-hash.html | | | 2 | +- |
3 files changed, 46 insertions(+), 11 deletions(-)
diff --git a/assets/content.scss b/assets/content.scss @@ -8,10 +8,12 @@ .content, .notes { font-family: $font-text; width: 100%; + pre { overflow: auto; padding: 0.5em; } + a { &:hover { @include themify($themes) { @@ -19,16 +21,19 @@ } } } + code { padding: 0.1em; font-family: $font-mono; font-size: 0.9em; } + :not(pre) > code { @include themify($themes) { background-color: themed('color-background-hover'); } } + table { display: block; overflow-x: auto; @@ -56,6 +61,7 @@ } } } + ul { padding: 0; li { @@ -67,17 +73,27 @@ display: inline-block; content: "- "; position: absolute; + z-index: 1; width: 20px; @include themify($themes) { color: themed('color-red'); } left: 0; } + input { + margin-left: -20px; + position: absolute; + z-index: 2; + top: 3.9px; + margin-right: 0; + } } } + figcaption { font-size: 0.8em; } + twitter-widget { margin-left: auto; margin-right: auto; diff --git a/content/posts/Migrating My Blog to Hugo.md b/content/posts/Migrating My Blog to Hugo.md @@ -1,38 +1,41 @@ --- title: Migrating My Blog to Hugo author: Yohanes Bandung Bondowoso -description: I originally planned to make my own MarkDown parser and use gist as my blog CMS. After researched a bit between static site generator, I choose Hugo. +description: I originally planned to make my own Markdown parser and use gist as my blog CMS. After researched a bit between static site generator, I choose Hugo. tags: - Web Development #web_development date: 2020-04-15T01:59:34 --- -In the start of 2020, I planned to expand my [personal page](https://old.ybbond.dev/) to not only contain my "CV", but also use it as my blog. That webpage is created with ReactJS, and my original idea was to make a new page that fetch data from GitHub Gist, then parse the MarkDown file to HTML file[^1]. I also planned (and I will not drop this one, for the sake of learning) to make that webpage server rendered. +In the start of 2020, I planned to expand my [personal page](https://old.ybbond.dev/) to not only contain my "CV", but also use it as my blog. That webpage is created with ReactJS, and my original idea was to make a new page that fetch data from GitHub Gist, then parse the Markdown file to HTML file[^1]. I also planned (and I will not drop this one, for the sake of learning) to make that webpage server rendered. [^1]: The more original idea was to create this with ReasonReact, as written in my other [post](/posts/2020-03-trying-bs-json-and-bs-fetch-to-publish-my-gist-as-blog/). -After 20% progress of making MarkDown to HTML parser, I got tired. Instead of reinventing the wheel, I thought that my time can be used to write my blog. So I researched for a static site generator. My primary writing tool, iA Writer boasts that it supports **Ghost**, **Wordpress** and **Medium**. I omitted Medium because I want to self-host the site. I omitted Wordpress too, because I am not too good at PHP Language. Then I try searching for Ghost, turns out it's a paid service. +After 20% progress of making Markdown to HTML parser, I got tired. Instead of reinventing the wheel, I thought that my time can be used to write my blog. So I researched for a static site generator. My primary writing tool, iA Writer boasts that it supports **Ghost**, **Wordpress** and **Medium**. I omitted Medium because I want to self-host the site. I omitted Wordpress too, because I am not too good at PHP Language. Then I try searching for Ghost, turns out it's a paid service. Other options I found was **Jekyll**, **Hugo**, **nanoc** and **Gatsby**. I tried Gatsby for work and side projects, and the two others just doesn't fit my needs. ## So I tried Hugo! -The main feature I like is that it parses MarkDown automatically. It also generates [RSS](https://ybbond.dev/index.xml) for each page. +> "Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)." +> +> _John Gruber, Creator of Markdown_ -It supports the flavor of MarkDown that parses footnotes! I **love footnotes**[^2]! +The main feature I like is that it parses [Markdown](https://daringfireball.net/projects/markdown/) automatically. This allow me to make post with iA Writer, my currently favorite writing tool for iPad. It supports the flavor of Markdown that parses footnotes! I **love footnotes**[^2]! + +It also generates [RSS](https://ybbond.dev/index.xml) for each page. It has native support for tables: [^2]: Like the one you probably noticed already. This is one. -This | is ------|------ - an | example - of | table. + This | is | an | + -------- | :---: | ----: | + example | of | table | + **cool** | isn't | it? | I can also insert code snippets! Yeay! - ```html <!DOCTYPE html> <html lang="en"> @@ -46,6 +49,22 @@ I can also insert code snippets! Yeay! </html> ``` +## Current Features + +The default features from hugo itself already awesome, but my goal for this site is very opinionated. There are some features that I'd like to be implemented: + +- [x] **Basic** _text_ ~~formats~~ +- [x] This unordered task list (ordered version is available too!). I omit the `disabled` property on purpose, because of a bug. +- [x] `Code`, block code and block quote +- [x] Footnotes! +- [x] Responsiveness +- [x] Dark mode toggler (if JavaScript enabled on browser) +- [x] Replace default image to lazyloaded image +- [ ] Simple script to view footnotes on hover +- [ ] Anonymous tracker (I always wonder whether anybody read my blog or not 🧐) + + + I am genuinely happy for using Hugo. I might keep using this for a while, before I'll have an itch to try other static site generators 😄 Cheers! diff --git a/layouts/partials/components/headline-hash.html b/layouts/partials/components/headline-hash.html @@ -1 +1 @@ -{{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | safeHTML }} +{{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" | safeHTML }}