Skip to content

Commit

Permalink
feat(docs): redesign (#3432)
Browse files Browse the repository at this point in the history
  • Loading branch information
jeffmerrick authored Oct 21, 2021
1 parent 10c6181 commit dd8c592
Show file tree
Hide file tree
Showing 114 changed files with 3,624 additions and 3,786 deletions.
23 changes: 8 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -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>
<!-- -->

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -129,8 +124,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)
Expand Down
63 changes: 52 additions & 11 deletions docs-website/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand All @@ -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",
},
],
},
Expand Down Expand Up @@ -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"),
Expand Down
11 changes: 5 additions & 6 deletions docs-website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
28 changes: 28 additions & 0 deletions docs-website/src/components/AnnouncementSection.js
Original file line number Diff line number Diff line change
@@ -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;
86 changes: 86 additions & 0 deletions docs-website/src/components/Features.js
Original file line number Diff line number Diff line change
@@ -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;
53 changes: 53 additions & 0 deletions docs-website/src/components/Hero.js
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit dd8c592

Please sign in to comment.