migrate to Bulma v1 (#10)

- feat: use CSS variables to customize Bulma
- feat: modern dark mode
- feat!: slightly tweak styles (thinner column of post, home page)
- feat: allow custom link color (secondary color)
- feat: basic search function with pagefind
- fix: better UI for light primary color
- chore: refactor js loading
- chore: add an example site
- chore: update all dependencies
- doc: update README and screenshot

.gitignore

@@ -0,0 +1,9 @@
+public
+resources
+hugo_stats.json
+.hugo_build.lock
+
+exampleSite/public
+exampleSite/resources
+exampleSite/hugo_stats.json
+exampleSite/.hugo_build.lock

README.md

@@ -4,53 +4,64 @@
 
 ## Screenshot
 
-build `hugoBasicExample` without any config of this theme
+Build `exampleSite`, you will see:
 
 ![screenshot](https://github.com/wlh320/hugo-theme-hulga/blob/main/images/screenshot.png)
 
-## Demo
+You can also customize primary and secondary color, for example:
+
+![material color](https://github.com/wlh320/hugo-theme-hulga/blob/main/images/material.png)
 
-build hugo site with configs
+## Demo
 
 [Demo site](https://v4.zilch40.wang)
 
 [My Blog](https://blog.zilch40.wang)
 
 ## Features
 
-- small & fast
-- basic functions:
+- Based on Bulma v1
+- Small & fast
+- Basic functions:
   - category list&term pages
   - tag list&term pages
   - archives pages
-- table of contents (TOC) sidebar
-- `prefers-color-scheme` media support
+- Table of contents (TOC) sidebar
+- Modern CSS variables based dark mode
+  - `prefers-color-scheme` media support
+  - force light/dark theme
+- Static search with pagefind
 - PWA support
 
 ## Install
 
-1. clone to hugo site themes folder
+1. Clone to hugo site themes folder
 
     ```bash
     git submodule add https://github.com/wlh320/hugo-theme-hulga.git themes/hulga
     ```
 
-2. enable it in `config.toml`
+2. Enable it in `config.toml`
 
     ```
     theme = "hulga"
     ```
     and then config it.
 
-3. to use `postcss`, you should have hugo extended version installed, then copy `package.json` and `postcss.config.js` to the root of your site folder, then `npm install`
+3. To use `postcss`, you should have hugo extended version installed, 
+then copy `package.json` and `postcss.config.js` to the root of your site folder, then `npm install`.
 
-4. If your language is not `en` or `zh-cn`, you may need to add i18n files in i18n folder to show some i18n strings in this theme.
+4. If your language is not `en` or `zh-cn`, you may need to add i18n files in i18n folder
+to show some i18n strings in this theme.
 
-5. Ensure the to put all content in a directory titled "post" for the theme to populate the articles. Ex. content\post
+5. Ensure the to put all content in a directory titled "post" for 
+the theme to populate the articles. Ex. content\post
 
 
 ## Config
 
+You can check the config of the demo site in `exampleSite/hugo.toml`
+
 An example of avaliable params:
 
 ```toml
@@ -68,7 +79,13 @@ theme = "hulga"
   description = "xxx's blog, xxx xx xxxx"
 
   # change bulma's primary color
-  primaryColor = "#1793d0"
+  primaryColor = "#1d9bf0"
+
+  # use primary color everywhere, default true
+  primaryEverywhere = true
+
+  # change bulma's link color (secondary color in this theme)
+  # linkColor = "#f91880"
 
   # subtitle on homepage
   subtitle = "This is a subtitle"
@@ -79,7 +96,7 @@ theme = "hulga"
   # enable katex rendering on every post page, default false
   math = false
 
-  # enable postcss, mainly for css purge (129kB->20kB->4.8kB gzipped, but this makes build slower), default false
+  # enable postcss, mainly for css purge (713kB->155kB->22kB gzipped, but this makes build slower), default false
   postcss = true
 
   # enable showing content summary below post title in home page, default false
@@ -97,6 +114,9 @@ theme = "hulga"
   # enable prefers-color-scheme:dark, default false
   darkMedia = true
 
+  # enable user to toggle dark mode with a menu, default false
+  darkToggle = true
+
   # enable hero section's is-bold effect, default false
   heroBold = false
 
@@ -109,6 +129,11 @@ theme = "hulga"
   # disable jsdelivr cdn, default false
   noCDN = false
 
+# for postcss-purgecss
+# see https://purgecss.com/guides/hugo.html
+# [build]
+#   writeStats = true
+
 # to enable different hightlight themes in light/dark mode 
 [markup]
   [markup.highlight]
@@ -117,28 +142,28 @@ theme = "hulga"
 [menu]
   [[menu.main]]
     identifier = "index"
-    name = "首页"
+    name = "Home"
     url = "/"
     weight = 1
   [[menu.main]]
     identifier = "archives"
-    name = "归档"
+    name = "Archives"
     url = "/archives/"
     weight = 2
-  [[menu.main]]
-    identifier = "about"
-    name = "关于"
-    url = "/about/"
-    weight = 3
   [[menu.main]]
     identifier = "tags"
-    name = "标签"
+    name = "Tags"
     url = "/tags/"
+    weight = 3
+  [[menu.main]]
+    identifier = "about"
+    name = "About"
+    url = "/about/"
     weight = 4
   [[menu.main]]
-    identifier = "categories"
-    name = "类别"
-    url = "/categories/"
+    identifier = "search"
+    name = "Search"
+    url = "/search/"
     weight = 5
 
 [taxonomies]
@@ -147,16 +172,13 @@ tag = "tags"
 
 ```
 
-## Acknowledgement
-
-本项目的诞生离不开以下开源项目：
+## Acknowledgements
 
-- [hugo](https://gohugo.io/) 静态页面生成
-- [bulma](https://bulma.io/) CSS框架
-- [bulmaswatch](https://jenil.github.io/bulmaswatch/) 借用了其中的 dark 主题
-- [purgecss](https://purgecss.com/) [cssnano](https://cssnano.co/) 缩减CSS文件大小
-- [katex](https://katex.org/) $\LaTeX$ 公式渲染
-- [anchorjs](https://github.com/bryanbraun/anchorjs) 添加锚链
-- [tocbot](https://tscanlin.github.io/tocbot/) 生成目录
-- [vanilla-back-to-top](https://github.com/vfeskov/vanilla-back-to-top) 回到顶部 (好懒，这都不自己写)
+- [Hugo](https://gohugo.io/): Static site generator
+- [Bulma](https://bulma.io/): CSS framework
+- [Purgecss](https://purgecss.com/) [cssnano](https://cssnano.co/): Purge CSS size
+- [Katex](https://katex.org/): $\LaTeX$ rendering
+- [anchorjs](https://github.com/bryanbraun/anchorjs): Add anchor to title
+- [tocbot](https://tscanlin.github.io/tocbot/): Generate table of contents
+- [vanilla-back-to-top](https://github.com/vfeskov/vanilla-back-to-top): Add back-to-top button
 

archetypes/search.md

@@ -0,0 +1,5 @@
+---
+title: {{ i18n "search" }}
+description: "Search"
+type: search
+---