Merge pull request #83 from Junyi-99/Junyi-99-patch-1

Update README.md

.gitignore

@@ -1 +1,2 @@
 public/
+.DS_Store

README.md

@@ -2,11 +2,23 @@
 
 Anubis2 is another simple minimalist theme for [Hugo blog engine](https://gohugo.io/), check our [Demo](https://www.junyi.dev/).
 
-> 📝 Please note that anubis2 is under active maintenance, so please REMEMBER to keep your theme up to date!
->
-
 ![image](https://github.com/Junyi-99/hugo-theme-anubis2/assets/14367694/8d9a591b-e168-4328-a770-eb2e8f04f657)
 
+|                                                        Light                                                         |                                                     Dark (Code)                                                      |                                                     Dark (Math)                                                      |
+| :------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: |
+| <img width="1166" alt="demo1" src="https://github.com/user-attachments/assets/dbdd43bc-3efe-4fdf-ab8f-f20af2cf9229"> | <img width="1112" alt="demo3" src="https://github.com/user-attachments/assets/7356ef18-00c7-44c9-91d9-0dfb9b500910"> | <img width="1166" alt="demo2" src="https://github.com/user-attachments/assets/46e19440-b054-4df9-968b-7920d74f3d80"> |
+
+
+> [!IMPORTANT]  
+> **Update Your Blog Configuration**  
+> Please ensure your blog configuration file (`hugo.toml`, `hugo.yaml`, or `hugo.json`) is updated to the latest version provided with the template.
+> 
+> **Hugo frequently changes its configuration file structure**, which may lead to compatibility issues if your configuration is outdated.
+>
+> Check the [Anubis2 template](https://github.com/Junyi-99/hugo-theme-anubis2/tree/main/exampleSiteMultilingual) for the latest config file.  
+
+
+
 ## Highlighted Features
 
 - Multilingual
@@ -44,16 +56,17 @@ Don't be panic, configure Anubis2 is really **simple**.
 baseURL = "https://hugo-theme-anubis2.netlify.app/"
 languageCode = "en-us"
 theme = "anubis2"
-title = "Your Site's Name"
+title = "Anubis2 Demo Site"
 
-[author]
+[params.author]
-name = "Your Name"
+name = "Junyi"
 
 [markup.goldmark.renderer]
-unsafe = true # Enable unsafe mode to have a better experience
+unsafe = true # true | false; Enable unsafe mode to have a better experience
 
 [markup.highlight]
-style = 'base16-snazzy' # Highlight.js style
+style = 'base16-snazzy' # Chroma style, find more at here: https://swapoff.org/chroma/playground/
+
 ```
 
 You are encouraged keeping other fields as defaults and fine-tune them when you have time! (see [Full Configuration Examples](https://github.com/Junyi-99/hugo-theme-anubis2/wiki/Configuration-Example))

assets/css/main.css

@@ -154,14 +154,20 @@ thead {
 
 table {
     max-width: 100%;
+    display: block;
+    overflow: scroll;
     border-spacing: 0;
+    border-collapse: collapse;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    font-size: 14px;
 }
 
-
 th,
 td {
-    padding: 0.5em 1em;
+    padding: 0.25em 0.5em;
     border: 1px double var(--table-border-color);
+
 }
 
 /* Code */
@@ -175,7 +181,8 @@ kbd {
     color: var(--pre-color);
     background-color: var(--pre-bg-color);
     font-family: 'Menlo', 'Courier New', 'Consolas', monospace;
-    font-size: 14.4px; /* 18px * 0.6 */
+    font-size: 14.4px;
+    /* 18px * 0.6 */
     line-height: 154%;
     border-radius: 6px;
     border: 1px solid var(--pre-border-color);
@@ -184,7 +191,8 @@ kbd {
 
 /* <code> tag */
 code {
-    font-size: 14.4px; /* 18px * 0.6 */
+    font-size: 14.4px;
+    /* 18px * 0.6 */
     padding: 0.1em 0.3em;
 }
 
@@ -203,7 +211,8 @@ p kbd,
 pre kbd,
 p kbd kbd,
 pre kbd kbd {
-    font-size: 14.4px; /* 18px * 0.6 */
+    font-size: 14.4px;
+    /* 18px * 0.6 */
     background-color: var(--kbd-bg-color);
     border: 1px solid var(--pre-border-color);
     border-width: 1px 2px 2px 1px;
@@ -249,11 +258,16 @@ div.highlight {
     margin-bottom: 14px;
 }
 
+div.highlight div {
+    overflow: scroll;
+}
+
 div.highlight pre {
     border: none;
     display: grid;
     margin: 0px;
-    overflow: auto; /* Have to add this line, otherwise the "pre" and "code" will have different width */
+    overflow: auto;
+    /* Have to add this line, otherwise the "pre" and "code" will have different width */
     /* padding-left: 10px; */
     /* padding-right: 10px; */
     /* padding-top: 10px; */

data/social.yaml

@@ -16,6 +16,7 @@ social_icons:
   vk: https://vk.com/%s
   youtube: https://www.youtube.com/c/%s
   4chan:
+  bluesky: https://bsky.app/profile/%s
   # docs:
   gitlab:
   leetcode: https://leetcode.com/%s

exampleSiteMultilingual/content/posts/demo-multiline-codes.md

@@ -10,7 +10,31 @@ tags = [
 ]
 +++
 
-There are 9 tests.
+```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199}
+int main() {
+    int a = 1;
+    if (a == 999)
+        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
+        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
+    }
+    return 0;
+}
+```
+
+## Truth Table
+
+| Item                     | Line Numbers | Highlight Lines | Anchor Lines | Wide CodeBlock Scroll | Supported |
+| ------------------------ | ------------ | --------------- | ------------ | --------------------- | --------- |
+| **Full Feature Support** | ture         | true            | true         | ✅                     | ✅         |
+|                          | table        | true            | true         | ✅                     | ✅         |
+|                          | table        | true            | false        | ✅                     | ✅         |
+|                          | inline       |                 |              | ✅                     | ✅         |
+|                          | ture         | true            | false        | ✅                     | ✅         |
+|                          | ture         | false           | false        | ✅                     | ✅         |
+|                          | false        | true            | /            | ✅                     | ✅         |
+| Basic Support            | false        | false           | /            | ✅                     | ✅         |
+
+Note: Anubis2 does not support `hl_inline=true`
 
 <!--more-->
 
@@ -45,7 +69,7 @@ int main() {
 int main() {
     int a = 1;
     if (a == 999)
-                // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
+        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
         // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
     }
     return 0;
@@ -102,30 +126,34 @@ Now you can click on the line number to get a link to that line.
 int main() {
     int a = 1;
     if (a == 999)
-                // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
+        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
         // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
     }
     return 0;
 }
 ```
 
-### Line Number (table) and Highlight Inline (❌ Not supported by Anubis2)
+### Highlight Inline are not supported by Anubis2 ❌
 
-    ```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true}
+    ```c {linenos=true,hl_lines=[1,3,5], hl_inline=true}
     // codes ...
     ```
 
-```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true}
+```c {linenos=true,hl_lines=[1,3,5], hl_inline=true}
 int main() {
     int a = 1;
     if (a == 999)
-                // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
         // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
     }
     return 0;
 }
 ```
 
+
+<!-- 
+
+Those are trash codes.
+
 ### Highlight shortcode, with Line Number (table), with Highlight Lines and Anchor
 
     {{</* highlight c "linenos=table,hl_lines=1 3-4 8, anchorlinenos=true" */>}}
@@ -175,4 +203,4 @@ if (a == 999)
 }
 return 0;
 }
-{{< / highlight >}}
+{{< / highlight >}} -->

exampleSiteMultilingual/content/posts/emoji-support.md

@@ -9,7 +9,7 @@ tags = [
 +++
 
 Emoji can be enabled in a Hugo project in a number of ways.
-<!--more-->
+
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSiteMultilingual/content/posts/emoji-support.zh.md

@@ -10,8 +10,6 @@ tags = [
 
 在 Hugo 博客里，你可以用多种方式使用 Emoji：
 
-<!--more-->
-
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSiteMultilingual/content/posts/markdown-syntax.md

@@ -20,6 +20,7 @@ favorite = true
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
 
+
 <!--more-->
 
 ## Headings

exampleSiteMultilingual/content/posts/math-typesetting.md

@@ -2,38 +2,15 @@
 author: Hugo Authors
 title: Math Typesetting
 date: 2019-03-08
-description: A brief guide to setup KaTeX
+description: A brief guide to setup MathJax
 math: true
 ---
 
 Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
-<!--more-->
 
-In this example we will be using [KaTeX](https://katex.org/)
+- To enable MathJax on a page basis include the parameter `math: true` in content files.
 
-- Create a partial under `/layouts/partials/math.html`
+## Examples
-- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
-- Include the partial in your templates like so:
-
-```
-{{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
-{{ end }}
-```
-- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
-- To enable KaTex on a per page basis include the parameter `math: true` in content files.
-
-**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
-{{< math.inline >}}
-{{ if or .Page.Params.math .Site.Params.math }}
-<!-- KaTeX -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
-{{ end }}
-{{</ math.inline >}}
-
-### Examples
 
 Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
 

exampleSiteMultilingual/content/posts/placeholder-text.md

@@ -31,7 +31,7 @@ tractus malis.
 4. Arcanaque montibus omnes
 5. Quidem et
 
-# Vagus elidunt
+## Vagus elidunt
 
 <svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
 

exampleSiteMultilingual/hugo.toml

@@ -55,7 +55,8 @@ social = [
     { id = "netease-music", url = "#" },
     { id = "telegram", url = "#" },
     { id = "x", url = "#" },
-    { id = "youtube", url = "#" }
+    { id = "youtube", url = "#" },
+    { id = "bluesky", url = "#" }
 ]
 
 [[menu.main]]
@@ -155,13 +156,13 @@ author = "authors"
 defaultMarkdownHandler = 'goldmark'
 
 [markup.goldmark.renderer]
-unsafe = true
+unsafe = true # Enable unsafe mode to have a better experience
 
 [markup.highlight]
 anchorLineNos      = false
 codeFences         = true # tested with true and false. Both work.
 noClasses          = true # If you run with markup.highlight.noClasses=false in your site configuration, you need a style sheet.
-style              = 'base16-snazzy'
+style              = 'catppuccin-frappe' # Find more style at here: https://swapoff.org/chroma/playground/
 tabWidth           = 4
 
 [params.UmamiAnalytics]

layouts/_default/single.html

@@ -53,29 +53,10 @@
     */}}
 
     {{ if .Store.Get "hasMermaid" }}
-        {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+        {{ partial "mermaid_support.html" . }}
+    {{ end }}
 
-        {{ $colorTheme := "light" }}
+    {{ if .Params.math }}
-        {{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
+        {{ partial "mathjax_support.html" . }}
-            {{ $colorTheme = site.Params.colortheme | lower }}
-        {{ end }}
-
-        <script type="module">
-            function detectCurrentScheme3() {
-                    const defaultTheme = "{{ $colorTheme }}";
-                    if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
-                            return localStorage.getItem("user-color-scheme");
-                    }
-                    if (defaultTheme === "dark" || defaultTheme === "light") {
-                            return defaultTheme;
-                    }
-                    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-            }
-
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-            window.mermaid = mermaid;
-            window.initMermaid()
-            document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
-        </script>
     {{ end }}
 {{ end }}

layouts/index.html

@@ -8,6 +8,7 @@
         {{ range (.Paginate $pages).Pages }}
             {{ partial "post-summary.html" . }}
         {{ end }}
+        
         {{ partial "pagination.html" . }}
     </div>
 

layouts/partials/head.html

@@ -63,7 +63,7 @@
     {{ with resources.Get .  }}
       {{ $r = . }}
     {{ else }}
-      {{ errorf "error: You defined customCSS, but %s was not found, please check your config." . }}
+      {{ errorf "error: You defined customCSS, but %s was not found in the local file system, please check your config." . }}
     {{ end }}
 
     {{ if $r}}

layouts/partials/mermaid_support.html

@@ -0,0 +1,24 @@
+{{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+
+{{ $colorTheme := "light" }}
+{{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
+{{ $colorTheme = site.Params.colortheme | lower }}
+{{ end }}
+
+<script type="module">
+    function detectCurrentScheme3() {
+        const defaultTheme = "{{ $colorTheme }}";
+        if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
+            return localStorage.getItem("user-color-scheme");
+        }
+        if (defaultTheme === "dark" || defaultTheme === "light") {
+            return defaultTheme;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    window.mermaid = mermaid;
+    window.initMermaid()
+    document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
+</script>

layouts/partials/post-summary.html

@@ -35,5 +35,13 @@
         </div>
     {{ end }}
     
+    {{ if .Store.Get "hasMermaid" }}
+        {{ partial "mermaid_support.html" . }}
+    {{ end }}
+    
+    {{ if .Params.math }}
+        {{ partial "mathjax_support.html" . }}
+    {{ end }}
+
     {{ partial "post-info.html" . }}
 </article>

layouts/partials/tabler-icons/bluesky.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-bluesky"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z" /></svg>

netlify.toml

@@ -3,7 +3,7 @@ publish = "exampleSiteMultilingual/public"
 command = "cd exampleSiteMultilingual && hugo --themesDir=../.. --baseURL $URL"
 
 [build.environment]
-HUGO_VERSION = "0.115.4"
+HUGO_VERSION = "0.136.5"
 HUGO_THEME = "repo"
 
 [context.deploy-preview]