docs: add render for admonition blocks in jekyll

WoozyMasta · Dec 22, 2024 · 96fecde · 96fecde
1 parent 15b3890
commit 96fecde
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -46,5 +46,24 @@ <h1>{{ site.title | default: site.github.repository_name }}</h1>
       </section>
 
     </div>
+
+    <script>
+      function processAdmonitionBlocks() {
+        const blocks = document.querySelectorAll('blockquote');
+
+        blocks.forEach(block => {
+          let text = block.innerHTML;
+          text = text.replace(/\[\!(TIP|NOTE|IMPORTANT|WARNING|CAUTION)\]/g, (match, p1) => {
+            const formattedText = `<strong>${p1.charAt(0).toUpperCase() + p1.slice(1)}</strong>`;
+            block.classList.add(`admonition-${p1.toLowerCase()}`);
+            return formattedText;
+          });
+
+          block.innerHTML = text;
+        });
+      }
+
+      document.addEventListener('DOMContentLoaded', processAdmonitionBlocks);
+    </script>
   </body>
 </html>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -33,3 +33,38 @@ section {
   background-color: #9b852f;
   border: 1px solid #9b9351;
 }
+
+.admonition-tip {
+  background-color: #2f3719;
+  border-left: 5px solid #659e10;
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.admonition-note {
+  background-color: #0b323e;
+  border-left: 5px solid #419dac;
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.admonition-important {
+  background-color: #3a1d3e;
+  border-left: 5px solid #a02da4;
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.admonition-warning {
+  background-color: #553717;
+  border-left: 5px solid #d28445;
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.admonition-caution {
+  background-color: #481b1b;
+  border-left: 5px solid #d73434;
+  padding: 10px;
+  margin: 10px 0;
+}