Pre cleanup

README.md

@@ -60,5 +60,6 @@ You should now have all the theme files under
 
 - [ ] Static Generator: Simplify options, add Page button
 - [ ] Component blueprints and loading
+- [ ] Finish tests: Tabbing, routes
 
 This theme started as a clone of Paul Hibbitt's [Learn2 with Git Sync](https://github.com/hibbitts-design/grav-theme-learn2-git-sync)-theme, which is a customized version of the [Learn2](https://github.com/getgrav/grav-theme-learn2)-theme. As this theme decouples and supercedes much of the logic in either, it is rebranded as Scholar.

blueprints.yaml

@@ -14,6 +14,7 @@ license: MIT
 dependencies:
   - { name: grav, version: ">=1.7" }
   - { name: error, version: ">=1.6.2" }
+  - { name: swiper, version: ">=1.0.0" }
   - { name: problems, version: ">=2.0.3" }
   - { name: breadcrumbs, version: ">=1.5.1" }
   - { name: shortcode-core, version: ">=4.1.7" }

components/cv/partials/cv/listing.html.twig

@@ -22,7 +22,6 @@
             {% endif %}
             <em>
             {% if item.name is defined or item.level is defined %}
-            , 
                 {% if item.url %}<a href="{{ item.url }}">{% endif %}
                 {{ item.name ?? item.level }}
                 {% if item.url %}</a>{% endif %}

components/docs/docs.html.twig

@@ -20,7 +20,7 @@
 
 {% block javascripts %}
     {% if config.theme.toolbar.navigation and navigablePage.headings is not empty %}
-        {% do assets.addInlineJs('Scholar.drawerInit();') %}
+        {% do assets.addInlineJs('Scholar.drawerInit();', {group: 'bottom'}) %}
     {% endif %}
     {% with {
         'mode': 'field'
@@ -66,7 +66,16 @@
 </main>
 
 {% block sidebar %}
-<aside class="sidebar">
+<aside class="sidebar" aria-checked="false">
+
+    {% block mobile %}
+        {% if config.theme.toolbar.navigation %}
+            <div  mobile-menu-close role="button" tabindex="0" data-target=".sidebar" aria-label="{{ "THEME_SCHOLAR.GENERIC.OPEN"|t|capitalize }} {{ "THEME_SCHOLAR.MENU"|t }}">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path d="M 4 7 L 4 9 L 28 9 L 28 7 L 4 7 z M 4 15 L 4 17 L 28 17 L 28 15 L 4 15 z M 4 23 L 4 25 L 28 25 L 28 23 L 4 23 z"/></svg>
+            </div>
+        {% endif %}
+    {% endblock %}
+
     <header>
         <h1>
             <a href="{{ uri.rootUrl(true) }}">{{ site.title }}</a>

components/docs/partials/docs/toolbar/breadcrumbs.html.twig

@@ -2,7 +2,7 @@
     {% if config.theme.toolbar.breadcrumbs %}
     <div>
         {% for breadcrumb in breadcrumbs.get() %}
-            <a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>{% if not loop.last %} &raquo; {% endif %}
+            <a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
         {% endfor %}
     </div>
     {% endif %}

components/docs/partials/docs/toolbar/menu.html.twig

@@ -1,4 +1,13 @@
 <nav class="menu" role="navigation">
+
+{% block mobile %}
+    {% if config.theme.toolbar.navigation %}
+        <div mobile-menu-open role="button" tabindex="0" data-target="aside.sidebar" aria-label="{{ "THEME_SCHOLAR.GENERIC.OPEN"|t|capitalize }} {{ "THEME_SCHOLAR.MENU"|t }}">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path d="M 4 7 L 4 9 L 28 9 L 28 7 L 4 7 z M 4 15 L 4 17 L 28 17 L 28 15 L 4 15 z M 4 23 L 4 25 L 28 25 L 28 23 L 4 23 z"/></svg>
+        </div>
+    {% endif %}
+{% endblock %}
+
 {% block search %}
     {% if config.theme.toolbar.search and config.theme.flexsearch.enabled %}
         <form class="search" role="search">
@@ -22,4 +31,5 @@
     } %}
     {{ block('drawer', 'partials/header.html.twig') }}
 {% endwith %}
+
 </nav>

cypress.json

@@ -18,21 +18,47 @@
       "article": "/article",
       "blog": "/blog",
       "cv": "/cv",
-      "docs": "/docs"
+      "docs": "/docs/features"
     },
-    "routesBack": {
-      "index": "/",
-      "article": "/article",
-      "blog": "/blog",
-      "cv": "/cv",
-      "docs": "/docs"
+    "landmarks": {
+      "index": {
+        "body": "body",
+        "navigation-header": "header[role=\"banner\"]",
+        "main-article": "main section article",
+        "sidebar-header": "aside header",
+        "sidebar-article": "aside section article"
+      },
+      "article": {
+        "body": "body"
+      },
+      "blog": {
+        "body": "body"
+      },
+      "cv": {
+        "body": "body"
+      },
+      "docs": {
+        "body": "body",
+        "navigation-header": "header[role=\"banner\"]",
+        "main-article": "main section article",
+        "sidebar": "aside.sidebar"
+      }
+    },
+    "breakpoints": {
+      "xs": 320,
+      "sm": 576,
+      "md": 768,
+      "lg": 992,
+      "xl": 1200,
+      "xxl": 1600
     },
-    "elements": {
+    "activeElements": {
       "index": ["header[role=\"banner\"] .menu .search-button", "a"],
       "article": ["a"],
       "blog": ["a"],
       "cv": ["a"],
       "docs": ["a"]
-    }
+    },
+    "tabElements": "button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"
   }
 }

cypress/integration/accessibility/contrast.spec.js

@@ -3,12 +3,12 @@
 for (const [index, route] of Object.entries(Cypress.env("routes"))) {
   describe(`Contrast at ${index} (${route})`, () => {
     it(index + " has active elements", function() {
-      expect(Object.keys(Cypress.env("elements"))).to.include(index);
-      expect(Cypress.env("elements")[index].length).to.be.at.least(1);
+      expect(Object.keys(Cypress.env("activeElements"))).to.include(index);
+      expect(Cypress.env("activeElements")[index].length).to.be.at.least(1);
     });
     Cypress.env("styles").forEach(style => {
-      style = style.replace('.css', '');
-      style = style.charAt(0).toUpperCase() + style.slice(1)
+      style = style.replace(".css", "");
+      style = style.charAt(0).toUpperCase() + style.slice(1);
       it(style + " has sufficient contrast", function() {
         cy.visit(`${route}?theme=${style}`);
         cy.injectAxe();
@@ -17,13 +17,13 @@ for (const [index, route] of Object.entries(Cypress.env("routes"))) {
         cy.checkA11y(Cypress.env("context"), config);
       });
       if (
-        index in Cypress.env("elements") &&
-        Cypress.env("elements")[index].length > 0
+        index in Cypress.env("activeElements") &&
+        Cypress.env("activeElements")[index].length > 0
       ) {
         it(style + " has sufficient active contrast", function() {
           cy.visit(`${route}?theme=${style}`);
           cy.injectAxe();
-          Cypress.env("elements")[index].forEach(element => {
+          Cypress.env("activeElements")[index].forEach(element => {
             cy.get(element).invoke("attr", "class", "active");
           });
           const config = Cypress.env("config");

cypress/integration/accessibility/contrast/tab.spec.js

@@ -1,43 +1,31 @@
 /// <reference types="Cypress" />
 
-let focusableElements;
-let current;
+var focusableElements;
 
-describe(`Tab-behavior at ${"docs"} (${"/docs"})`, () => {
-  before(function() {
-    cy.visit("/docs/security/overview");
-    cy.get("body");
-    cy.document().then(doc => {
-      focusableElements = doc.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      // Cypress.env(
-      //   "focusableElements",
-      //   doc.querySelectorAll(
-      //     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      //   )
-      // );
+for (const [index, route] of Object.entries(Cypress.env("routes"))) {
+  describe(`Tab-behavior at ${index} ${route}`, () => {
+    before("Has tabbable elements", function() {
+      cy.visit(route);
+      cy.document().then(doc => {
+        focusableElements = doc.querySelectorAll(Cypress.env("tabElements"));
+      });
     });
-    cy.log(focusableElements);
-    // cy.log(Cypress.env("focusableElements"));
-  });
-  it(`Doesnt act like a cunt`, function() {
-    cy.log(focusableElements);
-  });
-  for (let i = 0; i < focusableElements.length; i++) {
-    it(`Element ${i}/${focusableElements.length}`, function() {
-      // state = `Element ${i}/${Cypress.env("focusableElements").length}`;
-      // cy.tab().invoke("attr", "class", "active");
-      // cy.tab().invoke("attr", "style", "background-color: rgba(255,0,0,0.25);");
-      cy.tab().then(element => {
-        cy.log(element);
-        current = element;
+    it("Assigns indices to tabbable elements", function() {
+      expect(focusableElements.length).to.be.at.least(1);
+      cy.document().then(doc => {
+        for (let i = 0; i < focusableElements.length; i++) {
+          focusableElements[i].style.backgroundColor = "rgba(255,0,0,0.25)";
+          const rect = focusableElements[i].getBoundingClientRect();
+          var tip = doc.createElement("div");
+          tip.innerHTML = i;
+          let style = `height:1.25rem;width:1.25rem;background:red;position:absolute;line-height:1;font-size:1.25rem;;top:${
+            rect.top
+          }px;left:${rect.left + rect.width}px;`;
+          tip.setAttribute("style", style);
+          doc.body.style.position = "relative";
+          doc.body.appendChild(tip);
+        }
       });
-      cy.log(current);
-
-      // cy.document().then(doc => {
-      //   new LeaderLine(current, doc.querySelectorAll("a")[3]);
-      // });
     });
-  }
-});
+  });
+}

cypress/integration/captures/breakpoints.spec.js

@@ -0,0 +1,24 @@
+/// <reference types="Cypress" />
+
+for (const [breakpoint, width] of Object.entries(Cypress.env("breakpoints"))) {
+  for (const [index, route] of Object.entries(Cypress.env("routes"))) {
+    describe(`Screenshot ${index} ${route}`, function() {
+      before(function() {
+        cy.visit(route);
+        cy.viewport(width, 800);
+      });
+      it(`Captures breakpoint: ${breakpoint}`, function() {
+        cy.get("body")
+          .first()
+          .screenshot(`${width}/${index}`, {
+            clip: {
+              x: 0,
+              y: 0,
+              width: width,
+              height: 800,
+            },
+          });
+      });
+    });
+  }
+}

cypress/integration/captures/components.spec.js

@@ -0,0 +1,28 @@
+/// <reference types="Cypress" />
+
+for (const [index, route] of Object.entries(Cypress.env("routes"))) {
+  describe(`Screenshot ${index} ${route}`, function() {
+    if (Object.keys(Cypress.env("landmarks")).includes(index)) {
+      before(function() {
+        cy.visit(route);
+        cy.viewport(1000, 800);
+      });
+      for (const [key, selector] of Object.entries(
+        Cypress.env("landmarks")[index]
+      )) {
+        it(`Captures landmark: ${key}`, function() {
+          cy.get(selector)
+            .first()
+            .screenshot(`${index}/${key}`, {
+              clip: {
+                x: 0,
+                y: 0,
+                width: 1000,
+                height: 800,
+              },
+            });
+        });
+      }
+    }
+  });
+}

cypress/support/index.js

@@ -17,7 +17,3 @@
 import "./commands";
 import "cypress-axe";
 import "cypress-plugin-tab";
-import "leader-line";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

scholar.php

@@ -40,7 +40,7 @@
  * @package  Grav\Theme
  * @author   Ole Vik <[email protected]>
  * @license  http://www.opensource.org/licenses/mit-license.html MIT License
- * @link     https://github.com/OleVik/grav-plugin-scholar
+ * @link     https://github.com/OleVik/grav-theme-scholar
  */
 class Scholar extends Theme
 {
@@ -67,8 +67,6 @@ public function onThemeInitialized()
         if ($this->config->get('themes.scholar.enabled') != true) {
             return;
         }
-        // dump(Utilities::filesFinder('user://data/persist', ['js']));
-        // dump(StaticGenerator::getSearchFiles('index'));
         $this->autoload();
         if ($this->config->get('system.debugger.enabled')) {
             $this->grav['debugger']->startTimer('scholar', 'Scholar');
@@ -218,6 +216,26 @@ public function onPagesInitialized()
      */
     public function onPageInitialized()
     {
+        if (isset($this->grav['page']->header()->theme)
+            && !empty($this->grav['page']->header()->theme)
+        ) {
+            $this->grav['config']->set(
+                'theme',
+                array_merge(
+                    $this->grav['config']->get('theme'),
+                    $this->grav['page']->header()->theme
+                )
+            );
+        }
+        if ($this->grav['config']->get('theme.debug')) {
+            $this->grav['assets']->addJs(
+                $this->grav['locator']->findResource(
+                    'theme://node_modules/@khanacademy/tota11y/dist/tota11y.min.js',
+                    false,
+                    true
+                )
+            );
+        }
         if ($this->grav['config']->get('theme.linked_data')) {
             $call = self::getInstance(
                 $this->grav['config']->get(
@@ -237,18 +255,6 @@ public function onPageInitialized()
                     $this->grav['config']
                 );
             }
-            if (isset($this->grav['page']->header()->theme)
-                && !empty($this->grav['page']->header()->theme)
-            ) {
-                $this->grav['config']->set(
-                    'theme',
-                    array_merge(
-                        $this->grav['config']->get('theme'),
-                        $this->grav['page']->header()->theme
-                    )
-                );
-            }
-            // $ld = new $call($this->grav['language']);
             $call->buildSchema($this->grav['page']);
             $this->grav['assets']->addInlineJs(
                 $call::getSchema(

scholar.yaml

@@ -28,6 +28,7 @@ api:
   router: 'Router\Router'
   source: 'Source\Source'
   taxonomy_map: 'TaxonomyMap\TaxonomyMap'
+debug: false
 flexsearch:
   enabled: true
   index: