feat: add a notice shortcode

assets/scss/main.scss

@@ -22,6 +22,7 @@
 @import './partials/components/portfolio';
 @import './partials/components/page404';
 @import './partials/components/archive';
+@import './partials/components/notice';
 @import './partials/vendors/mediumzoom';
 @import './partials/vendors/contactform';
 @import './partials/vendors/tableofcontents';

assets/scss/modules/_color_theme.scss

@@ -8,6 +8,9 @@ $themes: (
     shadow: $shadow--lightmode,
     border: 1px solid $primary-lighter--lightmode,
     alert: $alert,
+    notice-info: $notice-info--lightmode,
+    notice-update: $notice-update--lightmode,
+    notice-warning: $notice-warning--lightmode,
   ),
   dark: (
     accent: $accent--darkmode,
@@ -18,6 +21,9 @@ $themes: (
     shadow: $shadow--darkmode,
     border: 1px solid $primary-lighter--darkmode,
     alert: $alert,
+    notice-info: $notice-info--darkmode,
+    notice-update: $notice-update--darkmode,
+    notice-warning: $notice-warning--darkmode,
   ),
 );
 

assets/scss/modules/_variables.scss

@@ -13,6 +13,13 @@ $shadow--darkmode: 0 8px 16px rgba(226, 226, 226, 0.1);
 $alert: #ffc107;
 $info: #0366d7;
 
+$notice-info--lightmode: rgb(239, 248, 255);
+$notice-info--darkmode: rgb(28, 55, 87);
+$notice-update--lightmode: rgb(227, 252, 236);
+$notice-update--darkmode: rgb(21, 68, 38);
+$notice-warning--lightmode: rgb(252, 235, 234);
+$notice-warning--darkmode: rgb(119, 36, 32);
+
 $thumbnail-height: 15em;
 $body-max-width: 1920px;
 

assets/scss/partials/components/_notice.scss

@@ -0,0 +1,51 @@
+.notice {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+  @include themed() {
+    background-color: t('notice-info');
+  }
+
+  &--update {
+    @include themed() {
+      background-color: t('notice-update');
+    }
+  }
+  &--warning {
+    @include themed() {
+      background-color: t('notice-warning');
+    }
+  }
+
+  &__title {
+    background-color: rgb(96, 134, 180);
+    float: right;
+    font-weight: 300;
+    letter-spacing: 0.025em;
+    margin-bottom: 0.25rem;
+    margin-left: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    @include themed() {
+      color: t('accent');
+    }
+
+    &--update {
+      background-color: rgb(81, 216, 138);
+    }
+    &--warning {
+      background-color: rgb(239, 87, 83);
+    }
+  }
+
+  &__content {
+    margin-bottom: 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}

exampleSite/content/english/post/notice-shortcode.md

@@ -0,0 +1,46 @@
+---
+title: 'The Notice Shortcode'
+date: 2022-03-18T21:47:41+00:00
+draft: false
+tags:
+  - demo
+  - shortcode
+---
+
+The notice shortcode supports three different types of disclaimers. These are as following:
+
+## Info Box
+
+```
+{{%/* notice info */%}}
+Lorem Impsum..
+{{%/* /notice */%}}
+```
+
+{{< notice info >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+{{< /notice >}}
+
+## Update Box
+
+```
+{{%/* notice update */%}}
+Lorem Impsum..
+{{%/* /notice */%}}
+```
+
+{{< notice update >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+{{< /notice >}}
+
+## Warning Box
+
+```
+{{%/* notice warning */%}}
+Lorem Impsum..
+{{%/* /notice */%}}
+```
+
+{{< notice warning >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+{{< /notice >}}

exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json

@@ -1 +1 @@
-{"Target":"scss/main.rtl.min.452d226cf794eb977023db629849a66f3dd5ec9a9ed987d4687be9d6fceb2768.css","MediaType":"text/css","Data":{"Integrity":"sha256-RS0ibPeU65dwI9timEmmbz3V7Jqe2YfUaHvp1vzrJ2g="}}
+{"Target":"scss/main.rtl.min.296ab228202f651f6706654142649ed3a0bc65eb9fc0fde6448b447d2b854e9a.css","MediaType":"text/css","Data":{"Integrity":"sha256-KWqyKCAvZR9nBmVBQmSe06C8ZeufwP3mRItEfSuFTpo="}}

exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json

@@ -1 +1 @@
-{"Target":"scss/main.min.dd48129ac8fa8b31b5a5a0d72c50c389e3b176809b8dbd7ccdc0ef3c325d78f9.css","MediaType":"text/css","Data":{"Integrity":"sha256-3UgSmsj6izG1paDXLFDDieOxdoCbjb18zcDvPDJdePk="}}
+{"Target":"scss/main.min.5e97de8b79598e6a57c13b2c70465b6990ec2d66a77a928c7b2dc0b8aa828191.css","MediaType":"text/css","Data":{"Integrity":"sha256-Xpfei3lZjmpXwTsscEZbaZDsLWanepKMey3AuKqCgZE="}}

i18n/ar.toml

@@ -34,4 +34,13 @@ other = "الاسم"
 other = "البريد الالكتروني"
 
 [message]
-other = "الرسالة" 
+other = "الرسالة"
+
+[warning]
+other = "تحذير"
+
+[info]
+other = "حول"
+
+[update]
+other = "تحديث"

i18n/de.toml

@@ -37,4 +37,13 @@ other = "Name"
 other = "E-Mail Adresse"
 
 [message]
-other = "Nachricht" 
+other = "Nachricht" 
+
+[warning]
+other = "Warnung"
+
+[info]
+other = "Info"
+
+[update]
+other = "Aktualisierung"

i18n/dk.toml

@@ -33,4 +33,13 @@ other = "Navn"
 other = "e-mail-adresse"
 
 [message]
-other = "besked" 
+other = "besked" 
+
+[warning]
+other = "Advarsel"
+
+[info]
+other = "Om"
+
+[update]
+other = "Opdatering"

i18n/en.toml

@@ -38,3 +38,12 @@ other = "Email"
 
 [message]
 other = "Message" 
+
+[warning]
+other = "Warning"
+
+[info]
+other = "Info"
+
+[update]
+other = "Update"

i18n/es.toml

@@ -33,4 +33,13 @@ other = "Nombre"
 other = "Correo electrónico"
 
 [message]
-other = "Mensaje" 
+other = "Mensaje"
+
+[warning]
+other = "Advertencia"
+
+[info]
+other = "Acerca de"
+
+[update]
+other = "Actualizar"

i18n/fa.toml

@@ -33,4 +33,13 @@ other = "نام"
 other = "پست الکترونیک"
 
 [message]
-other = "پیام" 
+other = "پیام"
+
+[warning]
+other = "هشدار"
+
+[info]
+other = "درباره"
+
+[update]
+other = "به روز رسانی"

i18n/fi.toml

@@ -33,4 +33,13 @@ other = "Nimi"
 other = "Sähköposti"
 
 [message]
-other = "Viesti" 
+other = "Viesti"
+
+[warning]
+other = "Varoitus"
+
+[info]
+other = "Tietoja"
+
+[update]
+other = "Päivitys"

i18n/fr.toml

@@ -33,4 +33,13 @@ other = "Nom"
 other = "Email"
 
 [message]
-other = "Message" 
+other = "Message"
+
+[warning]
+other = "Attention"
+
+[info]
+other = "À propos"
+
+[update]
+other = "mettre à jour"

i18n/it.toml

@@ -33,4 +33,13 @@ other = "Nome"
 other = "Email"
 
 [message]
-other = "Messaggio" 
+other = "Messaggio"
+
+[warning]
+other = "Avviso"
+
+[info]
+other = "Informazioni"
+
+[update]
+other = "Aggiorna"

i18n/ja.toml

@@ -33,4 +33,13 @@ other = "お名前"
 other = "メールアドレス"
 
 [message]
-other = "メッセージ" 
+other = "メッセージ"
+
+[warning]
+other = "警告"
+
+[info]
+other = "概要"
+
+[update]
+other = "更新"

i18n/ko.toml

@@ -38,3 +38,12 @@ other = "이메일"
 
 [message]
 other = "메시지"
+
+[warning]
+other = "경고"
+
+[info]
+other = "경고"
+
+[update]
+other = "업데이트"

i18n/pt-PT.toml

@@ -37,4 +37,13 @@ other = "Nome"
 other = "Email"
 
 [message]
-other = "Mensagem" 
+other = "Mensagem"
+
+[warning]
+other = "Aviso"
+
+[info]
+other = "Sobre"
+
+[update]
+other = "Atualizar"

i18n/pt-br.toml

@@ -33,4 +33,13 @@ other = "Nome"
 other = "Email"
 
 [message]
-other = "Mensagem" 
+other = "Mensagem"
+
+[warning]
+other = "Aviso"
+
+[info]
+other = "Sobre"
+
+[update]
+other = "Atualizar"

i18n/zh-cn.toml

@@ -33,4 +33,13 @@ other = "姓名"
 other = "电子邮件"
 
 [message]
-other = "信息" 
+other = "信息"
+
+[warning]
+other = "警告"
+
+[info]
+other = "关于"
+
+[update]
+other = "更新"

i18n/zh-tw.toml

@@ -33,4 +33,13 @@ other = "名稱"
 other = "電子郵件"
 
 [message]
-other = "消息" 
+other = "消息"
+
+[warning]
+other = "警告"
+
+[info]
+other = "關於"
+
+[update]
+other = "關於"

layouts/shortcodes/notice.html

@@ -0,0 +1,27 @@
+{{/* Available notice types: warning, info, update */}}
+{{- $noticeType := .Get 0 -}}
+<div
+  class="notice{{ if eq $noticeType "warning" }}
+    notice--warning
+
+  {{ else if eq $noticeType "update" }}
+    notice--update
+
+  {{ end }}"
+>
+  <div
+    class="notice__title{{ if eq $noticeType "warning" }}
+      notice__title--warning
+
+    {{ else if eq $noticeType "update" }}
+      notice__title--update
+
+    {{ end }}"
+  >
+    {{- i18n $noticeType -}}
+  </div>
+  {{- $noteContent := (markdownify .Inner | chomp) -}}
+  <div class="notice__content">
+    {{ $noteContent }}
+  </div>
+</div>

resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json

@@ -1 +1 @@
-{"Target":"scss/main.rtl.min.452d226cf794eb977023db629849a66f3dd5ec9a9ed987d4687be9d6fceb2768.css","MediaType":"text/css","Data":{"Integrity":"sha256-RS0ibPeU65dwI9timEmmbz3V7Jqe2YfUaHvp1vzrJ2g="}}
+{"Target":"scss/main.rtl.min.296ab228202f651f6706654142649ed3a0bc65eb9fc0fde6448b447d2b854e9a.css","MediaType":"text/css","Data":{"Integrity":"sha256-KWqyKCAvZR9nBmVBQmSe06C8ZeufwP3mRItEfSuFTpo="}}

resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json

@@ -1 +1 @@
-{"Target":"scss/main.min.dd48129ac8fa8b31b5a5a0d72c50c389e3b176809b8dbd7ccdc0ef3c325d78f9.css","MediaType":"text/css","Data":{"Integrity":"sha256-3UgSmsj6izG1paDXLFDDieOxdoCbjb18zcDvPDJdePk="}}
+{"Target":"scss/main.min.5e97de8b79598e6a57c13b2c70465b6990ec2d66a77a928c7b2dc0b8aa828191.css","MediaType":"text/css","Data":{"Integrity":"sha256-Xpfei3lZjmpXwTsscEZbaZDsLWanepKMey3AuKqCgZE="}}