Enable support for tips, warnings and dangers blocks.

Resolved sighingnow#36. Signed-off-by: Tao He <sighingnow@gmail.com>
richardorsey · Jun 30, 2022 · 16aeee4 · 16aeee4
1 parent 616ca58
commit 16aeee4
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -108,6 +108,23 @@ The fonts can be customized by modifying the `.book.font-family-0` and `.book.fo
 }
 ```
 
+## Tips, Warnings and Dangers blocks
+
+The jekyll-gitbook theme supports customized kramdown attributes (`{: .block-tip }`, `{: .block-warning }`,
+`{: .block-danger }`) like that displayed in [the discord.js website][11]. The marker can be used like
+
+```markdown
+> ##### TIP
+>
+> This guide is last tested with @napi-rs/canvas^0.1.20, so make sure you have
+> this or a similar version after installation.
+{: .block-tip }
+```
+
+Rendered page can be previewed from
+
+[https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html)
+
 ## Cover image inside pages
 
 The jekyll-gitbook theme supports adding a cover image to a specific page by adding
@@ -126,7 +143,7 @@ a `cover` field to the page metadata:
 
 The effect can be previewed from
 
-[A page with a cover image](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html)
+[https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html)
 
 ## License
 
@@ -144,3 +161,4 @@ Copyright 2019 Tao He.
 [8]: https://www.cnzz.com/
 [9]: https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview
 [10]: https://github.com/sighingnow/jekyll-gitbook/blob/master/gitbook/custom.css
+[11]: https://discordjs.guide/popular-topics/canvas.html#setting-up-napi-rs-canvas
diff --git a/_posts/2022-06-30-tips_warnings_dangers.md b/_posts/2022-06-30-tips_warnings_dangers.md
@@ -0,0 +1,67 @@
+---
+title: Tips, Warnings, and Dangers
+author: Tao He
+date: 2022-06-30
+category: Jekyll
+layout: post
+---
+
+The jekyll-theme supports tips, warnings, and dangers blocks and the style is referred
+from [the discord.js website][1].
+
+You could have the following [markdown attributes (supported by kramdown)][2]:
+
+### Tips
+
+Using a `{: .block-tip}` attribute:
+
+```markdown
+> ##### TIP
+>
+> This guide is last tested with @napi-rs/canvas^0.1.20, so make sure you have
+> this or a similar version after installation.
+{: .block-tip }
+```
+
+> ##### TIP
+>
+> This guide is last tested with @napi-rs/canvas^0.1.20, so make sure you have
+> this or a similar version after installation.
+{: .block-tip }
+
+### Warnings
+
+Using a `{: .block-warning}` attribute:
+
+```markdown
+> ##### WARNING
+>
+> Be sure that you're familiar with things like async/await and object destructuring
+> before continuing, as we'll be making use of features like these.
+{: .block-warning }
+```
+
+> ##### WARNING
+>
+> Be sure that you're familiar with things like async/await and object destructuring
+> before continuing, as we'll be making use of features like these.
+{: .block-warning }
+
+### Dangers
+
+Using a `{: .block-danger}` attribute:
+
+```markdown
+> ##### DANGER
+>
+> You cannot delete an ephemeral message.
+{: .block-danger }
+```
+
+> ##### DANGER
+>
+> You cannot delete an ephemeral message.
+{: .block-danger }
+
+[1]: https://discordjs.guide/popular-topics/canvas.html#setting-up-napi-rs-canvas
+[2]: https://kramdown.gettalong.org/quickref.html#block-attributes
diff --git a/gitbook/custom.css b/gitbook/custom.css
@@ -156,3 +156,114 @@
 .table-wrapper {
     overflow-x: scroll;
 }
+
+/* Tips, warnings, and dangers */
+
+.markdown-section blockquote.block-tip {
+    border-color: var(--c-tip);
+    background-color: var(--c-tip-bg);
+    color: var(--c-tip-text);
+    font-family: var(--font-family);
+}
+
+.markdown-section blockquote.block-tip h1 {
+    color: var(--c-tip-title);
+}
+
+.markdown-section blockquote.block-tip h2 {
+    color: var(--c-tip-title);
+}
+
+.markdown-section blockquote.block-tip h3 {
+    color: var(--c-tip-title);
+}
+
+.markdown-section blockquote.block-tip h4 {
+    color: var(--c-tip-title);
+}
+
+.markdown-section blockquote.block-tip h5 {
+    color: var(--c-tip-title);
+}
+
+.markdown-section blockquote.block-tip h6 {
+    color: var(--c-tip-title);
+}
+
+.markdown-section blockquote.block-warning {
+    border-color: var(--c-warning);
+    background-color: var(--c-warning-bg);
+    color: var(--c-warning-text);
+    font-family: var(--font-family);
+}
+
+.markdown-section blockquote.block-warning h1 {
+    color: var(--c-warning-title);
+}
+
+.markdown-section blockquote.block-warning h2 {
+    color: var(--c-warning-title);
+}
+
+.markdown-section blockquote.block-warning h3 {
+    color: var(--c-warning-title);
+}
+
+.markdown-section blockquote.block-warning h4 {
+    color: var(--c-warning-title);
+}
+
+.markdown-section blockquote.block-warning h5 {
+    color: var(--c-warning-title);
+}
+
+.markdown-section blockquote.block-warning h6 {
+    color: var(--c-warning-title);
+}
+
+.markdown-section blockquote.block-danger {
+    border-color: var(--c-danger);
+    background-color: var(--c-danger-bg);
+    color: var(--c-danger-text);
+    font-family: var(--font-family);
+}
+
+.markdown-section blockquote.block-danger h1 {
+    color: var(--c-danger-title);
+}
+
+.markdown-section blockquote.block-danger h2 {
+    color: var(--c-danger-title);
+}
+
+.markdown-section blockquote.block-danger h3 {
+    color: var(--c-danger-title);
+}
+
+.markdown-section blockquote.block-danger h4 {
+    color: var(--c-danger-title);
+}
+
+.markdown-section blockquote.block-danger h5 {
+    color: var(--c-danger-title);
+}
+
+.markdown-section blockquote.block-danger h6 {
+    color: var(--c-danger-title);
+}
+
+:root {
+    --c-tip: #42b983;
+    --c-tip-bg: #e2f5ec;
+    --c-tip-text: #215d42;
+    --c-tip-title: #359469;
+    --c-warning: #e7c000;
+    --c-warning-bg: rgba(255, 229, 100, .25);
+    --c-warning-text: #6b5900;
+    --c-warning-title: #b29400;
+    --c-danger: #c00;
+    --c-danger-bg: #ffe0e0;
+    --c-danger-text: #600;
+    --c-danger-title: #c00;
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+}
diff --git a/index.md b/index.md
@@ -110,6 +110,23 @@ The fonts can be customized by modifying the `.book.font-family-0` and `.book.fo
 }
 ```
 
+## Tips, Warnings and Dangers blocks
+
+The jekyll-gitbook theme supports customized kramdown attributes (`{: .block-tip }`, `{: .block-warning }`,
+`{: .block-danger }`) like that displayed in [the discord.js website][11]. The marker can be used like
+
+```markdown
+> ##### TIP
+>
+> This guide is last tested with @napi-rs/canvas^0.1.20, so make sure you have
+> this or a similar version after installation.
+{: .block-tip }
+```
+
+Rendered page can be previewed from
+
+[https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html)
+
 ## Cover image inside pages
 
 The jekyll-gitbook theme supports adding a cover image to a specific page by adding
@@ -128,7 +145,7 @@ a `cover` field to the page metadata:
 
 The effect can be previewed from
 
-[A page with a cover image](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html)
+[https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html)
 
 ## License
 
@@ -146,3 +163,4 @@ Copyright 2019 Tao He.
 [8]: https://www.cnzz.com/
 [9]: https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview
 [10]: https://github.com/sighingnow/jekyll-gitbook/blob/master/gitbook/custom.css
+[11]: https://discordjs.guide/popular-topics/canvas.html#setting-up-napi-rs-canvas