Soper
/
hugo-book
forked from gitbot/hugo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

#77, Introduce hint shortcode

soper-book
Alex Shpak 2019-10-03 18:15:24 +02:00
parent 3e3a3346e1
commit 1f8d34168f
10 changed files with 113 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
README.md
View File

@ -141,7 +141,7 @@ BookMenuBundle = '/menu'
BookSection = 'docs'
# (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
# BookMenuBundleActiveLinkColor = '\#004ed0'
# BookMenuBundleActiveLinkColor = '\#05b'
# Set source repository location.
# Used for 'Last Modified' and 'Edit this page' links.
@ -212,16 +212,28 @@ There are few hugo tempaltes inserted in `<head>`
## Shortcodes
### Expand
### Hint
Provides clickable panel that show extra hidden content.
Hint shortcode can be used as hint/alerts/notification block. There are 3 colors to choose: `info`, `warning` and `danger`.
```tpl
{{< hint [info|warning|danger] >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}
```
### Buttons
Buttons are styled links to internal of external pages
```
{{< expand >}}
## Markdown content
{{< /expand >}}
{{< button relref="/" >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}
```
### Tabs
Useful if you want to show alternative information per platform or setting.
@ -251,6 +263,16 @@ Organize text in 2 or more columns to use space efficiently.
# Right Content Lorem markdownum insigne... {{< /columns >}}
```
### Expand
Provides clickable panel that show extra hidden content.
```
{{< expand >}}
## Markdown content
{{< /expand >}}
```
### Mermaid Charts
Render various charts with [mermaidjs](https://mermaidjs.github.io/)

2
assets/_markdown.scss
View File

@ -52,7 +52,7 @@
blockquote {
margin: $padding-16 0;
padding: $padding-4 ($padding-16 - $padding-4); //to keep total left space 16dp
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
border-left: $padding-4 solid $gray-200;
border-radius: $border-radius;

11
assets/_shortcodes.scss
View File

@ -97,3 +97,14 @@ a.book-btn {
margin-bottom: $padding-8;
cursor: pointer;
}
// {{< hint >}}
.book-hint {
@each $name, $color in $hint-colors {
&.#{$name} {
border-left-color: $color;
background-color: rgba($color, 0.1);
// background-color: $gray-100;
}
};
}

9
assets/_variables.scss
View File

@ -24,7 +24,7 @@ $gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$color-link: #004ed0 !default;
$color-link: #05b !default;
$color-visited-link: #8440f1 !default;
$color-dark-link: $gray-800 !default;
@ -41,3 +41,10 @@ $toc-width: 16rem !default;
$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
$sm-breakpoint: $menu-width + $body-min-width !default;
// Panel colors
$hint-colors: (
info: #6bf,
warning: #fd6,
danger: #f66
);

2
exampleSite/config.toml
View File

@ -33,7 +33,7 @@ pygmentsCodeFences = true
BookSection = 'docs'
# (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
# BookMenuBundleActiveLinkColor = '\#004ed0'
# BookMenuBundleActiveLinkColor = '\#05b'
# Set source repository location.
# Used for 'Last Modified' and 'Edit this page' links.

2
exampleSite/config.yaml
View File

@ -33,7 +33,7 @@ params:
BookSection: docs
# (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
# BookMenuBundleActiveLinkColor: "\#004ed0"
# BookMenuBundleActiveLinkColor: "\#05b"
# Set source repository location.
# Used for 'Last Modified' and 'Edit this page' links.

86
exampleSite/content/docs/introduction/examples/shortcodes.md
View File

@ -4,38 +4,34 @@ weight: 3
# Shortcodes
## Expand shortcode
### Default
## Hints
Hint shortcode can be used as hint/alerts/notification block. There are 3 colors to choose: `info`, `warning` and `danger`.
```tpl
{{</* expand */>}}
## Markdown content
Lorem markdownum insigne...
{{</* /expand */>}}
```
{{< expand >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}
### With Custom Label
```tpl
{{</* expand "Custom Label" "..." */>}}
## Markdown content
Lorem markdownum insigne...
{{</* /expand */>}}
```
{{< expand "Custom Label" "..." >}}
## Markdown content
{{</* hint [info|warning|danger] */>}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
{{< /expand >}}
{{</* /hint */>}}
```
{{< hint info >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}
{{< hint warning >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}
{{< hint danger >}}
**Markdown content**
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{< /hint >}}
## Buttons
@ -135,6 +131,40 @@ protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
{{< /columns >}}
## Expand shortcode
Expand shortcode can help to decrease clutter on screen by hiding part of text
### Default
```tpl
{{</* expand */>}}
## Markdown content
Lorem markdownum insigne...
{{</* /expand */>}}
```
{{< expand >}}
## Markdown content
Lorem markdownum insigne...
{{< /expand >}}
### With Custom Label
```tpl
{{</* expand "Custom Label" "..." */>}}
## Markdown content
Lorem markdownum insigne...
{{</* /expand */>}}
```
{{< expand "Custom Label" "..." >}}
## Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
{{< /expand >}}
## Mermaid Chart

2
exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.content
View File

File diff suppressed because one or more lines are too long

2
exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json
View File

@ -1 +1 @@
{"Target":"book.min.89885fa0429ec73067282f26fc0c6d38cfc617a443ec4e835d47b821c52c6e92.css","MediaType":"text/css","Data":{"Integrity":"sha256-iYhfoEKexzBnKC8m/AxtOM/GF6RD7E6DXUe4IcUsbpI="}}
{"Target":"book.min.e2750c58bf0545d36d2426996f9d6108a275d000f33e7552d83ea28bdcd34ab7.css","MediaType":"text/css","Data":{"Integrity":"sha256-4nUMWL8FRdNtJCaZb51hCKJ10ADzPnVS2D6ii9zTSrc="}}

3
layouts/shortcodes/hint.html Normal file
View File

@ -0,0 +1,3 @@
<blockquote class="book-hint {{ .Get 0 }}">
{{ .Inner | markdownify }}
</blockquote>