update demos

.gitignore

@@ -0,0 +1 @@
+public/

Features.md

@@ -0,0 +1,28 @@
+1. Automatic Dark/Light mode based on system settings
+2. Dark/Light mode switcher
+3. Automatic Diagram dark/light switch
+4. Automatic Giscus dark/light switch
+
+| Feature (light/dark mode)                                              | Anubis2 |
+| ---------------------------------------------------------------------- | ------- |
+| Line Number (table) and Hilight Lines                                  | ✅      |
+| Line Number (true) and Hilight Lines                                   | ✅      |
+| Line Number (inline) and Hilight Lines                                 | ✅      |
+| Line Number (false) and Hilight Lines                                  | ✅      |
+| Line Number (table) and Hilight Lines and Anchor Line                  | ✅      |
+| Line Number (table) and Hilight Inline                                 | ✅      |
+| Highlight Shortcode, Line Number (table) and Hilight Lines and Anchor  | ✅      |
+| Highlight Shortcode, Line Number (inline) and Hilight Lines and Anchor | ✅      |
+| Highlight Shortcode, Line Number (false) and Hilight Lines and Anchor  | ✅      |
+| Mermaid Support (No Config, Lazy Load, Dark/Light Auto Switch)         | ✅      |
+| MathJax Support (No Config, Lazy Load, Dark/Light Auto Switch)         | ✅      |
+| Giscus Support (Dark/Light Auto Switch)                                | ✅      |
+| Umami Support (Dark/Light Auto Switch)                                 | ✅      |
+| Multi-Author Support                                                   | ✅      |
+| Multi-Language Support                                                 | ✅      |
+| Support for \<code\> tag                                               | ✅      |
+| Support for \<pre\> tag                                                | ✅      |
+| Support for \<kbd\> tag                                                | ✅      |
+| Support for \<mark\> tag                                               | ✅      |
+| Passed CodePreKbdMark test                                             | ✅      |
+| Passed All 8 Summary Rendering Tests                                   | ✅ 8/8  |

README.md

@@ -10,7 +10,7 @@ Anubis2 is another simple minimalist theme for [Hugo blog engine](https://gohugo
 ## Highlighted Features
 
 - Multilingual
-- Dark / Light mode
+- Dark / Light mode (Automatic switch based on system settings)
 - Table of Contents
 - Comment Support (Giscus, Disque, ISSO, Utterances, GraphComment)
 - Analytics (Google, Umami)

exampleSiteMultilingual/content/posts/advanced-code.md

@@ -1,62 +0,0 @@
-+++
-author = "Hugo Authors"
-title = "Advanced Usage of code, pre, kbd"
-date = "2024-04-09"
-description = "Guide to advanced usage of Anubis2"
-tags = [
-    "emoji",
-]
-+++
-
-`code` <pre>pre</pre>
-
-<kbd>CRTL</kbd> + <kbd>K</kbd> + <kbd>B</kbd> + <kbd>D</kbd>
-<!--more-->
-
-## \<code\>
-
-<code>Direct Code</code>
-
-`A verrrrrryyyyy llloooonnnggg coooodeeee`
-
-`code` `is` `here`
-
-```plain
-multiline
-code
-here
-```
-
-```typescript
-interface User {
-  id: number
-  firstName: string
-  lastName: string
-  role: string
-}
-
-function updateUser(id: number, update: Partial<User>) {
-  const user = getUser(id)
-  const newUser = { ...user, ...update }
-  saveUser(id, newUser)
-}
-```
-
-## \<pre\>
-
-<pre>pre text</pre>
-<pre>pre text</pre>
-<pre>pre text</pre>
-
-## \<kbd\>
-
-
-<p>Press <kbd>CTRL</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
-
-<p>Press <kbd>CMD</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
-
-Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
-
-<pre>Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.</pre>

exampleSiteMultilingual/content/posts/demo-code-pre-kbd-mark.md

@@ -0,0 +1,120 @@
++++
+author = "Hugo Authors"
+title = "Demo - Support for code, pre, kbd, mark"
+date = "2024-04-22"
+description = "Guide to advanced usage of Anubis2"
+tags = [
+    "emoji",
+]
++++
+
+## Individual support for code, pre, kbd, mark
+
+`code` <pre>pre</pre>
+
+<kbd>CRTL</kbd> + <kbd>K</kbd> + <kbd>B</kbd> + <kbd>D</kbd>
+
+<!--more-->
+
+Feel free to switch between the light and dark themes to see the rendering differences.
+
+### Support for \<code\> tag
+
+<code>Direct Code</code>
+
+`A verrrrrryyyyy llloooonnnggg coooodeeee`
+
+`code` `is` `here`
+
+```plain
+multiline
+code
+here
+```
+
+```typescript
+// ```typescript
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+```
+
+```typescript {linenos=inline}
+// ```typescript {linenos=inline}
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+```typescript {linenos=true}
+// ```typescript {linenos=true}
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+### Support for \<pre\> tag
+
+<pre>pre text</pre>
+<pre>pre text</pre>
+<pre>pre text</pre>
+
+### Support for \<kbd\> tag
+
+
+<p>Press <kbd>CTRL</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
+
+<p>Press <kbd>CMD</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
+
+Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
+
+
+### Support for \<mark\> tag
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+### Support for \<kbd\> in \<pre\>
+
+<pre>This is a <kbd>KBD</kbd> inside a pre. </pre>
+
+### Support for \<kbd\> in \<code\> (❌ Should not be used)
+
+<code>This is a <kbd>KBD</kbd> inside a code. </code>
+
+### Support for \<code\> in \<pre\> (❌ Should not be used)
+
+<pre>This is a <code>CODE</code> inside a pre. </pre>
+
+### Support for \<code\> in \<kbd\> (❌ Should not be used)
+
+<kbd>This is a <code>CODE</code> inside a kbd. </kbd>
+
+### Support for \<pre\> in \<kbd\> (❌ Should not be used)
+
+<kbd>This is a <pre>PRE</pre> inside a kbd. </kbd>
+
+### Support for \<pre\> in \<code\> (❌ Should not be used)
+
+<code>This is a <pre>PRE</pre> inside a code. </code>
+
+### Support for \<mark\> in \<kbd\>
+
+<kbd>This is a <mark>MARK</mark> inside a kbd. </kbd>
+
+### Support for \<mark\> in \<code\>
+
+<code>This is a <mark>MARK</mark> inside a code. </code>
+
+### Support for \<mark\> in \<pre\>
+
+<pre>This is a <mark>MARK</mark> inside a pre. </pre>

exampleSiteMultilingual/content/posts/demo-diagram.md

@@ -1,13 +1,15 @@
 +++
 author = "Hugo Authors"
-title = "Advanced Usage of Diagrams"
+title = "Demo - Support for Diagrams"
-date = "2024-04-09"
+date = "2024-04-19"
 description = "Guide to advanced usage of Anubis2"
 tags = [
     "emoji",
 ]
 +++
 
+Feel free to switch between the light and dark themes to see how the diagram adapts its colors accordingly.
+
 ## Mermaid Diagrams
 
 ```mermaid

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

@@ -1,6 +1,6 @@
 +++
 author = "Junyi"
-title = "Demo - Codes"
+title = "Demo - Multiline Codes"
 date = "2024-04-23"
 description = "Codes, Codefences, and Syntax Highlighting."
 tags = [
@@ -10,6 +10,8 @@ tags = [
 ]
 +++
 
+<!-- without <!--more-->, the preview should be a good rendering of the content, instead of a "source code" version. -->
+
 ## Line Numbers, Highlight Lines
 
 ### Line Number (table) and Highlight Lines

exampleSiteMultilingual/content/posts/demo-summary-rendering-1.md

@@ -0,0 +1,23 @@
+---
+title: "Demo - Summary Rendering Test 1 (😃 Easy)"
+date: 2024-04-25T1:54:12+08:00
+draft: false
+tags: [Hugo]
+---
+
+This is a summary rendering test.
+
+## Test Heading
+
+<!--more-->
+`<!--more-->` is applied here.
+
+## Test Heading Again
+
+The content below should be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-2.md

@@ -0,0 +1,20 @@
+---
+title: "Demo - Summary Rendering Test 2 (😏 Easy)"
+date: 2024-04-25T1:54:13+08:00
+draft: false
+tags: [Hugo]
+---
+
+<!--more-->
+
+<mark>You should not see this line in preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-3.md

@@ -0,0 +1,26 @@
+---
+title: "Demo - Summary Rendering Test 3 (🤔 Easy)"
+date: 2024-04-25T1:54:14+08:00
+draft: false
+tags: [Hugo]
+---
+
+```c
+int main() {
+    return 0; // Only see this in the summary view
+}
+```
+
+<!--more-->
+
+<mark>You MUST NOT see me in the preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-4.md

@@ -0,0 +1,24 @@
+---
+title: "Demo - Summary Rendering Test 4 (😅 Easy?)"
+date: 2024-04-25T1:54:15+08:00
+draft: false
+tags: [Hugo]
+---
+
+## Hi, can you see "aaa" in the summary?
+
+aaa
+
+<!--<!--more-->
+
+<mark>You MUST NOT see me in the preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-5.md

@@ -0,0 +1,26 @@
+---
+title: "Demo - Summary Rendering Test 5 (😥 Medium)"
+date: 2024-04-25T1:54:16+08:00
+draft: false
+tags: [Hugo]
+---
+
+```c
+int main() {
+    return 0; // <!--more--> Only see this in the summary view
+}
+```
+
+
+
+<mark>You MUST NOT see me in the preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-6.md

@@ -0,0 +1,28 @@
+---
+title: "Demo - Summary Rendering Test 6 (🤯 Hard)"
+date: 2024-04-25T1:54:17+08:00
+draft: false
+tags: [Hugo]
+---
+
+```c {linenos=inline}
+int main() {
+    // Is your theme able to handle this?
+    // Are the content below rendered correctly?
+    return 0; // Only see this in the summary view
+}
+```
+
+<!--<!--more-->
+
+<mark>You MUST NOT see me in the preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-7.md

@@ -0,0 +1,28 @@
+---
+title: "Demo - Summary Rendering Test 7 (😱 Bad Dream)"
+date: 2024-04-25T1:54:18+08:00
+draft: false
+tags: [Hugo]
+---
+
+```c {linenos=table}
+int main() {
+    // Is your theme able to handle this?
+    // Are the content below rendered correctly?
+    return 0; // Only see this in the summary view
+}
+```
+
+<!--<!--more-->
+
+<mark>You MUST NOT see me in the preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```

exampleSiteMultilingual/content/posts/demo-summary-rendering-8.md

@@ -0,0 +1,28 @@
+---
+title: "Demo - Summary Rendering Test 8 (💀 Nightmare)"
+date: 2024-04-25T1:54:19+08:00
+draft: false
+tags: [Hugo]
+---
+<!--<!--more-->
+```c {linenos=table}
+int main() {
+    // Is your theme able to handle this? <!--<!--more-->
+    // Are the content below rendered correctly? <!--more-->
+    return 0; // Only see this in the summary view
+}
+```
+
+<!--<!--more-->
+
+<mark>You MUST NOT see me in the preview</mark>
+
+## Test Heading
+
+The content below should also be hidden in the summary view.
+
+<!--more-->
+
+```html
+Will <!--<!--more--> cause a rendering issue?
+```