Merge pull request #61 from panoply/dev

Dev

docs/.eleventy.js

@@ -83,6 +83,7 @@ function getEstheticRules (ruleOptions) {
     markup: {
       attributeCasing: 'preserve',
       attributeSort: false,
+      commentDelimiters: 'preserve',
       commentNewline: false,
       commentIndent: true,
       delimiterTerminus: 'inline',
@@ -259,9 +260,7 @@ function getCodeBlockInput (raw) {
  */
 function has (prop) {
 
-  if (typeof rules === 'object' && prop in rules) {
-    return true
-  }
+  if (typeof rules === 'object' && prop in rules) return true
 
   return false;
 
@@ -359,7 +358,7 @@ function highlightCode(md, raw, language) {
         code = papyrus.static(raw, {
           language,
           editor: false,
-          showSpace: true,
+          showSpace: false,
           trimEnd: true,
           trimStart: true
         });
@@ -442,7 +441,9 @@ function getWrapFractionRuleExample (estheticRules, papyrusValue, rawInput) {
     <div class="col-6">
       <div class="row jc-center ai-center px-2">
         <div class="col-5">
-          <legend class="fs-xs mb-0"     aria-label="Adjustments are disabled as we showcasing the default behaviour"
+          <legend
+            class="fs-xs mb-0"
+            aria-label="Adjustments are disabled as we showcasing the default behaviour"
             data-tooltip="top">Wrap Fraction</legend>
           <input
             type="range"
@@ -526,7 +527,7 @@ function getWrapRuleExample (estheticRules, papyrusValue, rawInput) {
   /** @type {papyrus.CreateOptions} */
   const papyrusOptions = merge(papyrusValue, {
     editor: false,
-    showSpace: true,
+    showSpace: false,
     addAttrs: {
       pre: [
         'data-demo-target="input"'
@@ -611,7 +612,8 @@ function getRuleDemo (estheticRules, papyrusValue, inputValue, rawInput) {
   /** @type {papyrus.CreateOptions} */
   const papyrusOptions = merge(papyrusValue, {
     editor: false,
-    showSpace: true,
+    showSpace: false,
+    showTab: false,
     addAttrs: {
       pre: [
         'data-demo-target="output"'
@@ -753,14 +755,19 @@ function getRuleShowcase (md, inputValue, language) {
               class="tab"
               data-dropdown-target="button"
               aria-label="Choose another code sample"
+              data-action="dropdown#toggle"
               data-tooltip="top">
-              Samples
+              Preset (default)
             </button>
-            <div data-dropdown-target="collapse" class="dropdown-list">
-              <ul>
-                <li></li>
-              </ul>
-            </div>
+
+            <ul data-dropdown-target="collapse">
+              <li>default</li>
+              <li>recommended</li>
+              <li>warrington</li>
+              <li>strict</li>
+              <li>prettier</li>
+            </ul>
+
           </div>
           <button
             type="button"
@@ -816,7 +823,10 @@ function codeblocks(md) {
 
       } catch (e) {
 
-        throw new Error('Invalid JSON in in the json:rules code block')
+
+        throw new Error(
+          'Invalid JSON in in the json:rules code block\n\n' + json
+        )
 
       }
 
@@ -844,6 +854,7 @@ function codeblocks(md) {
         class="rule-example"
         data-controller="demo"
         data-demo-mode-value="${mode}"
+        data-demo-preset-value="default"
         data-demo-rules-value="${rulesValue}"
         data-demo-rules-original-value="${rulesValue}"
         data-demo-language-value="${language}"
@@ -1013,9 +1024,9 @@ module.exports = eleventy(function (config) {
       collapseWhitespace: true,
       decodeEntities: true,
       html5: true,
-      removeAttributeQuotes: true,
+      removeAttributeQuotes: false,
       removeComments: true,
-      removeOptionalTags: true,
+      removeOptionalTags: false,
       sortAttributes: true,
       sortClassName: true
     });

docs/package.json

@@ -16,7 +16,7 @@
     "tsup:watch": "tsup --watch",
     "tsup:build": "tsup --minify",
     "scss:build": "sass ./src/sass/stylesheet.scss public/style.css --no-source-map",
-    "scss:watch": "sass --watch src/sass/stylesheet.scss public/style.css",
+    "scss:watch": "sass --watch src/sass/stylesheet.scss public/style.css --quiet",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "eslintConfig": {
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@brixtol/bootstrap": "^1.6.0",
-    "@hotwired/stimulus": "^3.2.1",
+    "@hotwired/stimulus": "^3.2.2",
     "esthetic": "link:..",
     "json-parse-better-errors": "^1.0.2",
     "lines-and-columns": "^2.0.3",
@@ -58,23 +58,23 @@
     "@panoply/11ty": "^0.2.0",
     "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
     "@types/browser-sync": "^2.27.0",
-    "@types/markdown-it": "^12.2.3",
-    "autoprefixer": "^10.4.14",
+    "@types/markdown-it": "^13.0.0",
+    "autoprefixer": "^10.4.15",
     "concurrently": "^8.2.0",
     "cssnano": "^6.0.1",
-    "eleventy-plugin-svg-sprite": "^2.4.0",
-    "esbuild": "^0.18.17",
-    "eslint": "^8.46.0",
+    "eleventy-plugin-svg-sprite": "^2.4.2",
+    "esbuild": "^0.19.1",
+    "eslint": "^8.47.0",
     "language-literals": "^0.0.2",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-container": "^3.0.0",
-    "netlify-cli": "^15.10.0",
+    "netlify-cli": "^16.0.2",
     "postcss": "^8.4.27",
     "postcss-cli": "^10.1.0",
-    "prettier": "^3.0.0",
-    "sass": "^1.64.2",
-    "tsup": "^7.1.0",
+    "prettier": "^3.0.1",
+    "sass": "^1.65.1",
+    "tsup": "^7.2.0",
     "typescript": "^5.1.6"
   }
 }