feat: landing - update og content (#163)

* feat: update og content * chore: update meta content
codesandbox · Nov 22, 2021 · c0c92e6 · c0c92e6
1 parent b47ac91
commit c0c92e6
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/website/landing/pages/index.tsx b/website/landing/pages/index.tsx
@@ -13,6 +13,8 @@ import { Users } from "../components/Users";
 import { styled } from "../stitches.config";
 import content from "../website.config.json";
 
+const DEFAULT_HOST = "";
+
 const Container = styled("section", {
   display: "flex",
   flexDirection: "column",
@@ -27,15 +29,32 @@ const Main = styled("main", {
   flex: 1,
 });
 
-const Home: NextPage = () => {
-  const { global } = content;
+interface HomeProps {
+  host: string | undefined;
+}
+const Home: NextPage<HomeProps> = ({ host }) => {
+  const { global, meta } = content;
+  const HOST_URL = host
+    ? `${host.includes("localhost") ? "http" : "https"}://${host}`
+    : DEFAULT_HOST;
 
   return (
     <Container>
       <Head>
         <title>{global.title}</title>
         <meta content={global.description} name="description" />
         <link href="/favicon.ico" rel="icon" />
+
+        {/* Open Graph */}
+        {meta.map(({ name, value }) => {
+          const content =
+            {
+              "og:url": HOST_URL,
+              "og:image": `${HOST_URL}/${value}`,
+            }[name] || value;
+
+          return <meta key={name} content={content} name={name} />;
+        })}
       </Head>
 
       <Main>
@@ -53,4 +72,11 @@ const Home: NextPage = () => {
   );
 };
 
+Home.getInitialProps = async (context) => {
+  const { req } = context;
+  const host = req?.headers.host;
+
+  return { host };
+};
+
 export default Home;
diff --git a/website/landing/public/assets/sandpack_og.jpeg b/website/landing/public/assets/sandpack_og.jpeg
diff --git a/website/landing/website.config.json b/website/landing/website.config.json
@@ -1,8 +1,34 @@
 {
   "global": {
-    "title": "Sandpack",
-    "description": ""
+    "title": "Component toolkit for live running code editing experiences | Sandpack",
+    "description": "Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox."
   },
+  "meta": [
+    {
+      "name": "og:type",
+      "value": "website"
+    },
+    {
+      "name": "og:site_name",
+      "value": "Sandpack"
+    },
+    {
+      "name": "og:title",
+      "value": "Component toolkit for live running code editing experiences | Sandpack"
+    },
+    {
+      "name": "og:description",
+      "value": "Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox."
+    },
+    {
+      "name": "og:image",
+      "value": "assets/sandpack_og.jpeg"
+    },
+    {
+      "name": "og:url",
+      "value": "replaced at runtime"
+    }
+  ],
   "footer": {
     "text": "powered by"
   },