feat: update font file and add meta tags (#400)

* fix: add new, smaller FG_Virgil file

* fix: update with new codesandbox font file link

* feat: add og-image and meta tags

* feat: add pr template

* fix: update pr template

* fix: remove pr template

* refactor: remove twitter meta in favor of og:image

* fix: add og:image:width

* refactor: update image

* refactor: use image in readme

README.md

@@ -1,6 +1,6 @@
 <div align="center" style="display:flex;flex-direction:column;">
     <a href="https://excalidraw.com">
-        <img src=".github/assets/logo.png" alt="" width="220px" height="202"/>
+        <img src="./public/og-image.png" alt="Excalidraw logo: Sketch handrawn like diagrams." />
     </a>
     <h3>Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.</h3>
 </div>

public/index.html

@@ -8,11 +8,33 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
+    />
+    <meta name="image" content="%PUBLIC_URL%/og-image.png" />
+
+    <!-- OpenGraph tags -->
+    <meta property="og:url" content="https://www.excalidraw.com/" />
+    <meta property="og:site_name" content="Excalidraw" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Excalidraw" />
+    <meta
+      property="og:description"
+      content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
+    />
+    <meta
+      property="og:image"
+      name="twitter:image"
+      content="%PUBLIC_URL%/og-image.png"
+    />
+    <meta property="og:image:width" content="1280" />
+    <meta property="og:image:height" content="669" />
 
     <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <link
       rel="preload"
-      href="https://uploads.codesandbox.io/uploads/user/f7fdc300-3c43-44c1-9a59-4338a82a9954/_oPE-FG_Virgil.ttf"
+      href="https://uploads.codesandbox.io/uploads/user/f7fdc300-3c43-44c1-9a59-4338a82a9954/xhjR-FG_Virgil.ttf"
       as="font"
       type="font/ttf"
       crossorigin="anonymous"
@@ -23,12 +45,12 @@
       src="https://www.googletagmanager.com/gtag/js?id=UA-387204-13"
     ></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
+      window.dataLayer = window.dataLayer || []
       function gtag() {
-        dataLayer.push(arguments);
+        dataLayer.push(arguments)
       }
-      gtag("js", new Date());
+      gtag("js", new Date())
-      gtag("config", "UA-387204-13");
+      gtag("config", "UA-387204-13")
     </script>
   </head>
 

src/styles.scss

@@ -3,7 +3,7 @@
 /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
 @font-face {
   font-family: "Virgil";
-  src: url("https://uploads.codesandbox.io/uploads/user/f7fdc300-3c43-44c1-9a59-4338a82a9954/_oPE-FG_Virgil.ttf");
+  src: url("https://uploads.codesandbox.io/uploads/user/f7fdc300-3c43-44c1-9a59-4338a82a9954/xhjR-FG_Virgil.ttf");
   font-display: swap;
 }