add DRACO loader and mastodon posts

_includes/mastodon_post.html

@@ -0,0 +1,4 @@
+<figure class="centered">
+<iframe src="https://tech.lgbt/@Tomhodson/{{include.post_id}}/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
+<script src="https://tech.lgbt/embed.js" async="async"></script>
+</figure>

_projects/bathroom_shelf.md

@@ -0,0 +1,33 @@
+---
+title:  Bathroom Shelf
+layout: post
+excerpt: A little modification to an IKEA thingy.
+permalink: /projects/bathroom_shelf
+
+img:
+    src: 
+    alt: 
+    class: invertable
+
+social_image: 
+model: 
+
+head: |
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {
+        "imports": {
+        "three": "/node_modules/three/build/three.module.min.js",
+        "three/addons/": "/node_modules/three/examples/jsm/",
+        "lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
+        }
+    }
+    </script>
+    <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
+---
+<outline-model-viewer model = "/assets/projects/bathroom_shelf/models/ikea.glb" zoom=845>
+    <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>
+
+{% include mastodon_post.html post_id = "111822564173512216" %}

_projects/usbc_power_station.md

@@ -0,0 +1,30 @@
+---
+title:  USB-C Power Station
+layout: post
+excerpt: One charging station to rule them all!
+permalink: /projects/usbc_charging_station
+
+img:
+    src: 
+    alt: 
+    class: invertable
+
+social_image: 
+model: 
+
+head: |
+    <script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
+    <script type="importmap">
+    {
+        "imports": {
+        "three": "/node_modules/three/build/three.module.min.js",
+        "three/addons/": "/node_modules/three/examples/jsm/",
+        "lil-gui": "/node_modules/lil-gui/dist/lil-gui.esm.min.js"
+        }
+    }
+    </script>
+    <script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
+---
+
+{% include mastodon_post.html post_id = "111813225328398667" %}
+{% include mastodon_post.html post_id = "111816310882560850" %}

_sass/base.scss

@@ -120,6 +120,11 @@ figure > img, figure > svg, figure > canvas {
     border-radius: 10px;
 }
 
+figure.centered {
+    display: flex;
+    justify-content: center;
+}
+
 // For fallback images inside custom outline-model-viewer elements
 .outline-model-poster {
     width: 100%;

_sass/comments.scss

@@ -1,3 +1,7 @@
+.mastodon-embed {
+    border-radius: 5px;
+}
+
 .comments {
     .comment .avatar {
         float: left;

_sass/projects.scss

@@ -7,6 +7,11 @@ article.project {
 
     h2 {margin-top: 0;}
 
+    a.photo {
+        width: 7em;
+        height: 7em;
+    }
+    
     img {
         max-height: 7em;
         width: unset;

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

@@ -3,6 +3,7 @@ import * as THREE from "three";
 // import * as dat from 'dat.gui';
 
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
@@ -119,6 +120,11 @@ class OutlineModelViewer extends HTMLElement {
     const surfaceFinder = new FindSurfaces();
     // Load model
     const loader = new GLTFLoader();
+    const dracoLoader = new DRACOLoader();
+    dracoLoader.setDecoderConfig({ type: 'js' });
+    dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
+    loader.setDRACOLoader( dracoLoader );
+
     loader.load(model_path, (gltf) => {
       scene.add(gltf.scene);
       surfaceFinder.surfaceId = 0;

projects.md

@@ -13,7 +13,7 @@ social_image: /assets/projects/lego_adapters/thumbnail.png
 ---
 {% for post in site.projects %}
 <article class="h-entry project">
-    <a class="u-uid u-url" href="{{ post.url }}">
+    <a class="u-uid u-url photo" href="{{ post.url }}">
     <img class="u-photo {{post.img.class}}" src = "{{post.img.src}}" alt="{{post.img.alt}}">
     </a>