Merge pull request #57 from SeniorMars/note_macro

added a super cool shortcode that i think people will like

config.toml

@@ -18,6 +18,7 @@ favicon = "/icon/favicon.png"
 theme = "toggle"              # light, dark, auto, toggle
 comment = false
 codeblock_clipboard = true
+dynamic_note = true # a note that can be toggled
 # mathjax = true
 # mathjax_dollar_inline_enable = true
 

content/posts/shortcode.md

@@ -0,0 +1,30 @@
++++
+title = "Shortcode Example"
+date = "2024-06-14"
++++
+
+Here is an example of the `note` shortcode:
+
+This one is static!
+{{ note(header="Note!", text="This blog assumes basic terminal maturity") }}
+
+This one is clickable!
+{{ note(clickable=true, header="Quiz!", text="The answer to the quiz!") }}
+
+
+Syntax:
+```
+{{/* note(header="Note!", text="This blog assumes basic terminal maturity") */}}
+{{/* note(clickable=true, header="Quiz!", text="The answer to the quiz!") */}}
+```
+
+You can also use some HTML in the text:
+{{ note(header="Note!", text="<h1>This blog assumes basic terminal maturity</h1>") }}
+
+
+Literal shortcode:
+```
+{{/* note(header="Note!", text="<h1>This blog assumes basic terminal maturity</h1>") */}}
+```
+
+Pretty cool, right?

sass/main.scss

@@ -2,6 +2,7 @@
 @import "parts/_code.scss";
 @import "parts/_header.scss";
 @import "parts/_image.scss";
+@import "parts/_note.scss";
 @import "parts/misc.scss";
 @import "parts/table.scss";
 @import "parts/tags.scss";
@@ -46,4 +47,4 @@ html {
   html {
     font-size: 18px;
   }
-}
+}

sass/parts/_note.scss

@@ -0,0 +1,79 @@
+:root {
+  --bg-primary: #f0f0f0; // Updated light theme background color
+  --note-color: #ebdbb2;
+  --note-bg: #ef534f;
+  --header-color: rgb(15, 20, 25);
+}
+
+:root.dark {
+  --bg-primary: rgb(15, 20, 25); // Dark theme background color
+  --note-color: #00b8d5;
+  --note-bg: #243b4e;
+  --header-color: #f0f0f0;
+}
+
+.note-container {
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 1em 0;
+  position: relative;
+  padding-left: 4px;
+  background-color: var(--note-color);
+  font-family: var(--paragraph-font);
+}
+
+.note-toggle,
+.note-header {
+  color: var(--header-color);
+  background-color: var(--note-bg);
+  padding: 10px 20px;
+  padding-left: 50px;
+  text-align: left;
+  border: none;
+  width: 100%;
+  position: relative;
+  outline: none;
+  font-size: 1.2em;
+  transition: background-color 0.3s ease;
+}
+
+.note-toggle {
+  cursor: pointer;
+  position: relative;
+}
+
+.note-toggle::before {
+  content: '▼';
+  position: absolute;
+  right: 20px; /* Position the arrow to the right */
+  top: 50%; /* Center vertically */
+  transform: translateY(-50%); /* Center vertically */
+}
+
+.note-toggle:hover,
+.note-toggle:focus {
+  color: var(--note-color);
+  background-color: var(--note-bg);
+  outline: none;
+}
+
+.note-content {
+  padding: 10px 20px;
+  background-color: var(--bg-primary);
+}
+
+.note-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  background-color: var(--note-color);
+  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/%3E%3C/svg%3E');
+  mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/%3E%3C/svg%3E');
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  background-size: contain;
+  background-repeat: no-repeat;
+}

static/js/note.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Attach click event listeners to all '.note-toggle' buttons
+  document.querySelectorAll('.note-toggle').forEach(function(toggleButton) {
+    toggleButton.addEventListener('click', function() {
+      // The '.note-content' is the next sibling element in the DOM structure
+      var content = this.nextElementSibling;
+      var expanded = this.getAttribute('aria-expanded') === 'true' || false;
+      this.setAttribute('aria-expanded', !expanded);
+      content.style.display = !expanded ? 'none' : 'block';
+    });
+  });
+});

templates/partials/header.html

@@ -74,6 +74,11 @@
         <script src={{ get_url(path="js/clipboard.js") }}></script>
     {% endif %}
 
+    {# Dynamic Note #}
+    {% if config.extra.dynamic_note | default(value=false) %}
+        <script src={{ get_url(path="js/note.js") }}></script>
+    {% endif %}
+
     {# Font from cdn or disk #}
     {% if config.extra.use_cdn | default(value=false) %}
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/jetbrains-mono.min.css">
@@ -144,7 +149,7 @@
         <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/light.css") }} />
         <link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}" />
     {% endif %}
-    
+
     <!-- Set the correct theme in the script -->
     <script src={{ get_url(path="js/themetoggle.js") }}></script>
     {% if theme == "dark" %}

templates/shortcodes/note.html

@@ -0,0 +1,19 @@
+<div class="note-container">
+  {% if clickable | default(value=false) %}
+    <button class="note-toggle">
+      <span class="note-icon"></span>
+      {{ header | safe }}
+    </button>
+    <div class="note-content" style="display: block;">
+      {{ text | safe }}
+    </div>
+  {% else %}
+    <div class="note-header">
+      <span class="note-icon"></span>
+      {{ header | safe }}
+    </div>
+    <div class="note-content">
+      {{ text | safe }}
+    </div>
+  {% endif %}
+</div>