From 87e0b438cef3d633eb8e729340abb5c914d142a2 Mon Sep 17 00:00:00 2001
From: Choubakawa <Choubakawa@users.noreply.github.com>
Date: Sun, 20 Feb 2022 04:37:34 +0100
Subject: [PATCH] feat(generated-card): Added meta tags to enhance the
 generated card (#86) (#96)

---
 README.md          | 11 +++++++++
 docker-compose.yml | 11 +++++++++
 src/config.js      | 33 ++++++++++++++++++++++++++
 src/server.js      | 59 ++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 114 insertions(+)

diff --git a/README.md b/README.md
index 4aa8b93..6d23960 100644
--- a/README.md
+++ b/README.md
@@ -149,6 +149,17 @@ services:
       - POLYWORK=https://www.polywork.com/
       - SIGNAL=https://signal.org/
       - INSTANTGAMING=https://www.instant-gaming.com/
+      - OG_SITE_NAME=Techno Tim Live (OG)
+      - OG_TITLE=Techno Tim (OG)
+      - OG_DESCRIPTION=Techno Tim Link page (OG)
+      - OG_URL=https://technotim.live/
+      - OG_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - OG_IMAGE_WIDTH=400
+      - OG_IMAGE_HEIGHT=400
+      - TWITTER_CARD=summary_large_image
+      - TWITTER_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - TWITTER_SITE=@TechnoTimLive
+      - TWITTER_CREATOR=@TechnoTimLive
     ports:
       - 8080:3000
     restart: unless-stopped
diff --git a/docker-compose.yml b/docker-compose.yml
index 9bbe327..3de8c5b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -76,6 +76,17 @@ services:
       - UNTAPPD=https://untappd.com/
       - BUTTON_TARGET=_blank
       - INSTANTGAMING=https://www.instant-gaming.com/
+      - OG_SITE_NAME=Techno Tim Live (OG)
+      - OG_TITLE=Techno Tim (OG)
+      - OG_DESCRIPTION=Techno Tim Link page (OG)
+      - OG_URL=https://technotim.live/
+      - OG_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - OG_IMAGE_WIDTH=400
+      - OG_IMAGE_HEIGHT=400
+      - TWITTER_CARD=summary_large_image
+      - TWITTER_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - TWITTER_SITE=@TechnoTimLive
+      - TWITTER_CREATOR=@TechnoTimLive
     ports:
       - 8080:3000
     restart: unless-stopped
diff --git a/src/config.js b/src/config.js
index df211a7..498a1d4 100644
--- a/src/config.js
+++ b/src/config.js
@@ -277,4 +277,37 @@ export const runtimeConfig =
         INSTANTGAMING: nodeIsProduction
           ? process.env.INSTANTGAMING
           : process.env.RAZZLE_INSTANTGAMING,
+        OG_SITE_NAME: nodeIsProduction
+          ? process.env.OG_SITE_NAME
+          : process.env.RAZZLE_OG_SITE_NAME,
+        OG_TITLE: nodeIsProduction
+          ? process.env.OG_TITLE
+          : process.env.RAZZLE_OG_TITLE,
+        OG_DESCRIPTION: nodeIsProduction
+          ? process.env.OG_DESCRIPTION
+          : process.env.RAZZLE_OG_DESCRIPTION,
+        OG_URL: nodeIsProduction
+          ? process.env.OG_URL
+          : process.env.RAZZLE_OG_URL,
+        OG_IMAGE: nodeIsProduction
+          ? process.env.OG_IMAGE
+          : process.env.RAZZLE_OG_IMAGE,
+        OG_IMAGE_WIDTH: nodeIsProduction
+          ? process.env.OG_IMAGE_WIDTH
+          : process.env.RAZZLE_OG_IMAGE_WIDTH,
+        OG_IMAGE_HEIGHT: nodeIsProduction
+          ? process.env.OG_IMAGE_HEIGHT
+          : process.env.RAZZLE_OG_IMAGE_HEIGHT,
+        TWITTER_CARD: nodeIsProduction
+          ? process.env.TWITTER_CARD
+          : process.env.RAZZLE_TWITTER_CARD,
+        TWITTER_IMAGE: nodeIsProduction
+          ? process.env.TWITTER_IMAGE
+          : process.env.RAZZLE_TWITTER_IMAGE,
+        TWITTER_SITE: nodeIsProduction
+          ? process.env.TWITTER_SITE
+          : process.env.RAZZLE_TWITTER_SITE,
+        TWITTER_CREATOR: nodeIsProduction
+          ? process.env.TWITTER_CREATOR
+          : process.env.RAZZLE_TWITTER_CREATOR,
       };
diff --git a/src/server.js b/src/server.js
index 39731b6..6082bc2 100644
--- a/src/server.js
+++ b/src/server.js
@@ -81,6 +81,65 @@ server
           runtimeConfig.META_INDEX_STATUS || 'noindex'
         }">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          runtimeConfig.OG_SITE_NAME
+            ? `<meta property="og:site_name" content="${runtimeConfig.OG_SITE_NAME}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_TITLE
+            ? `<meta property="og:title" content="${runtimeConfig.OG_TITLE}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_DESCRIPTION
+            ? `<meta property="og:description" content="${runtimeConfig.OG_DESCRIPTION}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_URL
+            ? `<meta property="og:url" content="${runtimeConfig.OG_URL}" />`
+            : ''
+        }
+        <meta property="og:type" content="siteweb" />
+        ${
+          runtimeConfig.OG_IMAGE
+            ? `
+                <meta property="og:image" content="${runtimeConfig.OG_IMAGE}" />
+                <meta property="og:image:secure_url" content="${runtimeConfig.OG_IMAGE}" />
+            `
+            : ''
+        }
+        ${
+          runtimeConfig.OG_IMAGE_WIDTH
+            ? `<meta property="og:image:width" content="${runtimeConfig.OG_IMAGE_WIDTH}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_IMAGE_HEIGHT
+            ? `<meta property="og:image:height" content="${runtimeConfig.OG_IMAGE_HEIGHT}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_CARD
+            ? `<meta property="twitter:card" content="${runtimeConfig.TWITTER_CARD}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_IMAGE
+            ? `<meta property="twitter:image" content="${runtimeConfig.TWITTER_IMAGE}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_SITE
+            ? `<meta property="twitter:site" content="${runtimeConfig.TWITTER_SITE}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_CREATOR
+            ? `<meta property="twitter:creator" content="${runtimeConfig.TWITTER_CREATOR}" />`
+            : ''
+        }
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&amp;display=swap" rel="stylesheet">
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/${theme}">