feat: update README.md

ntk148v · Jul 28, 2023 · e702cc2 · e702cc2
1 parent 6150a80
commit e702cc2
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -199,7 +199,7 @@ Check out [shortcodes](https://ntk148v.github.io/hugo-toigian/posts/shortcodes).
 | ----------------------- | -------------------------------- |
 | `assets/css/custom.css` | Customize or override css styles |
 
-- For example, you don't like the chosen fonts (Roboto Mono and Barlow fonts), and you want to use your own choice, follow these steps:
+- For example, you don't like the chosen font (Inconsolata), and you want to use your own choice, follow these steps:
 
   - Create `layouts/partials/font.html` to import your fonts:
 
@@ -230,7 +230,7 @@ As you already known, I'm not front-end developer. Therefore, if you find anythi
 Primary goals are:
 
 - Keep it simple.
-- Avoid using JS if it can be solved by CSS>
+- Avoid using JS if it can be solved by CSS.
 
 Feel free to open issues if you find missing configuration or customization options.
 

diff --git a/exampleSite/content/posts/welcome-to-hugo-toigian.md b/exampleSite/content/posts/welcome-to-hugo-toigian.md
@@ -15,8 +15,8 @@ tags: ["hugo", "tech", "toigian"]
 
 Take a look at [demo site](https://ntk148v.github.io/hugo-toigian).
 
-| Dark                                                                                                                        | Light                                                                                                                        |
-| --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| Dark                                                                                                                   | Light                                                                                                                   |
+| ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
 | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/dark-home.png" class="figure" >}} | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/light-home.png" class="figure" >}} |
 | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/dark-list.png" class="figure" >}} | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/light-list.png" class="figure" >}} |
 | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/dark-post.png" class="figure" >}} | {{< figure src="https://raw.githubusercontent.com/ntk148v/hugo-toigian/master/images/light-post.png" class="figure" >}} |
@@ -40,6 +40,8 @@ Take a look at [demo site](https://ntk148v.github.io/hugo-toigian).
 snap install hugo --channel=extended
 ```
 
+- 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.
+
 ## 3. Installation
 
 - Go to root directory of your Hugo website, or create a new site with:
@@ -66,7 +68,7 @@ npm install
 - Finally, update theme in your configuration `config.toml` file in the root directory of your Hugo website.
 
 ```toml
-theme: "hugo-toigian"
+theme = "hugo-toigian"
 ```
 
 - Run server to see a live preview of it.
@@ -88,58 +90,58 @@ hugo --environment production --minify
 There are a few configuration options that you can add to [config.toml](./exampleSite/config.toml) file.
 
 ```toml
-baseURL: 'http://example.org/'
-languageCode: 'en-us'
-title: 'Toigian'
-theme: "hugo-toigian"
-themesDir: "../.."
+baseURL = 'http://example.org/'
+languageCode = 'en-us'
+title = 'Toigian'
+theme = "hugo-toigian"
+themesDir = "../.."
 # (Optional) If you provide a Disqus shortname, comments will be enabled on
 # all pages.
-# disqusShortname: "my-site"
+# disqusShortname = "my-site"
 
 [params]
 # (Optional, default true): Controls table of contents visibility on right side of pages.
 # Start and end levels can be controlled with markup.tableOfContents setting.
-toc: true
+toc = true
 # (Optional, default true) Enables comments template on pages
 # By default partials/docs/comments.html includes Disqus template
 # See https://gohugo.io/content-management/comments/#configure-disqus
 # Can be overwritten by same param in page frontmatter
-comments: true
+comments = true
 
 [params.author]
-name: "Kien Nguyen-Tuan"
-email: "[email protected]"
+name = "Kien Nguyen-Tuan"
+email = "[email protected]"
 
 [markup]
-  defaultMarkdownHandler: "goldmark"
+  defaultMarkdownHandler = "goldmark"
   # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
   # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
   [markup.goldmark]
     [markup.goldmark.renderer]
-      unsafe: true  # Enable user to embed HTML snippets in Markdown content.
+      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
   [markup.highlight]
-    codeFences: true
-    guessSyntax: true
-    lineNos: false
-    noClasses: false
-    tabWidth: 4
+    codeFences = true
+    guessSyntax = true
+    lineNos = false
+    noClasses = false
+    tabWidth = 4
   [markup.tableOfContents]
-    startLevel: 2
-    endLevel: 4
-    ordered: true
+    startLevel = 2
+    endLevel = 4
+    ordered = true
 
 # The left side navbar at the top
 [menu]
   [[menu.nav]]
-  name: "About"
-  url: "/about"
-  weight: 2
+  name = "About"
+  url = "/about"
+  weight = 2
 
   [[menu.nav]]
-  name: "Posts"
-  url: "/posts"
-  weight: 3
+  name = "Posts"
+  url = "/posts"
+  weight = 3
 ```
 
 ### 3.2. Page configuration
@@ -148,9 +150,12 @@ You can specify additional params in the front matter of individual pages.
 
 ```md
 # Your posts tags
-tags: []
+
+tags = []
+
 # If you have enabled comments for the site, you can disable it for specific pages
-comment: true
+
+comment = true
 ```
 
 ## 4. Shortcodes
@@ -161,26 +166,51 @@ Check out [shortcodes](https://ntk148v.github.io/hugo-toigian/posts/shortcodes).
 
 - Partials: There are layout partials available for you to easily override components of the theme in `layouts/partials/`.
 
-| Empty partial                                 | Placement                   | Usage             |
-| --------------------------------------------- | --------------------------- | ----------------- |
-| `layouts/partials/custom/head.html`           | Before closing `<head>` tag | Add custom css/js |
-| `layouts/partials/custom/content-before.html` | Before page content         |                   |
-| `layouts/partials/custom/content-after.html`  | After page content          |                   |
+| Empty partial                                 | Placement                   | Usage               |
+| --------------------------------------------- | --------------------------- | ------------------- |
+| `layouts/partials/custom/head.html`           | Before closing `<head>` tag | Add custom css/js   |
+| `layouts/partials/custom/content-before.html` | Before page content         |                     |
+| `layouts/partials/custom/content-after.html`  | After page content          |                     |
+| `layouts/partials/font.html`                  |                             | Import custom fonts |
 
 - Extra customization:
 
 | File                    | Description                      |
 | ----------------------- | -------------------------------- |
 | `assets/css/custom.css` | Customize or override css styles |
 
+- For example, you don't like the chosen font (Inconsolata), and you want to use your own choice, follow these steps:
+
+  - Create `layouts/partials/font.html` to import your fonts:
+
+  ```html
+  <!-- load Inter and Overpass fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap"
+    rel="stylesheet"
+  />
+  ```
+
+  - Create `assets/css/custom.css`:
+
+  ```scss
+  // change the default mono font to Overpass
+  :root {
+    --font-mono: "Overpass";
+    --font-serif: "Inter";
+  }
+  ```
+
 ## 6. Contributing
 
 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.
 
 Primary goals are:
 
 - Keep it simple.
-- Avoid using JS if it can be solved by CSS>
+- Avoid using JS if it can be solved by CSS.
 
 Feel free to open issues if you find missing configuration or customization options.