add print view 🖨

.gitignore

@@ -20,3 +20,7 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+docker-compose.yml
+userscript.js
+tph-wiki-backup/*

src/main.js

@@ -1,4 +1,5 @@
 // Components
+import QRCode from 'qrcode';
 import App from './App.vue';
 import MdiIcon from './components/MdiIcon.vue';
 import XDialog from './components/XDialog.vue';
@@ -23,3 +24,30 @@ if (!document.querySelector('#inventory-wiki')) {
     style.textContent = styles;
     document.head.append(style);
 }
+
+const url = `${location.protocol}//${location.host}${location.pathname}`;
+document.querySelector('#dokuwiki__footer .doc').insertAdjacentHTML('beforeend', `
+    <div class="print">Available at <a href="${location.href}"></a></div>
+`);
+document.querySelector('#dokuwiki__footer .doc .print a').innerText = url;
+QRCode.toDataURL(url, {
+    margin: 0,
+    type: 'svg',
+    mode: 'alphanumeric',
+    errorCorrectionLevel: 'L'
+}, (err, data) => {
+    if (!err) {
+        const div = document.createElement('div');
+        div.className = 'print';
+        const img = document.createElement('img');
+        img.src = data;
+        div.appendChild(img);
+
+        document.querySelector('#dokuwiki__footer').appendChild(div);
+
+        const abs = document.createElement('img');
+        abs.id = 'print-qr';
+        abs.src = data;
+        document.body.insertAdjacentElement('afterbegin', abs);
+    }
+});

src/styles.css

@@ -480,4 +480,98 @@ ul.invwiki li a>span, ul.invwiki li label {
 
 .invwiki video {
   width: min(90vw, 400px);
-}
+}
+
+#dokuwiki__footer .print {
+  display: none;
+}
+#print-qr {
+  display: none;
+}
+@media print {
+  .invwiki.invwiki-toolbar {
+    display: none;
+  }
+
+  #dokuwiki__footer {
+    position: absolute;
+    bottom: 7em;
+    left: 0;
+    right: 0;
+    display: grid;
+    padding-top: 1em;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin-bottom: -5em;
+  }
+
+  #print-qr {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 80px;
+    padding: 0em 0em 1em 1em;
+    background-color: white;
+  }
+
+  #dokuwiki__footer .print {
+    display: block;
+  }
+
+  #dokuwiki__footer .print a {
+    font-family: monospace;
+  }
+  #dokuwiki__footer .print img {
+    height: 80px;
+  }
+
+  #dokuwiki__footer > .doc {
+    display: block;
+    grid-area: 1 / 1 / 2 / 2;
+  }
+  #dokuwiki__footer > .license {
+    font-size: small;
+    grid-area: 2 / 1 / 3 / 2;
+  }
+  #dokuwiki__footer > .print {
+    grid-area: 1 / 2 / 3 / 3;
+    text-align: right;
+  }
+
+  #dokuwiki__footer > .license a {
+    display: block;
+  }
+
+  #dokuwiki__site {
+    font-size: 90%;
+    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  }
+
+  #dokuwiki__header h1 a {
+    background-size: 32px;
+    height: 30px;
+    padding-top: 5px;
+    padding-left: 38px;
+  }
+
+  #dw__toc {
+    display: none;
+  }
+
+  .dokuwiki div.tags span,
+  .dokuwiki div.tagstop span {
+    background: transparent url(data:image/gif;base64,R0lGODlhEAAMAKIGAGFhYejo6P///8PDw9ra2p6env///wAAACH5BAEAAAYALAAAAAAQAAwAAAM0aBbQECpKA4YQ400JBClEBm2UUBgFpm3VR1zixljeG09zba9STvwqkm9HWlRgPFnlVjQmEwA7) 0 2px no-repeat;
+    padding: 1px 0 1px 17px;
+  }
+
+  .dokuwiki div.tags {
+    display: block;
+    padding-top: .5em;
+    clear: both;
+    font-size: 95%;
+    text-align: right;
+  }
+}

vite.config.js

@@ -82,7 +82,7 @@ export default defineConfig({
         proxyTimeout: 10000,
         changeOrigin: true
       },
-      '/inventar': {
+      '^\/(?!src|node_modules|@id|@vite).*': {
         target: 'https://wiki.temporaerhaus.de/',
         configure: handleAuthenticatedProxy,
         proxyTimeout: 10000,