Deploy to GitHub pages

derlin · Mar 10, 2024 · d31e690 · d31e690
commit d31e690
Show file tree

Hide file tree

Showing 13 changed files with 181 additions and 0 deletions.
diff --git a/bitdowntoc.js b/bitdowntoc.js
diff --git a/bitdowntoc.js.map b/bitdowntoc.js.map
diff --git a/favicon/about.txt b/favicon/about.txt
@@ -0,0 +1,7 @@
+https://favicon.io/favicon-generator/
+This favicon was generated using the following font:
+
+- Font Title: Langar
+- Font Author: Copyright 2016 The Langar Project Authors (https://github.com/typeland/Langar)
+- Font Source: http://fonts.gstatic.com/s/langar/v14/kJEyBukW7AIlgjGVrTVZ99sqrQ.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL)
diff --git a/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png
diff --git a/favicon/android-chrome-512x512.png b/favicon/android-chrome-512x512.png
diff --git a/favicon/apple-touch-icon.png b/favicon/apple-touch-icon.png
diff --git a/favicon/favicon-16x16.png b/favicon/favicon-16x16.png
diff --git a/favicon/favicon-32x32.png b/favicon/favicon-32x32.png
diff --git a/favicon/favicon.ico b/favicon/favicon.ico
diff --git a/favicon/site.webmanifest b/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/index.html b/index.html
@@ -0,0 +1,169 @@
+<html>
+<head>
+    <title>Generate Table of Contents (TOC) for Markdown Online</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+    <link rel="manifest" href="favicon/site.webmanifest">
+    <!-- Primary Meta Tags -->
+    <meta name="robots" content="index, follow">
+    <meta name="title" content="Add a Table of Contents (TOC) to your Markdown Online">
+    <meta name="description" content="A universal Markdown TOC generator with presets for GitHub, BitBucket Server, Gitlab, dev.to, and more! Open-source, free, no trackers.">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://derlin.github.io/bitdowntoc/">
+    <meta property="og:title" content="Add a Table of Contents (TOC) to your Markdown Online">
+    <meta property="og:description" content="A universal Markdown TOC generator with presets for GitHub, BitBucket Server, Gitlab, dev.to, and more! Open-source, free, no trackers.">
+    <meta property="og:image" content="https://derlin.github.io/bitdowntoc/og-bitdowntoc.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://derlin.github.io/bitdowntoc/">
+    <meta property="twitter:title" content="Add a Table of Contents (TOC) to your Markdown Online">
+    <meta property="twitter:description" content="A universal Markdown TOC generator with presets for GitHub, BitBucket Server, Gitlab, dev.to, and more! Open-source, free, no trackers.">
+    <meta property="twitter:image" content="https://derlin.github.io/bitdowntoc/og-bitdowntoc.png">
+    <!-- css -->
+    <link rel="stylesheet" type="text/css" href="index.min.css"/>
+    <script type="text/javascript">
+    if(localStorage.getItem("dark")){ // avoid flashes onload using dark theme
+      document.getElementsByTagName('html')[0].classList.add("dark");
+    }
+    </script>
+</head>
+<body>
+
+<div id="toplinks">
+    <span class="svg-icon-holder" id="btn-toggle-theme">
+        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path
+                d="m271.102 408.674c-10.759 2.896-21.518 4.364-31.976 4.364-67.78 0-122.924-55.143-122.924-122.923 0-20.075 4.751-39.286 14.123-57.099 2.776-5.277 2.163-11.697-1.562-16.354-3.725-4.656-9.854-6.666-15.612-5.114-66.622 17.93-113.151 78.596-113.151 147.528 0 84.323 68.602 152.924 152.924 152.924 56.927 0 108.791-31.366 135.352-81.858 2.776-5.277 2.163-11.697-1.562-16.354-3.726-4.656-9.853-6.664-15.612-5.114zm-118.178 73.326c-67.78 0-122.924-55.144-122.924-122.924 0-44.253 23.869-84.269 60.772-105.922-3.018 12.074-4.57 24.51-4.57 36.961 0 84.322 68.602 152.923 152.924 152.923 1.191 0 2.386-.015 3.582-.045-22.917 24.588-55.187 39.007-89.784 39.007z"/><path
+                d="m318.096 295.712 38.904-11.849 38.902 11.85c1.442.439 2.913.652 4.369.652 4.621 0 9.086-2.141 11.97-5.96l24.509-32.445 38.422-13.301c5.938-2.056 9.965-7.595 10.09-13.878l.804-40.658 23.242-33.367c3.589-5.152 3.589-11.995 0-17.147l-23.242-33.365-.803-40.657c-.124-6.283-4.151-11.823-10.09-13.878l-38.422-13.302-24.507-32.447c-3.794-5.022-10.32-7.143-16.34-5.308l-38.904 11.85-38.901-11.85c-6.022-1.834-12.547.286-16.34 5.308l-24.509 32.445-38.422 13.301c-5.938 2.056-9.965 7.595-10.09 13.878l-.804 40.658-23.242 33.367c-3.589 5.152-3.589 11.995 0 17.147l23.242 33.364.803 40.658c.124 6.283 4.151 11.823 10.09 13.878l38.422 13.302 24.508 32.446c3.794 5.022 10.318 7.142 16.339 5.308zm-19.66-59.476c-1.793-2.374-4.251-4.161-7.062-5.134l-32.85-11.373-.686-34.747c-.059-2.964-.994-5.845-2.689-8.278l-19.868-28.522 19.869-28.524c1.695-2.433 2.63-5.313 2.689-8.277l.687-34.748 32.85-11.372c2.811-.973 5.27-2.76 7.062-5.134l20.943-27.725 33.249 10.128c2.85.868 5.893.868 8.742 0l33.25-10.128 20.943 27.726c1.793 2.374 4.251 4.161 7.062 5.134l32.85 11.373.686 34.747c.059 2.964.994 5.845 2.689 8.278l19.869 28.522-19.869 28.524c-1.695 2.433-2.63 5.313-2.689 8.277l-.687 34.747-32.85 11.372c-2.811.973-5.27 2.76-7.062 5.134l-20.943 27.725-33.249-10.128c-1.425-.434-2.898-.651-4.371-.651s-2.946.217-4.371.651l-33.25 10.127z"/><path
+                d="m437 148.183c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80zm-130 0c0-27.57 22.43-50 50-50s50 22.43 50 50-22.43 50-50 50-50-22.43-50-50z"/><path
+                d="m467.606 325.394c-5.857-5.858-15.355-5.858-21.213 0l-40 40c-5.858 5.858-5.858 15.355 0 21.213 5.857 5.858 15.355 5.858 21.213 0l12.891-12.891c-8.444 49.49-51.636 87.284-103.497 87.284h-20c-8.284 0-15 6.716-15 15s6.716 15 15 15h20c69.254 0 126.484-52.42 134.124-119.663l15.27 15.27c2.928 2.929 6.767 4.393 10.606 4.393s7.678-1.464 10.606-4.394c5.858-5.858 5.858-15.355 0-21.213z"/><path
+                d="m44.394 186.606c2.928 2.93 6.767 4.394 10.606 4.394s7.678-1.464 10.606-4.394l40-40c5.858-5.858 5.858-15.355 0-21.213-5.857-5.858-15.355-5.858-21.213 0l-12.891 12.891c8.445-49.49 51.637-87.284 103.498-87.284h20c8.284 0 15-6.716 15-15s-6.716-15-15-15h-20c-69.254 0-126.484 52.42-134.124 119.663l-15.27-15.27c-5.857-5.858-15.355-5.858-21.213 0s-5.858 15.355 0 21.213z"/></g></svg>
+        <!--    <svg viewBox="0 0 511 511" xmlns="http://www.w3.org/2000/svg"><g><path d="m255.5 89.833c91.073 0 165.167 74.094 165.167 165.167 0 2.663-.064 5.36-.191 8.018l14.982.717c.139-2.895.209-5.833.209-8.734 0-99.345-80.822-180.167-180.167-180.167-3.35 0-6.743.094-10.084.278l.827 14.977c3.067-.17 6.181-.256 9.257-.256z"/><path d="m92.818 226.294-14.774-2.59c-.904 5.158-1.59 10.425-2.04 15.653l14.945 1.285c.412-4.793 1.041-9.621 1.869-14.348z"/><path d="m436.075 276.906c-28.556 25.473-57.172 47.064-96.667 51.645-42.819 4.966-86.3-10.222-116.768-40.69-30.427-30.427-45.733-73.985-40.69-116.768 4.661-39.539 26.137-68.074 51.644-96.667-29.849 7.86-58.331 16.2-83.757 34.634-33.202 24.071-57.656 59.376-68.322 98.99l14.484 3.9c13.235-49.155 48.545-89.192 94.639-108.888-39.226 61.424-30.046 144.023 21.412 195.39 51.47 51.379 133.906 60.692 195.409 21.399-31.223 73.255-113.344 114.388-190.719 95.707-73.205-17.674-126.407-85.264-126.407-160.558h-15c0 98.096 82.112 180.174 180.167 180.166 48.13-.004 95.065-19.761 128.755-54.114 28.941-29.511 41.562-65.19 51.82-104.146z"/><path d="m450.5 247.5h60v15h-60z"/><path d="m384.599 88.4h60v15.001h-60z" transform="matrix(.707 -.707 .707 .707 53.621 321.255)"/><path d="m407.099 382.5h15.001v60h-15.001z" transform="matrix(.707 -.707 .707 .707 -170.248 413.991)"/><path d="m248 0h15v60h-15z"/><path d="m248 451h15v60h-15z"/><path d="m61 435.501h-15v15h-15v15h15v15h15v-15h15v-15h-15z"/><path d="m91 75h15v-15h15v-15h-15v-15h-15v15h-15v15h15z"/><path d="m45.5 262.5v-15h-15v-15h-15v15h-15v15h15v15h15v-15z"/><path d="m75.333 405h15v15h-15z"/><path d="m31 90.402h15v15h-15z"/></g></svg>-->
+    </span>
+    <span class="svg-icon-holder" id="btn-show-modal">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path
+                d="M13.25 7c0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25 1.25.56 1.25 1.25zm10.75 5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-2 0c0-5.514-4.486-10-10-10s-10 4.486-10 10 4.486 10 10 10 10-4.486 10-10zm-13-2v2h2v6h2v-8h-4z"/></svg>
+    </span>
+    <a class="svg-icon-holder" id="github-link" href="https://github.com/derlin/bitdowntoc" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 6c-3.313 0-6 2.686-6 6 0 2.651 1.719 4.9 4.104 5.693.3.056.396-.13.396-.289v-1.117c-1.669.363-2.017-.707-2.017-.707-.272-.693-.666-.878-.666-.878-.544-.373.041-.365.041-.365.603.042.92.619.92.619.535.917 1.403.652 1.746.499.054-.388.209-.652.381-.802-1.333-.152-2.733-.667-2.733-2.965 0-.655.234-1.19.618-1.61-.062-.153-.268-.764.058-1.59 0 0 .504-.161 1.65.615.479-.133.992-.199 1.502-.202.51.002 1.023.069 1.503.202 1.146-.776 1.648-.615 1.648-.615.327.826.121 1.437.06 1.588.385.42.617.955.617 1.61 0 2.305-1.404 2.812-2.74 2.96.216.186.412.551.412 1.111v1.646c0 .16.096.347.4.288 2.383-.793 4.1-3.041 4.1-5.691 0-3.314-2.687-6-6-6z"/>
+        </svg>
+    </a>
+</div>
+
+<h1>Markdown TOC generator</h1>
+<p>This page uses <a href="https://github.com/derlin/bitdowntoc">BitDownToc</a> to insert Table of Contents (TOC) in your markdown.</p>
+
+<div id="select-profile">Preset:</div>
+<div id="buttons-wrapper">
+    <button id="btn-generate" class="fill">generate</button>
+    <button id="btn-copy">copy</button>
+    <button id="btn-toggle-options">options</button>
+</div>
+
+
+<div id="options-wrapper">
+    <div id="div-reveal-options" class="hide">
+        <div class="content">
+            <div id="options"></div>
+            <div class="buttons" style="text-align: right;">
+                <button id="btn-store-options" class="small secondary">Save</button>
+                <button id="btn-reset-options" class="small secondary">Reset defaults</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div>
+    <div class="column">
+        <div class="textarea-head">paste markdown here</div>
+        <textarea id="md" class="ph-no-capture">
+# Paste Your Document In Here
+
+[TOC]
+
+## And a table of contents
+
+will be generated
+
+## On   the right
+
+side of this page.
+
+## Use the [TOC]
+
+placeholder to control where the TOC will appear
+        </textarea>
+    </div>
+    <div class="column">
+        <div class="textarea-head">view markdown with TOC here</div>
+        <textarea id="toc" class="ph-no-capture"></textarea>
+    </div>
+</div>
+
+<footer>
+    Made with ❤ by <a href="https://derlin.ch">derlin</a>
+</footer>
+
+<div id="about-modal" class="modal">
+    <div class="modal-content">
+        <span id="btn-close-modal" class="close">&times;</span>
+        <p>BitDownToc comes with pre-defined profiles. The important options for each are:
+        </p>
+        <ul>
+            <li><span class="hl">Generic</span> → generate anchors (.e.g <span class="hl">BitBucket Server</span></li>
+            <li><span class="hl">GitLab</span> → concat spaces, do not generate anchors</li>
+            <li><span class="hl">GitHub</span> → do not concat spaces, do not generate anchors</li>
+            <li><span class="hl">dev.to</span> → concat spaces, do not generate anchors, use
+                <a href="https://developers.forem.com/frontend/liquid-tags">liquid tags</a> for comments
+            </li>
+            <li>(<span class="hl">hashnode</span>) → concat spaces, do not generate anchors, anchors prefix
+                set to "heading-"
+            </li>
+        </ul>
+        <p class="small">
+            If your markdown renderer is not on the list, turn on <span class="hl">generate anchors</span>
+            (Generic profile) to generate HTML elements such as <code>&lt;a name="..."&gt;</code> at the top
+            of each heading to support navigation. This trick works anywhere, as long as HTML is supported.
+        </p>
+        <p>
+            Use the <span class="hl mono">[TOC]</span> marker to control where the TOC will appear.
+            Any header(s) above it won't be part of it.
+        </p>
+        <p>
+            BitDownToc adds <span class="hl mono">comments</span> by default, so you can update the TOC anytime with this tool.
+        </p>
+        <hr class="hl">
+        <p>
+            BitDownToc is free and open-source.
+            It also works in the <u>terminal</u>! To find out more, visit the project repository.
+        </p>
+        <p style="text-align: center; font-size: 1.4em" class="mono">
+            ⇝ <a href="https://github.com/derlin/bitdowntoc" target="_blank">https://github.com/derlin/bitdowntoc</a> ⇜
+        </p>
+        <p class="small italic" style="margin-top: 2em; color: #8a969c">
+            The web version uses the open-source tracker
+            <a href="posthog.com/" style="color: #8a969c">posthog</a> to get insights about usage.
+            The text you enter and your IP are excluded from tracking.</p>
+    </div>
+</div>
+
+<script type="text/javascript" src="bitdowntoc.js"></script>
+<script>
+if (localStorage.getItem("me") != "derlin") {
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+    posthog.init('phc_u7TIGCK3KthoIaT6XXbAPbG6PitcgEVwqhQuiSwKLHp',{api_host:'https://app.posthog.com'})
+    document.getElementById("select-profile").addEventListener("change", function(e) {
+        posthog.capture('select-profile', {profile: e.target.value});
+    });
+}
+</script>
+
+</body>
+</html>
diff --git a/index.min.css b/index.min.css
diff --git a/og-bitdowntoc.png b/og-bitdowntoc.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}