Update resources structure

roots · Apr 16, 2024 · 26bfeaf · 26bfeaf
1 parent 9cd2e66
commit 26bfeaf
Show file tree

Hide file tree

Showing 79 changed files with 519 additions and 509 deletions.
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -4,7 +4,6 @@ build:
           - .eslintrc.js
           - .prettierrc
           - .stylelintrc
-          - bud.config.js
           - tsconfig.json
 dependencies:
   - changed-files:

diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,28 @@
-/node_modules
-/vendor
-/public
+node_modules
+vendor
+public
+dist
+dist-ssr
 .env
-.budfiles
-npm-debug.log
-yarn-error.log
+*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ $ yarn build
 
 You're ready to go!
 
-To start dev server update proxy url in `bud.config.js:37` (setProxyUrl) and run
+To start dev server and HMR just run
 
 ```shell
 $ yarn dev
@@ -85,8 +85,8 @@ themes/your-theme-name/   # → Root of your Sage based theme
 ├── resources/            # → Theme assets and templates
 │   ├── fonts/            # → Theme fonts
 │   ├── images/           # → Theme images
-│   ├── scripts/          # → Theme javascript
-│   ├── styles/           # → Theme stylesheets
+│   ├── scripts/          # → Theme scripts
+│   ├── styles/           # → Theme styles
 │   ├── svg/              # → Theme svgs
 │   └── views/            # → Theme templates
 │       ├── components/   # → Component templates

diff --git a/app/setup.php b/app/setup.php
@@ -29,7 +29,7 @@
      * Enqueue theme stylesheets
      */
     if (hmr_enabled()) {
-        $asset = 'resources/scripts/main.ts';
+        $asset = 'resources/index.js';
         $namespace = strtolower(wp_get_theme()->get('Name'));
 
         wp_enqueue_script($namespace, hmr_assets($asset), array (), null, true);
@@ -46,7 +46,7 @@
  */
 add_action('enqueue_block_editor_assets', function (): void {
     if (hmr_enabled()) {
-        $asset = 'resources/scripts/editor.ts';
+        $asset = 'resources/scripts/editor.js';
         $namespace = strtolower(wp_get_theme()->get('Name'));
 
         wp_enqueue_script($namespace, hmr_assets($asset), array (), null, true);

diff --git a/jsconfig.json b/jsconfig.json
diff --git a/resources/fonts/Roboto/Roboto-Bold.woff b/resources/fonts/Roboto/Roboto-Bold.woff
diff --git a/resources/fonts/Roboto/Roboto-Bold.woff2 b/resources/fonts/Roboto/Roboto-Bold.woff2
diff --git a/resources/fonts/Roboto/Roboto-Light.woff b/resources/fonts/Roboto/Roboto-Light.woff
diff --git a/resources/fonts/Roboto/Roboto-Light.woff2 b/resources/fonts/Roboto/Roboto-Light.woff2
diff --git a/resources/fonts/Roboto/Roboto-Medium.woff b/resources/fonts/Roboto/Roboto-Medium.woff
diff --git a/resources/fonts/Roboto/Roboto-Medium.woff2 b/resources/fonts/Roboto/Roboto-Medium.woff2
diff --git a/resources/fonts/Roboto/Roboto-Regular.woff b/resources/fonts/Roboto/Roboto-Regular.woff
diff --git a/resources/fonts/Roboto/Roboto-Regular.woff2 b/resources/fonts/Roboto/Roboto-Regular.woff2
diff --git a/resources/fonts/whyte.woff2 b/resources/fonts/whyte.woff2
diff --git a/resources/images/icons/plus.svg b/resources/images/icons/plus.svg
diff --git a/resources/images/sprite/logo.svg b/resources/images/sprite/logo.svg
diff --git a/resources/index.js b/resources/index.js
@@ -0,0 +1,5 @@
+/* Styles */
+import '@styles/main.scss'
+
+/* Scripts */
+import '@scripts'
diff --git a/resources/scripts/components/index.js b/resources/scripts/components/index.js
@@ -0,0 +1,4 @@
+export default {
+  init() {},
+  finalize() {},
+}
diff --git a/resources/scripts/editor.js b/resources/scripts/editor.js
@@ -0,0 +1 @@
+console.log('editor scripts loaded')
diff --git a/resources/scripts/editor.ts b/resources/scripts/editor.ts
diff --git a/resources/scripts/guide.ts b/resources/scripts/guide.ts
diff --git a/resources/scripts/index.js b/resources/scripts/index.js
@@ -0,0 +1,14 @@
+import Router from './utils/Router'
+import components from './components'
+import pages from './pages'
+
+const routes = new Router({
+  components,
+  pages,
+})
+
+window.addEventListener('DOMContentLoaded', () => {
+  routes.loadEvents()
+  components.init()
+  pages.init()
+})
diff --git a/resources/scripts/main.ts b/resources/scripts/main.ts
diff --git a/resources/scripts/pages/home.js b/resources/scripts/pages/home.js
@@ -0,0 +1,3 @@
+export default function () {
+  console.log('home scripts loaded')
+}
diff --git a/resources/scripts/pages/index.js b/resources/scripts/pages/index.js
@@ -0,0 +1,8 @@
+import home from './home'
+
+export default {
+  init() {
+    home()
+  },
+  finalize() {},
+}
diff --git a/resources/scripts/utils/Router.js b/resources/scripts/utils/Router.js
@@ -0,0 +1,71 @@
+import camelCase from './camelCase';
+
+/**
+ * DOM-based Routing
+ *
+ * Based on {@link http://goo.gl/EUTi53|Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish
+ *
+ * The routing fires all common scripts, followed by the page specific scripts.
+ * Add additional events for more control over timing e.g. a finalize event
+ */
+class Router {
+
+    /**
+     * Create a new Router
+     * @param {Object} routes
+     */
+    constructor(routes) {
+        this.routes = routes;
+    }
+
+    /**
+     * Fire Router events
+     * @param {string} route DOM-based route derived from body classes (`<body class="...">`)
+     * @param {string} [event] Events on the route. By default, `init` and `finalize` events are called.
+     * @param {string} [arg] Any custom argument to be passed to the event.
+     */
+    fire(route, event = 'init', arg) {
+        document.dispatchEvent(new CustomEvent('routed', {
+            bubbles: true,
+            detail: {
+                route,
+                fn: event,
+            },
+        }));
+
+        const fire = route !== '' && this.routes[route] && typeof this.routes[route][event] === 'function';
+        if (fire) {
+            this.routes[route][event](arg);
+        }
+    }
+
+    /**
+     * Automatically load and fire Router events
+     *
+     * Events are fired in the following order:
+     *  * common init
+     *  * page-specific init
+     *  * page-specific finalize
+     *  * common finalize
+     */
+    loadEvents() {
+        // Fire common init JS
+        this.fire('common');
+
+        // Fire page-specific init JS, and then finalize JS
+        document.body.className
+            .toLowerCase()
+            .replace(/-/g, '_')
+            .split(/\s+/)
+            .map(camelCase)
+            .forEach((className) => {
+                this.fire(className);
+                this.fire(className, 'finalize');
+            });
+
+        // Fire common finalize JS
+        this.fire('common', 'finalize');
+    }
+}
+
+export default Router;
diff --git a/resources/scripts/utils/camelCase.js b/resources/scripts/utils/camelCase.js
@@ -0,0 +1,9 @@
+/**
+ * the most terrible camelizer on the internet, guaranteed!
+ * @param {string} str String that isn't camel-case, e.g., CAMeL_CaSEiS-harD
+ * @return {string} String converted to camel-case, e.g., camelCaseIsHard
+ */
+export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|')
+    .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('')
+    .slice(1)}`;
diff --git a/resources/styles/_components.scss b/resources/styles/_components.scss
diff --git a/resources/styles/_fonts.scss b/resources/styles/_fonts.scss
diff --git a/resources/styles/_functions.scss b/resources/styles/_functions.scss
diff --git a/resources/styles/_layouts.scss b/resources/styles/_layouts.scss
diff --git a/resources/styles/_mixins.scss b/resources/styles/_mixins.scss