Add twitter link preview

config/config.ts_TEMPLATE

@@ -37,6 +37,8 @@ interface Config {
   frontend: {
     // How often to autrefresh, in seconds. Set to null to disable
     autoRefreshInterval: number | null;
+    // Twitter handle, this is for the Twitter link preview
+    twitterHandle: string,
   };
 
   // Donation configuration, right now only supports lnd
@@ -82,6 +84,7 @@ const config: Config = {
 
   frontend: {
     autoRefreshInterval: 120,
+    twitterHandle: "",
   },
 
   // donation: {

frontend/app.tsx

@@ -2,6 +2,10 @@ import React, { ComponentType, useEffect, useState } from "https://esm.sh/react@
 import { StoreProvider } from "https://esm.sh/easy-peasy";
 
 import store, { useStoreActions } from "./state/index.ts";
+import config from "./back/config/config.ts";
+
+const forkName = config.fork.name;
+const twitterHandle = config.frontend.twitterHandle;
 
 function StoreStarter({ Page, pageProps }: { Page: ComponentType<any>; pageProps: any }) {
   const [gotBlocks, setGotBlocks] = useState(false);
@@ -29,6 +33,25 @@ export default function App({ Page, pageProps }: { Page: ComponentType<any>; pag
         <meta name="viewport" content="width=device-width" />
         <link rel="stylesheet" href="./style/site.css" />
         <link rel="stylesheet" href="./style/reset.css" />
+
+        {twitterHandle && (
+          <>
+            <meta name="twitter:card" content="summary" />
+            <meta name="twitter:site" content={twitterHandle} />
+            <meta name="twitter:creator" content={twitterHandle} />
+            <meta
+              name="twitter:image"
+              content="https://creazilla-store.fra1.digitaloceanspaces.com/emojis/54056/carrot-emoji-clipart-md.png"
+            />
+            <meta
+              property="og:image"
+              content="https://creazilla-store.fra1.digitaloceanspaces.com/emojis/54056/carrot-emoji-clipart-md.png"
+            />
+            <meta property="og:url" content="https://taproot.watch" />
+            <meta property="og:title" content={`${forkName} Activation`} />
+            <meta property="og:description" content="See the current signalling status of the {forkName} softfork." />
+          </>
+        )}
       </head>
       <a href="https://github.com/hsjoberg/fork-explorer" className="github-corner" aria-label="View source on GitHub">
         <svg width="80" height="80" viewBox="0 0 250 250" className="github-corner-svg" aria-hidden="true">