0.0.5

Added ability to collapse

Author: valentine195

README.md

@@ -29,8 +29,24 @@ content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euism
 
 <img src="https://i.imgur.com/pBTJAFa.png">
 
+Leave the title field blank to only display the admonition.
+````markdown
+```note
+title:
+content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
+```
+````
+
+<img src="https://i.imgur.com/pNU2MB7.png">
+
 **Please note that when the title is included, you _must_ specificy the content as well.**
 
+### Collapsible
+
+Use `collapse: open` or `collapse: closed` to create a collapsible admonition.
+
+<img width='640px' src="https://thumbs.gfycat.com/UniqueVillainousHarpseal-size_restricted.gif">
+
 ## Admonition Types
 
 The following admonition types are currently supported:
@@ -54,7 +70,11 @@ See [this](https://squidfunk.github.io/mkdocs-material/reference/admonitions/) f
 
 ## Customization
 
-The admonitions are each styled with with the following classes, which can be override to custom their appearance:
+This is all of the CSS applied to the admonitions. Override these classes to customize the look.
+
+### Base Classes
+
+Every admonition receives the following CSS classes:
 
 ```css
 .admonition {
@@ -66,7 +86,7 @@ The admonitions are each styled with with the following classes, which can be ov
     background-color: var(--background-secondary);
     border-left: 0.2rem solid;
     border-radius: 0.1rem;
-    box-shadow: var(--background-modifier-box-shadow);
+    box-shadow: 0 0.2rem 0.5rem var(--background-modifier-box-shadow);
 }
 .admonition-title::before {
     position: absolute;
@@ -92,7 +112,9 @@ The admonitions are each styled with with the following classes, which can be ov
 }
 ```
 
-Additionally, each admonition type will receive the ```.admonition-<type>``` class:
+### Type Specific
+
+Additionally, each admonition type will receive the `.admonition-<type>` class:
 
 ```css
 /* Example of .admonition-note */
@@ -109,30 +131,89 @@ Additionally, each admonition type will receive the ```.admonition-<type>``` cla
 }
 ```
 
-The admonition icons are svgs defined as variables on the ```:root``` with the name ```--admonition-icon--<type>```. Override this variable to customize the icon. Example:
+#### Type Icons
+
+The admonition icons are svgs defined as variables on the `:root` with the name `--admonition-icon--<type>`. Override this variable to customize the icon. Example:
+
 ```css
 --admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
 ```
 
+### Collapsible
+
+If an icon is collapsible, it will receive the following CSS:
+
+```css
+details.admonition:not([open]) {
+    padding-bottom: 0;
+    box-shadow: none;
+}
+details.admonition > summary {
+    outline: none;
+    list-style: none;
+    display: block;
+    min-height: 1rem;
+    padding: 0.4rem 1.8rem 0.4rem 2rem;
+    border-top-left-radius: 0.1rem;
+    border-top-right-radius: 0.1rem;
+    cursor: pointer;
+}
+details.admonition > summary::-webkit-details-marker {
+    display: none;
+}
+
+details.admonition > summary:after {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 20px;
+    height: 20px;
+    background-color: currentColor;
+    -webkit-mask-image: var(--admonition-details-icon);
+    mask-image: var(--admonition-details-icon);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    transform: rotate(0deg);
+    transition: transform 0.25s;
+    content: "";
+}
+details.admonition[open] > summary:after {
+    transform: rotate(90deg);
+}
+```
+
+### No Title
+
+An icon without a title will have this CSS:
+
+```css
+.admonition-title.no-title {
+    display: none;
+}
+```
+
 ## Todo
-- Add the ability to collapse the admonition
-- Custom admonitions
-- Settings tab to customize icon and color of included admonitions
-- Longterm - ability to render markdown inside an admonition
+
+-   Add the ability to collapse the admonition
+-   Custom admonitions
+-   Settings tab to customize icon and color of included admonitions
+-   Longterm - ability to render markdown inside an admonition
 
 ## Installation
 
 ### From GitHub
-- Download the Latest Release from the Releases section of the GitHub Repository
-- Copy the `main.js`, `styles.css` and `manifest.json` files from the release to your vault's plugins folder: `<vault>/.obsidian/plugins/`  
-Note: On some machines the `.obsidian` folder may be hidden. On MacOS you should be able to press `Command+Shift+Dot` to show the folder in Finder.
-- Reload Obsidian
-- If prompted about Safe Mode, you can disable safe mode and enable the plugin.
-Otherwise head to Settings, third-party plugins, make sure safe mode is off and
-enable the plugin from there.
 
+-   Download the Latest Release from the Releases section of the GitHub Repository
+-   Copy the `main.js`, `styles.css` and `manifest.json` files from the release to your vault's plugins folder: `<vault>/.obsidian/plugins/`  
+    Note: On some machines the `.obsidian` folder may be hidden. On MacOS you should be able to press `Command+Shift+Dot` to show the folder in Finder.
+-   Reload Obsidian
+-   If prompted about Safe Mode, you can disable safe mode and enable the plugin.
+    Otherwise head to Settings, third-party plugins, make sure safe mode is off and
+    enable the plugin from there.
 
 ## Warning
 
 This plugin comes with no guarantee of stability and bugs may delete data.
-Please ensure you have automated backups.
+Please ensure you have automated backups.

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-admonition",
 	"name": "Admonition",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"minAppVersion": "0.11.0",
 	"description": "Admonition block-styled content for Obsidian.md",
 	"author": "Jeremy Valentine",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-admonition",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "Admonition block-styled content for Obsidian.md",
 	"main": "main.js",
 	"scripts": {

src/admonitions.ts

@@ -1,5 +1,5 @@
 interface Admonition {
-    [key: string]: string;
+    [admonitionType: string]: string;
 }
 const admonitions = [
     "note",

src/main.css

@@ -11,6 +11,7 @@
     --admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
     --admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
     --admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
+    --admonition-details-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z'/></svg>");
 }
 
 /** Constants */
@@ -24,7 +25,7 @@
     background-color: var(--background-secondary);
     border-left: 0.2rem solid;
     border-radius: 0.1rem;
-    box-shadow: var(--background-modifier-box-shadow);
+    box-shadow: 0 0.2rem 0.5rem var(--background-modifier-box-shadow);
 }
 .admonition-title::before {
     position: absolute;
@@ -44,10 +45,57 @@
     font-weight: 700;
     border-left: 0.2rem solid;
 }
+.admonition-title.no-title {
+    display: none;
+}
+
 .admonition-content {
     margin-bottom: 0.6rem;
 }
 
+.admonition > .admonition-title.no-title + .admonition-content {
+    margin: 1em 0;
+}
+
+details.admonition:not([open]) {
+    padding-bottom: 0;
+    box-shadow: none;
+}
+details.admonition > summary {
+    outline: none;
+    list-style: none;
+    display: block;
+    min-height: 1rem;
+    padding: 0.4rem 1.8rem 0.4rem 2rem;
+    border-top-left-radius: 0.1rem;
+    border-top-right-radius: 0.1rem;
+    cursor: pointer;
+}
+details.admonition > summary::-webkit-details-marker {
+    display: none;
+}
+
+details.admonition > summary:after {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 20px;
+    height: 20px;
+    background-color: currentColor;
+    -webkit-mask-image: var(--admonition-details-icon);
+    mask-image: var(--admonition-details-icon);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    transform: rotate(0deg);
+    transition: transform 0.25s;
+    content: "";
+}
+details.admonition[open] > summary:after {
+    transform: rotate(90deg);
+}
+
 /** Type Specific */
 
 .admonition-note {
@@ -111,13 +159,13 @@
 }
 
 .admonition-question {
-    border-color: #00b8d4;
+    border-color: #64dd17;
 }
 .admonition-question > .admonition-title {
     background-color: rgba(100, 221, 23, 0.1);
 }
 .admonition-question > .admonition-title::before {
-    background-color: #00b8d4;
+    background-color: #64dd17;
     -webkit-mask-image: var(--admonition-icon--question);
     mask-image: var(--admonition-icon--question);
 }

src/main.ts

@@ -43,27 +43,80 @@ export default class Admonition extends Plugin {
                 let type =
                     ADMONITION_MAP[classType.split("language-").pop().trim()];
                 if (!type) return;
-                const {
+                let params = Object.fromEntries(
+                    block.innerText
+                        .split("\n")
+                        .map((l) => l.split(":").map((s) => s.trim()))
+                );
+                let {
                     title = type[0].toUpperCase() + type.slice(1).toLowerCase(),
-                    content = block.innerText
-                } = Object.fromEntries(
-                    block.innerText.split("\n").map((l) => l.split(": "))
+                    content = block.innerText,
+                    collapse
+                } = params;
+                console.log(
+                    "🚀 ~ file: main.ts ~ line 56 ~ Admonition ~ codeBlocks.forEach ~ params",
+                    params,
+                    block.innerText
+                        .split("\n")
+                        .map((l) => l.split(":").map((s) => s.trim()))
+                );
+
+                if (
+                    Object.prototype.hasOwnProperty.call(params, "title") &&
+                    params.title === undefined &&
+                    params.collapse
+                ) {
+                    title = "";
+                }
+                if (
+                    Object.prototype.hasOwnProperty.call(params, "collapse") &&
+                    (params.collapse.length == 0 ||
+                        params.collapse === undefined)
+                ) {
+                    collapse = "closed";
+                }
+                console.log(
+                    "🚀 ~ file: main.ts ~ line 69 ~ Admonition ~ codeBlocks.forEach ~ params.collapse",
+                    collapse
+                );
+                this.buildAdmonition(
+                    block.parentElement,
+                    type,
+                    title,
+                    content,
+                    collapse
                 );
-                this.buildAdmonition(block.parentElement, type, title, content);
             }
         });
     }
     buildAdmonition(
         el: HTMLElement,
         type: string,
         title: string,
-        content: string
+        content: string,
+        collapse?: string
     ) {
-        let admonition = createDiv({
-            cls: `admonition admonition-${type}`
+        let attrs,
+            els = [
+                "div" as keyof HTMLElementTagNameMap,
+                "div" as keyof HTMLElementTagNameMap
+            ];
+        if (collapse && ["open", "closed"].includes(collapse)) {
+            els = [
+                "details" as keyof HTMLElementTagNameMap,
+                "summary" as keyof HTMLElementTagNameMap
+            ];
+            attrs = {
+                [collapse]: true
+            };
+        }
+
+        let admonition = createEl(els[0], {
+            cls: `admonition admonition-${type}`,
+            attr: attrs
         });
-        admonition.createDiv({
-            cls: "admonition-title",
+        admonition.createEl(els[1], {
+            cls: `admonition-title ${!title.trim().length ? "no-title" : ""}`,
             text: title
         });
         admonition.createEl("p", {

versions.json

@@ -1,3 +1,3 @@
 {
-	"0.0.4": "0.11.0"
+	"0.0.5": "0.11.0"
 }