Added support for BlockQuotes customization.
This commit is contained in:
fha
parent
8a208b47a6
commit
10c70b0133
11
README.md
11
README.md
|
|
@ -52,6 +52,17 @@ It is possible to add cv in other languages
|
|||
* Add the content is section (ex:cvfr.html).
|
||||
* Add an entry in the nav menu.
|
||||
|
||||
## BlockQuotes Render Hook
|
||||
Block quotes are now customizable in the markdown files.
|
||||
The format is the following :
|
||||
``` md
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
```
|
||||
Those are customizable in `assets/theme.css`.
|
||||
Currently, the supported Tags are : CAUTION, Important, NOTE, TIP, WARNING, NATURE, CAMPING, METEO, MONEY, DANGER, WIFI.
|
||||
New Tags can be added by customizing 'render-blockquote-alert.html'.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
:root {
|
||||
--c-divers: #7c2ef9;
|
||||
--c-success: #03862b;
|
||||
--c-danger: #d10015;
|
||||
--c-caution: #ff8d01;
|
||||
--c-warning: #ffea00;
|
||||
--c-info: #246ede;
|
||||
--c-muted: #8a9096;
|
||||
--c-text-default: #222;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.md-blockquote,
|
||||
.md-alert {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid var(--c-muted);
|
||||
}
|
||||
|
||||
.md-blockquote>p:last-child,
|
||||
.md-alert>p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.md-alert>p {
|
||||
color: var(--c-text-default);
|
||||
}
|
||||
|
||||
.md-alert-heading {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.md-alert-note {
|
||||
border-left: 4px solid var(--c-info);
|
||||
color: var(--c-info);
|
||||
}
|
||||
|
||||
.md-alert-nature,
|
||||
.md-alert-camping,
|
||||
.md-alert-tip {
|
||||
border-left-color: var(--c-success);
|
||||
color: var(--c-success);
|
||||
}
|
||||
|
||||
.md-alert-important {
|
||||
border-left-color: var(--c-danger);
|
||||
color: var(--c-danger);
|
||||
border-bottom: 1px solid var(--c-danger);
|
||||
border-top: 1px solid var(--c-danger);
|
||||
border-right: 1px solid var(--c-danger);
|
||||
width : 90%;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.md-alert-money,
|
||||
.md-alert-warning {
|
||||
border-left-color: var(--c-warning);
|
||||
color: var(--c-warning);
|
||||
background-color: var(--c-muted);
|
||||
width : 90%;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.md-alert-caution {
|
||||
border-left-color: var(--c-caution);
|
||||
color: var(--c-caution);
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ draft = true
|
|||
tags = ['red']
|
||||
+++
|
||||
|
||||
|
||||
|
||||
Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.
|
||||
|
||||
Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
+++
|
||||
title = 'Post 4'
|
||||
date = 2023-02-15T10:00:00-07:00
|
||||
draft = true
|
||||
tags = ['blue','red']
|
||||
+++
|
||||
|
||||
Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.
|
||||
|
||||
> This is a normal quote
|
||||
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
> [!CAMPING]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
> [!NATURE]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
> [!MONEY]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.
|
||||
|
|
@ -2,12 +2,13 @@ baseURL = 'https://example.org/'
|
|||
languageCode = 'en-us'
|
||||
title = 'My New Hugo Site'
|
||||
enableEmoji = true
|
||||
summaryLength = 50
|
||||
|
||||
[permalinks]
|
||||
post = "/:filename/"
|
||||
|
||||
[params]
|
||||
description = "FHA's Tech-Notes to not forget what took me ages to troubleshoot !"
|
||||
description = "FHA's Theme for coding and blogging !"
|
||||
includeBootstrapJs = true
|
||||
search = true
|
||||
search_minify = true
|
||||
|
|
@ -59,7 +60,7 @@ enableEmoji = true
|
|||
[module]
|
||||
[module.hugoVersion]
|
||||
extended = false
|
||||
min = "0.116.0"
|
||||
min = "0.133.0"
|
||||
|
||||
[markup]
|
||||
[markup.goldmark]
|
||||
|
|
@ -110,7 +111,7 @@ enableEmoji = true
|
|||
autoHeadingIDType = 'github'
|
||||
wrapStandAloneImageWithinParagraph = true
|
||||
[markup.goldmark.parser.attribute]
|
||||
block = false
|
||||
block = true
|
||||
title = true
|
||||
[markup.goldmark.renderHooks]
|
||||
[markup.goldmark.renderHooks.image]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
{{ $emojis := dict
|
||||
"caution" ":warning:"
|
||||
"important" ":exclamation:"
|
||||
"note" ":information_source:"
|
||||
"tip" ":bulb:"
|
||||
"warning" ":radioactive:"
|
||||
"nature" ":evergreen_tree:"
|
||||
"camping" ":tent:"
|
||||
"meteo" ":sun_behind_small_cloud:"
|
||||
"money" ":money_with_wings:"
|
||||
"danger" ":no_entry:"
|
||||
"wifi" ":wireless:"
|
||||
}}
|
||||
|
||||
<blockquote class="md-alert md-alert-{{ .AlertType }}">
|
||||
<div class="md-alert-heading">
|
||||
{{ transform.Emojify (index $emojis .AlertType) }}
|
||||
{{ with .AlertTitle }}
|
||||
{{ . }}
|
||||
{{ else }}
|
||||
{{ or (i18n .AlertType) (title .AlertType) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ .Text }}
|
||||
</blockquote>
|
||||
|
|
@ -29,10 +29,13 @@
|
|||
|
||||
<meta name="theme-color" content="{{ .Site.Params.faviconThemeColor }}">
|
||||
|
||||
{{ $themeCss := resources.Get "theme.css" | minify }}
|
||||
<link href="{{ $themeCss.RelPermalink }}" rel="stylesheet">
|
||||
|
||||
{{ if (findRE "<code" .Content 1) }}
|
||||
{{ $syntax := resources.Get "chroma.css" | minify }}
|
||||
<link href="{{ $syntax.RelPermalink }}" rel="stylesheet">
|
||||
|
||||
|
||||
{{ $copyCss := resources.Get "copycodebtn.css" | minify }}
|
||||
<link href="{{ $copyCss.RelPermalink }}" rel="stylesheet">
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue