tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-04 12:00:02 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Refactor, and styling adjustments to callout icons

Browse Source
This commit is contained in:
Ole Eskild Steensen 2023-01-17 14:22:10 +01:00
parent d79ff93c5e
commit e3ddd1e29e
4 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugin-info.json
View File

@ -38,6 +38,7 @@
"src/site/_includes/components/searchButton.njk",
"src/site/_includes/components/searchContainer.njk",
"src/site/_includes/components/searchScript.njk",
"src/site/_includes/components/calloutScript.njk",
"src/site/lunr-index.js",
"src/site/lunr.njk",
"src/site/_data/versionednotes.js",

41
src/site/_includes/components/calloutScript.njk Normal file
View File

@ -0,0 +1,41 @@
<script src="https://unpkg.com/lucide@0"></script>
<script>
// Create callout icons
window.addEventListener("load", () => {
document.querySelectorAll(".callout").forEach((elem) => {
const icon = getComputedStyle(elem).getPropertyValue('--callout-icon');
const iconName = icon && icon.trim().replace(/^lucide-/, "");
if (iconName) {
const calloutTitle = elem.querySelector(".callout-title");
if (calloutTitle) {
const calloutIconContainer = document.createElement("div");
const calloutIcon = document.createElement("i");
calloutIconContainer.appendChild(calloutIcon);
calloutIcon.setAttribute("icon-name", iconName);
calloutIconContainer.setAttribute("class", "callout-icon");
calloutTitle.insertBefore(calloutIconContainer, calloutTitle.firstChild);
}
}
});
lucide.createIcons({
attrs: {
class: ["svg-icon"]
}
});
// Collapse callouts
Array.from(document.querySelectorAll(".callout.is-collapsible")).forEach((elem) => {
elem.addEventListener("click", (event) => {
if (elem.classList.contains("is-collapsed")) {
elem.classList.remove("is-collapsed");
} else {
elem.classList.add("is-collapsed");
}
});
});
});
</script>

38
src/site/_includes/components/pageheader.njk
View File

@ -1,42 +1,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script src="https://unpkg.com/lucide@0"></script>
<script>
// Create callout icons
window.addEventListener("load", () => {
document.querySelectorAll(".callout").forEach((elem) => {
const icon = getComputedStyle(elem).getPropertyValue('--callout-icon');
const iconName = icon && icon.replace(/^lucide-/, "");
if (iconName) {
const calloutTitle = elem.querySelector(".callout-title");
if (calloutTitle) {
const calloutIconContainer = document.createElement("div");
const calloutIcon = document.createElement("i");
calloutIconContainer.appendChild(calloutIcon);
calloutIcon.setAttribute("icon-name", iconName);
calloutIconContainer.setAttribute("class", "callout-icon");
calloutTitle.insertBefore(calloutIconContainer, calloutTitle.firstChild);
}
}
});
lucide.createIcons();
// Collapse callouts
Array.from(document.querySelectorAll(".callout.is-collapsible")).forEach((elem) => {
elem.addEventListener("click", (event) => {
if (elem.classList.contains("is-collapsed")) {
elem.classList.remove("is-collapsed");
} else {
elem.classList.add("is-collapsed");
}
});
});
});
</script>
<script>
mermaid.initialize({
startOnLoad: true,
@ -45,6 +8,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{%include "components/calloutScript.njk"%}
<script src="//unpkg.com/force-graph"></script>

4
src/site/styles/digital-garden-base.scss
View File

@ -491,6 +491,10 @@ ul.task-list {
padding: 0;
}
.callout-fold{
cursor: pointer;
}
.callout-title {
margin-top: 0;
align-items: center;