diff --git a/src/components/Twikoo.astro b/src/components/Twikoo.astro new file mode 100644 index 0000000..bab2bbf --- /dev/null +++ b/src/components/Twikoo.astro @@ -0,0 +1,25 @@ +--- +// src/components/Twikoo.astro +import { twikooConfig } from "../config"; + +const { enable, envId, lang = "zh_CN" } = twikooConfig; +const shouldRender = enable && envId; +--- + +{shouldRender && ( +
+ + + + +)} \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index f04bd15..e4c2a09 100644 --- a/src/config.ts +++ b/src/config.ts @@ -4,6 +4,7 @@ import type { NavBarConfig, ProfileConfig, SiteConfig, + TwikooConfig, } from "./types/config"; import { LinkPreset } from "./types/config"; @@ -93,3 +94,8 @@ export const expressiveCodeConfig: ExpressiveCodeConfig = { // Please select a dark theme, as this blog theme currently only supports dark background color theme: "github-dark", }; + +export const twikooConfig: TwikooConfig = { + enable: true, + envId: "https://twikoo.atdunbg.xyz", +}; diff --git a/src/content/posts/draft.md b/src/content/posts/draft.md deleted file mode 100644 index 77aba5a..0000000 --- a/src/content/posts/draft.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Draft Example -published: 2022-07-01 -tags: [Markdown, Blogging, Demo] -category: Examples -draft: true ---- - -# This Article is a Draft - -This article is currently in a draft state and is not published. Therefore, it will not be visible to the general audience. The content is still a work in progress and may require further editing and review. - -When the article is ready for publication, you can update the "draft" field to "false" in the Frontmatter: - -```markdown ---- -title: Draft Example -published: 2024-01-11T04:40:26.381Z -tags: [Markdown, Blogging, Demo] -category: Examples -draft: false ---- diff --git a/src/content/posts/expressive-code.md b/src/content/posts/expressive-code.md deleted file mode 100644 index 91d47e4..0000000 --- a/src/content/posts/expressive-code.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -title: Expressive Code Example -published: 2024-04-10 -description: How code blocks look in Markdown using Expressive Code. -tags: [Markdown, Blogging, Demo] -category: Examples -draft: false ---- - -Here, we'll explore how code blocks look using [Expressive Code](https://expressive-code.com/). The provided examples are based on the official documentation, which you can refer to for further details. - -## Expressive Code - -### Syntax Highlighting - -[Syntax Highlighting](https://expressive-code.com/key-features/syntax-highlighting/) - -#### Regular syntax highlighting - -```js -console.log('This code is syntax highlighted!') -``` - -#### Rendering ANSI escape sequences - -```ansi -ANSI colors: -- Regular: Red Green Yellow Blue Magenta Cyan -- Bold: Red Green Yellow Blue Magenta Cyan -- Dimmed: Red Green Yellow Blue Magenta Cyan - -256 colors (showing colors 160-177): -160 161 162 163 164 165 -166 167 168 169 170 171 -172 173 174 175 176 177 - -Full RGB colors: -ForestGreen - RGB(34, 139, 34) - -Text formatting: Bold Dimmed Italic Underline -``` - -### Editor & Terminal Frames - -[Editor & Terminal Frames](https://expressive-code.com/key-features/frames/) - -#### Code editor frames - -```js title="my-test-file.js" -console.log('Title attribute example') -``` - ---- - -```html - -
File name comment example
-``` - -#### Terminal frames - -```bash -echo "This terminal frame has no title" -``` - ---- - -```powershell title="PowerShell terminal example" -Write-Output "This one has a title!" -``` - -#### Overriding frame types - -```sh frame="none" -echo "Look ma, no frame!" -``` - ---- - -```ps frame="code" title="PowerShell Profile.ps1" -# Without overriding, this would be a terminal frame -function Watch-Tail { Get-Content -Tail 20 -Wait $args } -New-Alias tail Watch-Tail -``` - -### Text & Line Markers - -[Text & Line Markers](https://expressive-code.com/key-features/text-markers/) - -#### Marking full lines & line ranges - -```js {1, 4, 7-8} -// Line 1 - targeted by line number -// Line 2 -// Line 3 -// Line 4 - targeted by line number -// Line 5 -// Line 6 -// Line 7 - targeted by range "7-8" -// Line 8 - targeted by range "7-8" -``` - -#### Selecting line marker types (mark, ins, del) - -```js title="line-markers.js" del={2} ins={3-4} {6} -function demo() { - console.log('this line is marked as deleted') - // This line and the next one are marked as inserted - console.log('this is the second inserted line') - - return 'this line uses the neutral default marker type' -} -``` - -#### Adding labels to line markers - -```jsx {"1":5} del={"2":7-8} ins={"3":10-12} -// labeled-line-markers.jsx - -``` - -#### Adding long labels on their own lines - -```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15} -// labeled-line-markers.jsx - -``` - -#### Using diff-like syntax - -```diff -+this line will be marked as inserted --this line will be marked as deleted -this is a regular line -``` - ---- - -```diff ---- a/README.md -+++ b/README.md -@@ -1,3 +1,4 @@ -+this is an actual diff file --all contents will remain unmodified - no whitespace will be removed either -``` - -#### Combining syntax highlighting with diff-like syntax - -```diff lang="js" - function thisIsJavaScript() { - // This entire block gets highlighted as JavaScript, - // and we can still add diff markers to it! -- console.log('Old code to be removed') -+ console.log('New and shiny code!') - } -``` - -#### Marking individual text inside lines - -```js "given text" -function demo() { - // Mark any given text inside lines - return 'Multiple matches of the given text are supported'; -} -``` - -#### Regular expressions - -```ts /ye[sp]/ -console.log('The words yes and yep will be marked.') -``` - -#### Escaping forward slashes - -```sh /\/ho.*\// -echo "Test" > /home/test.txt -``` - -#### Selecting inline marker types (mark, ins, del) - -```js "return true;" ins="inserted" del="deleted" -function demo() { - console.log('These are inserted and deleted marker types'); - // The return statement uses the default marker type - return true; -} -``` - -### Word Wrap - -[Word Wrap](https://expressive-code.com/key-features/word-wrap/) - -#### Configuring word wrap per block - -```js wrap -// Example with wrap -function getLongString() { - return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' -} -``` - ---- - -```js wrap=false -// Example with wrap=false -function getLongString() { - return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' -} -``` - -#### Configuring indentation of wrapped lines - -```js wrap preserveIndent -// Example with preserveIndent (enabled by default) -function getLongString() { - return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' -} -``` - ---- - -```js wrap preserveIndent=false -// Example with preserveIndent=false -function getLongString() { - return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' -} -``` - -## Collapsible Sections - -[Collapsible Sections](https://expressive-code.com/plugins/collapsible-sections/) - -```js collapse={1-5, 12-14, 21-24} -// All this boilerplate setup code will be collapsed -import { someBoilerplateEngine } from '@example/some-boilerplate' -import { evenMoreBoilerplate } from '@example/even-more-boilerplate' - -const engine = someBoilerplateEngine(evenMoreBoilerplate()) - -// This part of the code will be visible by default -engine.doSomething(1, 2, 3, calcFn) - -function calcFn() { - // You can have multiple collapsed sections - const a = 1 - const b = 2 - const c = a + b - - // This will remain visible - console.log(`Calculation result: ${a} + ${b} = ${c}`) - return c -} - -// All this code until the end of the block will be collapsed again -engine.closeConnection() -engine.freeMemory() -engine.shutdown({ reason: 'End of example boilerplate code' }) -``` - -## Line Numbers - -[Line Numbers](https://expressive-code.com/plugins/line-numbers/) - -### Displaying line numbers per block - -```js showLineNumbers -// This code block will show line numbers -console.log('Greetings from line 2!') -console.log('I am on line 3') -``` - ---- - -```js showLineNumbers=false -// Line numbers are disabled for this block -console.log('Hello?') -console.log('Sorry, do you know what line I am on?') -``` - -### Changing the starting line number - -```js showLineNumbers startLineNumber=5 -console.log('Greetings from line 5!') -console.log('I am on line 6') -``` diff --git a/src/content/posts/markdown-extended.md b/src/content/posts/markdown-extended.md deleted file mode 100644 index c28173b..0000000 --- a/src/content/posts/markdown-extended.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Markdown Extended Features -published: 2024-05-01 -updated: 2024-11-29 -description: 'Read more about Markdown features in Fuwari' -image: '' -tags: [Demo, Example, Markdown, Fuwari] -category: 'Examples' -draft: false ---- - -## GitHub Repository Cards -You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API. - -::github{repo="Fabrizz/MMM-OnSpotify"} - -Create a GitHub repository card with the code `::github{repo="/"}`. - -```markdown -::github{repo="saicaca/fuwari"} -``` - -## Admonitions - -Following types of admonitions are supported: `note` `tip` `important` `warning` `caution` - -:::note -Highlights information that users should take into account, even when skimming. -::: - -:::tip -Optional information to help a user be more successful. -::: - -:::important -Crucial information necessary for users to succeed. -::: - -:::warning -Critical content demanding immediate user attention due to potential risks. -::: - -:::caution -Negative potential consequences of an action. -::: - -### Basic Syntax - -```markdown -:::note -Highlights information that users should take into account, even when skimming. -::: - -:::tip -Optional information to help a user be more successful. -::: -``` - -### Custom Titles - -The title of the admonition can be customized. - -:::note[MY CUSTOM TITLE] -This is a note with a custom title. -::: - -```markdown -:::note[MY CUSTOM TITLE] -This is a note with a custom title. -::: -``` - -### GitHub Syntax - -> [!TIP] -> [The GitHub syntax](https://github.com/orgs/community/discussions/16925) is also supported. - -``` -> [!NOTE] -> The GitHub syntax is also supported. - -> [!TIP] -> The GitHub syntax is also supported. -``` - -### Spoiler - -You can add spoilers to your text. The text also supports **Markdown** syntax. - -The content :spoiler[is hidden **ayyy**]! - -```markdown -The content :spoiler[is hidden **ayyy**]! - -``` \ No newline at end of file diff --git a/src/content/posts/markdown.md b/src/content/posts/markdown.md deleted file mode 100644 index 9695bbf..0000000 --- a/src/content/posts/markdown.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Markdown Example -published: 2023-10-01 -description: A simple example of a Markdown blog post. -tags: [Markdown, Blogging, Demo] -category: Examples -draft: false ---- - -# An h1 header - -Paragraphs are separated by a blank line. - -2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists -look like: - -- this one -- that one -- the other one - -Note that --- not considering the asterisk --- the actual text -content starts at 4-columns in. - -> Block quotes are -> written like so. -> -> They can span multiple paragraphs, -> if you like. - -Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all -in chapters 12--14"). Three dots ... will be converted to an ellipsis. -Unicode is supported. ☺ - -## An h2 header - -Here's a numbered list: - -1. first item -2. second item -3. third item - -Note again how the actual text starts at 4 columns in (4 characters -from the left side). Here's a code sample: - - # Let me re-iterate ... - for i in 1 .. 10 { do-something(i) } - -As you probably guessed, indented 4 spaces. By the way, instead of -indenting the block, you can use delimited blocks, if you like: - -``` -define foobar() { - print "Welcome to flavor country!"; -} -``` - -(which makes copying & pasting easier). You can optionally mark the -delimited block for Pandoc to syntax highlight it: - -```python -import time -# Quick, count to ten! -for i in range(10): - # (but not *too* quick) - time.sleep(0.5) - print i -``` - -### An h3 header - -Now a nested list: - -1. First, get these ingredients: - - - carrots - - celery - - lentils - -2. Boil some water. - -3. Dump everything in the pot and follow - this algorithm: - - find wooden spoon - uncover pot - stir - cover pot - balance wooden spoon precariously on pot handle - wait 10 minutes - goto first step (or shut off burner when done) - - Do not bump wooden spoon or it will fall. - -Notice again how text always lines up on 4-space indents (including -that last line which continues item 3 above). - -Here's a link to [a website](http://foo.bar), to a [local -doc](local-doc.html), and to a [section heading in the current -doc](#an-h2-header). Here's a footnote [^1]. - -[^1]: Footnote text goes here. - -Tables can look like this: - -size material color - ---- - -9 leather brown -10 hemp canvas natural -11 glass transparent - -Table: Shoes, their sizes, and what they're made of - -(The above is the caption for the table.) Pandoc also supports -multi-line tables: - ---- - -keyword text - ---- - -red Sunsets, apples, and -other red or reddish -things. - -green Leaves, grass, frogs -and other things it's -not easy being. - ---- - -A horizontal rule follows. - ---- - -Here's a definition list: - -apples -: Good for making applesauce. -oranges -: Citrus! -tomatoes -: There's no "e" in tomatoe. - -Again, text is indented 4 spaces. (Put a blank line between each -term/definition pair to spread things out more.) - -Here's a "line block": - -| Line one -| Line too -| Line tree - -and images can be specified like so: - -[//]: # (![example image](./demo-banner.png "An exemplary image")) - -Inline math equations go in like so: $\omega = d\phi / dt$. Display -math should get its own line and be put in in double-dollarsigns: - -$$I = \int \rho R^{2} dV$$ - -$$ -\begin{equation*} -\pi -=3.1415926535 - \;8979323846\;2643383279\;5028841971\;6939937510\;5820974944 - \;5923078164\;0628620899\;8628034825\;3421170679\;\ldots -\end{equation*} -$$ - -And note that you can backslash-escape any punctuation characters -which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc. diff --git a/src/content/posts/video.md b/src/content/posts/video.md deleted file mode 100644 index 4d53a95..0000000 --- a/src/content/posts/video.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Include Video in the Posts -published: 2023-08-01 -description: This post demonstrates how to include embedded video in a blog post. -tags: [Example, Video] -category: Examples -draft: false ---- - -Just copy the embed code from YouTube or other platforms, and paste it in the markdown file. - -```yaml ---- -title: Include Video in the Post -published: 2023-10-19 -// ... ---- - - -``` - -## YouTube - - - -## Bilibili - - diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index 7fdfcb8..099621f 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -2,6 +2,7 @@ import path from "node:path"; import License from "@components/misc/License.astro"; import Markdown from "@components/misc/Markdown.astro"; +import Twikoo from "@components/Twikoo.astro"; import I18nKey from "@i18n/i18nKey"; import { i18n } from "@i18n/translation"; import MainGridLayout from "@layouts/MainGridLayout.astro"; @@ -111,6 +112,14 @@ const jsonLd = { +
+
+
+ +
+
+ +
diff --git a/src/styles/twikoo.css b/src/styles/twikoo.css new file mode 100644 index 0000000..87f0866 --- /dev/null +++ b/src/styles/twikoo.css @@ -0,0 +1,160 @@ +:root { + --tk-text: black; + --code-block-text: #d1d5db; +} + +html.dark { + --tk-text: #d1d5db; +} + +.tk-comments { + @apply text-[var(--tk-text)]; +} + +.tk-submit { + .tk-avatar { + @apply hidden; + } +} + +/* Text Area */ +.tk-row { + .tk-col { + @apply flex-col-reverse; + .tk-input { + textarea { + @apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)]; + } + } + } +} + +/* Meta */ +.tk-meta-input { + @apply relative mt-3; + div { + @apply min-h-10; + .el-input-group__prepend { + @apply !bg-inherit rounded-l-lg; + min-height: inherit; + } + input { + @apply px-4 rounded-r-lg focus:!border-[var(--primary)]; + min-height: inherit; + } + } +} + +/* Button */ +.tk-row.actions { + @apply w-full !ml-0 !mt-0; + .__markdown { + @apply !hidden; + } + .tk-preview, + .tk-send, + .tk-cancel { + @apply border-none rounded-lg px-3 py-0 h-8 + !bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)] + !text-[var(--btn-content)] disabled:!text-[#ffffffa1]; + } +} + +/* Comment title */ +.tk-comments-title { + .__comments svg { + @apply fill-[var(--primary)]; + } +} + +.tk-comment { + @apply border-[1px] border-[rgba(144,147,153,0.31)] p-4 rounded-2xl hover:shadow-md transition-all; + .tk-action-icon svg { + @apply fill-[var(--primary)]; + } + +} + + +.tk-action { + .tk-action-count { + @apply text-[var(--btn-content)]; + } +} + +.tk-meta { + .tk-tag { + @apply border-none rounded-lg text-[var(--btn-content)]; + } + + .tk-tag-green { + @apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)]; + } +} + +/* Content & Preview */ +.tk-content, +.tk-preview-container { + /* by @microsic + Make the picture type emoticons display without wrapping + */ + img { + @apply inline !align-bottom; + } + + a { + @apply link link-underline text-[var(--primary)] font-medium; + } + + .tk-ruser { + @apply no-underline; + } + + :not(pre) > code { + @apply bg-[var(--inline-code-bg)] rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold; + } + + li { + @apply before:content-['•'] before:text-[var(--primary)]; + } +} + +/* Replies */ +.tk-replies { + .tk-comment { + @apply bg-[var(--page-bg)]; + .tk-content { + > span:first-of-type { + @apply text-xs; + } + } + } +} + +.twikoo .code-block { + pre { + @apply !rounded-xl; + } + + /* Code block fall back */ + pre:not([class]) { + @apply bg-[#2d2d2d] overflow-auto p-2 text-[var(--code-block-text)]; + } + + .copy-btn-icon { + width: inherit !important; + height: inherit !important; + } +} + +.tk-expand-wrap .tk-expand, +.tk-collapse-wrap .tk-expand { + @apply hover:rounded-lg mt-1 hover:bg-[var(--btn-plain-bg-hover)]; +} + +/* by @SirTamago +Make the emoji component display correctly when there are too many emoji packs +*/ +.card-base { + overflow: visible; +} diff --git a/src/types/config.ts b/src/types/config.ts index c2c6a61..afe5b01 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -36,6 +36,8 @@ export type SiteConfig = { }; favicon: Favicon[]; + + startDate?: Date; }; export type Favicon = { @@ -100,3 +102,9 @@ export type BlogPostData = { export type ExpressiveCodeConfig = { theme: string; }; + +export type TwikooConfig = { + enable?: boolean; + envId?: string; + lang?: string; +};