feat(web): added OpenGraph tags

akorzunin · Aug 12, 2024 · 5cc4637 · 5cc4637
1 parent e9034b6
commit 5cc4637
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -38,6 +38,7 @@ jobs:
     name: 🏗️ Run Frontend Build
     runs-on: ubuntu-latest
     if: needs.is-frontend-changed.outputs.frontend == 'true'
+    environment: dev
     permissions:
       contents: read
       packages: write
@@ -69,6 +70,9 @@ jobs:
       - name: Build and push Docker image
         id: push
         uses: docker/[email protected]
+        env:
+          VITE_HOST_URL: ${{ vars.VITE_HOST_URL }}
+          VITE_OG_DESCRIPTION: ${{ vars.VITE_OG_DESCRIPTION }}
         with:
           context: .
           push: true

diff --git a/Taskfile.yml b/Taskfile.yml
@@ -200,6 +200,8 @@ tasks:
     env:
       VITE_GAME_VERSION: v0.0.0
       VITE_GAME_COMMIT: taskbld01
+      VITE_HOST_URL: https://supericosahedron.localhost
+      VITE_OG_DESCRIPTION: Aboba
     preconditions:
       - sh: >-
           {{if eq OS "linux"}}

diff --git a/web/index.html b/web/index.html
@@ -5,10 +5,27 @@
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SuperIcosahedron</title>
+    <meta name="description" content="%VITE_OG_DESCRIPTION%" />
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="%VITE_HOST_URL%" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="SuperIcosahedron" />
+    <meta property="og:description" content="%VITE_OG_DESCRIPTION%" />
+    <meta property="og:image" content="%VITE_HOST_URL%/icon.svg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="%VITE_HOST_URL%" />
+    <meta name="twitter:title" content="SuperIcosahedron" />
+    <meta name="twitter:description" content="%VITE_OG_DESCRIPTION%" />
+    <meta name="twitter:image" content="%VITE_HOST_URL%/icon.svg" />
   </head>
 
   <body class="bg-background">
-    <div id="root" ></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
@@ -2,6 +2,8 @@
 interface ImportMetaEnv {
   readonly VITE_GAME_VERSION: string;
   readonly VITE_GAME_COMMIT: string;
+  readonly VITE_HOST_URL: string;
+  readonly VITE_OG_DESCRIPTION: string;
 }
 
 interface ImportMeta {