Make documentation embeds less ugly (#1670)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1670

Embeds to Yoga's documentation reuse a tiny rasterized favicon, blown up, and full of jpeg artifacts.

{F1714492025}

This bothered me enough to make the previews look better.

This change adds a quickly whipped up opengraph sized image, replaces the favicon with one derived from logo SVG, and fixes a missing description on the homepage.

 {F1714566402}

Reviewed By: yungsters

Differential Revision: D58923501

fbshipit-source-id: 249a23034f50667e32970121a90eccc380e566a3

website/docusaurus.config.js

@@ -14,7 +14,7 @@ export default {
   title: 'Yoga',
   tagline:
     'Build flexible layouts on any platform with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.',
-  favicon: 'img/favicon.png',
+  favicon: 'img/favicon.svg',
 
   url: 'https:/yogalayout.dev',
   baseUrl: '/',
@@ -95,5 +95,19 @@ export default {
         defaultMode: 'dark',
         respectPrefersColorScheme: true,
       },
+      metadata: [
+        {
+          property: 'og:image',
+          content: 'https://yogalayout.dev/img/opengraph.png',
+        },
+        {
+          property: 'og:image:width',
+          content: '1200',
+        },
+        {
+          property: 'og:image:height',
+          content: '630',
+        },
+      ],
     }),
 };

website/src/pages/index.tsx

@@ -76,7 +76,7 @@ function PlaygroundSection() {
 
 export default function Home(): JSX.Element {
   return (
-    <Layout>
+    <Layout description="Documentation for the Yoga layout engine">
       <HeroSection />
       <PlaygroundSection />
     </Layout>

website/static/img/favicon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="25 25 150 150" enable-background="new 0 0 200 200" xml:space="preserve">
+<g>
+	<circle fill="#303846" cx="100" cy="100" r="74"/>
+	<g>
+		<path fill="none" stroke="#97DCCF" stroke-width="5" stroke-miterlimit="10" d="M100.6,130.6c5.9-10.3,6.3-23.3,0-34.3
+			c-6.3-11-17.9-17.1-29.7-17.1c-5.9,10.3-6.3,23.3,0,34.3C77.2,124.4,88.7,130.6,100.6,130.6z"/>
+		<path fill="none" stroke="#97DCCF" stroke-width="5" stroke-miterlimit="10" d="M99.4,130.6c11.8,0,23.3-6.1,29.7-17.1
+			c6.3-11,5.9-24,0-34.3c-11.8,0-23.3,6.1-29.7,17.1C93.1,107.3,93.5,120.3,99.4,130.6z"/>
+	</g>
+	<path fill="none" stroke="#97DCCF" stroke-width="5" stroke-miterlimit="10" d="M100,129.4c10.2-5.9,17.1-17,17.1-29.7
+		c0-12.7-6.9-23.8-17.1-29.7c-10.2,5.9-17.1,17-17.1,29.7C82.9,112.4,89.8,123.5,100,129.4z"/>
+</g>
+</svg>