add alert shortcode

HidegonSan · Nov 26, 2023 · 28ee5a1 · 28ee5a1
1 parent d36a55e
commit 28ee5a1
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 4 deletions.
diff --git a/assets/css/shortcodes/alert_box.css b/assets/css/shortcodes/alert_box.css
@@ -0,0 +1,31 @@
+.icon-tabler {
+    width: 2rem;
+    height: 2rem;
+}
+
+.alert_box {
+    margin-bottom: var(--content-gap);
+    background-color: var(--entry);
+    border-radius: var(--radius);
+    padding: 0.5rem;
+}
+
+.alert_box_icon {
+    min-width: auto !important;
+}
+
+.alert_box_icon > p {
+    display: none;
+}
+
+.alert_box_icon svg {
+    vertical-align: middle;
+}
+
+.alert_box table {
+    margin-bottom: auto;
+}
+
+.alert_box td {
+    border-bottom: none !important;
+}
diff --git a/content/pages/thanks/_index.md b/content/pages/thanks/_index.md
@@ -3,7 +3,7 @@ draft: false
 
 date: "2023-02-19T14:00:00+09:00"
 
-title: "♡Thanks♡"
+title: "♡Thanks and Open Source Licenses♡"
 description: ""
 keywords: ""
 
@@ -15,6 +15,9 @@ searchHidden: true
 ShowBreadCrumbs: false
 ---
 
+<!-- **Google Analytics**:   -->
+<!-- [https://marketingplatform.google.com/about/analytics/](https://marketingplatform.google.com/about/analytics/)   -->
+
 **Hugo**:  
 [https://gohugo.io/](https://gohugo.io/)  
 
@@ -33,8 +36,8 @@ ShowBreadCrumbs: false
 **KaTeX**:  
 [https://katex.org/](https://katex.org/)  
 
-<!-- **Google Analytics**:   -->
-<!-- [https://marketingplatform.google.com/about/analytics/](https://marketingplatform.google.com/about/analytics/)   -->
+**Tabler Icons**:  
+[https://tabler-icons.io/](https://tabler-icons.io/)  
 
 **Google Forms**:  
 [https://www.google.com/intl/ja_jp/forms/about/](https://www.google.com/intl/ja_jp/forms/about/)  

diff --git a/layouts/partials/extend_head.html b/layouts/partials/extend_head.html
@@ -18,6 +18,8 @@
 
 {{- partial "head/css/image_modal_css.html" . -}}
 
+{{- partial "head/css/alert_box_css.html" . -}}
+
 {{/* libraries */}}
 
 {{- partial "head/katex.html" . -}}

diff --git a/layouts/partials/head/css/alert_box_css.html b/layouts/partials/head/css/alert_box_css.html
@@ -0,0 +1,9 @@
+{{/*  alert box css  */}}
+
+{{- if .HasShortcode "alert" -}}
+    <style>
+        {{- with resources.Get "css/shortcodes/alert_box.css" | toCSS | minify -}}
+            {{- .Content | safeCSS -}}
+        {{- end -}}
+    </style>
+{{- end -}}
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
@@ -0,0 +1,42 @@
+
+<div class="alert_box">
+    <table>
+        <tbody>
+            <tr>
+
+                <td class="alert_box_icon">
+                    <p data-license="Licensed under the MIT license | https://github.com/tabler/tabler-icons/blob/master/LICENSE"></p>
+
+                    {{- if or (eq (.Get 0) "info") (eq (.Get 0) "important") -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+
+                    {{- else if or (eq (.Get 0) "note") (eq (.Get 0) "alert") (eq (.Get 0) "caution") (eq (.Get 0) "danger") -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+
+                    {{- else if eq (.Get 0) "warning" -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>
+
+                    {{- else if or (eq (.Get 0) "hint") (eq (.Get 0) "tip") -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" /><path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" /><path d="M9.7 17l4.6 0" /></svg>
+
+                    {{- else if or (eq (.Get 0) "question") (eq (.Get 0) "help") -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-help" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 17l0 .01" /><path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" /></svg>
+
+                    {{- else if or (eq (.Get 0) "success") (eq (.Get 0) "check") (eq (.Get 0) "ok") -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg>
+
+                    {{- else if or (eq (.Get 0) "failure") (eq (.Get 0) "x") (eq (.Get 0) "ng") -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M10 10l4 4m0 -4l-4 4" /></svg>
+
+                    {{- else -}}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
+
+                    {{- end -}}
+                </td>
+
+                <td>{{- trim .Inner "\r\n" | .Page.RenderString -}}</td>
+
+            </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
@@ -1,5 +1,5 @@
 <p style="text-align: center;">
-    <video controls preload="auto">
+    <video controls preload="auto" style="width: 100%;">
         <source src="{{ .Get 0 | safeHTMLAttr }}" type="video/{{ delimit (last 1 (split (.Get 0) ".")) "" }}" />
     </video>
 </p>