update demos

This commit is contained in:
Junyi Hou 2024-04-25 13:41:05 +08:00
parent d9cb67008f
commit 64ffd77659
15 changed files with 360 additions and 66 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
public/

28
Features.md Normal file
View File

@ -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 |

View File

@ -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)

View File

@ -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>

View File

@ -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>

View File

@ -1,13 +1,15 @@
+++
author = "Hugo Authors"
title = "Advanced Usage of Diagrams"
date = "2024-04-09"
title = "Demo - Support for Diagrams"
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

View File

@ -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

View File

@ -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?
```

View File

@ -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?
```

View File

@ -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?
```

View File

@ -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?
```

View File

@ -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?
```

View File

@ -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?
```

View File

@ -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?
```

View File

@ -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?
```