ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

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:
Massets/content.scss | 16++++++++++++++++
Mcontent/posts/Migrating My Blog to Hugo.md | 39+++++++++++++++++++++++++++++----------
Mlayouts/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 }}