balloon layout in bookcase.

Site Configuration These settings are important for building a website using hugo. See All Configuration Settings for more details. Site title Site title. This value will become the content of <title> tag in html. 1 title = "Monochrome" Theme Set this value to the corresponding folder name of your theme. (located by default in /themes/THEMENAME/) 1 theme = "hugo-theme-monochrome" Base URL Hostname (and path) to the root. 1 baseURL = "https://kaiiiz.github.io/hugo-theme-monochrome" favicon Add favicon.ico to your site’s static folder. External library Disqus 1 disqusShortname = "xxx" Other settings checkout Disqus - Internal Templates for more details. Google Analytics 1 googleAnalytics = "xxx"

Theme Configuration These values are inside your toml config file. Navbar title HTML is available. 1 2 [params] navbarTitle = "Monochrome" default: site’s title Footer HTML is available. 1 2 [params] footer = "Copyright © 2021 by kaiiiz" default: footer section will not be rendered. Table of Contents 1 2 [params] enableTOC = false default: true Collapsible Menu To enable the collapsible TOC globally, add: 1 2 [params] enableCollapsibleTOC = true default: false To enable the collapsible changelogs globally, add: 1 2 [params] enableCollapsibleChangelogs = true default: false Navbar menu Monochrome uses built-in menu system supported by hugo itself. (Checkout document for more deatil.) By default, the menu called navbar is used to decide which item need to be rendered on the navbar. So you can simply add the following code to your page front-matter, and the menu info will be handled by hugo out of the box. (simple method mentioned in document) 1 2 3 --- menu: navbar --- Also, weighted value is supported out of the box, you can explicit assign the weight of the navbar entry, hugo will first sort the menu using weight, if there has two entries shared the same weight, the default order will be applied. 1 2 3 4 5 --- menu: navbar: weight: -99 --- Navbar settings in config If you try to put entry that aren’t attached to a piece of content, or you want to organize your navbar into a single file, checkout Add Non-content Entries to a Menu or Configuration file of demo site and set these values in your toml settings file. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 [[menu.navbar]] identifier = "about" name = "about" title = "about" url = "/about/" weight = 100 [[menu.navbar]] identifier = "series" name = "series" url = "/series/" weight = -100 [[menu.navbar]] identifier = "categories" name = "categories" url = "/categories/" weight = 80 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 menu: navbar: - identifier: about name: about title: about url: /about/ weight: 100 - identifier: series name: series url: /series/ weight: -100 - identifier: categories name: categories url: /categories/ weight: 80 External Library MathJax Use $ to create inline result, $$ to create block result. 1 2 [params] enableMathJax = true default: false Zooming.js 1 2 [params] enableZoomingJS = false default: true Site Search 1 2 [params] enableSiteSearch = true default: false Syntax Highlighting Using Chroma (server-side) See Syntax Highlighting for more details. 1 2 [params] enableCodeCopy = false default: true Using Prism.js (client-side) Disable markup highlight feature 1 2 3 [markup.highlight] codeFences = false lineNos = false Enable Prism.js 1 2 [params] usePrismJS = true default: false Enable line numbers feature 1 2 [params] enablePrismJSLineNo = true default: true SEO Author 1 2 [params] author = "kaiiiz" default: not generate author meta tag Open Graph A flag to render open graph internal template. See Open Graph for additional settings. 1 2 [params] enableOpenGraph = false default: true Twitter Cards A flag to render open twitter cards template. See Twitter Cards for additional settings. 1 2 [params] enableTwitterCards = false default: true

Page Settings These values are inside your page’s front-matter. Layout Monochrome support different types of layout. You can change the layout of section or regular page according to your needs. Checkout Layout for more details. Navbar title HTML is available. 1 2 3 --- navbar_title: "Monochrome" --- default: theme’s navbarTitle Footer HTML is available. 1 2 3 --- footer: "Copyright © 2021 by kaiiiz" --- default: theme’s footer Table of Contents 1 2 3 --- toc: false --- default: theme’s enableTOC Collapsible Table of Contents 1 2 3 --- collapsible_toc: false --- default: theme’s enableCollapsibleTOC Changelogs 1 2 3 4 5 6 7 8 9 10 11 --- changelogs: - tag: '20210623' description: - 'changelog example 1' - 'changelog example 2' - tag: '20210624' description: - 'changelog example 3' - 'changelog example 4' --- tag and description both support markdown syntax. default: None Collapsible Changelogs 1 2 3 --- collapsible_changelogs: false --- default: theme’s enableCollapsibleChangelogs External library MathJax 1 2 3 --- math: false --- default: theme’s enableMathJax Zooming.js 1 2 3 --- zooming_js: false --- default: theme’s enableZoomingJS Disqus 1 2 3 --- disqus: false --- default for post page: site’s disqusShortname default for other pages: false Google Analytics 1 2 3 --- ga: false --- default: site’s googleAnalytics Syntax Highlighting Chroma 1 2 3 --- code_copy: false --- default: theme’s enableCodeCopy Prism.js 1 2 3 --- prism_lineno: false --- default: theme’s enablePrismJSLineNo SEO Author 1 2 3 --- author: "kaiiiz" --- default: theme’s author Description 1 2 3 --- description: "Configuration of hugo-theme-monochrome" --- default: not generate description meta tag Keywords In page front-matter 1 2 3 4 5 6 --- keywords: - hugo - hugo theme - hugo theme monochrome --- default: not generate keywords meta tag Open Graph A flag to render open graph internal template. See Open Graph for additional settings. 1 2 3 --- open_graph: false --- default: theme’s enableOpenGraph Twitter Cards A flag to render open twitter cards template. See Twitter Cards for additional settings. 1 2 3 --- twitter_cards: false --- default: theme’s enableTwitterCards

Balloon layout is useful for demonstrating information step-by-step. Go to single page demo

Balloon is useful for demonstrating information step-by-step. This layout can be used on both list layout and single layout. Configuration 1 2 3 --- type: 'balloon' --- Specify type in front-matter will change the template lookup order. balloon_resources Content resources. URL can be an absolute path (with / prefix, relative to base URL), or relative path (without /, relative to current path) Hugo will handle multilingual scenario out of the box For example: https://kaiiiz.github.io/hugo-theme-monochrome/about \____________________________________/\____/ base URL balloon_resources 1 2 3 --- balloon_resources: "/about" --- default: error will occur in page balloon_img_src Balloon head image URL. URL must be relative to base URL. (without / prefix) For example: https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg \_____________________________________/\________/ base URL balloon_img_src 1 2 3 --- balloon_img_src: 'thanks.jpg' --- default: fallback to balloon_img_src_dark, if failed, image become dot balloon_img_src_dark Balloon head image URL for dark mode. URL must be relative to base URL. (without / prefix) For example: https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg \_____________________________________/\________/ base URL balloon_img_src 1 2 3 --- balloon_img_src_dark: 'thanks.jpg' --- default: fallback to balloon_img_src, if failed, image become dot balloon_circle balloon head shape can be square or circle. 1 2 3 --- balloon_circle: true --- default: true Resouces Configuration These settings are under the resource specified in balloon_resources. title Title of content card. 1 2 3 --- title: 'Story before hugo' --- default: no title weight 1 2 3 --- weight: 3 --- default: default order Trick Hugo supports an amazing feature called Headless Bundle, which elegantly resolved the resouces publish issue. For example, if you don’t want to publish the resouces of the balloon layout, you can create a leaf bundle and specified headless = true in index.md’s front-matter. These resources will only be used during rendering process. In other word, no file will be generated to /public folder. Checkout Headless Bundle for more details.

Bookcase layout is useful for creating another viewpoint of list contents. . ├── balloon │ └── _index.md ├── regular-page.md ├── _index.md <- you are here └── normal └── _index.md

Bookcase layout is useful for creating another viewpoint of list contents. This layout can only be used on list layout. Configuration 1 2 3 --- type: 'bookcase' --- Specify type in front-matter will change the template lookup order. bookcase_list_sections List subsections. 1 2 3 --- bookcase_list_sections: true --- default: true bookcase_list_pages List pages. 1 2 3 --- bookcase_list_pages: true --- default: true Resouces Configuration These parameters are located in bookcase item’s resource. For example: . ├── books.md <- config is located in here! ├── category │ └── _index.md <- and here! └── _index.md <- your bookcase layout bookcase_cover_src The cover image URL. URL must be relative to base URL. (without / prefix) Image ratio is 2:3 (width:height) For example: https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg \_____________________________________/\________/ base URL bookcase_cover_src 1 2 3 --- bookcase_cover_src: 'thanks.jpg' --- default: fallback to bookcase_cover_src_dark, if failed, image become empty bookcase_cover_src_dark The cover image URL for dark mode. URL must be relative to base URL. (without / prefix) Image ratio is 2:3 (width:height) For example: https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg \_____________________________________/\________/ base URL bookcase_cover_src 1 2 3 --- bookcase_cover_src_dark: 'thanks.jpg' --- default: fallback to bookcase_cover_src, if failed, image become empty weight 1 2 3 --- weight: 3 --- default: default order

Gallery layout is useful for demonstrating pictures and its statistical data.

Gallery layout is useful for demonstrating pictures and its statistical data. This layout can be used on both list layout and single layout. Configuration 1 2 3 --- type: 'gallery' --- Specify type in front-matter will change the template lookup order. gallery_resources Content resources. URL can be an absolute path (with / prefix, relative to base URL), or relative path (without /, relative to current path) Hugo will handle multilingual scenario out of the box For example: https://kaiiiz.github.io/hugo-theme-monochrome/about \____________________________________/\____/ base URL gallery_resources 1 2 3 --- gallery_resources: '/about' --- default: error will occur in page Resouces Configuration These settings are under the resource specified in gallery_resources. title Title of image. 1 2 3 --- title: 'Gallery' --- default: no title gallery_title_link Link of the title. 1 2 3 --- gallery_title_link: 'https://github.com/kaiiiz' --- default: no title link gallery_img_src Image URL. URL must be relative to base URL. (without / prefix) For example: https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg \_____________________________________/\________/ base URL gallery_img_src 1 2 3 --- gallery_img_src: 'thanks.jpg' --- default: no image gallery_img_link Link of the image. 1 2 3 --- gallery_img_link: 'https://github.com/kaiiiz' --- default: no image link gallery_img_caption Caption of the image. HTML is available. 1 2 3 --- gallery_img_caption: '<span>Photo by <a href="https://unsplash.com/@swimstaralex?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alexander Sinn</a> on <a href="https://unsplash.com/s/photos/thanks?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>' --- default: no figure caption under image gallery_statistic Statistic of the image. The format is: 1 2 3 4 5 6 --- - key: key1 value: value1 - key: key2 value: value2 --- key and value both support markdown syntax. default: no figure caption under image weight 1 2 3 --- weight: 3 --- default: default order Trick Hugo supports an amazing feature called Headless Bundle, which elegantly resolved the resouces publish issue. For example, if you don’t want to publish the resouces of the balloon layout, you can create a leaf bundle and specified headless = true in index.md’s front-matter. These resources will only be used during rendering process. In other word, no file will be generated to /public folder. Checkout Headless Bundle for more details.

You can fully customize your list layout by specifying list_posts: false . ├── _index.md <- you're here! ├── post1.md ├── post2.md └── post3.md post1 post2 post3

List layout is built-in section layout. Monochrome add options to adjust its behavior. Configuration List posts You can fully customize your index page through the content of _index.md and decide whether render the default list layout by specifying list_posts. 1 list_posts: false default: true Group by year An option to control group setting. 1 group_by_year: false default: true Show date Show / Hide date right after the post entry. 1 show_date: false default: true

Gmail icon whoami

Some posts from my Medium and Dev.to. will move it all here later

For the most part of software development, I’ve been using scheduler quite often, For example, when there is a need to expire something, depends on how quickly data needed to be expired–the scheduler wake up every 1 minute to look for what it has to do. This is not efficient, why? Because even the scheduler has nothing to do (no task) it still has to wake up every minute to fetch database and figure out that there is nothing to do! So, what are the solution ? The best way is to wake up the system only when it needed to. In this case a task scheduler with ability to set “when-to-execute” would do the job. Aren’t there existing solutions ? There is! it is called Google Cloud Tasks ! But I’m using AWS, sad so, after some researches I see that people are having the same problem, they want to do something like Google Cloud Tasks, basically all people want is something like “hey scheduler, run this thing at this time please” Let’s do it Redis has a data structure called “SortedSet”, when we added somethings into “SortedSet” Redis will sort them by “Score”, and that’s it! Will put “when to run a tak” as a score, then Redis will take care of sorting what tasks need to run first–by just quering the “SortedSet” by score Data structure for Redis' Sorted Set is consisting of “Score” and “Member”, which “Score” is int64 and “Member” is string We can put Task’s detail into “Member” field Here is the overview diagram The only job for Task Processor is to dispatch Http Request to somewhere, instead of having workers doing some specific jobs here, delegate jobs to resource owner would be a good idea. and the payload to the Api looks like this { "when": "2022-06-05T03:45:00+07:00", "http": { "method": "GET", "url": "http://localhost:8443/purchase/rn=123456789", "headers": [{"key":"Content-Type", "value":"application/json"}], "payload": "{\"name\":\"Katie\",\"personInfo\":{\"age\": 21}}" } } How about it, the idea is pretty simple right? Leverage Redis SortedSet to be a Sorted Tasks Delegate job that needs to be done, to resource owner do it by themself Here is the repo: https://github.com/tjindapitak/sched Cheers guys! Improvements There can be race condition when adding a task to Redis and reading a task to Redis, to solve is using Redis Lock Support rich http request spec Authentication Log Retry mechanism (base on Job type and Error type) Test

React (prior to v.18) batches state updates to be only one update, so that React will rerender only once, but there are some limitations to it, it said to be able to batches only state updates are in React event handlers. Example 1 (React prior to v18) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // Example 1, React v17 // Index.js import App from './App'; const container = document.getElementById('root'); ReactDOM.render(<App/>, container); // ----------------------------------------------- // App.js import React, { useState } from 'react'; export default function App() { const [data1, setData1] = useState(false); const [data2, setData2] = useState(false); const handleClick = () => { setData1(!data1); setData2(!data2); } console.log('component is being re-rendered'); return ( <div> <button onClick={handleClick}>Test</button> </div> ); } If we click a button, we will see only one component is being re-rendered But if we do something like this Example 2 (React prior to v18) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // Example 2, React v17 // Index.js import App from './App'; const container = document.getElementById('root'); ReactDOM.render(<App/>, container); // ----------------------------------------------- // App.js import React, { useState } from 'react'; export default function App() { const [data1, setData1] = useState(false); const [data2, setData2] = useState(false); const handleClick = () => { // wrap state updates inside setTimeout setTimeout(() => { setData1(!data1); setData2(!data2); }); } console.log('component is being re-rendered'); return ( <div> <button onClick={handleClick}>Test</button> </div> ); } If we click a button, we will see component is being re-rendered component is being re-rendered Again, React prior to v18, batches state updates only in React event handlers e.g. onClick, onChange … But if we wrap state updates inside setTimeout, Promise, Native event handlers. React will not batch those events, as we can see in Example 2 (above) But now React v18, solves those issues, but we have to change the way to render our App a bit Example 3 (React v18) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // Example 3, React v18 // Index.js import ReactDOM from 'react-dom'; import App from './App'; const root = ReactDOM.createRoot(container); root.render(<App/>); // ----------------------------------------------- // App.js import React, { useState } from 'react'; export default function App() { const [data1, setData1] = useState(false); const [data2, setData2] = useState(false); const handleClick = () => { setTimeout(() => { setData1(!data1); setData2(!data2); }); } console.log('component is being re-rendered'); return ( <div> <button onClick={handleClick}>Test</button> </div> ); } If we click a button we will see only one component is being re-rendered Woww Amazing!! btw, if we cannot migrate to v18 just yet, there is a function unstable_batchedUpdates from react-dom, but as we can imagine by its name, it is not stable.

Monochrome has multiple layouts built in. You can change the layout of section or regular page according to your needs.

List section in bookcase layout.

Hello world!

Hello world!

Hello world!

Hello world!

Hello world!

Hello world!

Hi developers who loves to work from home like me, for those who doesn’t enjoy working from home, please skip this post. warning! As you can guess from title, this post is about “How to not use HttpContext.Items” To be honest, I’m the one who is still using HttpContext.Items because why not, right?–It’s static! easy to write. But no, collectively, it gives me tremendous amount of issues. First, it’s static! forget about mocking it. Second, it’s static! forget about testing it. Third, it allows me to modify any variables I want!, brilliant !!, why is that a bad thing? because I can’t control them. I can perform any add/delete/modify operations to any objects. aight, anyways, I will show you how to use HttpContext.Items first, I know it’s boring, just bear with me once. coz I don’t have many things to make my blog longer. haha.. oops. aight, let’s go HttpContext.Current.Items is a Key-Value-Pair, key and value both are type object. You can access anywhere in your middlewares. to store 1 2 3 4 5 6 HttpContext.Current.Items["myobject"] = new MyObject(); to read var myObject = (IMyObject)HttpContext.Current.Items["myobject"]; to modify var myObject = (IMyObject)HttpContext.Current.Items["myobject"]; myObject.Hime = "Hime Hime~"; easy peasy! now let’s have a look into this code one bit 1 2 3 4 5 6 7 8 9 10 11 12 13 app.Use(next => async context => { context.Items["DogSays"] = "Henlo hooman"; await next(context); sexyMailer.Post((string)context.Items["DogSays"]); }); app.Use(next => async context => { context.Items["DogSays"] = "Kwakkkkk!"; await next(context); }); now you can imagine if you work with 1500+ developers, how troublesome to maintain your calm, when you’re assigned to find who changes our dog to says “Kwakkkkk!”. enough playing with time. I found 2 elegant ways use IHttpContextAccessor this interface is to read HttpContext through DI, simply you can register it by services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); // this has to be registerd as singleton as per this announcement reference or in ASP.NET Core 2.1 or above, you can use extension method services.AddHttpContextAccessor(); now in your class, you can access context via DI for example, 1 2 3 4 5 6 7 8 9 10 public class HomeService{ private readonly IHttpContextAccessor _httpContextAccessor; public HomeSerivce(IHttpContextAccessor httpContextAccessor){ _httpContextAccessor = httpContextAccessor; } public DoWork(){ var says = (string)_httpContextAccessor.HttpContext.Items["DogSays"] Log.Rock(says); } } now you can mock your IHttpContextAccessor quite easily! and live a happy life. Create a Class to handle the modification of this shared objects, and register it as Scoped (created once per client request (connection) reference) then you can use it through DI, also it’s a class! you can do a typed properties so do speak, here is the code. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 public interface IVaultAccessor<T> { void AddToVault(T t); T GetFromVault(T t); } public class VaultAccessor<MyDog> : IVaultAccessor<MyDog> { private MyDog _myDog { get; set; } public void AddToVault(MyDog myDog) { _myDog = myDog; } public MyDog GetFromVault() { return _myDog; } } public class MyDog { public string WhatDoesTheDogSay { get; set; } } // register as Scoped services.AddScoped<IVaultAccessor<MyDog>>(sp => new VaultAccessor<MyDog>()); // Usage in any random class public class Tea: ITea { private readonly IVaultAccessor<MyDog> _myDogAccessor; public Tea(IVaultAccessor<MyDog> myDogAccessor) { _myDogAccessor = myDogAccessor; } public void RandomName() { var myDog = _myDogAccessor.GetFromVault(); Log.Rock($"What a relief you are still my dog, {myDog.WhatDoesTheDogSay}"); } } You can make IVaultAccessor fancy to the extent. And live a happy life. Whoaaa! that’s it for today. How was it guys, hope you enjoy being chubbier. See you around.

Balloon layout can also be used in regular page. Go to list demo

Breadcrumbs Render breadcrumbs navigation Usage {{< breadcrumbs />}} Examples 1 {{< breadcrumbs >}} / Shortcodes / Breadcrumbs

Changelog v0.9.2 - 2022/02/25 Fix: reimplement terms-cloud to prevent size overflow (max size: 1.6 rem) v0.9.1 - 2022/02/25 Change: set terms-cloud max font size to 1.4 rem Fix: site search url from absLangURL to relLangURL v0.9.0 - 2022/01/31 Improve: search implementation hide the mismatch objects instead of removing it while searching widen the control range of search result Improve: gallery layout’s key and value now support markdown syntax Improve: Zooming.js configuration speed up animations setup transparent background Change: for consistency, the names of the following parameters are changed: page’s collapsibleTOC => collapsible_toc page’s collapsibleChangelogs => collapsible_changelogs Change: font-size of html is changed from 18px to 16px Add: breadcrumbs shortcode Add: list layout properties group_by_year and show_date Fix: terms-cloud typo (#4) v0.8.0 - 2021/07/29 Improve: flexsearch multilingual search capability Improve: widen the control range of navbar menu items Change: flexsearch can now search index pages Change: the post content in RSS is changed from summary to full text Add: collapsible TOC and Changelogs v0.7.1 - 2021/07/08 Change: adjust the style of changelogs Fix: flexsearch search API issue v0.7.0 - 2021/06/24 Bump dependencies version Add: changelogs property Add: support disqus for index page (turn off by default) Change: theme name from ‘Graytr’ to ‘Monochrome’ Change: improve navbar responsiveness Fix: widen the control range of navbar menu icon v0.6.2 - 2021/04/15 Fix: google search console authentication failed if ga code not in <head> Fix: clipboard-polyfill/text dependency resolved issue v0.6.1 - 2021/02/17 Fix: codepen shortcode id Change baseurl to example.com in exampleSite v0.6.0 - 2021/02/16 Support MathJax Add shortcodes: jsfiddle, codepen, color-block, icon-group, terms-cloud Add option: list_posts in list layout Fix: not register touchend event v0.5.0 - 2021/02/15 Support multilingual mode Add i18n Support Open Graph, Twitter Card Adjust svg-wrapper shortcode Add some social icons: facebook, github, twitter, rss, mail Support site search (powered by flexsearch) Disable unused features in tailwindcss (speedup building time) Reorganize parameters Remove default image to figure transformation, using built-in shortcode instead v0.4.0 - 2021/02/12 Support dark mode Add bookcase_cover_src_dark for bookcase layout Add balloon_img_src_dark for balloon layout Add shortcode: svg-wrapper Prism.js integration (v1.23.0) Code copy feature for code block v0.3.0 - 2021/02/10 Support nested navbar Implement default homepage layout Adjust the purpose of bookcase layout Remove catalog layout v0.2.0 - 2021/02/09 A better responsive navbar Implement default taxonomy and term layout Adjust article styles v0.1.0 - 2021/02/08 Initial release.

CodePen Embeded codepen to page. Usage {{< codepen id="" >}} Paramters: id: codepen id Examples 1 {{< codepen id="Vwmpjba" >}}

Color Block A block with color Usage {{< color-block style="" >}} {{< /color-block >}} Paramters: style: block style success info warning error Examples 1 2 3 {{< color-block >}} hello world {{< /color-block >}} hello world 1 2 3 {{< color-block style="success" >}} hello world {{< /color-block >}} hello world 1 2 3 {{< color-block style="info" >}} hello world {{< /color-block >}} hello world 1 2 3 {{< color-block style="warning" >}} hello world {{< /color-block >}} hello world 1 2 3 {{< color-block style="error" >}} hello world {{< /color-block >}} hello world

These documents show some customizable values that are used in this theme. By adjusting these values, you can easily change the behavior of your website without touching the source code. You can refer the example config in github.

Icon Group Wrap icons with grid layout Usage {{< icon-group >}} {{< /icon-group >}} Examples 1 2 3 4 5 {{< icon-group >}} {{< svg-wrapper name="github" />}} {{< svg-wrapper name="rss" />}} {{< svg-wrapper name="twitter" />}} {{< /icon-group >}}

JSFiddle Embeded jsfiddle to page. Usage {{< jsfiddle id="" >}} Paramters: id: jsfiddle id Examples 1 {{< jsfiddle id="5byh90rz" >}}

This is a regular page in bookcase.

This document shows a brief guide to setup hugo-theme-monochrome in your hugo project. Quick Start Install Hugo You need “extended” version of hugo to support SASS. Checkout Install Hugo for more details. Take Linux for example: 1 snap install hugo --channel=extended The minimum hugo version that hugo-theme-monochrome required is 0.80.0 Create a New Site 1 hugo new site <project name> Add a Theme 1 2 3 cd <project name> git init git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome Then add theme = "hugo-theme-monochrome" to your config.toml Setup Dependencies Prepare a composite package.json file for your project. 1 hugo mod npm pack Install dependencies 1 npm install Remember to ignore node_modules folder Setup PostCSS hugo-theme-monochrome is powered by tailwindcss. For better quality of CSS purging in production, you should add the following config to your config.toml, or the default settings generated from demo site will be applied. See CSS purging with PostCSS for more details. 1 2 [build] writeStats = true Customize the Theme See Configuration. Start the Hugo server 1 hugo server Minify CSS and JS resources, PurgeCSS will also be applied. The minifier of JavaScript here is powered by ESBuild. 1 hugo server --environment production Build static pages Generate files to /public folder, --minify option can minify other resouces (e.g. HTML/XML/JSON…). See Configure Minify to adjust the behavior of hugo minifier (powered by minify). 1 hugo --environment production --minify Deployment Push /public folder to your server. This site is built by using Github Action and Github Pages. The CI script is available here. Run exampleSite 1 2 3 4 5 git clone https://github.com/kaiiiz/hugo-theme-monochrome cd hugo-theme-monochrome/exampleSite hugo --themesDir=../.. mod npm pack npm install hugo --themesDir=../.. server

See Shortcodes for more details.

SVG Wrapper Wrap SVG with dark/bright color styles, it’s useful for dark mode compatibility. Usage {{< svg-wrapper name="" link="" >}} svg inline {{< /svg-wrapper >}} Paramters: link: Render link for svg name: Use theme built-in svg Available Built-in SVG Icon from Material Design name svg arrow-down arrow-right earth moon sun Icons from Simple Icons name svg github facebook rss twitter mail Gmail icon Examples 1 2 3 {{< svg-wrapper link="https://github.com/kaiiiz/hugo-theme-monochrome" >}} <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg> {{< /svg-wrapper >}} 1 {{< svg-wrapper name="github" link="https://github.com/kaiiiz/hugo-theme-monochrome" >}}

Terms Cloud Render terms cloud Usage {{< terms-cloud terms="" />}} Paramters: terms: terms name Examples 1 {{< terms-cloud terms="tags" >}} dotnetcore (1) golang (1) httpcontext (1) index (1) middleware (1) redis (1) task-scheduler (1)