feat: add overlay to content images via renderer

client/themes/tyclipso/components/page.vue

@@ -352,6 +352,8 @@ Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
   }
 })
 
+
+
 export default {
   components: {
     NavSidebar,
@@ -584,14 +586,7 @@ export default {
       })
 
       // remove empty divs
-      c.querySelectorAll('div:not([class]):not([id])').forEach(el => {
+      c.querySelectorAll('div:not([class]):not([id]):empty').forEach(el => el.remove())
-        if (el.innerHTML === '') el.remove()
-      })
-
-      // add click listerers for images
-      c.querySelectorAll('p > img').forEach(el => el.addEventListener('click', () => {
-        window.open(el.src, '_blank')
-      }))
     },
     copyToClipboard(hash) {
       const url = window.location.origin + window.location.pathname + hash

client/themes/tyclipso/scss/_mixins.scss

@@ -0,0 +1,3 @@
+@mixin elevation($z, $important: false) {
+  box-shadow: map-get($shadow-key-umbra, $z), map-get($shadow-key-penumbra, $z), map-get($shadow-key-ambient, $z) if($important, !important, null);
+}

client/themes/tyclipso/scss/app.scss

@@ -1,6 +1,9 @@
 /* THEME SPECIFIC STYLES */
 
 @import "../../default/scss/app";
+@import "settings";
+@import "mixins";
+@import "components";
 
 .ty-max-width {
   margin-left: auto !important;
@@ -178,26 +181,4 @@
       text-shadow: none !important;
     }
   }
-
-  // ---------------------------------
-  // IMAGES
-  // ---------------------------------
-
-  p {
-    > img:first-child,
-    > br + img {
-      display: block;
-      overflow: hidden;
-      margin: 12px 0;
-      border-radius: 4px;
-      box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12) !important;
-      transition: transform .2s ease;
-      cursor: pointer;
-
-      &:hover {
-        transform: scale(1.05);
-      }
-    }
-  }
-
 }

client/themes/tyclipso/scss/components/_image.scss

@@ -0,0 +1,41 @@
+.ty-image-wrapper {
+  @include elevation(2);
+  display: block;
+  overflow: hidden;
+  margin: 12px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  text-decoration: none;
+  color: currentColor;
+}
+
+.ty-image-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(mc('theme', 'primary'), .7);
+  transition-property: opacity, visibility;
+  transition-timing-function: ease;
+  transition-duration: .3s;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  visibility: hidden;
+
+  .v-icon {
+    font-size: 36px;
+    margin-bottom: 8px;
+    color: currentColor;
+  }
+}
+
+.ty-image-wrapper:hover .ty-image-overlay {
+  opacity: 1;
+  visibility: visible;
+}

client/themes/tyclipso/scss/components/_index.scss

@@ -0,0 +1 @@
+@import "image";

client/themes/tyclipso/scss/settings/_elevation.scss

@@ -0,0 +1,87 @@
+$shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+$shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+$shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
+
+$shadow-key-umbra: (
+  0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
+  1: (0px 2px 1px -1px $shadow-key-umbra-opacity),
+  2: (0px 3px 1px -2px $shadow-key-umbra-opacity),
+  3: (0px 3px 3px -2px $shadow-key-umbra-opacity),
+  4: (0px 2px 4px -1px $shadow-key-umbra-opacity),
+  5: (0px 3px 5px -1px $shadow-key-umbra-opacity),
+  6: (0px 3px 5px -1px $shadow-key-umbra-opacity),
+  7: (0px 4px 5px -2px $shadow-key-umbra-opacity),
+  8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
+  9: (0px 5px 6px -3px $shadow-key-umbra-opacity),
+  10: (0px 6px 6px -3px $shadow-key-umbra-opacity),
+  11: (0px 6px 7px -4px $shadow-key-umbra-opacity),
+  12: (0px 7px 8px -4px $shadow-key-umbra-opacity),
+  13: (0px 7px 8px -4px $shadow-key-umbra-opacity),
+  14: (0px 7px 9px -4px $shadow-key-umbra-opacity),
+  15: (0px 8px 9px -5px $shadow-key-umbra-opacity),
+  16: (0px 8px 10px -5px $shadow-key-umbra-opacity),
+  17: (0px 8px 11px -5px $shadow-key-umbra-opacity),
+  18: (0px 9px 11px -5px $shadow-key-umbra-opacity),
+  19: (0px 9px 12px -6px $shadow-key-umbra-opacity),
+  20: (0px 10px 13px -6px $shadow-key-umbra-opacity),
+  21: (0px 10px 13px -6px $shadow-key-umbra-opacity),
+  22: (0px 10px 14px -6px $shadow-key-umbra-opacity),
+  23: (0px 11px 14px -7px $shadow-key-umbra-opacity),
+  24: (0px 11px 15px -7px $shadow-key-umbra-opacity)
+);
+
+$shadow-key-penumbra: (
+  0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
+  1: (0px 1px 1px 0px $shadow-key-penumbra-opacity),
+  2: (0px 2px 2px 0px $shadow-key-penumbra-opacity),
+  3: (0px 3px 4px 0px $shadow-key-penumbra-opacity),
+  4: (0px 4px 5px 0px $shadow-key-penumbra-opacity),
+  5: (0px 5px 8px 0px $shadow-key-penumbra-opacity),
+  6: (0px 6px 10px 0px $shadow-key-penumbra-opacity),
+  7: (0px 7px 10px 1px $shadow-key-penumbra-opacity),
+  8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
+  9: (0px 9px 12px 1px $shadow-key-penumbra-opacity),
+  10: (0px 10px 14px 1px $shadow-key-penumbra-opacity),
+  11: (0px 11px 15px 1px $shadow-key-penumbra-opacity),
+  12: (0px 12px 17px 2px $shadow-key-penumbra-opacity),
+  13: (0px 13px 19px 2px $shadow-key-penumbra-opacity),
+  14: (0px 14px 21px 2px $shadow-key-penumbra-opacity),
+  15: (0px 15px 22px 2px $shadow-key-penumbra-opacity),
+  16: (0px 16px 24px 2px $shadow-key-penumbra-opacity),
+  17: (0px 17px 26px 2px $shadow-key-penumbra-opacity),
+  18: (0px 18px 28px 2px $shadow-key-penumbra-opacity),
+  19: (0px 19px 29px 2px $shadow-key-penumbra-opacity),
+  20: (0px 20px 31px 3px $shadow-key-penumbra-opacity),
+  21: (0px 21px 33px 3px $shadow-key-penumbra-opacity),
+  22: (0px 22px 35px 3px $shadow-key-penumbra-opacity),
+  23: (0px 23px 36px 3px $shadow-key-penumbra-opacity),
+  24: (0px 24px 38px 3px $shadow-key-penumbra-opacity)
+);
+
+$shadow-key-ambient: (
+  0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
+  1: (0px 1px 3px 0px $shadow-key-ambient-opacity),
+  2: (0px 1px 5px 0px $shadow-key-ambient-opacity),
+  3: (0px 1px 8px 0px $shadow-key-ambient-opacity),
+  4: (0px 1px 10px 0px $shadow-key-ambient-opacity),
+  5: (0px 1px 14px 0px $shadow-key-ambient-opacity),
+  6: (0px 1px 18px 0px $shadow-key-ambient-opacity),
+  7: (0px 2px 16px 1px $shadow-key-ambient-opacity),
+  8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
+  9: (0px 3px 16px 2px $shadow-key-ambient-opacity),
+  10: (0px 4px 18px 3px $shadow-key-ambient-opacity),
+  11: (0px 4px 20px 3px $shadow-key-ambient-opacity),
+  12: (0px 5px 22px 4px $shadow-key-ambient-opacity),
+  13: (0px 5px 24px 4px $shadow-key-ambient-opacity),
+  14: (0px 5px 26px 4px $shadow-key-ambient-opacity),
+  15: (0px 6px 28px 5px $shadow-key-ambient-opacity),
+  16: (0px 6px 30px 5px $shadow-key-ambient-opacity),
+  17: (0px 6px 32px 5px $shadow-key-ambient-opacity),
+  18: (0px 7px 34px 6px $shadow-key-ambient-opacity),
+  19: (0px 7px 36px 6px $shadow-key-ambient-opacity),
+  20: (0px 8px 38px 7px $shadow-key-ambient-opacity),
+  21: (0px 8px 40px 7px $shadow-key-ambient-opacity),
+  22: (0px 8px 42px 7px $shadow-key-ambient-opacity),
+  23: (0px 9px 44px 8px $shadow-key-ambient-opacity),
+  24: (0px 9px 46px 8px $shadow-key-ambient-opacity)
+);

client/themes/tyclipso/scss/settings/_index.scss

@@ -0,0 +1 @@
+@import "elevation";

client/themes/tyclipso/theme.yml

@@ -27,16 +27,6 @@ props:
     default: true
     title: Display the Page Tags
     order: 3
-  showTags:
-    type: Boolean
-    default: true
-    title: Display the Page Author and Date
-    order: 4
-  showTags:
-    type: Boolean
-    default: true
-    title: Display the Page Rating
-    order: 5
   showSocialBar:
     type: Boolean
     default: true

server/modules/rendering/html-tyclipso/components/ImageOverlay.js

@@ -0,0 +1,8 @@
+const ImageOverlay = `
+<span class="ty-image-overlay">
+    <i aria-hidden="true" class="v-icon notranslate mdi mdi-open-in-new theme--light"></i>
+    <span>In neuem Tab öffnen</span>
+</span>
+`
+
+module.exports = ImageOverlay

server/modules/rendering/html-tyclipso/definition.yml

@@ -1,10 +1,9 @@
 key: htmlTyclipso
-title: Post-Processor for tyclipso theme
+title: Tyclipso Theme
 description: Prepares html for the tyclipso theme
 author: tyclipso
 icon: mdi-auto-fix
 enabledDefault: true
 dependsOn: htmlCore
-step: post
 order: 100
 props: {}

server/modules/rendering/html-tyclipso/renderer.js

@@ -1,5 +1,13 @@
+const ImageOverlay = require('./components/ImageOverlay')
+
 module.exports = {
-  async init(input, config) {
+  init($, config) {
-    return input
+
+    // wrap images
+    $('p > img').each((i, element) => {
+      const src = $(element).attr('src');
+      $(element).wrap(`<a class="ty-image-wrapper" href="${src}" target="_blank"></a>`)
+      $(element).parent().append(ImageOverlay)
+    })
   }
 }