Initial commit

.editorconfig

@@ -0,0 +1,24 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{*.txt,wp-config-sample.php}]
+end_of_line = crlf

.gitignore

@@ -0,0 +1,7 @@
+/vendor/
+/node_modules/
+
+# Ignore static assets that will be compiled locally or on CI/CD pipeline
+assets/css
+assets/js/**/*.js
+!assets/js/**/*.src.js

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "search.exclude": {
+      "**/*.css": true,
+      "**/*.map": true,
+      "**/vendor": true
+    }
+}

404.php

@@ -0,0 +1,6 @@
+<?php
+$context = array(
+	'img_url' => get_template_directory_uri() . '/assets/img',
+	'home_url' => get_site_url(),
+);
+Sprig::out( '404.twig', $context );

README.md

@@ -0,0 +1,7 @@
+# nclud WordPress Theme
+
+## Code Sniffing via PHPCS
+
+Run the following in the termainl:
+	- To check all files: `./vendor/bin/phpcs -s --standard=phpcs.ruleset.xml .`
+	- To automatically fix formatting issues: `./vendor/bin/phpcbf --standard=phpcs.ruleset.xml .`

archive.php

@@ -0,0 +1,6 @@
+<?php
+$context = array(
+	'archive_items' => RH_Posts::render_archive_items_from_wp_query(),
+	'pagination'    => RH_Pagination::render_from_wp_query(),
+);
+Sprig::out( 'archive.twig', $context );

assets/js/imports/coderpad-helpers.src.js

@@ -0,0 +1,47 @@
+/**
+ * Get Google Analytics event values from a given element
+ *
+ * @return  {object}  The event values
+ */
+export function getAnalyticsEventValuesFromElement(el) {
+    var output = {
+        category: null,
+        action: null,
+        label: null,
+        value: null
+    }
+
+    if (!el.hasAttribute || !el.hasAttribute('data-ga-category')) {
+        return output;
+    }
+
+    output.category = el.getAttribute('data-ga-category');
+    output.action = el.getAttribute('data-ga-action') || el.href;
+    output.label = el.getAttribute('data-ga-label');
+    output.value = parseInt(el.getAttribute('data-ga-value')) || null;
+
+    return output;
+}
+
+/**
+ * Wait for a variable to be set in the global window scope and fire a callback
+ *
+ * @param {string} varialbe - The variable to wait for
+ * @param {function} callback - The callback to fire once the variable is found
+ * @param {int} delay - The amount of time to wait before each iteration
+ * @param {int} maxIterations - The number of maximum iterations to try and find the variable
+ */
+export function waitFor(variable, callback, delay = 240, maxIterations = 10) {
+    var iteration = 0;
+    var interval = setInterval(function () {
+        if (window[variable]) {
+            clearInterval(interval);
+            callback();
+        }
+
+        iteration++;
+        if (iteration > maxIterations) {
+            clearInterval(interval);
+        }
+    }, delay, iteration);
+}

assets/js/lite-youtube-embed.src.js

@@ -0,0 +1,130 @@
+/**
+ * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
+ * See https://github.com/paulirish/lite-youtube-embed
+ *
+ * Thx to these as the inspiration
+ *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
+ *   https://autoplay-youtube-player.glitch.me/
+ *
+ * Once built it, I also found these:
+ *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
+ *   https://github.com/Daugilas/lazyYT
+ *   https://github.com/vb/lazyframe
+ */
+ class LiteYTEmbed extends HTMLElement {
+    connectedCallback() {
+        this.videoId = this.getAttribute('videoid');
+
+        let playBtnEl = this.querySelector('.lty-playbtn');
+        // A label for the button takes priority over a [playlabel] attribute on the custom-element
+        this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
+
+        /**
+         * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
+         *
+         * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
+         *
+         * TODO: Do the sddefault->hqdefault fallback
+         *       - When doing this, apply referrerpolicy (https://github.com/ampproject/amphtml/pull/3940)
+         * TODO: Consider using webp if supported, falling back to jpg
+         */
+        if (!this.style.backgroundImage) {
+          this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
+          // Warm the connection for the poster image
+          LiteYTEmbed.addPrefetch('preload', this.posterUrl, 'image');
+
+          this.style.backgroundImage = `url("${this.posterUrl}")`;
+        }
+
+        // Set up play button, and its visually hidden label
+        if (!playBtnEl) {
+            playBtnEl = document.createElement('button');
+            playBtnEl.type = 'button';
+            playBtnEl.classList.add('lty-playbtn');
+            this.append(playBtnEl);
+        }
+        if (!playBtnEl.textContent) {
+            const playBtnLabelEl = document.createElement('span');
+            playBtnLabelEl.className = 'lyt-visually-hidden';
+            playBtnLabelEl.textContent = this.playLabel;
+            playBtnEl.append(playBtnLabelEl);
+        }
+
+        // On hover (or tap), warm up the TCP connections we're (likely) about to use.
+        this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true});
+
+        // Once the user clicks, add the real iframe and drop our play button
+        // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
+        //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
+        // this.addEventListener('click', e => this.addIframe());
+        this.addEventListener('click', function(e) {
+            e.preventDefault();
+            this.addIframe();
+        });
+    }
+
+    // // TODO: Support the the user changing the [videoid] attribute
+    // attributeChangedCallback() {
+    // }
+
+    /**
+     * Add a <link rel={preload | preconnect} ...> to the head
+     */
+    static addPrefetch(kind, url, as) {
+        const linkEl = document.createElement('link');
+        linkEl.rel = kind;
+        linkEl.href = url;
+        if (as) {
+            linkEl.as = as;
+        }
+        document.head.append(linkEl);
+    }
+
+    /**
+     * Begin pre-connecting to warm up the iframe load
+     * Since the embed's network requests load within its iframe,
+     *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
+     * So, the best we can do is warm up a few connections to origins that are in the critical path.
+     *
+     * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
+     * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
+     */
+    static warmConnections() {
+        if (LiteYTEmbed.preconnected) return;
+
+        // The iframe document and most of its subresources come right off youtube.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
+        // The botguard script is fetched off from google.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
+
+        // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
+        LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
+        LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
+
+        LiteYTEmbed.preconnected = true;
+    }
+
+    addIframe() {
+        const params = new URLSearchParams(this.getAttribute('params') || []);
+        params.append('autoplay', '1');
+
+        const iframeEl = document.createElement('iframe');
+        iframeEl.width = 560;
+        iframeEl.height = 315;
+        // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
+        iframeEl.title = this.playLabel;
+        iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
+        iframeEl.allowFullscreen = true;
+        // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
+        // https://stackoverflow.com/q/64959723/89484
+        iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`;
+        this.append(iframeEl);
+
+        this.classList.add('lyt-activated');
+
+        // Set focus for a11y
+        this.querySelector('iframe').focus();
+    }
+}
+// Register custom element
+customElements.define('lite-youtube', LiteYTEmbed);