├── layouts ├── 404.html ├── partials │ ├── custom │ │ ├── content-after.html │ │ ├── content-before.html │ │ └── head.html │ ├── comments.html │ ├── date.html │ ├── font.html │ ├── tag.html │ ├── toc.html │ ├── header.html │ ├── nav-header.html │ ├── footer.html │ └── head.html ├── index.html ├── shortcodes │ ├── mermaid.html │ ├── details.html │ ├── quote.html │ └── remote-github.html └── _default │ ├── baseof.html │ ├── single.html │ └── list.html ├── exampleSite ├── .hugo_build.lock ├── content │ ├── posts │ │ ├── _index.md │ │ ├── hugoisforlovers.md │ │ ├── shortcodes.md │ │ ├── migrate-from-jekyll.md │ │ ├── welcome-to-hugo-toigian.md │ │ ├── diagrams.md │ │ └── creating-a-new-theme.md │ ├── about.md │ └── _index.md ├── .gitignore └── config.toml ├── assets ├── css │ ├── custom.css │ ├── postcss.config.js │ ├── toigian.css │ ├── dark.css │ ├── light.css │ ├── tailwind.config.js │ ├── chroma │ │ ├── rose-pine.css │ │ └── rose-pine-dawn.css │ ├── rose-pine.min.css │ └── site.css └── js │ └── main.js ├── images ├── tn.png ├── dark-home.png ├── dark-list.png ├── dark-post.png ├── light-home.png ├── light-list.png ├── light-post.png └── screenshot.png ├── static └── favicon_io │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── site.webmanifest │ └── about.txt ├── archetypes └── default.md ├── .prettierrc ├── theme.toml ├── package.json ├── .github └── workflows │ └── gh-page.yml ├── README.md ├── LICENSE ├── .gitignore └── yarn.lock /layouts/404.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /exampleSite/.hugo_build.lock: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/custom/content-after.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/custom/content-before.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/custom.css: -------------------------------------------------------------------------------- 1 | /* You can add custom styles here. */ 2 | -------------------------------------------------------------------------------- /exampleSite/content/posts/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Posts" 3 | --- 4 | -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | {{ .Content }} 3 | {{ end }} 4 | -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/tn.png -------------------------------------------------------------------------------- /layouts/partials/custom/head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /exampleSite/content/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "About" 3 | --- 4 | 5 | Something about yourself. 6 | -------------------------------------------------------------------------------- /images/dark-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/dark-home.png -------------------------------------------------------------------------------- /images/dark-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/dark-list.png -------------------------------------------------------------------------------- /images/dark-post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/dark-post.png -------------------------------------------------------------------------------- /images/light-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/light-home.png -------------------------------------------------------------------------------- /images/light-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/light-list.png -------------------------------------------------------------------------------- /images/light-post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/light-post.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /static/favicon_io/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/static/favicon_io/favicon.ico -------------------------------------------------------------------------------- /static/favicon_io/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/static/favicon_io/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon_io/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/static/favicon_io/favicon-32x32.png -------------------------------------------------------------------------------- /static/favicon_io/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/static/favicon_io/apple-touch-icon.png -------------------------------------------------------------------------------- /static/favicon_io/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/static/favicon_io/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/favicon_io/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ntk148v/hugo-toigian/HEAD/static/favicon_io/android-chrome-512x512.png -------------------------------------------------------------------------------- /layouts/partials/comments.html: -------------------------------------------------------------------------------- 1 | 2 | {{ template "_internal/disqus.html" . }} 3 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '{{ replace .TranslationBaseName "-" " " | title }}' 3 | date: '{{ .Date }}' 4 | tags: [] 5 | comment: true 6 | --- 7 | -------------------------------------------------------------------------------- /layouts/shortcodes/mermaid.html: -------------------------------------------------------------------------------- 1 | {{ $_hugo_config := `{ "version": 1 }` }} 2 |
10 | {{ .Inner | .Page.RenderString }} 11 |12 | -------------------------------------------------------------------------------- /assets/css/toigian.css: -------------------------------------------------------------------------------- 1 | /* Tailwind base - put variables under: tailwind.config.js */ 2 | @import "tailwindcss/base"; 3 | 4 | /* Tailwind component classes registered by plugins*/ 5 | @import "tailwindcss/components"; 6 | 7 | /* Tailwind's utility classes - generated based on config file */ 8 | @import "tailwindcss/utilities"; 9 | 10 | /* Site Specific */ 11 | @import "assets/css/site"; 12 | /* Custom defined styles */ 13 | @import "assets/css/custom"; 14 | -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{- partial "head.html" . -}} 4 | 5 | 6 | 7 | {{- partial "header.html" . -}} 8 |
140 | {{ .Get "caption" }} 141 | {{ with .Get "attrlink"}} {{ end }} 142 | {{ .Get "attr" }} 143 | {{ if .Get "attrlink"}} {{ end }} 144 |
{{ end }} 145 |
3 | A minimal Hugo theme with Tailwind CSS5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
|
|
42 | |
|
|
43 | |
|
|
44 |
45 | ## 1. Features
46 |
47 | - Minimalist (`tối giản`) design. Highly inspired by [mellow.dev](https://mellow.dev/).
48 | - Use the classy minimalist [Rosé Pine](https://github.com/rose-pine/palette) color palette.
49 | - Customizable.
50 | - Support light/dark mode.
51 | - Nested counters for heading.
52 | - Side floating Table of content.
53 | - Useful shortcodes.
54 | - Comments support.
55 | - Syntax highlighting: use server-side solution (Chroma, hugo built-in), I've added [Rosé Pine styles to Chroma](https://github.com/alecthomas/chroma/pull/689), so everything is the same vibe.
56 |
57 | ## 2. Prerequisites
58 |
59 | - `git`, `npm` installed.
60 | - A minimum Hugo "extended" version of v0.93.0 and above.
61 |
62 | ```shell
63 | snap install hugo --channel=extended
64 | ```
65 |
66 | - Hugo Pipe’s PostCSS requires the `postcss-cli` JavaScript package to be installed in the environment (`npm install -g postcss postcss-cli`) along with any PostCSS plugin(s) used (e.g., `npm install -g autoprefixer`). If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., `npm install postcss-cli` without the -g flag.
67 |
68 | ## 3. Installation
69 |
70 | - Go to root directory of your Hugo website, or create a new site with:
71 |
72 | ```shell
73 | hugo new site hugo-example-site
74 | cd hugo-example-site
75 | git init
76 | ```
77 |
78 | - Add the theme.
79 |
80 | ```shell
81 | git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian
82 | ```
83 |
84 | - Install Nodejs modules.
85 |
86 | ```shell
87 | cd themes/hugo-toigian
88 | npm install
89 | ```
90 |
91 | - Finally, update theme in your configuration `config.toml` file in the root directory of your Hugo website.
92 |
93 | ```toml
94 | theme = "hugo-toigian"
95 | ```
96 |
97 | - Run server to see a live preview of it.
98 |
99 | ```shell
100 | hugo server -DF --disableFastRender
101 | ```
102 |
103 | - Build static pages
104 |
105 | ```shell
106 | hugo --environment production --minify
107 | ```
108 |
109 | ## 3. Configuration
110 |
111 | ### 3.1. Site configuration
112 |
113 | There are a few configuration options that you can add to [config.toml](./exampleSite/config.toml) file.
114 |
115 | ```toml
116 | baseURL = 'http://example.org/'
117 | languageCode = 'en-us'
118 | title = 'Toigian'
119 | theme = "hugo-toigian"
120 | themesDir = "../.."
121 | # (Optional) If you provide a Disqus shortname, comments will be enabled on
122 | # all pages.
123 | # disqusShortname = "my-site"
124 |
125 | [params]
126 | # (Optional, default true): Controls table of contents visibility on right side of pages.
127 | # Start and end levels can be controlled with markup.tableOfContents setting.
128 | toc = true
129 | # (Optional, default true) Enables comments template on pages
130 | # By default partials/docs/comments.html includes Disqus template
131 | # See https://gohugo.io/content-management/comments/#configure-disqus
132 | # Can be overwritten by same param in page frontmatter
133 | comments = true
134 |
135 | [params.author]
136 | name = "Kien Nguyen-Tuan"
137 | email = "kiennt2609@gmail.com"
138 |
139 | [markup]
140 | defaultMarkdownHandler = "goldmark"
141 | # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
142 | # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
143 | [markup.goldmark]
144 | [markup.goldmark.renderer]
145 | unsafe = true # Enable user to embed HTML snippets in Markdown content.
146 | [markup.highlight]
147 | codeFences = true
148 | guessSyntax = true
149 | lineNos = false
150 | noClasses = false
151 | tabWidth = 4
152 | [markup.tableOfContents]
153 | startLevel = 2
154 | endLevel = 4
155 | ordered = true
156 |
157 | # The left side navbar at the top
158 | [menu]
159 | [[menu.nav]]
160 | name = "About"
161 | url = "/about"
162 | weight = 2
163 |
164 | [[menu.nav]]
165 | name = "Posts"
166 | url = "/posts"
167 | weight = 3
168 | ```
169 |
170 | ### 3.2. Page configuration
171 |
172 | You can specify additional params in the front matter of individual pages.
173 |
174 | ```md
175 | # Your posts tags
176 |
177 | tags = []
178 |
179 | # If you have enabled comments for the site, you can disable it for specific pages
180 |
181 | comment = true
182 | ```
183 |
184 | ## 4. Shortcodes
185 |
186 | Check out [shortcodes](https://ntk148v.github.io/hugo-toigian/posts/shortcodes).
187 |
188 | ## 5. Customization
189 |
190 | - Partials: There are layout partials available for you to easily override components of the theme in `layouts/partials/`.
191 |
192 | | Empty partial | Placement | Usage |
193 | | --------------------------------------------- | --------------------------- | ------------------- |
194 | | `layouts/partials/custom/head.html` | Before closing `` tag | Add custom css/js |
195 | | `layouts/partials/custom/content-before.html` | Before page content | |
196 | | `layouts/partials/custom/content-after.html` | After page content | |
197 | | `layouts/partials/font.html` | | Import custom fonts |
198 |
199 | - Extra customization:
200 |
201 | | File | Description |
202 | | ----------------------- | -------------------------------- |
203 | | `assets/css/custom.css` | Customize or override css styles |
204 |
205 | - For example, you don't like the chosen font (Inconsolata), and you want to use your own choice, follow these steps:
206 |
207 | - Create `layouts/partials/font.html` to import your fonts:
208 |
209 | ```html
210 |
211 |
212 |
213 |
217 | ```
218 |
219 | - Create `assets/css/custom.css`:
220 |
221 | ```scss
222 | // change the default mono font to Overpass
223 | :root {
224 | --font-mono: "Overpass";
225 | --font-serif: "Inter";
226 | }
227 | ```
228 |
229 | ## 6. Contributing
230 |
231 | As you already known, I'm not front-end developer. Therefore, if you find anything wrong or want to make improvement, don't hesitate to open an issue/pull request.
232 |
233 | Primary goals are:
234 |
235 | - Keep it simple.
236 | - Avoid using JS if it can be solved by CSS.
237 |
238 | Feel free to open issues if you find missing configuration or customization options.
239 |
240 | ## 7. Credits
241 |
242 | - [hugo-book](https://github.com/alex-shpak/hugo-book)
243 | - [dirkolbrich/hugo-tailwindcss-starter-theme](https://github.com/dirkolbrich/hugo-tailwindcss-starter-theme)
244 |
--------------------------------------------------------------------------------
/exampleSite/content/posts/diagrams.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Hugo Diagrams"
3 | date: 2022-10-25T17:12:11+07:00
4 | comment: true
5 | tags: ["hugo", "tech", "diagrams"]
6 | ---
7 |
8 | Hugo version >= 0.93.0
9 |
10 | ## GoAT Diagrams (Ascii)
11 |
12 | Hugo! supports [GoAT](https://github.com/bep/goat) natively. This means that this code block:
13 |
14 | ````
15 | ```goat
16 | . . . .--- 1 .-- 1 / 1
17 | / \ | | .---+ .-+ +
18 | / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
19 | + + | | | | ---+ ---+ +
20 | / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
21 | / \ / \ | | | | | | | | '---+ '-+ +
22 | 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
23 |
24 | ```
25 | ````
26 |
27 | Will be rendered as:
28 |
29 | ```goat
30 |
31 | . . . .--- 1 .-- 1 / 1
32 | / \ | | .---+ .-+ +
33 | / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
34 | + + | | | | ---+ ---+ +
35 | / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
36 | / \ / \ | | | | | | | | '---+ '-+ +
37 | 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
38 | ```
39 |
40 | ## GoAT Diagrams Examples
41 |
42 | ### Graphics
43 |
44 | ```goat
45 | .
46 | 0 3 P * Eye / ^ /
47 | *-------* +y \ +) \ / Reflection
48 | 1 /| 2 /| ^ \ \ \ v
49 | *-------* | | v0 \ v3 --------*--------
50 | | |4 | |7 | *----\-----*
51 | | *-----|-* +-----> +x / v X \ .-.<-------- o
52 | |/ |/ / / o \ | / | Refraction / \
53 | *-------* v / \ +-' / \
54 | 5 6 +z v1 *------------------* v2 | o-----o
55 | v
56 |
57 | ```
58 |
59 | ### Complex
60 |
61 | ```goat
62 | +-------------------+ ^ .---.
63 | | A Box |__.--.__ __.--> | .-. | |
64 | | | '--' v | * |<--- | |
65 | +-------------------+ '-' | |
66 | Round *---(-. |
67 | .-----------------. .-------. .----------. .-------. | | |
68 | | Mixed Rounded | | | / Diagonals \ | | | | | |
69 | | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.
70 | '--+------------+-' .--. | '-------+--------' | | | | / Search /
71 | | | | | '---. | '-------' | '-+------'
72 | |<---------->| | | | v Interior | ^
73 | ' <---' '----' .-----------. ---. .--- v |
74 | .------------------. Diag line | .-------. +---. \ / . |
75 | | if (a > b) +---. .--->| | | | | Curved line \ / / \ |
76 | | obj->fcn() | \ / | '-------' |<--' + / \ |
77 | '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'
78 | .---+-----. | ^ |\ | | /| .--+ | | \ /
79 | | | | Join \|/ | | Curved | \| |/ | | \ | \ /
80 | | | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.
81 | <--+---+-----' | /|\ | | 3 |
82 | v not:line 'quotes' .-' '---'
83 | .-. .---+--------. / A || B *bold* | ^
84 | | | | Not a dot | <---+---<-- A dash--is not a line v |
85 | '-' '---------+--' / Nor/is this. ---
86 |
87 | ```
88 |
89 | ### Process
90 |
91 | ```goat
92 | .
93 | .---------. / \
94 | | START | / \ .-+-------+-. ___________
95 | '----+----' .-------. A / \ B | |COMPLEX| | / \ .-.
96 | | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X |
97 | v '-------' \ / | |PROCESS| | \___________/ '-'
98 | .---------. \ / '-+---+---+-'
99 | / INPUT / \ /
100 | '-----+---' '
101 | | ^
102 | v |
103 | .-----------. .-----+-----. .-.
104 | | PROCESS +---------------->| PROCESS |<------+ X |
105 | '-----------' '-----------' '-'
106 | ```
107 |
108 | ### File tree
109 |
110 | Created from hugo says hello!
493 | 494 | 495 | :wq 496 | 497 | $ 498 | ``` 499 | 500 | Build the web site and then verify the results. 501 | 502 | ``` 503 | $ hugo --verbose 504 | INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml 505 | INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ 506 | INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ 507 | WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] 508 | 0 draft content 509 | 0 future content 510 | 0 pages created 511 | 0 tags created 512 | 0 categories created 513 | in 2 ms 514 | 515 | $ find public -type f -name '*.html' | xargs ls -l 516 | -rw-r--r-- 1 quoha staff 78 Sep 29 21:26 public/index.html 517 | 518 | $ cat public/index.html 519 | 520 | 521 | 522 |hugo says hello!
523 | 524 | ``` 525 | 526 | #### Live Reload 527 | 528 | Note: If you're running the server with the `--watch` option, you'll see different content in the file: 529 | 530 | ``` 531 | $ cat public/index.html 532 | 533 | 534 | 535 |hugo says hello!
536 | 540 | 541 | ``` 542 | 543 | When you use `--watch`, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it. 544 | 545 | ### Build a "Dynamic" Home Page 546 | 547 | "Dynamic home page?" Hugo's a static web site generator, so this seems an odd thing to say. I mean let's have the home page automatically reflect the content in the site every time Hugo builds it. We'll use iteration in the template to do that. 548 | 549 | #### Create New Posts 550 | 551 | Now that we have the home page generating static content, let's add some content to the site. We'll display these posts as a list on the home page and on their own page, too. 552 | 553 | Hugo has a command to generate a skeleton post, just like it does for sites and themes. 554 | 555 | ``` 556 | $ hugo --verbose new post/first.md 557 | INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml 558 | INFO: 2014/09/29 attempting to create post/first.md of post 559 | INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md 560 | ERROR: 2014/09/29 Unable to Castmy first post
808 | 809 | 810 | 811 | 812 | $ cat public/post/second/index.html 813 | 814 | 815 | 816 |my second post
821 | 822 | 823 | 824 | $ 825 | ``` 826 | 827 | Notice that the posts now have content. You can go to localhost:1313/post/first to verify. 828 | 829 | ### Linking to Content 830 | 831 | The posts are on the home page. Let's add a link from there to the post. Since this is the home page, we'll update its template. 832 | 833 | ``` 834 | $ vi themes/zafta/layouts/index.html 835 | 836 | 837 | 838 | {{ range first 10 .Data.Pages }} 839 |