Docs branding

README.md

@@ -1,30 +1,25 @@
 <!--HOSTED_DOCS_ONLY
-import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 export const Logo = (props) => {
-  const siteConfig = useDocusaurusContext().siteConfig;
   return (
-    <div style={{display: "flex"}}>
-      <ThemedImage
+    <div style={{ display: "flex", justifyContent: "center", padding: "20px" }}>
+      <img
+        height="150"
         alt="DataHub Logo"
-        sources={{
-            light: useBaseUrl(siteConfig.themeConfig.navbar.logo.src),
-            dark: useBaseUrl(siteConfig.themeConfig.navbar.logo.srcDark),
-        }}
+        src={useBaseUrl("/static/img/datahub-logo-color-mark.svg")}
         {...props}
       />
     </div>
-  )
+  );
 };
 
-<Logo style={{"maxWidth": "16em", "margin": "0 auto"}} />
+<Logo />
 
 <!--
 HOSTED_DOCS_ONLY-->
 <p align="center">
-<img alt="DataHub" src="docs/imgs/datahub-logo.png" height="200px" />
+<img alt="DataHub" src="docs/imgs/datahub-logo-color-mark.svg" height="150" />
 </p>
 <!-- -->
 
@@ -80,7 +75,7 @@ Please follow the [DataHub Quickstart Guide](https://datahubproject.io/docs/quic
 
 There's a [hosted demo environment](https://datahubproject.io/docs/demo) where you can play around with DataHub before installing.
 
-[![DataHub Demo GIF](docs/imgs/demo_large.gif)](https://datahubproject.io/docs/demo)
+[![DataHub Demo GIF](docs/imgs/entity.png)](https://datahubproject.io/docs/demo)
 
 ## Source Code and Repositories
 
@@ -128,8 +123,6 @@ Here are the companies that have officially adopted DataHub. Please feel free to
 - [Viasat](https://viasat.com)
 - [Wolt](https://wolt.com)
 
-
-
 ## Select Articles & Talks
 
 - [DataHub: A Generalized Metadata Search & Discovery Tool](https://engineering.linkedin.com/blog/2019/data-hub)

docs-website/docusaurus.config.js

@@ -8,13 +8,42 @@ module.exports = {
   favicon: "img/favicon.ico",
   organizationName: "linkedin", // Usually your GitHub org/user name.
   projectName: "datahub", // Usually your repo name.
+  stylesheets: [
+    "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap",
+  ],
   themeConfig: {
+    colorMode: {
+      switchConfig: {
+        darkIcon: " ",
+        darkIconStyle: {
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.556 9.784A6.065 6.065 0 0 1 14 9.987a5.948 5.948 0 0 1-4.235-1.752 6.02 6.02 0 0 1-1.548-5.792.75.75 0 0 0-.918-.917A7.51 7.51 0 0 0 3.93 3.462c-2.924 2.924-2.924 7.682 0 10.607a7.453 7.453 0 0 0 5.304 2.198c2.003 0 3.886-.78 5.302-2.197a7.505 7.505 0 0 0 1.937-3.368.75.75 0 0 0-.918-.918Zm-2.079 3.225a5.96 5.96 0 0 1-4.242 1.758 5.964 5.964 0 0 1-4.243-1.758 6.009 6.009 0 0 1 0-8.486 5.942 5.942 0 0 1 1.545-1.112 7.52 7.52 0 0 0 2.167 5.886 7.479 7.479 0 0 0 5.886 2.168 6.026 6.026 0 0 1-1.113 1.544Z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E")`,
+          width: "18px",
+          height: "18px",
+          margin: "-4px 0 0 -4px",
+        },
+        lightIcon: " ",
+        lightIconStyle: {
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.5' fill='%23fff'%3E%3Cpath d='M5.245 9A3.76 3.76 0 0 0 9 12.755 3.76 3.76 0 0 0 12.755 9 3.76 3.76 0 0 0 9 5.245 3.76 3.76 0 0 0 5.245 9ZM9 6.745A2.258 2.258 0 0 1 11.255 9 2.258 2.258 0 0 1 9 11.255 2.258 2.258 0 0 1 6.745 9 2.258 2.258 0 0 1 9 6.745Zm-.752 7.505h1.5v2.25h-1.5v-2.25Zm0-12.75h1.5v2.25h-1.5V1.5Zm-6.75 6.75h2.25v1.5h-2.25v-1.5Zm12.75 0h2.25v1.5h-2.25v-1.5ZM3.164 13.773l1.59-1.592 1.062 1.06-1.59 1.592-1.062-1.06ZM12.18 4.758l1.592-1.592 1.06 1.06-1.591 1.592-1.06-1.06ZM4.756 5.819l-1.59-1.592 1.06-1.06L5.818 4.76l-1.06 1.06ZM14.832 13.773l-1.06 1.06-1.592-1.591 1.06-1.06 1.592 1.59Z'/%3E%3C/g%3E%3C/svg%3E")`,
+          width: "18px",
+          height: "18px",
+          margin: "-4px 0 0 -4px",
+        },
+      },
+    },
+    announcementBar: {
+      id: "announcement",
+      content:
+        '<div><img src="/img/acryl-logo-white-mark.svg" /><span><strong>Managed DataHub</strong> &nbsp;Acryl Data delivers an easy to consume DataHub platform for the enterprise</span></div> <a href="/docs/saas" target="_blank" class="button button--primary">Sign up for Managed DataHub →</a>',
+      backgroundColor: "#090a11",
+      textColor: "#ffffff",
+      isCloseable: false,
+    },
     navbar: {
-      title: "DataHub",
+      title: null,
       logo: {
         alt: "DataHub Logo",
-        src: "img/logo-color.png",
-        srcDark: "img/logo-dark.png",
+        src: "img/datahub-logo-color-light-horizontal.svg",
+        srcDark: "img/datahub-logo-color-dark-horizontal.svg",
       },
       items: [
         {
@@ -30,19 +59,27 @@ module.exports = {
         },
         {
           href: "https://slack.datahubproject.io",
-          label: "Slack",
+          "aria-label": "Slack",
           position: "right",
+          className: "item__icon item__slack",
         },
         {
           href: "https://github.com/linkedin/datahub",
-          label: "GitHub",
+          "aria-label": "GitHub",
           position: "right",
+          className: "item__icon item__github",
         },
         {
-          to: "docs/saas",
-          label: "SaaS",
+          href: "https://medium.com/datahub-project",
+          "aria-label": "Blog",
           position: "right",
-          className: "navbar-saas-button button button--primary",
+          className: "item__icon item__medium",
+        },
+        {
+          href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
+          "aria-label": "YouTube",
+          position: "right",
+          className: "item__icon item__youtube",
         },
       ],
     },
@@ -145,20 +182,24 @@ module.exports = {
         },
         blog: false,
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve("./src/styles/global.scss"),
         },
       },
     ],
   ],
   plugins: [
-    "@docusaurus/plugin-ideal-image",
+    [
+      "@docusaurus/plugin-ideal-image",
+      { quality: 100, sizes: [320, 640, 1280, 1440, 1600] },
+    ],
+    "docusaurus-plugin-sass",
     [
       "docusaurus-graphql-plugin",
       {
         schema: "./graphql/combined.graphql",
         routeBasePath: "/docs/graphql",
       },
-    ]
+    ],
     // '@docusaurus/plugin-google-gtag',
     // [
     //   require.resolve("@easyops-cn/docusaurus-search-local"),

docs-website/package.json

@@ -15,19 +15,18 @@
     "lint-check": "prettier -l generateDocsDir.ts sidebars.js src/pages/index.js"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.2",
-    "@docusaurus/plugin-ideal-image": "^2.0.0-beta.2",
-    "@docusaurus/preset-classic": "^2.0.0-beta.2",
+    "@docusaurus/core": "^2.0.0-beta.7",
+    "@docusaurus/plugin-ideal-image": "2.0.0-beta.7",
+    "@docusaurus/preset-classic": "^2.0.0-beta.7",
     "@octokit/plugin-retry": "^3.0.9",
     "@octokit/plugin-throttling": "^3.5.1",
     "@octokit/rest": "^18.6.2",
     "clsx": "^1.1.1",
     "docusaurus-graphql-plugin": "0.5.0",
+    "docusaurus-plugin-sass": "^0.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-slick": "^0.28.1",
-    "react-youtube": "^7.13.1",
-    "slick-carousel": "^1.8.1"
+    "sass": "^1.43.2"
   },
   "browserslist": {
     "production": [

docs-website/src/components/AnnouncementSection.js

@@ -0,0 +1,28 @@
+import React from "react";
+import clsx from "clsx";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Link from "@docusaurus/Link";
+
+import styles from "../styles/section.module.scss";
+
+const AnnouncementSection = () => (
+  <section className={clsx(styles.section, styles.announcementSection)}>
+    <div className="container">
+      <img src={useBaseUrl("/static/img/acryl-logo-white-mark.svg")} />
+      <h2>Managed DataHub</h2>
+      <p>
+        Acryl Data delivers an easy to consume DataHub platform for the
+        enterprise
+      </p>
+      <Link
+        to={useBaseUrl("/docs/saas")}
+        target="_blank"
+        class="button button--primary button--lg"
+      >
+        Sign up for Managed DataHub →
+      </Link>
+    </div>
+  </section>
+);
+
+export default AnnouncementSection;

docs-website/src/components/Features.js

@@ -0,0 +1,86 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+const featuresContent = [
+  {
+    title: "Open Source",
+    imageUrl: "/static/img/icons/open.svg",
+    description: (
+      <>
+        DataHub was originally{" "}
+        <Link to={"https://engineering.linkedin.com/blog/2019/data-hub"}>
+          built at LinkedIn
+        </Link>{" "}
+        and subsequently{" "}
+        <Link to={"https://github.com/linkedin/datahub"}>open-sourced</Link>{" "}
+        under the Apache 2.0 License. It now has a thriving community with over
+        a hundred contributors, and is widely used at many companies.
+      </>
+    ),
+  },
+  {
+    title: "Forward Looking Architecture",
+    imageUrl: "/static/img/icons/architecture.svg",
+    description: (
+      <>
+        DataHub follows a{" "}
+        <Link
+          to={
+            "https://engineering.linkedin.com/blog/2020/datahub-popular-metadata-architectures-explained"
+          }
+        >
+          push-based architecture
+        </Link>
+        , which means it's built for continuously changing metadata. The modular
+        design lets it scale with data growth at any organization, from a single
+        database under your desk to multiple data centers spanning the globe.
+      </>
+    ),
+  },
+  {
+    title: "Massive Ecosystem",
+    imageUrl: "/static/img/icons/ecosystem.svg",
+    description: (
+      <>
+        DataHub has pre-built integrations with your favorite systems: Kafka,
+        Airflow, MySQL, SQL Server, Postgres, LDAP, Snowflake, Hive, BigQuery,
+        and <Link to={"docs/metadata-ingestion"}>many others</Link>. The
+        community is continuously adding more integrations, so this list keeps
+        getting longer and longer.
+      </>
+    ),
+  },
+];
+
+const Feature = ({ imageUrl, title, description }) => {
+  return (
+    <div className={clsx("col col--4")}>
+      <div>
+        <img
+          src={useBaseUrl(imageUrl)}
+          alt={title}
+          className="invert-on-dark"
+        />
+      </div>
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  );
+};
+
+const Features = ({}) =>
+  featuresContent && featuresContent.length > 0 ? (
+    <div style={{ padding: "2vh 0" }}>
+      <div className="container">
+        <div className="row">
+          {featuresContent.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+export default Features;

docs-website/src/components/Hero.js

@@ -0,0 +1,53 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import styles from "../styles/hero.module.scss";
+
+import RoundedImage from "./RoundedImage";
+
+const Hero = ({}) => (
+  <header className={clsx("hero", styles.hero)}>
+    <div className="container">
+      <div className="row row--centered">
+        <div className="col col--5">
+          <div className="hero__content">
+            <div>
+              <h1 className={clsx("hero__title")}>
+                A Metadata Platform for the Modern Data Stack
+              </h1>
+              <p className={clsx("hero__subtitle")}>
+                Data ecosystems are diverse &#8212; too diverse. DataHub's
+                extensible metadata platform enables data discovery, data
+                observability and federated governance that helps you tame this
+                complexity.
+              </p>
+              <Link
+                className="button button--primary button--lg"
+                to={useBaseUrl("docs/")}
+              >
+                Get Started →
+              </Link>
+              <Link
+                className="button button--secondary button--outline button--lg"
+                to="https://slack.datahubproject.io"
+              >
+                Join our Slack
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className={clsx("col col--6 col--offset-1")}>
+          <RoundedImage
+            img={require("/img/screenshots/entity.png")}
+            alt="DataHub Entity Screenshot"
+          />
+          <div></div>
+        </div>
+      </div>
+    </div>
+  </header>
+);
+
+export default Hero;