Merge pull request 'deploy to dice-tower.com' (#32) from rich-preview into main

Reviewed-on: #32

.github/workflows/ci.yaml

@@ -43,7 +43,14 @@ jobs:
         name: Version
         run: echo "VERSION=$(./mvnw help:evaluate -Dexpression=project.version -q -DforceStdout)" >> ${GITHUB_OUTPUT}
 
-      - name: Build Container
+      - name: Build unstable Container
+        if: github.ref_name != 'main'
+        run: |
+          echo ${{secrets.PACKAGES_TOKEN}} | docker login --username ${{ secrets.PACKAGES_USER }} --password-stdin git.arindy.de
+          docker build -f src/main/docker/Dockerfile.native-micro -t git.arindy.de/arindy/dice-tower:unstable -t git.arindy.de/arindy/dice-tower:${{ steps.version.outputs.VERSION }} .
+          docker push git.arindy.de/arindy/dice-tower:unstable
+
+      - name: Build stable Container
         if: github.ref_name == 'main'
         run: |
           echo ${{secrets.PACKAGES_TOKEN}} | docker login --username ${{ secrets.PACKAGES_USER }} --password-stdin git.arindy.de
@@ -51,10 +58,28 @@ jobs:
           docker push git.arindy.de/arindy/dice-tower:${{ steps.version.outputs.VERSION }}
           docker push git.arindy.de/arindy/dice-tower:latest
 
+      - name: Prepare deploy
+        run: |
+          echo ${{secrets.SSH_KNOWN_HOSTS}} >> ~/.ssh/known_hosts
+          base64 -d <<< ${{secrets.SSH_KEY}} > ./.key
+          chmod 600 ./.key
+
+      - name: Deploy unstable
+        if: github.ref_name != 'main'
+        run: "ssh -i ./.key dice-tower@${{secrets.SSH_HOST}} 'docker compose -f compose.unstable.yml pull && docker compose -f compose.unstable.yml up -d'  "
+
       - name: Deploy
+        if: github.ref_name == 'main'
+        run: "ssh -i ./.key dice-tower@${{secrets.SSH_HOST}} 'docker compose -f compose.yml pull && docker compose -f compose.yml up -d'  "
+
+      - name: Deploy local
         if: github.ref_name == 'main'
         run: "docker compose up -d"
 
+      - name: clean up
+        run: |
+          rm ./.key
+
       - name: create tag
         if: github.ref_name == 'main'
         run: |

.gitignore

@@ -124,3 +124,5 @@ fabric.properties
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
 
+.key
+.key/

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))
+})

src/main/resources/templates/index.html

@@ -3,24 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Dice-Tower</title>
-
-    <meta property="og:title" content="Dice-Tower">
-    <meta name="twitter:title" content="Dice-Tower">
-
-    <meta property="og:type" content="website">
-    <meta name="twitter:card" content="summary_large_image">
-
-    <meta property="og:url" content="https://dice-tower.com">
-    <meta property="twitter:url" content="https://dice-tower.com">
-
-    <meta property="twitter:domain" content="dice-tower.com">
-
-    <meta property="og:image" content="https://dice-tower.com/rich.png">
-    <meta name="twitter:image" content="https://dice-tower.com/rich.png">
-
-    <meta name="description" content="
-        Easy to use online dice rolling with customizable overlays.
-">
+    <meta name="version" content="{version}">
 
     <link rel="stylesheet" href="/vendor/w3css/4/w3.css">
     <link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
@@ -29,6 +12,7 @@
     <link rel="icon" type="image/png" href="/favicon.png">
     <script src="/vendor/color-picker.js"></script>
     <script type="module" src="/dice-preview.js"></script>
+    <script type="text/javascript" src="/rich-preview.js"></script>
     <script type="text/javascript" src="/app.js"></script>
 </head>
 <body class="w3-theme-l1">
@@ -36,6 +20,7 @@
      style="height: 95vh; display: flex; flex-direction: column; justify-content: space-between;  padding: 25px">
     <h1 style="text-align: center"><i class="fa-solid fa-dice-d20"></i> Dice-Tower <i class="fa-solid fa-dice-d20"></i>
     </h1>
+
     <div class="w3-panel w3-theme-l4 w3-card w3-display-container"
          style="padding: 25px; text-align: center; margin-bottom: auto;">
         <h2 id="nameH" popovertarget="room-hint" data-trigger="hover" style="margin: 0" hidden>Name</h2>