Katalog Kategorie hinzugefügt

config.toml

@@ -34,10 +34,10 @@ googleAnalytics = "UA-12671637-1"
         weight = -800
 
     [[menu.main]]
-        identifier = "galerie"
-        name = "Galerie"
-        title = "Galerie"
-        url = "/galerie"
+        identifier = "katalog"
+        name = "Katalog"
+        title = "Katalog"
+        url = "/katalog"
         weight = -500
 
     [[menu.main]]

content/katalog/grabstein/grabstein-01/index.md

@@ -5,7 +5,11 @@ draft = false
 price = ""
 type = "catalog"
 alt = "Bildergalerie für Test"
-description = "Bildergalerie für Test"
+description = ""
+material = "Material, Bearbeitungsart"
+ornament = "Ornament"
+article_id = "Artikel Nummer"
+used_for = ["Doppelgrab", "Einzelgrab"]
 keywords = []
 
 [[resources]]
@@ -14,5 +18,3 @@ keywords = []
   [resources.params]
     alt = "Bild von einem Test"
 +++
-
-{{< gallery "bilder/**.jpg" >}}

themes/neff/archetypes/katalog/index.md

@@ -1,11 +1,12 @@
 +++
 title = "{{ replace .Name "-" " " | title }}"
-date = "{{ .Date }}"
 draft = true
-price = ""
 type = "catalog"
-alt = "Bildergalerie für {{ replace .Name "-" " " | title }}"
-description = "Bildergalerie für {{ replace .Name "-" " " | title }}"
+alt = "{{ replace .Name "-" " " | title }}"
+description = "Kurzbeschreibung"
+material = "Material, Bearbeitungsart"
+ornament = "Ornament"
+article_id = "Artikel Bezeichnung"
 keywords = []
 
 [[resources]]

themes/neff/layouts/catalog/li.html

@@ -16,7 +16,7 @@
 {{ else }}
     {{ $image = index $images 0 }}
 {{ end }}
-{{ with $images }}
-<li class="padding"> {{- partial "figure.html" (dict "ctx" $ctx "image" $image "class" "gallery" "showTitle" true "showDescription" true) -}}
+{{ with $image }}
+<li class="padding"> {{- partial "catalog.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
 </li>
 {{ end }}

themes/neff/layouts/catalog/single.html

@@ -0,0 +1,16 @@
+{{- define "title" -}}
+    {{ .Title }} • {{ .Site.Title }}
+{{- end -}}
+
+{{- define "main" -}}
+<main id="single">
+    <article>
+        {{- partial "single.html" . -}}
+        <div class="flex column">
+            <div class="padding">
+                <model-viewer model-url="#"></model-viewer>
+            </div>
+        </div>
+    </article>
+</main>
+{{- end -}}

themes/neff/layouts/partials/catalog.html

@@ -0,0 +1,45 @@
+{{- $ctx := .ctx }}
+{{- $title := .ctx.Title -}}
+{{- $alt := .ctx.Params.alt -}}
+{{- $description := .ctx.Params.description | markdownify -}}
+{{- $class := .class -}}
+{{- $href := .ctx.Params.href }}
+
+<figure {{- with .class }} class="{{ . }}"{{- end -}}>
+    {{ with .image }}
+      {{- $imageSm := .Fill "300x300 Top" -}}
+      {{- $imageMd := .Fill "500x500 Top" -}}
+      <img alt="{{ $alt }}" 
+          title="{{ $title }}"
+          class="{{ $class }}"
+          srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
+          sizes="(max-width: 300px) 300px, 500px"
+          src="{{ $imageMd.RelPermalink }}" />
+          {{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}
+    {{ end }}
+    <figcaption class="overlay description hidden">
+      <a href="{{ $ctx.Permalink }}"><h3>{{ $title }}</h3></a>
+      {{- with $description -}}
+        <p class="description">{{- . -}}</p>
+      {{- end -}}
+      <p class="material">Material: {{ .ctx.Params.material}}</p>
+      {{ with .ctx.Params.ornament }}
+        <p class="ornament">Ornament: {{ . }}</p>
+      {{ end }}
+      <p class="type">Typ: {{ range $index, $value := .ctx.Params.used_for }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
+      <p class="article_id">Art. Nr.: {{ .ctx.Params.article_id }}</p>
+    </figcaption>
+    <noscript>
+      <figcaption class="description">
+      <a href="{{$href}}"><h3>{{ $title }}</h3></a>
+      {{- with $description -}}
+        <p>{{- . -}}</p>
+      {{- else -}}
+        <p>{{- $alt -}}</p>
+      {{- end -}}
+      <p>
+          {{ .ctx.Params.material}}
+      </p>
+      </figcaption>
+    </noscript>
+</figure>

themes/neff/layouts/partials/head.html

@@ -9,8 +9,12 @@
 {{- partial "schema/collectionpage.html" . -}}
 {{- end -}}
 {{- $css := resources.Get "css/style.css" -}}
+{{ if .Site.IsServer }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
+{{ else }}
 {{- $css = $css | resources.Fingerprint -}}
 <link rel="stylesheet" href="{{ $css.Permalink }}"  integrity="{{ $css.Data.Integrity }}">
+{{ end }}
 <link rel="shortcut icon" href="/img/favicon.ico">
 <link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
 <link rel="icon" type="image/png" href="/img/favicon.png" sizes="32x32">

themes/neff/layouts/partials/scripts.html

@@ -2,5 +2,9 @@
     var $googleAnalytics = '{{ .Site.GoogleAnalytics }}';
 </script>
 {{- $js := resources.Get "js/bundle.js" -}}
+{{ if .Site.IsServer }}
+<script src="{{ $js.RelPermalink }}"></script>
+{{ else }}
 {{- $js = $js | resources.Fingerprint -}}
-<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+{{ end }}

themes/neff/src/js/catalog.js

@@ -0,0 +1,45 @@
+function showOverlay(el) {
+    let classes = el.className;
+    if (classes.indexOf('hidden') !== -1) {
+      el.className = classes.replace(/ ?hidden ?/, '')
+    }
+} 
+
+function hideOverlay(el) {
+    let classes = el.className;
+    if (classes.indexOf('hidden') === -1) {
+      el.className = classes + ' hidden'
+    }
+} 
+
+function toggleOverlay(el) {
+    if (el.className.indexOf('hidden') === -1) {
+      hideOverlay(el)
+    } else {
+      showOverlay(el)
+    }
+}
+
+function addListeners(el, overlay) {
+  var isTouchSupported = "ontouchend" in document;
+  if (isTouchSupported) {
+    el.addEventListener('touchstart', ev => {
+      ev.preventDefault()
+      toggleOverlay(overlay)
+    })
+  } else {
+    el.addEventListener('mouseover', ev => {
+      ev.preventDefault()
+      showOverlay(overlay)
+    })
+    el.addEventListener('mouseleave', ev => {
+      ev.preventDefault()
+      hideOverlay(overlay)
+    })
+  }
+}
+
+document.querySelectorAll('figure').forEach(figure => {
+  let overlay = figure.querySelector('.overlay')
+  addListeners(figure, overlay)
+})

themes/neff/src/js/main.js

@@ -1,5 +1,6 @@
 import "./cookies"
 import "./lightbox"
 import "./scrollspy"
-import "./catalogSimilar"
-
+import "./catalog"
+//import "./catalogSimilar"
+import "./modelViewer"

themes/neff/src/js/modelViewer.js

@@ -0,0 +1,9 @@
+import Vue from "vue"
+
+import ModelViewer from "../vue/ModelViewer.vue"
+
+import wrap from '@vue/web-component-wrapper'
+
+const myModelViewer = wrap(Vue, ModelViewer)
+
+window.customElements.define('model-viewer', myModelViewer)

themes/neff/src/scss/_grid.scss

@@ -292,13 +292,32 @@ img.original {
 
 figure {
     max-width: 100%;
+    position: relative;
 
     img {
         width: 100%;
         height: auto;
     }
 
+
     figcaption {
+      &.overlay {
+        &.hidden {
+          visibility: hidden;
+        }
+
+        position: absolute;
+        background-color: rgba(230,230,230,0.85);
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: $border-radius;
+        text-align: center;
+        padding: $gutter-width;
+        text-shadow: 1px 1px 2px white;
+      }
+
       color: $font-color;
     }
 }

themes/neff/src/vue/ModelViewer.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>{{ modelUrl }}</div>
+</template>
+
+<script>
+export default {
+    name: 'model-viewer',
+    props: ['model-url'],
+}
+</script>

themes/neff/webpack.common.js

@@ -1,4 +1,6 @@
 const VueLoaderPlugin = require("vue-loader/lib/plugin")
+const CleanWebpackPlugin = require("clean-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const path = require("path")
 
 module.exports = {
@@ -26,6 +28,13 @@ module.exports = {
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: "../",
+              sourceMap: true
+            }
+          },
           {
             loader: "css-loader",
             options: {
@@ -129,6 +138,18 @@ module.exports = {
     ]
   },
   plugins: [
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new CleanWebpackPlugin([
+      "assets/css/*",
+      "assets/js/*",
+      "static/fonts/*",
+      "static/img/*"
+    ]),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "css/[name].css",
+      chunkFilename: "css/[id].css"
+    })
   ],
 }

themes/neff/webpack.prod.js

@@ -1,59 +1,12 @@
 const merge = require("webpack-merge")
 const common = require("./webpack.common.js")
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-const CleanWebpackPlugin = require("clean-webpack-plugin")
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
 
 module.exports = merge(common, {
   mode: "production",
   module: {
-    rules: [
-      {
-        test: /\.(sa|sc|c)ss$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: "../",
-              sourceMap: true
-            }
-          },
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: true
-            }
-          },
-          {
-            loader: "postcss-loader",
-            options: {
-              sourceMap: true
-            }
-          },
-          {
-            loader: "sass-loader",
-            options: {
-              implementation: require("sass"),
-              sourceMap: true
-            }
-          }
-        ]
-      }
-    ]
   },
   plugins: [
-    new CleanWebpackPlugin([
-      "assets/css/*",
-      "assets/js/*",
-      "static/fonts/*",
-      "static/img/*"
-    ]),
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: "css/[name].css",
-      chunkFilename: "css/[id].css"
-    })
   ],
   optimization: {
     usedExports: true,