deploy to dice-tower.com

src/main/resources/META-INF/resources/app.js

@@ -165,13 +165,6 @@ function hideSnackbar() {
 }
 
 document.addEventListener("DOMContentLoaded", async () => {
-
-    document.querySelector('meta[property="og:url"]').setAttribute("content", url());
-    document.querySelector('meta[property="twitter:url"]').setAttribute("content", url());
-    document.querySelector('meta[property="og:image"]').setAttribute("content", url() + '/rich.png');
-    document.querySelector('meta[name="twitter:image"]').setAttribute("content", url() + '/rich.png');
-    document.querySelector('meta[property="twitter:domain"]').setAttribute("content", window.location.hostname);
-
     if (localStorage.getItem('last-name') && localStorage.getItem('last-room')) {
         document.getElementById('name').value = localStorage.getItem('last-name');
         document.getElementById('room').value = localStorage.getItem('last-room');

src/main/resources/META-INF/resources/rich-preview.js

@@ -0,0 +1,40 @@
+const title = `${document.querySelector('title').textContent}`
+const dexcription = ` Easy to use online dice rolling with customizable overlays.`
+function url() {
+    return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
+}
+
+const image = url() + '/rich.png'
+
+function createMetaTag(name, property, content) {
+    let tag = document.createElement('meta');
+    if (name) {
+        tag.setAttribute('name', name)
+    }
+    if (property) {
+        tag.setAttribute('property', property)
+    }
+    tag.setAttribute('content', content)
+    return tag;
+}
+
+function createTags() {
+    return [
+        createMetaTag('description', undefined, dexcription),
+        createMetaTag(undefined, 'og:url', url()),
+        createMetaTag(undefined, 'og:image', image),
+        createMetaTag(undefined, 'og:description', dexcription),
+        createMetaTag(undefined, 'og:title', title),
+        createMetaTag(undefined, 'og:site_name', title),
+        createMetaTag(undefined, 'og:type', 'website'),
+        createMetaTag(undefined, 'twitter:url', url()),
+        createMetaTag(undefined, 'twitter:domain', document.location.hostname),
+        createMetaTag('twitter:title', undefined, title),
+        createMetaTag('twitter:image', undefined, image),
+        createMetaTag('twitter:card', undefined, 'summary_large_image'),
+        createMetaTag('twitter:description', undefined, dexcription),
+    ]
+}
+document.addEventListener("DOMContentLoaded", async () => {
+    createTags().forEach(tag => document.head.appendChild(tag))
+})