feature: social media share

This addresses Exam Simulator and Social Media
Fixes #135

templates/html/exam-simulator.html

@@ -36,16 +36,19 @@
         </table>
       </div>
     </template>
+    <img v-if="resultImageUrl" class="img-fluid border mb-4" :src="resultImageUrl"
+         alt="50ohm.de-Prüfungssimulation">
     <div v-if="resultForSharing" class="border-top pt-3 mt-3">
       <h2 class="h5">Ergebnis teilen</h2>
       <div class="d-flex flex-wrap gap-2">
-        <button type="button" class="btn btn-outline-secondary btn-sm" @click="shareNative">Teilen …</button>
+        <button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center" @click="shareNative">
+          <span class="material-icons fs-6 me-1" aria-hidden="true">share</span> Teilen …
+        </button>
         <button type="button" class="btn btn-outline-secondary btn-sm" @click="copyResultLink">Link kopieren</button>
-        <button type="button" class="btn btn-outline-secondary btn-sm" @click="shareMatrix" title="Über die Teilen-Funktion an Element senden">Matrix / Element</button>
         <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.mastodon" target="_blank" rel="noopener noreferrer">Mastodon</a>
         <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.bluesky" target="_blank" rel="noopener noreferrer">Bluesky</a>
         <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.facebook" target="_blank" rel="noopener noreferrer">Facebook</a>
-        <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X</a>
+        <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X (ehem. Twitter)</a>
       </div>
       <small v-if="shareMessage" class="d-block mt-2" role="status" v-text="shareMessage"></small>
     </div>
@@ -145,16 +148,19 @@
         </tbody>
       </table>
     </div>
+    <img v-if="resultImageUrl" class="img-fluid border mb-4" :src="resultImageUrl"
+         alt="50ohm.de-Prüfungssimulation">
     <div v-if="resultForSharing" class="border-top pt-3 mt-3">
       <h2 class="h5">Ergebnis teilen</h2>
       <div class="d-flex flex-wrap gap-2">
-        <button type="button" class="btn btn-outline-secondary btn-sm" @click="shareNative">Teilen …</button>
+        <button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center" @click="shareNative">
+          <span class="material-icons fs-6 me-1" aria-hidden="true">share</span> Teilen …
+        </button>
         <button type="button" class="btn btn-outline-secondary btn-sm" @click="copyResultLink">Link kopieren</button>
-        <button type="button" class="btn btn-outline-secondary btn-sm" @click="shareMatrix" title="Über die Teilen-Funktion an Element senden">Matrix / Element</button>
         <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.mastodon" target="_blank" rel="noopener noreferrer">Mastodon</a>
         <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.bluesky" target="_blank" rel="noopener noreferrer">Bluesky</a>
         <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.facebook" target="_blank" rel="noopener noreferrer">Facebook</a>
-        <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X</a>
+        <a class="btn btn-outline-secondary btn-sm" :href="socialShareLinks.x" target="_blank" rel="noopener noreferrer">X (ehem. Twitter)</a>
       </div>
       <small v-if="shareMessage" class="d-block mt-2" role="status" v-text="shareMessage"></small>
     </div>
@@ -191,8 +197,9 @@
         <span v-else-if="currentPart.status !== 'running'" class="btn btn-secondary btn-sm d-inline-flex align-items-center">Abgegeben</span>
         <button v-if="currentPart.status === 'evaluated' && !isReviewing && hasNextPart"
                 type="button" class="btn btn-primary btn-sm" @click="startNextPart">Nächsten Teil starten</button>
-        <button v-else-if="currentPart.status === 'evaluated' && !isReviewing"
-                type="button" class="btn btn-primary btn-sm" @click="showSummary" v-text="isHomework ? 'Ergebnis' : 'Gesamtergebnis'"></button>
+        <a v-else-if="currentPart.status === 'evaluated' && !isReviewing"
+           class="btn btn-primary btn-sm" :href="completedResultUrl"
+           v-text="isHomework ? 'Ergebnis' : 'Gesamtergebnis'"></a>
         <button v-else-if="isReviewing" type="button" class="btn btn-primary btn-sm" @click="showSummary">Gesamtergebnis</button>
         <button type="button" class="btn btn-secondary btn-sm d-inline-flex align-items-center" @click="abortExam"
                 v-text="isHomework ? 'Hausaufgabe abbrechen' : 'Simulation abbrechen'"></button>
@@ -259,7 +266,8 @@
             <button type="button" class="btn btn-outline-secondary" @click="finishExamEarly">Simulation hier beenden</button>
           </template>
           <template v-else>
-            <button type="button" class="btn btn-primary" @click="showSummary" v-text="isHomework ? 'Ergebnis anzeigen' : 'Gesamtergebnis anzeigen'"></button>
+            <a class="btn btn-primary" :href="completedResultUrl"
+               v-text="isHomework ? 'Ergebnis anzeigen' : 'Gesamtergebnis anzeigen'"></a>
           </template>
         </div>
       </main>

templates/html/page.html

@@ -4,6 +4,21 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>50Ω Lernplattform für Amateurfunk</title>
+    {% if social_image %}
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="50ohm.de">
+    <meta property="og:title" content="Ergebnis der 50ohm.de-Prüfungssimulation">
+    <meta property="og:description" content="Mein Ergebnis der Prüfungssimulation auf 50ohm.de">
+    <meta property="og:image" content="https://50ohm.de/{{ social_image }}">
+    <meta property="og:image:alt" content="50ohm.de-Prüfungssimulation">
+    <meta property="og:image:width" content="1448">
+    <meta property="og:image:height" content="1086">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Ergebnis der 50ohm.de-Prüfungssimulation">
+    <meta name="twitter:description" content="Mein Ergebnis der Prüfungssimulation auf 50ohm.de">
+    <meta name="twitter:image" content="https://50ohm.de/{{ social_image }}">
+    <meta name="twitter:image:alt" content="50ohm.de-Prüfungssimulation">
+    {% endif %}
 
     <link rel="icon" href="assets/favicon/icon.png" type="image/png">
     <link rel="icon" href="assets/favicon/icon.svg" type="image/svg+xml">