fix: added twitter og tags

astroport-fi · Jan 19, 2024 · 576e407 · 576e407
1 parent ca8fe32
commit 576e407
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 33 deletions.
diff --git a/frontend/src/app/view-inscription/view-inscription.page.ts b/frontend/src/app/view-inscription/view-inscription.page.ts
@@ -132,6 +132,22 @@ export class ViewInscriptionPage implements OnInit {
       name: 'description',
       content: description,
     });
+    this.meta.updateTag({
+      property: 'twitter:url',
+      content: `https://asteroidprotocol.io/app/inscription/${transaction.hash}`,
+    });
+    this.meta.updateTag({
+      property: 'twitter:title',
+      content: `${name} Inscription #${id} on Asteroid Protocol`,
+    });
+    this.meta.updateTag({
+      property: 'twitter:image',
+      content: content_path,
+    });
+    this.meta.updateTag({
+      property: 'twitter:description',
+      content: description,
+    });
 
     const resultHistory = await chain('query')({
       inscription_history: [

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -1,46 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Asteroid Protocol | Inscribe anything on the Hub</title>
 
-<head>
-  <meta charset="utf-8" />
-  <title>Asteroid Protocol | Inscribe anything on the Hub</title>
+    <base href="/" />
 
-  <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
 
-  <meta name="color-scheme" content="light dark" />
-  <meta name="viewport"
-    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="description"
+      content="Asteroid Protocol allows you to inscribe anything on the Hub"
+    />
+    <!-- theme -->
+    <meta name="theme-color" content="#06011e" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="asteroidprotocol.io" />
 
-  <meta name="description" content="Asteroid Protocol allows you to inscribe anything on the Hub" />
-  <!-- theme -->
-  <meta name="theme-color" content="#06011e" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="assets/icon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="assets/icon//favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="assets/icon//favicon-16x16.png"
+    />
+    <link rel="manifest" href="assets/site.webmanifest" />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="assets/icon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="assets/icon//favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="assets/icon//favicon-16x16.png">
-  <link rel="manifest" href="assets/site.webmanifest">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,[email protected],300;6..12,400;6..12,500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300&display=swap"
+      rel="stylesheet"
+    />
 
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,[email protected],300;6..12,400;6..12,500&display=swap"
-    rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300&display=swap" rel="stylesheet">
-
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&display=swap"
+      rel="stylesheet"
+    />
 
-  <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
+    <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> -->
 
-  <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-</head>
-
-<body>
-  <app-root></app-root>
-</body>
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
 
-</html>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>