Added inline comments, hooked up markdown-toc to npm start

public_html/index.html

@@ -3,6 +3,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="node_modules/markdown-it/dist/markdown-it.js"></script>
     <script src="node_modules/markdown-it-container/dist/markdown-it-container.js"></script>
+    <script src="node_modules/markdown-it-inline-comments/dist/markdown-it-inline-comments.js"></script>
     <script src="tsorter.min.js"></script>
     <script src="utilities.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.8/semantic.min.css">

public_html/package.json

@@ -4,13 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "markdown-toc -i rules.md"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "markdown-it": "^8.3.1",
     "markdown-it-container": "^2.0.0",
+    "markdown-it-inline-comments": "^1.0.1",
     "markdown-toc": "^1.1.0"
   }
 }

public_html/rules.md

@@ -2,6 +2,8 @@ Fight your way across vast expanses, conquer enemy batallions, and survive in th
 
 ::: mobileOnly
 
+<!-- toc -->
+
 - [Basic Rules](#basic-rules)
   * [Phases of a Turn](#phases-of-a-turn)
 - [Types of Cards](#types-of-cards)
@@ -28,6 +30,8 @@ Fight your way across vast expanses, conquer enemy batallions, and survive in th
   * [Pilot Idiocy](#pilot-idiocy)
   * [Duplicate Phase Skipping](#duplicate-phase-skipping)
 
+<!-- tocstop -->
+
 :::
 
 Basic Rules

public_html/styles/shared.css

@@ -59,9 +59,3 @@ footer {
 	content: "\25BC";
 }
 
-/* device only features */
-@media screen and (min-width: 768px) {
-	.mobileOnly {
-		display: none;
-	}
-}

public_html/utilities.js

@@ -1,5 +1,9 @@
 //global markdown object and configuration
 var markdown = window.markdownit()
+
+  //allow HTML-style comments
+  .use(window.markdownitInlineComments)
+
   //configure for semantic-style visibility controls
   .use(window.markdownitContainer, 'mobileOnly', {
     validate: function(params) {
@@ -8,7 +12,7 @@ var markdown = window.markdownit()
     render: function (tokens, idx) {
       if (tokens[idx].nesting === 1) {
         //opening tag
-        return '<div class="mobileOnly">';
+        return '<div class="ui mobile only grid">';
       } else {
         // closing tag
         return '</div>';