Docs: separate pages

docs/js/commons.js

@@ -0,0 +1,17 @@
+/*
+ * Add some magic to Pico docs
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Imports
+import themeSwitcher from './src/theme-switcher.js';
+
+// Theme switcher
+themeSwitcher.addButton({
+  tag: 'BUTTON',
+  class: 'contrast switcher theme-switcher',
+  target: 'body',
+});
+themeSwitcher.init();

docs/js/commons.min.js

@@ -0,0 +1 @@
+"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var t;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){t="dark"==this.scheme?this.change.dark:this.change.light,e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))}.bind(this))}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init()}();

docs/js/customization.js

@@ -0,0 +1,14 @@
+/*
+ * Add some magic to Pico docs
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Imports
+import materialDesignColors from './src/material-design-colors.js';
+import colorPicker from './src/color-picker.js';
+
+// Color Picker
+colorPicker.colors = materialDesignColors;
+colorPicker.init();

docs/js/grid.js

@@ -0,0 +1,12 @@
+/*
+ * Add some magic to Pico docs
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Imports
+import grid from './src/grid.js';
+
+// Grid Interaction
+grid.init();

docs/js/grid.min.js

@@ -0,0 +1 @@
+"use strict";({buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=document.createElement("P");t.innerHTML='\n      <button class="secondary add">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grid button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}}).init();

docs/js/pico.docs.js

@@ -1,35 +0,0 @@
-/*
- * Add some magic to Pico docs
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
- */
-
-// Imports
-import aside from './src/aside.js';
-import themeSwitcher from './src/theme-switcher.js';
-import materialDesignColors from './src/material-design-colors.js';
-import colorPicker from './src/color-picker.js';
-import grid from './src/grid.js';
-import scrollspy from './src/scrollspy.js';
-
-// Aside initial state
-aside.init();
-
-// Theme switcher
-themeSwitcher.addButton({
-  tag: 'BUTTON',
-  class: 'contrast switcher theme-switcher',
-  target: 'body',
-});
-themeSwitcher.init();
-
-// Color Picker
-colorPicker.colors = materialDesignColors;
-colorPicker.init();
-
-// Grid Interaction
-grid.init();
-
-// Scrollspy
-scrollspy.init();

docs/js/src/aside.js

@@ -1,30 +0,0 @@
-/*
- * Aside adjustment
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
- */
-
-export const aside = {
-  // Config
-  minWidth: '992px',
-  targets: {
-    nav: 'aside nav',
-    details: 'aside details',
-  },
-
-  // Init
-  init() {
-    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
-      let nav = document.querySelector(this.targets.nav);
-      let details = document.querySelectorAll(this.targets.details);
-      if (nav.clientHeight < nav.scrollHeight) {
-        details.forEach(function (detail) {
-          detail.removeAttribute('open');
-        });
-      }
-    }
-  },
-};
-
-export default aside;

docs/js/src/grid.js

@@ -12,14 +12,14 @@ export const grid = {
       add: 'Add column',
       remove: 'Remove column',
     },
-    target: '#grids article',
+    target: '#grid article',
   },
   grid: {
     current: 4,
     min: 1,
     max: 12,
-    gridTarget: '#grids .grid',
-    codeTarget: '#grids pre code',
+    gridTarget: '#grid .grid',
+    codeTarget: '#grid pre code',
   },
 
   // Init
@@ -50,7 +50,7 @@ export const grid = {
     document.querySelector(this.buttons.target).before(buttons);
 
     // Add button listener
-    document.querySelector('#grids button.add').addEventListener(
+    document.querySelector('#grid button.add').addEventListener(
       'click',
       function () {
         this.addColumn();
@@ -59,7 +59,7 @@ export const grid = {
     );
 
     // Remove button listener
-    document.querySelector('#grids button.remove').addEventListener(
+    document.querySelector('#grid button.remove').addEventListener(
       'click',
       function () {
         this.removeColumn();

docs/js/src/scrollspy.js

@@ -1,74 +0,0 @@
-/*
- * Scrollspy
- * Automatically update nav targets based on scroll position
- *
- * Require `most-visible.js` (https://github.com/andyexeter/most-visible)
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
- */
-
-export const scrollspy = {
-  
-  // Config
-  minWidth: '992px',
-  interval: 75,
-  targets: {
-    sections: '[role="document"] > section',
-    nav: 'main aside nav',
-    active: 'active',
-  },
-
-  // Init
-  init() {
-    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
-      this.setActiveNav();
-      this.scrollStop();
-    }
-  },
-
-  // Set active section in nav
-  setActiveNav() {
-    // Get active section
-    let currentSection = mostVisible(this.targets.sections).getAttribute('id');
-
-    // Remove all active states
-    let links = document.querySelectorAll(
-      this.targets.nav + ' a.' + this.targets.active
-    );
-    links.forEach(
-      function (link) {
-        link.classList.remove(this.targets.active);
-      }.bind(this)
-    );
-
-    // Set active state
-    let activeLink = document.querySelector(
-      this.targets.nav + ' a[href="#' + currentSection + '"]'
-    );
-    activeLink.classList.add(this.targets.active);
-
-    // Open details parent
-    activeLink.closest('details').setAttribute('open', '');
-  },
-
-  // Scroll stop
-  scrollStop() {
-    let isScrolling;
-    window.addEventListener(
-      'scroll',
-      function (event) {
-        window.clearTimeout(isScrolling);
-        isScrolling = setTimeout(
-          function () {
-            this.setActiveNav();
-          }.bind(this),
-          this.interval
-        );
-      }.bind(this),
-      false
-    );
-  },
-};
-
-export default scrollspy;