add opengraph image to docs

2020-07-04 15:01:38 -07:00 · 2020-07-04 15:01:38 -07:00 · 5eed01f371
commit 5eed01f371
parent 4b406b7787
2 changed files with 117 additions and 0 deletions
--- a/docs/src/theme/Layout/index.js
+++ b/docs/src/theme/Layout/index.js
@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import Head from "@docusaurus/Head";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import ThemeProvider from "@theme/ThemeProvider";
+import TabGroupChoiceProvider from "@theme/TabGroupChoiceProvider";
+import AnnouncementBar from "@theme/AnnouncementBar";
+import Navbar from "@theme/Navbar";
+import Footer from "@theme/Footer";
+
+import "./styles.css";
+
+function Layout(props) {
+  const { siteConfig = {} } = useDocusaurusContext();
+  const {
+    favicon,
+    title: siteTitle,
+    themeConfig: { image: defaultImage },
+    url: siteUrl,
+  } = siteConfig;
+  const {
+    children,
+    title,
+    noFooter,
+    description,
+    image,
+    keywords,
+    permalink,
+    version,
+  } = props;
+  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+
+  const metaImage = image || defaultImage;
+  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  if (!isInternalUrl(metaImage)) {
+    metaImageUrl = metaImage;
+  }
+
+  const faviconUrl = useBaseUrl(favicon);
+
+  return (
+    <ThemeProvider>
+      <TabGroupChoiceProvider>
+        <Head>
+          {/* TODO: Do not assume that it is in english language */}
+          <html lang="en" />
+
+          {metaTitle && <title>{metaTitle}</title>}
+          {metaTitle && <meta property="og:title" content={metaTitle} />}
+          {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+          {description && <meta name="description" content={description} />}
+          {description && (
+            <meta property="og:description" content={description} />
+          )}
+          {version && <meta name="docsearch:version" content={version} />}
+          {keywords && keywords.length && (
+            <meta name="keywords" content={keywords.join(",")} />
+          )}
+          {metaImage && <meta property="og:image" content={metaImageUrl} />}
+          {metaImage && (
+            <meta property="twitter:image" content={metaImageUrl} />
+          )}
+          {metaImage && (
+            <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
+          )}
+          {metaImage && <meta property="og:image:width" content="1200" />}
+          {metaImage && <meta property="og:image:height" content="630" />}
+          {permalink && (
+            <meta property="og:url" content={siteUrl + permalink} />
+          )}
+          <meta name="twitter:card" content="summary_large_image" />
+        </Head>
+        <AnnouncementBar />
+        <Navbar />
+        <div className="main-wrapper">{children}</div>
+        {!noFooter && <Footer />}
+      </TabGroupChoiceProvider>
+    </ThemeProvider>
+  );
+}
+
+export default Layout;
--- a/docs/src/theme/Layout/styles.css
+++ b/docs/src/theme/Layout/styles.css
@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  transition: var(--ifm-transition-fast) ease color;
+}
+
+#__docusaurus {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-wrapper {
+  flex: 1 0 auto;
+}