👌 IMPROVE: Admonition structure (#12)

* Change paragraph tag to a `header` (semantic HTML)
* Add `block: true` so that the output HTML is more readable
* Remove the `admonition-body` div. This was not used in the CSS, and is not based on the current output from sphinx (and current themes)
   * This simplifies the code and doesn't introduce another CSS selector
* Make the CSS less specific about the header selector (remove the paragraph requirement)
* Remove space in class names for admonitions
* Update the tests, ensure that the CSS is visually similar to previous

Author: rowanc1

.prettierignore

@@ -0,0 +1 @@
+tests/fixtures/*.md

docs/index.html

@@ -32,8 +32,7 @@ <h1>markdown-it-docutils</h1>
         </p>
         <p>
           Simply write in the text box below, then click away, and the text will be
-          rendered.<br />Note the color scheme is adaptive to browser settings,
-          see
+          rendered.<br />Note the color scheme is adaptive to browser settings, see
           <a
             href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"
             >prefers-color-scheme</a

src/directives/admonitions.ts

@@ -23,14 +23,18 @@ class BaseAdmonition extends Directive {
 
     // we create an overall container, then individual containers for the title and body
 
-    const adToken = this.createToken("admonition_open", "aside", 1, { map: data.map })
-    adToken.attrSet("class", `admonition ${this.title.toLowerCase()}`)
+    const adToken = this.createToken("admonition_open", "aside", 1, {
+      map: data.map,
+      block: true
+    })
+    adToken.attrSet("class", "admonition")
+    if (this.title) adToken.attrJoin("class", this.title.toLowerCase())
     if (data.options.class) {
       adToken.attrJoin("class", data.options.class.join(" "))
     }
     newTokens.push(adToken)
 
-    const adTokenTitle = this.createToken("admonition_title_open", "p", 1)
+    const adTokenTitle = this.createToken("admonition_title_open", "header", 1)
     adTokenTitle.attrSet("class", "admonition-title")
     newTokens.push(adTokenTitle)
 
@@ -44,20 +48,15 @@ class BaseAdmonition extends Directive {
       })
     )
 
-    newTokens.push(this.createToken("admonition_title_close", "p", -1))
+    newTokens.push(
+      this.createToken("admonition_title_close", "header", -1, { block: true })
+    )
 
-    const adTokenBody = this.createToken("admonition_body_open", "div", 1, {
-      map: data.bodyMap
-    })
-    adTokenBody.attrSet("class", "admonition-body")
-    newTokens.push(adTokenBody)
     // run a recursive parse on the content of the admonition upto this stage
     const bodyTokens = this.nestedParse(data.body, data.bodyMap[0])
     newTokens.push(...bodyTokens)
 
-    newTokens.push(this.createToken("admonition_body_close", "div", -1))
-
-    newTokens.push(this.createToken("admonition_close", "aside", -1))
+    newTokens.push(this.createToken("admonition_close", "aside", -1, { block: true }))
 
     return newTokens
   }

src/style/_admonition.sass

@@ -26,7 +26,7 @@
 
 
   // Defaults for all admonitions
-  p.admonition-title
+  .admonition-title
     position: relative
     margin: 0 -0.5rem 0.5rem
     padding: 0.5rem 0.5rem 0.5rem 2rem

tests/fixtures/directives.md

@@ -16,8 +16,10 @@ admonition
 Some *content*
 ```
 .
-<aside class="admonition "><p class="admonition-title">A <strong>Title</strong></p><div class="admonition-body"><p>Some <em>content</em></p>
-</div></aside>
+<aside class="admonition">
+<header class="admonition-title">A <strong>Title</strong></header>
+<p>Some <em>content</em></p>
+</aside>
 .
 
 nested-admonition
@@ -27,9 +29,14 @@ nested-admonition
 ```
 ````
 .
-<aside class="admonition note"><p class="admonition-title">Note</p><div class="admonition-body"><p>This is a note</p>
-<aside class="admonition warning"><p class="admonition-title">Warning</p><div class="admonition-body"><p>This is a nested warning</p>
-</div></aside></div></aside>
+<aside class="admonition note">
+<header class="admonition-title">Note</header>
+<p>This is a note</p>
+<aside class="admonition warning">
+<header class="admonition-title">Warning</header>
+<p>This is a nested warning</p>
+</aside>
+</aside>
 .
 
 image