feat(theme): Implement a 3d model viewer page type

.gitignore

@@ -6,7 +6,8 @@ test/.hugo_build.lock
 test/public/
 test/resources/
 
-# Ignore symlinked iso flags and fontawesome
-src/static/img/iso-flags
+# Ignore symlinked iso flags, fontawesome and model viewer
 src/assets/scss/fontawesome
+src/static/img/iso-flags
+src/static/js
 src/static/fonts/fontawesome

README.md

@@ -13,3 +13,4 @@ This is a hugo theme for Taserud Consulting AB. It's quite flexible.
 - Blog support
 - Multi language support
 - Support for resturant style menu pages
+- Support for 3d models with an embedded viewer on listing page

build.sh

@@ -14,6 +14,7 @@ mkdir -p src/assets/scss/fontawesome
 mkdir -p src/static/fonts/fontawesome
 install -m 644 -D $(nix build .#fontawesome --print-out-paths --no-link)/scss/* -t src/assets/scss/fontawesome
 install -m 644 -D $(nix build .#fontawesome --print-out-paths --no-link)/webfonts/* -t src/static/fonts/fontawesome
+install -m 644 -D $(nix build .#modelViewer --print-out-paths --no-link)/* -t src/static/js
 
 cd test/
 

flake.nix

@@ -53,6 +53,9 @@
           # Install fontawesome resources
           install -m 644 -D ${self.packages.${system}.fontawesome}/scss/* -t $out/assets/scss/fontawesome
           install -m 644 -D ${self.packages.${system}.fontawesome}/webfonts/* -t $out/static/fonts/fontawesome
+
+          # Install model viewer resources
+          install -m 644 -D ${self.packages.${system}.modelViewer}/* -t $out/static/js
         '';
       };
 
@@ -69,9 +72,25 @@
             hash = "sha256-gXXhKyTDC/Q6PBzpWRFvx/TxcUd3msaRSdC3ZHFzCoc=";
           };
 
-          buildPhase = ":";
+          dontBuild = true;
           installPhase = "mkdir -p $out && cp -vr scss webfonts $out";
         };
+
+      modelViewer = let
+        pname = "model-viewer";
+        version = "3.4.0";
+      in
+        pkgs.stdenv.mkDerivation {
+          inherit pname version;
+          src = builtins.fetchurl {
+            url = "https://ajax.googleapis.com/ajax/libs/${pname}/${version}/${pname}.min.js";
+            sha256 = "sha256:0xalmzv5ds908fh7jazmy8jjcnz240mlrll61ylfg2k6scm8jpjk";
+          };
+          dontUnpack = true;
+          dontBuild = true;
+          installPhase = "mkdir -p $out && cp -v $src $out/${pname}.min.js";
+          meta.license = pkgs.lib.licenses.bsd3;
+        };
     };
 
     # A test case to see that the theme builds.
@@ -90,6 +109,9 @@
         install -m 644 -D ${self.packages.${system}.fontawesome}/scss/* -t src/assets/scss/fontawesome
         install -m 644 -D ${self.packages.${system}.fontawesome}/webfonts/* -t src/static/fonts/fontawesome
 
+        # Install model viewer resources
+        install -m 644 -D ${self.packages.${system}.modelViewer}/* -t src/static/js
+
         cd test && hugo --logLevel debug
       '';
       installPhase = "cp -vr public/ $out";

local.sh

@@ -14,6 +14,7 @@ mkdir -p src/assets/scss/fontawesome
 mkdir -p src/static/fonts/fontawesome
 install -m 644 -D $(nix build .#fontawesome --print-out-paths --no-link)/scss/* -t src/assets/scss/fontawesome
 install -m 644 -D $(nix build .#fontawesome --print-out-paths --no-link)/webfonts/* -t src/static/fonts/fontawesome
+install -m 644 -D $(nix build .#modelViewer --print-out-paths --no-link)/* -t src/static/js
 
 cd test/
 

src/assets/scss/main.scss

@@ -400,6 +400,11 @@ html {
                     padding: 0.5rem;
                 }
 
+                div.models3d div.model3d model-viewer {
+                    width: 28rem;
+                    height: 21rem;
+                }
+
                 div.pagination {
                     text-align: center;
 

src/layouts/3d-models/single.html

@@ -0,0 +1,43 @@
+{{ define "footerjs" }}
+<script type="module" src="/js/model-viewer.min.js"></script>
+{{ end }}
+{{ define "main" }}
+<div class="content">
+    {{ if (.Title | len) }}
+        <h1>{{ .Title }}</h1>
+    {{ end }}
+
+    {{ .Content }}
+
+    {{ if isset .Params "model3d" }}
+        <div class="models3d">
+            {{ range $_, $model := .Params.model3d }}
+                <div class="model3d">
+                    <h2>{{ $model.title }}</h2>
+                    {{ if isset $model "description" }}
+                        <p>{{ $model.description }}</p>
+                    {{ end }}
+                    {{ range $_, $file := $model.files }}
+                        <a href="{{ $file.modelFile }}">{{ $file.name }}</a>
+
+                        <div class="model">
+                            <model-viewer
+                              alt="{{ $model.description }}"
+                              src="{{ $file.modelViewer }}"
+                              camera-controls="1"
+                              touch-action="pan-y"
+                              ar-status="not-presenting"></model-viewer>
+                        </div>
+                    {{ end }}
+                    {{ if isset $model "homepage"}}
+                        <p>Homepage: <a href="{{ $model.homepage }}">{{ $model.homepage }}</a></p>
+                    {{ end }}
+                    {{ if isset $model "license" }}
+                        <p>License: <a href="{{ $model.license.url }}">{{ $model.license.name }}</a></p>
+                    {{ end }}
+                </div>
+            {{ end }}
+        </div>
+    {{ end }}
+</div>
+{{ end }}

test/config.yaml

@@ -25,6 +25,10 @@ languages:
           url: /blog/
           weight: 30
 
+        - name: 3D Modeller
+          url: /3d-models/
+          weight: 40
+
       i18n:
         - name: gb
           url: /en
@@ -51,6 +55,10 @@ languages:
           url: /en/blog/
           weight: 30
 
+        - name: 3D Models
+          url: /en/3d-models/
+          weight: 40
+
       i18n:
         - name: se
           url: /

test/content/3d-models.en.md

@@ -0,0 +1,15 @@
+---
+title: 3D Models
+type: 3d-models
+model3d:
+  - title: Test viewing of Neil Armstrong
+    description: This is a test with a 3d model of Neil Armstrongn
+    files:
+      - name: NeilArmstrong.3mf
+        modelFile: https://via.placeholder.com/150
+        modelViewer: "https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb"
+    license:
+      name: CC-BY-SA-4.0
+      url: https://spdx.org/licenses/CC-BY-SA-4.0.html
+---
+This page is an overview of 3d models that I have done something with.

test/content/3d-models.md

@@ -0,0 +1,16 @@
+---
+title: 3D Modeller
+type: 3d-models
+model3d:
+  - title: Test visning av Neil Armstrong
+    description: Detta är ett test med en 3d-modell av Neil Armstrong
+    files:
+      - name: NeilArmstrong.3mf
+        modelFile: https://via.placeholder.com/150
+        modelViewer: https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb
+    license:
+      name: CC-BY-SA-4.0
+      url: https://spdx.org/licenses/CC-BY-SA-4.0.html
+---
+
+Denna sida är en översikt av 3d-modeller som jag har gjort något med.