Make Collapsible Heading plugin not enabled by default (#127)

CHANGELOG.md

@@ -20,6 +20,7 @@ Any non-code changes should be prefixed with `(docs)`.
 See `PUBLISH.md` for instructions on how to publish a new version.
 -->
 
+- (minor) Make Collapsible Heading plugin not enabled by default
 
 ## v1.15.0 - c5d8617
 

README.md

@@ -210,7 +210,7 @@ Nesting multiple collapsible sections is supported.
 **Options:**
 
 Pass options for this plugin as the `collapsible_heading` property of the `do-markdownit` plugin options.
-Set this property to `false` to disable this plugin.
+This plugin is disabled by default, pass an object to enable it.
 
 - `levels` (`number[]`, optional, defaults to `[ 1, 2, 3, 4, 5, 6 ]`): List of heading tags to wrap (ex: `2`).
 - `open` (`boolean`, optional, defaults to `true`): Flag indicating if the wrapped sections should be expanded by default.

fixtures/full-output.html

@@ -1,28 +1,14 @@
-<details class="collapsible" open="">
-<summary>
 <h1 id="title-header-h1-header"><a class="hash-anchor" href="#title-header-h1-header" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#title-header-h1-header" onclick="navigator.clipboard.writeText(this.href);">Title Header (H1 header)</a></h1>
-</summary>
-<details class="collapsible" open="">
-<summary>
 <h3 id="introduction-h3-header"><a class="hash-anchor" href="#introduction-h3-header" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#introduction-h3-header" onclick="navigator.clipboard.writeText(this.href);">Introduction (H3 header)</a></h3>
-</summary>
 <p>This is some placeholder text to show examples of Markdown formatting.
 We have <a href="https://github.com/do-community/do-article-templates">a full article template</a> you can use when writing a DigitalOcean article.
 Please refer to our style and formatting guidelines for more detailed explanations: <a href="https://do.co/style">https://do.co/style</a></p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="prerequisites-h2-header"><a class="hash-anchor" href="#prerequisites-h2-header" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#prerequisites-h2-header" onclick="navigator.clipboard.writeText(this.href);">Prerequisites (H2 header)</a></h2>
-</summary>
 <p>Before you begin this guide you’ll need the following:</p>
 <ul>
 <li>Familiarity with <a href="https://daringfireball.net/projects/markdown/">Markdown</a></li>
 </ul>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="step-1-basic-markdown"><a class="hash-anchor" href="#step-1-basic-markdown" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-1-basic-markdown" onclick="navigator.clipboard.writeText(this.href);">Step 1 — Basic Markdown</a></h2>
-</summary>
 <p>This is <em>italics</em>, this is <strong>bold</strong>, this is <u>underline</u>, and this is <s>strikethrough</s>.</p>
 <ul>
 <li>This is a list item.</li>
@@ -133,11 +119,7 @@ <h2 id="step-1-basic-markdown"><a class="hash-anchor" href="#step-1-basic-markdo
 </tr>
 </tbody>
 </table>
-</div></details>
-<details class="collapsible" open="">
-<summary>
-<h2 id="step-2-code"><a class="hash-anchor" href="#step-2-code" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-2-code" onclick="navigator.clipboard.writeText(this.href);">Step 2 — Code</a></h2>
-</summary>
+</div><h2 id="step-2-code"><a class="hash-anchor" href="#step-2-code" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-2-code" onclick="navigator.clipboard.writeText(this.href);">Step 2 — Code</a></h2>
 <p>This is <code>inline code</code>. This is a <mark>variable</mark>. This is an <code>in-line code <mark>variable</mark></code>. You can also have <a href="https://www.digitalocean.com"><code>code</code> in links</a>.</p>
 <p>Here’s a configuration file with a label:</p>
 <div class="code-label" title="/etc/nginx/sites-available/default">/etc/nginx/sites-available/default</div>
@@ -215,11 +197,7 @@ <h2 id="step-2-code"><a class="hash-anchor" href="#step-2-code" aria-hidden="tru
 </li><li data-prefix="9"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
 </li></ol>
 </code></pre>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="step-3-callouts"><a class="hash-anchor" href="#step-3-callouts" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-3-callouts" onclick="navigator.clipboard.writeText(this.href);">Step 3 — Callouts</a></h2>
-</summary>
 <p>Here is a note, a warning, some info and a draft note:</p>
 <div class="callout note">
 <p><strong>Note:</strong> Use this for notes on a publication.</p>
@@ -240,11 +218,7 @@ <h2 id="step-3-callouts"><a class="hash-anchor" href="#step-3-callouts" aria-hid
 </div>
 <p>You can also mention users by username:</p>
 <p><a href="/users/MattIPv4">@MattIPv4</a></p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="step-4-layout"><a class="hash-anchor" href="#step-4-layout" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-4-layout" onclick="navigator.clipboard.writeText(this.href);">Step 4 — Layout</a></h2>
-</summary>
 <p>Columns allow you to customise the layout of your Markdown:</p>
 <div class="columns">
 <div class="column">
@@ -272,59 +246,36 @@ <h2 id="step-4-layout"><a class="hash-anchor" href="#step-4-layout" aria-hidden=
 <p>Pass <code>open</code> as the first argument to the summary section to do this.</p>
 <p><em>You can also pass <code>closed</code>, though this is the same as not passing anything before the summary.</em></p>
 </details>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="step-5-embeds"><a class="hash-anchor" href="#step-5-embeds" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-5-embeds" onclick="navigator.clipboard.writeText(this.href);">Step 5 — Embeds</a></h2>
-</summary>
-<details class="collapsible" open="">
-<summary>
 <h3 id="youtube"><a class="hash-anchor" href="#youtube" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#youtube" onclick="navigator.clipboard.writeText(this.href);">YouTube</a></h3>
-</summary>
 <p>Embedding a YouTube video (id, height, width):</p>
 <iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
 </iframe>
 <p><em>Both the width and height are optional, with the defaults being 480 and 270 respectively.</em><br>
 <em>The width/height set are treated as maximums – the video will scale down to fit the available space, maintaining the aspect ratio.</em></p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="wistia"><a class="hash-anchor" href="#wistia" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#wistia" onclick="navigator.clipboard.writeText(this.href);">Wistia</a></h3>
-</summary>
 <p>Embedding a Wistia video (id, height, width):</p>
 <iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
 </iframe>
 <p><em>As with the YouTube embed, both the width and height are optional and have the same defaults.</em><br>
 <em>The same behaviour applies to the width/height set, with responsive scaling.</em></p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="vimeo"><a class="hash-anchor" href="#vimeo" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#vimeo" onclick="navigator.clipboard.writeText(this.href);">Vimeo</a></h3>
-</summary>
 <p>Embedding a Vimeo video (url, height, width):</p>
 <iframe src="https://player.vimeo.com/video/329272793" class="vimeo" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://player.vimeo.com/video/329272793" target="_blank">View Vimeo video</a>
 </iframe>
 <p><em>As with the YouTube embed, both the width and height are optional and have the same defaults.</em><br>
 <em>The same behaviour applies to the width/height set, with responsive scaling.</em></p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="dns"><a class="hash-anchor" href="#dns" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#dns" onclick="navigator.clipboard.writeText(this.href);">DNS</a></h3>
-</summary>
 <p>Embedding DNS record lookups (hostname, record types…):</p>
 <div data-dns-tool-embed data-dns-domain="digitalocean.com" data-dns-types="A,AAAA">
     <a href="https://www.digitalocean.com/community/tools/dns?domain=digitalocean.com" target="_blank">
         Perform a full DNS lookup for digitalocean.com
     </a>
 </div>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="glob"><a class="hash-anchor" href="#glob" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#glob" onclick="navigator.clipboard.writeText(this.href);">Glob</a></h3>
-</summary>
 <p>Demonstrating how glob matching works (pattern, tests…):</p>
 <div data-glob-tool-embed data-glob-string="**/*.js" data-glob-test-0="a/b.js" data-glob-test-1="c/d.js" data-glob-test-2="e.jsx" data-glob-test-3="f.md">
     <a href="https://www.digitalocean.com/community/tools/glob?glob=**%2F*.js&tests=a%2Fb.js&tests=c%2Fd.js&tests=e.jsx&tests=f.md" target="_blank">
@@ -337,11 +288,7 @@ <h3 id="glob"><a class="hash-anchor" href="#glob" aria-hidden="true" onclick="na
         Explore <code>**/*.js</code> as a glob string in our glob testing tool
     </a>
 </div>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="codepen"><a class="hash-anchor" href="#codepen" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#codepen" onclick="navigator.clipboard.writeText(this.href);">CodePen</a></h3>
-</summary>
 <p>To provide code examples, you could embed a CodePen with a username and pen ID:</p>
 <p class="codepen" data-height="256" data-theme-id="light" data-default-tab="result" data-user="MattCowley" data-slug-hash="vwPzeX" style="height: 256px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
     <span>See the Pen <a href="https://codepen.io/MattCowley/pen/vwPzeX">vwPzeX by MattCowley</a> (<a href="https://codepen.io/MattCowley">@MattCowley</a>) on <a href='https://codepen.io'>CodePen</a>.</span>
@@ -358,11 +305,7 @@ <h3 id="codepen"><a class="hash-anchor" href="#codepen" aria-hidden="true" oncli
 </ul>
 <p>These flags can be combined in any order to create a custom CodePen embed.
 For example, <code>[codepen MattCowley vwPzeX dark css 384]</code> would create a dark mode embed that shows the CSS tab by default, with a height of 384px.</p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="glitch"><a class="hash-anchor" href="#glitch" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#glitch" onclick="navigator.clipboard.writeText(this.href);">Glitch</a></h3>
-</summary>
 <p>Alternatively, you may want to embed a code example from Glitch with a project slug:</p>
 <div class="glitch-embed-wrap" style="height: 256px; width: 100%;">
     <iframe src="https://glitch.com/embed/#!/embed/hello-digitalocean?previewSize=100" title="hello-digitalocean on Glitch" allow="geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen" allowFullScreen style="height: 100%; width: 100%; border: 0;">
@@ -378,11 +321,7 @@ <h3 id="glitch"><a class="hash-anchor" href="#glitch" aria-hidden="true" onclick
 <li>Pass <code>highlights=...</code> to set lines to highlight when showing the project code (e.g. <code>[glitch hello-digitalocean code path=src/app.jsx highlights=15,25]</code>)</li>
 <li>Pass <code>noattr</code> to remove the author attribution from the embed (e.g. <code>[glitch hello-digitalocean noattr]</code>)</li>
 </ul>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="can-i-use"><a class="hash-anchor" href="#can-i-use" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#can-i-use" onclick="navigator.clipboard.writeText(this.href);">Can I Use</a></h3>
-</summary>
 <p>If you’re writing web-related content, you may want to embed a Can I Use table for a feature:</p>
 <p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1" data-accessible-colours="false">
     <picture>
@@ -397,21 +336,13 @@ <h3 id="can-i-use"><a class="hash-anchor" href="#can-i-use" aria-hidden="true" o
 <li>Pass <code>future=...</code> to set how many future browser versions are listed (0-3) (e.g. <code>[caniuse css-grid future=3]</code>)</li>
 <li>Pass <code>accessible</code> to switch to the accessible color scheme by default (e.g. <code>[caniuse css-grid accessible]</code>)</li>
 </ul>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="asciinema"><a class="hash-anchor" href="#asciinema" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#asciinema" onclick="navigator.clipboard.writeText(this.href);">Asciinema</a></h3>
-</summary>
 <p>Embedding a terminal recording from Asciinema (id, cols, rows):</p>
 <script src="https://asciinema.org/a/239367.js" id="asciicast-239367" async data-cols="50" data-rows="20"></script>
 <noscript>
     <a href="https://asciinema.org/a/239367" target="_blank">View asciinema recording</a>
 </noscript>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="twitter"><a class="hash-anchor" href="#twitter" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#twitter" onclick="navigator.clipboard.writeText(this.href);">Twitter</a></h3>
-</summary>
 <p>You can also embed a tweet from Twitter by passing the URL for the tweet:</p>
 <div class="twitter">
     <blockquote class="twitter-tweet" data-dnt="true" data-width="550" data-theme="light">
@@ -424,11 +355,7 @@ <h3 id="twitter"><a class="hash-anchor" href="#twitter" aria-hidden="true" oncli
 <li>Pass <code>light</code> or <code>dark</code> to switch the theme of the embed (e.g. <code>[twitter https://twitter.com/MattIPv4/status/1576415168426573825 dark]</code>)</li>
 <li>Pass <code>left</code>, <code>center</code>, or <code>right</code> to align the embed (e.g. <code>[twitter https://twitter.com/MattIPv4/status/1576415168426573825 left]</code>)</li>
 </ul>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="instagram"><a class="hash-anchor" href="#instagram" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#instagram" onclick="navigator.clipboard.writeText(this.href);">Instagram</a></h3>
-</summary>
 <p>You can also embed a post from Instagram by passing the URL for the post:</p>
 <div class="instagram">
     <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/CkQuv3_LRgS" data-instgrm-version="14">
@@ -441,23 +368,15 @@ <h3 id="instagram"><a class="hash-anchor" href="#instagram" aria-hidden="true" o
 <li>Add <code>left</code>, <code>center</code>, or <code>right</code> to set the alignment of the embed (default is <code>left</code>).</li>
 <li>Pass <code>caption</code> to include caption under the post (e.g. <code>[instagram https://www.instagram.com/p/CkQuv3_LRgS caption]</code>)</li>
 </ul>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="slideshow"><a class="hash-anchor" href="#slideshow" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#slideshow" onclick="navigator.clipboard.writeText(this.href);">Slideshow</a></h3>
-</summary>
 <p>You can also embed Slideshow (url1, url2, …urls, height, width):</p>
 <div class="slideshow" style="height: 270px; width: 480px;">
 <div class="action left" onclick="(() => this.parentNode.getElementsByClassName('slides')[0].scrollLeft -= 480)()">&#8249;</div>
 <div class="action right" onclick="(() => this.parentNode.getElementsByClassName('slides')[0].scrollLeft += 480)()">&#8250;</div>
 <div class="slides"><img src="https://assets.digitalocean.com/banners/python.png" alt="Slide #1" /><img src="https://assets.digitalocean.com/banners/javascript.png" alt="Slide #2" /><img src="https://assets.digitalocean.com/banners/nodejs.png" alt="Slide #3" /></div>
 </div>
 <p><em>Both the width and height are optional, with the defaults being 480 and 270 respectively.</em></p>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h3 id="image-compare"><a class="hash-anchor" href="#image-compare" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#image-compare" onclick="navigator.clipboard.writeText(this.href);">Image compare</a></h3>
-</summary>
 <p>Compare two images side by side (url1, url2, height, width):</p>
 <div class="image-compare" style="--value:50%; height: 270px; width: 480px;">
     <img class="image-left" src="https://assets.digitalocean.com/banners/python.png" alt="Image left"/>
@@ -466,26 +385,15 @@ <h3 id="image-compare"><a class="hash-anchor" href="#image-compare" aria-hidden=
     <svg class="control-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.3 273.6c4.9-4.5 7.7-10.9 7.7-17.6s-2.8-13-7.7-17.6l-112-104c-7-6.5-17.2-8.2-25.9-4.4s-14.4 12.5-14.4 22l0 56-192 0 0-56c0-9.5-5.7-18.2-14.4-22s-18.9-2.1-25.9 4.4l-112 104C2.8 243 0 249.3 0 256s2.8 13 7.7 17.6l112 104c7 6.5 17.2 8.2 25.9 4.4s14.4-12.5 14.4-22l0-56 192 0 0 56c0 9.5 5.7 18.2 14.4 22s18.9 2.1 25.9-4.4l112-104z"/></svg>
 </div>
 <p><em>Both the width and height are optional, with the defaults being 480 and 270 respectively.</em></p>
-</details>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="step-6-tutorials"><a class="hash-anchor" href="#step-6-tutorials" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-6-tutorials" onclick="navigator.clipboard.writeText(this.href);">Step 6 — Tutorials</a></h2>
-</summary>
 <p>Certain features of our Markdown engine are designed specifically for our tutorial content-types.
 These may not be enabled in all contexts in the DigitalOcean community, but are enabled by default in the do-markdownit plugin.</p>
 <p><button data-js="rsvp-button" data-form-id="1234" disabled="disabled" class="rsvp">Marketo RSVP buttons use the `rsvp_button` flag</button></p>
 <button data-js="terminal" data-docker-image="ubuntu:focal" disabled="disabled" class="terminal">
     Terminal buttons are behind the `terminal` flag
 </button>
-</details>
-<details class="collapsible" open="">
-<summary>
 <h2 id="conclusion"><a class="hash-anchor" href="#conclusion" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#conclusion" onclick="navigator.clipboard.writeText(this.href);">Conclusion</a></h2>
-</summary>
 <p>Please refer to our <a href="https://do.co/style">writing guidelines</a> for more detailed explanations on our style and formatting.</p>
-</details>
-</details>
 <script async defer src="https://do-community.github.io/glob-tool-embed/bundle.js" type="text/javascript" onload="window.GlobToolEmbeds()"></script>
 <script async defer src="https://do-community.github.io/dns-tool-embed/bundle.js" type="text/javascript" onload="window.DNSToolEmbeds()"></script>
 <script async defer src="https://static.codepen.io/assets/embed/ei.js" type="text/javascript"></script>