From 8fb2d0c2513db9d3a0434139418f3ed6b5eaf133 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips Freeman <the@jeffreyfreeman.me>
Date: Sat, 24 Jul 2021 12:49:42 -0400
Subject: [PATCH] Added various notice boxes with toufte margin support.
---
config.yaml | 3 +-
.../2021-07-23-our-new-digital-home/index.Rmd | 38 ++++++++++++++++++-
layouts/shortcodes/error.html | 13 +++++++
layouts/shortcodes/info.html | 13 +++++++
layouts/shortcodes/success.html | 13 +++++++
layouts/shortcodes/warn.html | 13 +++++++
static/assets/css/custom.css | 27 +++++++++++++
7 files changed, 117 insertions(+), 3 deletions(-)
create mode 100644 layouts/shortcodes/error.html
create mode 100644 layouts/shortcodes/info.html
create mode 100644 layouts/shortcodes/success.html
create mode 100644 layouts/shortcodes/warn.html
diff --git a/config.yaml b/config.yaml
index e877141..f21fc84 100755
--- a/config.yaml
+++ b/config.yaml
@@ -47,5 +47,6 @@ markup:
lineNos: true
lineNumbersInTable: true
noClasses: false
- style: solarized-light
tabWidth: 2
+theme:
+ - hugo-activitystreams
diff --git a/content/articles/2021-07-23-our-new-digital-home/index.Rmd b/content/articles/2021-07-23-our-new-digital-home/index.Rmd
index 32a10ec..49df75d 100644
--- a/content/articles/2021-07-23-our-new-digital-home/index.Rmd
+++ b/content/articles/2021-07-23-our-new-digital-home/index.Rmd
@@ -105,6 +105,9 @@ $$
$$
{{</math>}}
+## Content in margins
+
+We can also add lovely content in the margins, tufte style. Check out this puppy. {{<mn>}}<img src="puppy.jpg"/>{{</mn>}}In this case we added it directly in the middle of the text! Isnt that so cool! Unfortunately all content in the margin must use html markup and cant rely on markdown however.
## Rscript executed and rendered
```{r, cache = TRUE}
@@ -121,6 +124,37 @@ plot(x, smooth_pulse(x, start = 0.2, stop = 0.3, cycle = 0.5), xlim = c(0,2),
```
-## Content in margins
+## Block quotes
+
+Nothing too special about blockquotes, or as Abe Lincoln said...
+
+> Blockquotes were the radest invention ever conceived, they have changed the world
+> as we know it. I use them every chance I can get, which isnt very much these days.
+> {{<mn>}}Abe Lincoln,
+Getysburg Address, July 20th, 2086{{</mn>}}
+
+## Notice boxes
+
+Sometimes you may need to get someones attention to present some information. That is the perfect use for
+the info shortcode which produces the following message box.
+
+{{<info>}}
+This is an info message. It usually tells people information that is important to note.
+{{</info>}}
+
+The cool thing is that its' even possible combine noties along with the tufte shortcodes for writing
+in the margin. Which you can see in the margin here. {{< success margin >}}Good Job!
+{{</ success >}}In this case I am using the success type notice which is usually used to congratulate the
+reader or give praise.
+
+Likewise there are warning notices
+
+{{< warn >}}
+Warning, you did something that doesnt matter much but I am still going to complain about!
+{{< /warn >}}
+
+And of course error notices.
-We can also add lovely content in the margins, tufte style. Check out this puppy. {{<mn>}}<img src="puppy.jpg"/>{{</mn>}}In this case we added it directly in the middle of the text! Isnt that so cool! Unfortunately all content in the margin must use html markup and cant rely on markdown however.
\ No newline at end of file
+{{< error >}}
+Danger will robinson, danger!
+{{< /error >}}
diff --git a/layouts/shortcodes/error.html b/layouts/shortcodes/error.html
new file mode 100644
index 0000000..b682529
--- /dev/null
+++ b/layouts/shortcodes/error.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+ {{ end }}
+ <div class="error-msg">
+ <i class="fa fa-times-circle"></i>
+ {{ .Inner }}
+ </div>
+ {{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/layouts/shortcodes/info.html b/layouts/shortcodes/info.html
new file mode 100644
index 0000000..42c8929
--- /dev/null
+++ b/layouts/shortcodes/info.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+{{ end }}
+<div class="info-msg">
+ <i class="fa fa-info-circle"></i>
+ {{ .Inner }}
+</div>
+{{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/layouts/shortcodes/success.html b/layouts/shortcodes/success.html
new file mode 100644
index 0000000..99409a7
--- /dev/null
+++ b/layouts/shortcodes/success.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+ {{ end }}
+ <div class="success-msg">
+ <i class="fa fa-check"></i>
+ {{ .Inner }}
+ </div>
+ {{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/layouts/shortcodes/warn.html b/layouts/shortcodes/warn.html
new file mode 100644
index 0000000..a985997
--- /dev/null
+++ b/layouts/shortcodes/warn.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+ {{ end }}
+ <div class="warning-msg">
+ <i class="fa fa-warning"></i>
+ {{ .Inner }}
+ </div>
+ {{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/static/assets/css/custom.css b/static/assets/css/custom.css
index e234d50..3baddda 100755
--- a/static/assets/css/custom.css
+++ b/static/assets/css/custom.css
@@ -539,3 +539,30 @@ code {
border-left-width: 3px;
border-left-style: dotted;
}
+
+/*---------------------------------------------*/
+
+.info-msg,
+.success-msg,
+.warning-msg,
+.error-msg {
+ margin: 10px 0;
+ padding: 10px;
+ border-radius: 3px 3px 3px 3px;
+}
+.info-msg {
+ color: #059;
+ background-color: #BEF;
+}
+.success-msg {
+ color: #270;
+ background-color: #DFF2BF;
+}
+.warning-msg {
+ color: #9F6000;
+ background-color: #FEEFB3;
+}
+.error-msg {
+ color: #D8000C;
+ background-color: #FFBABA;
+}
--
GitLab