Webpack init

.eslintignore

@@ -0,0 +1,9 @@
+vendor/**/*.js
+vendor/**/*.js
+public/**/*.js
+public/**/*.js
+themes/default/bundles/*.js
+_resources/**/*.js
+_resources/**/*.js
+**/node_modules/*
+webpack.config.js

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb-base',
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-new': 0,
+    'max-len': 0,
+    'no-console': 0,
+  },
+};

.nvmrc

@@ -0,0 +1 @@
+20.10

.stylelintignore

@@ -0,0 +1,8 @@
+vendor/**/*.css
+vendor/**/*.scss
+public/**/*.css
+public/**/*.scss
+node_modules/**/*.scss
+themes/default/bundles/*.css
+_resources/**/*.css
+_resources/**/*.scss

client/src/js/app.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const adminToolbar = document.getElementById('admin-toolbar');
+
+  if (!adminToolbar.classList.contains('admin-toolbar-collapsed')) {
+    document.body.classList.add('has-admin-toolbar');
+  }
+
+  const adminToolbarToggle = document.getElementById('admin-toolbar-toggle');
+
+  adminToolbarToggle.addEventListener('click', () => {
+    if (adminToolbar.classList.contains('admin-toolbar-collapsed')) {
+      adminToolbar.classList.remove('admin-toolbar-collapsed');
+      document.body.classList.add('has-admin-toolbar');
+    } else {
+      adminToolbar.classList.add('admin-toolbar-collapsed');
+      document.body.classList.remove('has-admin-toolbar');
+    }
+  });
+});

client/src/js/flush-cache-button.js

@@ -0,0 +1,17 @@
+const selector = '[data-flush-cache-button]';
+const button = document.querySelector(selector);
+
+button?.addEventListener('click', () => {
+  const flushURL = new URL(window.location.href);
+
+  flushURL.searchParams.set('AdminToolbarDisabled', '1');
+  flushURL.searchParams.set('flush', '1');
+
+  button.classList.remove('font-icon-back-in-time');
+  button.classList.add('font-icon-spinner');
+
+  fetch(flushURL.toString())
+    .then(() => {
+      window.location.reload();
+    });
+});

client/src/js/queries-button.js

@@ -0,0 +1,55 @@
+const configKey = '[data-queries-toggle]';
+const button = document.querySelector('[data-queries-button]');
+
+const isToggled = localStorage.getItem(configKey) === 'true';
+
+if (isToggled) {
+  button.classList.remove('admin-toolbar-hidden');
+}
+
+const queriesURL = new URL(window.location.href);
+const dialog = document.createElement('dialog');
+
+dialog.classList.add('admin-toolbar-queries-button');
+
+queriesURL.searchParams.set('AdminToolbarDisabled', '1');
+queriesURL.searchParams.set('showqueries', 'inline');
+
+function parseResponse(text) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(text, 'text/html');
+  const timeRegex = /(\\d\\.\\d*)s/;
+  const timings = [];
+  const queries = [];
+
+  doc.querySelectorAll('p.alert.alert-warning').forEach((el) => {
+    const matches = timeRegex.exec(el.innerHTML);
+    queries.push(el.innerHTML);
+    timings.push(parseFloat(matches[1], 10));
+  });
+
+  const queryTimeMS = timings.length
+    ? (timings.reduce((prev, cur) => prev + cur, 0) * 1000).toFixed(0)
+    : 0;
+
+  button.innerHTML = `${queryTimeMS}ms (${timings.length} queries)`;
+  dialog.innerHTML = `<ul>${queries.reduce((acc, item) => `${acc}<li><code>${item}</code></li>`, '')}</ul>`;
+
+  button.addEventListener('click', () => {
+    dialog.showModal();
+  });
+
+  dialog.addEventListener('click', (e) => {
+    const rect = dialog.getBoundingClientRect();
+
+    if ((e.clientY < rect.top || e.clientY > rect.bottom) || (e.clientX < rect.left || e.clientX > rect.right)) {
+      dialog.close();
+    }
+  });
+
+  document.body.appendChild(dialog);
+}
+
+fetch(queriesURL.toString())
+  .then((res) => res.text())
+  .then(parseResponse);

client/src/js/queries-toggle.js

@@ -0,0 +1,18 @@
+const selector = '[data-queries-toggle]';
+const checkbox = document.querySelector(selector);
+
+function getState() {
+  return localStorage.getItem(selector) === 'true';
+}
+
+function setState(state) {
+  localStorage.setItem(selector, state);
+}
+
+if (checkbox && checkbox.checked) {
+  getState();
+}
+
+checkbox?.addEventListener('change', (e) => {
+  setState(e.currentTarget.checked);
+});

client/src/js/tailwind/theme-colors.js

@@ -0,0 +1,3 @@
+export const themeColors = {
+    "primary": "hsla(216, 100%, 44%, 0)",
+};

client/src/js/tailwind/theme-dimensions.js

@@ -0,0 +1,7 @@
+export const themeDimensions = {
+    'visual-xs': '160px',
+    'visual-sm': '240px',
+    'visual-md': '320px',
+    'visual-lg': '400px',
+    'visual-xl': '480px',
+};

client/src/js/tailwind/theme-safelist.js

@@ -0,0 +1,22 @@
+export const themeSafeList = [
+    'p-1',
+    'p-2',
+    'p-3',
+    'p-4',
+    'p-5',
+    'p-6',
+    'p-7',
+    'p-8',
+    'p-9',
+    'p-10',
+    'p-11',
+    'p-12',
+    'p-13',
+    'p-14',
+    'p-15',
+    'p-16',
+    'p-17',
+    'p-18',
+    'p-19',
+    'p-20',
+];

client/src/js/tailwind/theme-spacings.js

@@ -0,0 +1,23 @@
+export const themeSpacings = {
+    '0': '0',              // 0px
+    '1': '0.125rem',              // 2px
+    '2': '0.25rem',               // 4px
+    '3': '0.5rem',                // 8px
+    '4': '0.75rem',               // 12px
+    '5': '0.75rem',               // 14px
+    '6': '1rem',                  // 16px
+    '7': '1rem',                  // 18px
+    '8': '1.25rem',               // 20px
+    '9': '1.5rem',                // 24px
+    '10': '1.5rem',               // 28px
+    '11': '2rem',                 // 32px
+    '12': '2.5rem',               // 40px
+    '13': '3rem',                 // 48px
+    '14': '3.5rem',               // 56px
+    '15': '4rem',                 // 64px
+    '16': '4.5rem',               // 72px
+    '17': '5rem',                 // 80px
+    '18': '6rem',                 // 96px
+    '19': '7.5rem',               // 120px
+    '20': '10rem',                // 160px
+};

client/src/js/tailwind/theme-typography.js

@@ -0,0 +1,27 @@
+export const themeFontSizes = {
+    '1': '0.125rem',                // 2px
+    '2': '0.25rem',                 // 4px
+    '3': '0.5rem',                  // 8px
+    '4': '0.75rem',                 // 12px
+    '5': '0.75rem',                 // 14px
+    '6': '1rem',                    // 16px
+    '7': '1rem',                    // 18px
+    base: '18px',                   // 18px
+    '8': '1.25rem',                 // 20px
+    '9': '1.5rem',                  // 24px
+    '10': '1.5rem',                 // 28px
+    '11': '2rem',                   // 32px
+    '12': '2.5rem',                 // 40px
+    '13': '3rem',                   // 48px
+    '14': '3.5rem',                 // 56px
+    '15': '4rem',                   // 64px
+    '16': '4.5rem',                 // 72px
+    '17': '5rem',                   // 80px
+    '18': '6rem',                   // 96px
+    '19': ['7.5rem', '1.25em'],     // 120px
+    '20': ['10rem', {               // 160px
+        lineHeight: '1.25em',
+        letterSpacing: '0.25em',
+        fontWeight: '500',
+    }]
+};

client/src/js/timing-button.js

@@ -0,0 +1,23 @@
+const configKey = '[data-timing-toggle]';
+const button = document.querySelector('[data-timing-button]');
+const isToggled = localStorage.getItem(configKey) === 'true';
+
+if (isToggled) {
+  button.classList.remove('admin-toolbar-hidden');
+}
+
+const iframe = document.createElement('iframe');
+const startTime = new Date().getTime();
+const adminDisabledURL = new URL(window.location.href);
+
+adminDisabledURL.searchParams.set('AdminToolbarDisabled', '1');
+
+iframe.addEventListener('load', () => {
+  button.innerHTML = `${new Date().getTime() - startTime}ms`;
+  iframe.remove();
+});
+
+iframe.src = adminDisabledURL.toString();
+iframe.style.display = 'none';
+
+document.body.appendChild(iframe);

client/src/js/timing-toggle.js

@@ -0,0 +1,18 @@
+const selector = '[data-timing-toggle]';
+const checkbox = document.querySelector(selector);
+
+function getState() {
+  return localStorage.getItem(selector) === 'true';
+}
+
+function setState(state) {
+  localStorage.setItem(selector, state);
+}
+
+if (checkbox && checkbox.checked) {
+  getState();
+}
+
+checkbox?.addEventListener('change', (e) => {
+  setState(e.currentTarget.checked);
+});