From f0b6e177a4a3a02767c3acb52ab47a99d1429d77 Mon Sep 17 00:00:00 2001 From: SeniorMars Date: Fri, 14 Jun 2024 20:40:43 -0400 Subject: [PATCH 1/3] added a super cool shortcode that i think people will like --- config.toml | 1 + content/posts/shortcode.md | 30 ++++++++++++++ sass/main.scss | 3 +- sass/parts/_note.scss | 71 ++++++++++++++++++++++++++++++++++ static/js/note.js | 12 ++++++ templates/partials/header.html | 7 +++- templates/shortcodes/note.html | 19 +++++++++ 7 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 content/posts/shortcode.md create mode 100644 sass/parts/_note.scss create mode 100644 static/js/note.js create mode 100644 templates/shortcodes/note.html diff --git a/config.toml b/config.toml index 02b0166..856a722 100644 --- a/config.toml +++ b/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 diff --git a/content/posts/shortcode.md b/content/posts/shortcode.md new file mode 100644 index 0000000..2fed674 --- /dev/null +++ b/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="

This blog assumes basic terminal maturity

") }} + + +Literal shortcode: +``` +{{/* note(header="Note!", text="

This blog assumes basic terminal maturity

") */}} +``` + +Pretty cool, right? diff --git a/sass/main.scss b/sass/main.scss index f303f11..c98d84f 100644 --- a/sass/main.scss +++ b/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; } -} \ No newline at end of file +} diff --git a/sass/parts/_note.scss b/sass/parts/_note.scss new file mode 100644 index 0000000..b60a53a --- /dev/null +++ b/sass/parts/_note.scss @@ -0,0 +1,71 @@ +:root { + --bg-primary: #f0f0f0; // Updated light theme background color + --note-color: #243b4e; + --note-bg: #00b8d5; + --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); + +} + +.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; + /* Smooth transition for background color */ +} + +.note-toggle { + cursor: pointer; +} + +.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; +} diff --git a/static/js/note.js b/static/js/note.js new file mode 100644 index 0000000..5639732 --- /dev/null +++ b/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 ? 'block' : 'none'; + }); + }); + }); diff --git a/templates/partials/header.html b/templates/partials/header.html index 000bf2d..1b26c98 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -74,6 +74,11 @@ {% endif %} + {# Dynamic Note #} + {% if config.extra.dynamic_note | default(value=false) %} + + {% endif %} + {# Font from cdn or disk #} {% if config.extra.use_cdn | default(value=false) %} @@ -144,7 +149,7 @@ {% endif %} - + {% if theme == "dark" %} diff --git a/templates/shortcodes/note.html b/templates/shortcodes/note.html new file mode 100644 index 0000000..c59a0a1 --- /dev/null +++ b/templates/shortcodes/note.html @@ -0,0 +1,19 @@ +
+ {% if clickable | default(value=false) %} + + + {% else %} +
+ + {{ header | safe }} +
+
+ {{ text | safe }} +
+ {% endif %} +
From 6ae30bf1d95b52a8f1ba28ee6ed27492d95958f6 Mon Sep 17 00:00:00 2001 From: SeniorMars Date: Fri, 14 Jun 2024 21:11:54 -0400 Subject: [PATCH 2/3] light mode! --- sass/parts/_note.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/parts/_note.scss b/sass/parts/_note.scss index b60a53a..afb9989 100644 --- a/sass/parts/_note.scss +++ b/sass/parts/_note.scss @@ -1,7 +1,7 @@ :root { --bg-primary: #f0f0f0; // Updated light theme background color - --note-color: #243b4e; - --note-bg: #00b8d5; + --note-color: #f0f0f0; + --note-bg: #ef534f; --header-color: rgb(15, 20, 25); } From 9b65469b30aabbdbd33453c5e184a478380e6ac9 Mon Sep 17 00:00:00 2001 From: SeniorMars Date: Sat, 15 Jun 2024 12:11:30 -0400 Subject: [PATCH 3/3] notes should be open by default --- sass/parts/_note.scss | 14 +++++++++++--- static/js/note.js | 24 ++++++++++++------------ templates/shortcodes/note.html | 2 +- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/sass/parts/_note.scss b/sass/parts/_note.scss index afb9989..39488f0 100644 --- a/sass/parts/_note.scss +++ b/sass/parts/_note.scss @@ -1,6 +1,6 @@ :root { --bg-primary: #f0f0f0; // Updated light theme background color - --note-color: #f0f0f0; + --note-color: #ebdbb2; --note-bg: #ef534f; --header-color: rgb(15, 20, 25); } @@ -19,7 +19,7 @@ position: relative; padding-left: 4px; background-color: var(--note-color); - + font-family: var(--paragraph-font); } .note-toggle, @@ -35,11 +35,19 @@ outline: none; font-size: 1.2em; transition: background-color 0.3s ease; - /* Smooth transition for background color */ } .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, diff --git a/static/js/note.js b/static/js/note.js index 5639732..48abdf2 100644 --- a/static/js/note.js +++ b/static/js/note.js @@ -1,12 +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 ? 'block' : 'none'; - }); - }); - }); +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'; + }); + }); +}); diff --git a/templates/shortcodes/note.html b/templates/shortcodes/note.html index c59a0a1..0cc9877 100644 --- a/templates/shortcodes/note.html +++ b/templates/shortcodes/note.html @@ -4,7 +4,7 @@ {{ header | safe }} -