Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update front page styling of the docs site #336

Merged
merged 6 commits into from
Dec 7, 2020
Merged

Update front page styling of the docs site #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3484264
Update front page styling of the docs site
czgu Dec 4, 2020
813211b
Fix magnify glass to be white
czgu Dec 4, 2020
7fec9c5
Update production url
czgu Dec 4, 2020
33feac9
Fixed windowscroll, updated gradient & primary color
czgu Dec 5, 2020
607b994
Use blue color palette for light mode
czgu Dec 7, 2020
1819db8
Updated cyan color palette
czgu Dec 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/contributing/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ To increase the chances that your pull request will be accepted:

## Help

Start by reading the developer starter guide [this guide](docs/developer_guide/developer_setup.md) to setup DataHub/
If you're having trouble using this project, please check the [developer guides](docs/developer_guide/)
Start by reading the developer starter guide [this guide](../developer_guide/developer_setup.md) to setup DataHub/
If you're having trouble using this project, please check the [developer guides](../developer_guide/)
and searching for solutions in the existing open and closed issues.

You can also reach out to us at datahub@pinterest.com or on our [Slack](https://join.slack.com/t/datahubchat/shared_invite/zt-dpr988af-9VwGkjcmPhqTmRoA2Tm3gg).
Expand Down
2 changes: 1 addition & 1 deletion docs_website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = {
title: 'DataHub',
tagline: 'Data made simple.',
url: 'https://your-docusaurus-test-site.com',
url: 'https://trydatahub.com',
baseUrl: '/',
organizationName: 'pinterest',
projectName: 'datahub-documentation-site',
Expand Down
2 changes: 1 addition & 1 deletion docs_website/src/components/HomePage/DeploymentSection/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default () => {
<div className="container DeploymentSection HomePageSection">
<Heading
headingKey="Deployment"
title="Setup & deployment in minutes."
title="Setup & deploy in minutes."
/>
<Grid
itemPerRow={2}
Expand Down
19 changes: 10 additions & 9 deletions docs_website/src/components/HomePage/FeatureSection/content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link from '@docusaurus/Link';
export const keyFeatures = {
key: 'Key Features',
title: 'Querying done right',
subtitle: `DataHub’s core focus is to make it as simple as possible to compose queries, create analysis, and collaborate with others.`,
subtitle: `DataHub’s core focus is to make composing queries, creating analyses, and collaborating with others as simple as possible`,
footer: () => (
<>
Check out <Link to="/docs/">our documentation</Link> to learn more
Expand All @@ -15,7 +15,7 @@ export const keyFeatures = {
featureItems: [
{
title: 'Collaborative DataDoc',
content: `DataDocs allows you to mix many queries, text, results, and charts in a single place. Work collaboratively with others in a DataDoc and get real-time updates.`,
content: `Organize rich text, queries, and charts into a notebook to easily document your analyses. Work collaboratively with others in a DataDoc and get real-time updates.`,
image: 'key_features/collab.png',
},
{
Expand All @@ -30,17 +30,17 @@ export const keyFeatures = {
},
{
title: 'Templating',
content: `Write dynamically generated queries via Jinja2 templating. Set variables in DataDoc to change on the fly.`,
content: `Write dynamically generated queries via Jinja2 templating. Set variables in DataDoc on the fly.`,
image: 'key_features/templating.png',
},
{
title: 'Scheduling',
content: `Built-in scheduling functionality to allow automatic DataDoc updates on a set interval. Combined with exporting, DataHub can send scheduled updates to a remote site.`,
content: `Built-in scheduling functionality allows automatic DataDoc updates on set intervals. Combined with exporting, DataHub can send scheduled updates to external apps.`,
image: 'key_features/scheduling.png',
},
{
title: 'Query Analytics',
content: `DataHub auto analyzes queries executed in DataHub to provide data lineage, example queries/frequent users, and search/autosuggest ranking.`,
content: `DataHub auto analyzes executed queries to provide data lineage, example queries, frequent user information, search/auto-completion ranking.`,
image: 'key_features/analytics.png',
},
],
Expand All @@ -52,15 +52,16 @@ export const pluginFeatures = {
subtitle: `Have a different tech stack? No problem. Every aspect of DataHub can be dynamically configured via the plugin system to let you fully leverage all of its features.`,
footer: () => (
<>
To see all customization options, check out the{' '}
<Link to="/docs/admin_guide/plugins">plugins guide</Link>.
Check out{' '}
<Link to="/docs/admin_guide/plugins">our documentation</Link> to see
all customization options.
</>
),

featureItems: [
{
title: 'Query Engine',
content: `Supply your own query engine to add actionable error messages, useful metadata, and additional security measures.`,
content: `Supply your own query engine and add actionable error messages, useful metadata, and additional security measures.`,
image: 'plugin_features/engine.png',
},
{
Expand All @@ -70,7 +71,7 @@ export const pluginFeatures = {
},
{
title: 'Notification',
content: `Get notified upon completion of queries and DataDoc invitations from IM or email.`,
content: `Get notified upon completion of queries and DataDoc invitations via IM or email.`,
image: 'plugin_features/notification.png',
},
{
Expand Down
11 changes: 8 additions & 3 deletions docs_website/src/components/HomePage/FeatureSection/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'clsx';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { pluginFeatures, keyFeatures } from './content';
import Heading from '../../Heading';
Expand All @@ -20,12 +21,16 @@ export default ({ featureType = 'key' }) => {
/>
<div className="Feature-Items">
<div className="row">
<div className="col col--6">
<div className="col col--4">
{featureConfig.featureItems.map((entry, idx) => (
<div
key={idx}
onClick={() => setImageIndex(idx)}
className="feature-item"
className={clsx(
'feature-item',
imageIndex === idx &&
'feature-item-selected'
)}
>
<div className="feature-item-title">
{entry.title}
Expand All @@ -36,7 +41,7 @@ export default ({ featureType = 'key' }) => {
</div>
))}
</div>
<div className="col col--6 feature-item-image">
<div className="col col--8 feature-item-image">
<ImageModal>
<Image
url={
Expand Down
11 changes: 9 additions & 2 deletions docs_website/src/components/HomePage/FeatureSection/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,21 @@
&:not(:last-child) {
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
&:hover .feature-item-title {
color: var(--ifm-color-primary);
}
&.feature-item-selected .feature-item-title {
color: var(--ifm-color-primary-dark);
}

.feature-item-title {
font-size: var(--large-text-size);
font-size: var(--med-text-size);
color: var(--ifm-color-emphasis-800);
font-weight: 700;
transition: color 0.5s;
}
.feature-item-content {
font-size: var(--small-text-size);
font-size: var(--xsmall-text-size);
color: var(--ifm-color-emphasis-600);
margin-left: 1px; // to align with title
}
Expand Down
15 changes: 15 additions & 0 deletions docs_website/src/components/HomePage/HeaderSection/GradientText.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import clsx from 'clsx';
import './GradientText.scss';

export default ({
className,

text,
}) => {
return (
<span className={clsx('GradientText ', className)}>
<span className="gradient-content">{text}</span>
</span>
);
};
172 changes: 172 additions & 0 deletions docs_website/src/components/HomePage/HeaderSection/GradientText.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
.GradientText {
.gradient-content {
background-image: linear-gradient(90deg, #e60023, #fdc900);
background-clip: text;
-webkit-text-fill-color: transparent;
}

display: inline-flex;
position: relative;
&::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-weight: var(--ifm-heading-font-weight);
line-height: var(--ifm-heading-line-height);
white-space: nowrap;
}
}
.GradientText.text-discover {
.gradient-content {
background-image: linear-gradient(
to right top,
#f65b50,
#f55e52,
#f46153,
#f36355,
#f26657,
#f47157,
#f67c59,
#f7875b,
#fa9c61,
#fcb16b,
#fec578,
#ffd889
);
animation: animation-text-discover 6s infinite;
}
&::before {
content: 'Discover';
animation: animation-text-discover-rev 6s infinite;
}
}

.GradientText.text-analyze {
.gradient-content {
background-image: linear-gradient(
to right top,
#34657f,
#3f7890,
#4b8c9f,
#5aa1ae,
#6bb5bc,
#6bc0c0,
#6fcbc3,
#76d6c3,
#74dab5,
#7bdca2,
#8bdd8d,
#9fdd75
);
animation: animation-text-analyze 6s infinite;
}
&::before {
content: 'Analyze';
animation: animation-text-analyze-rev 6s infinite;
}
}

.GradientText.text-collaborate {
.gradient-content {
background-image: linear-gradient(
to right top,
#534b94,
#734b99,
#914a9a,
#ae4797,
#c8458f,
#d54e90,
#e15891,
#ec6292,
#f0759f,
#f386ac,
#f697b9,
#f9a8c5
);
animation: animation-text-collaborate 6s infinite;
}
&::before {
content: 'Collaborate';
animation: animation-text-collaborate-rev 6s infinite;
}
}

@keyframes animation-text-discover {
0%,
27%,
100% {
opacity: 1;
}
33%,
94% {
opacity: 0;
}
}

@keyframes animation-text-discover-rev {
0%,
27%,
100% {
opacity: 0;
}
33%,
94% {
opacity: 1;
}
}

@keyframes animation-text-analyze {
0%,
27% {
opacity: 0;
}
33%,
60% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}

@keyframes animation-text-analyze-rev {
0%,
27% {
opacity: 1;
}
33%,
60% {
opacity: 0;
}
66%,
100% {
opacity: 1;
}
}

@keyframes animation-text-collaborate {
0%,
60%,
100% {
opacity: 0;
}
66%,
94% {
opacity: 1;
}
}

@keyframes animation-text-collaborate-rev {
0%,
60%,
100% {
opacity: 1;
}
66%,
94% {
opacity: 0;
}
}
17 changes: 14 additions & 3 deletions docs_website/src/components/HomePage/HeaderSection/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,29 @@ import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
import './index.scss';
import GradientText from './GradientText';

export default () => {
return (
<div className="HeaderSection HomePageSection">
<div className="hero ">
<div className="container">
<h1 className="hero__title">
Discover, Analyze, and Collaborate
<GradientText
text="Discover"
className="text-discover"
/>
,
<GradientText text="Analyze" className="text-analyze" />
, and{' '}
<GradientText
text="Collaborate"
className="text-collaborate"
/>
</h1>
<p className="hero__subtitle">
DataHub is Pinterest’s open-sourced big data portal via
a notebook interface.
<b>DataHub</b> is Pinterest’s open-sourced big data
portal via a notebook interface.
</p>
<div className="DataHubTutorialVideo">
<iframe
Expand Down
Loading