add npm install step to CI

.github/workflows/jekyll.yml

@@ -42,6 +42,12 @@ jobs:
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install NPM packages
+        run: npm clean-install
       - name: Build with Jekyll
         # Outputs to the './_site' directory by default
         run: bundle exec jekyll build --trace --baseurl "${{ steps.pages.outputs.base_path }}"

Gemfile

@@ -8,5 +8,4 @@ group :jekyll_plugins do
     gem 'jekyll-feed'
     gem 'jekyll-redirect-from'
     gem 'jekyll_flexible_include'
-    gem 'jekyll-node-module'
 end

_config.yml

@@ -17,29 +17,13 @@ collections:
   projects:
     output: true
 
-node_modules:
+include:
-  modules_dir: node_modules
+  - node_modules
-  assets:
-    js: assets/js
-    css: assets/css
-  copy:
-  - source: three/
-    target: assets/js/three/
-  - source: es-module-shims/
-    target: assets/js/es-module-shims/
-
 
 plugins:
   - jekyll-feed
   - jekyll-redirect-from
   - flexible_include
-  - jekyll-node-module
-
-whitelist:
-  - jekyll-feed
-  - jekyll-redirect-from
-  - flexible_include
-  - jekyll-node-module
 
 
 feed:

_projects/bike_lights.md

@@ -13,12 +13,12 @@ social_image: /assets/projects/bike_lights/thumbnail.png
 model: /assets/projects/bike_lights/model
 
 head: |
-    <script async src="/assets/js/es-module-shims/dist/es-module-shims.js"></script>
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
     <script type="importmap">
     {
         "imports": {
-        "three": "/assets/js/three/build/three.module.min.js",
+        "three": "/node_modules/three/build/three.module.min.js",
-        "three/addons/": "/assets/js/three/examples/jsm/",
+        "three/addons/": "/node_modules//three/examples/jsm/",
         "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
         }
     }

_projects/helmet_lights.md

@@ -13,18 +13,17 @@ social_image: /assets/projects/helmet_lights/thumbnail.png
 models: /assets/projects/helmet_lights/models
 
 head: |
-    <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
-
     <script type="importmap">
     {
         "imports": {
-        "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
+        "three": "/node_modules/three/build/three.module.min.js",
-        "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/",
+        "three/addons/": "/node_modules//three/examples/jsm/",
         "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
         }
     }
     </script>
-    <script src="/assets/js/three/index.js" type="module"></script>
+    <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
 ---
 
 <outline-model-viewer model = "{{page.models}}/model.glb">

assets/js/outline-model-viewer/index.js

@@ -143,6 +143,7 @@ class OutlineModelViewer extends HTMLElement {
     const canvas = this.shadow.querySelector("canvas");
 
     let canvas_rect = canvas.getBoundingClientRect();
+    console.log(canvas_rect);
 
     const body = document.getElementsByTagName("body")[0];
     const style = window.getComputedStyle(body);
@@ -284,14 +285,21 @@ class OutlineModelViewer extends HTMLElement {
     this.shadow.innerHTML = `
       <div id="container">
       <canvas class = "object-viewer"></canvas>
-      <summary>
+      <details>
-      Debug
+      <summary>Debug</summary>
-      <details>Details</details>
+      <input id="outline" type="range" min="0.5" max="4" step="0.1" value="2" />
-      </summary>
+      </details>
       </div>
 
       <style>
-        .object-viewer {
+        #container {
+          width: 90%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+
+        canvas {
           width: 100%;
           height: 100%;
           border-radius: 0.25rem;

package-lock.json

@@ -0,0 +1,29 @@
+{
+  "name": "tomhodson.github.com",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "es-module-shims": "^1.8.1",
+        "mathjax": "^3.2.2",
+        "three": "^0.158.0"
+      }
+    },
+    "node_modules/es-module-shims": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.1.tgz",
+      "integrity": "sha512-egouQrkryAJpKHVDZICQq5+fW4z1RomzVJpicA+8yqUHzKkTuMeoHaNIZ7PsWDnRl0ImCEVJEpW/aVb6JYKVJg=="
+    },
+    "node_modules/mathjax": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.2.tgz",
+      "integrity": "sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw=="
+    },
+    "node_modules/three": {
+      "version": "0.158.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.158.0.tgz",
+      "integrity": "sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ=="
+    }
+  }
+}