forked from datahub-project/datahub
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Revamp features page (datahub-project#8839)
- Loading branch information
1 parent
15e68bb
commit fd129c7
Showing
9 changed files
with
324 additions
and
102 deletions.
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
docs-website/src/pages/docs/_components/FeatureCard/featurecard.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| .feature { | ||
| flex-direction: row; | ||
| padding: 1.75rem; | ||
| color: var(--ifm-hero-text-color); | ||
| margin: 0rem 2rem 1rem 0rem; | ||
| min-height: 14rem; | ||
| max-height: 15rem; | ||
| overflow: hidden; | ||
| text-decoration: none !important; | ||
|
|
||
| img { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| svg { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| strong, | ||
| span { | ||
| display: block; | ||
| margin-bottom: 0.75rem; | ||
| } | ||
| strong { | ||
| font-weight: 600; | ||
| font-size: 1.1rem; | ||
| } | ||
|
|
||
| span { | ||
| font-size: 1rem; | ||
| line-height: 1.25em; | ||
| } | ||
| &:hover { | ||
| border-color: var(--ifm-color-primary); | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
docs-website/src/pages/docs/_components/FeatureCard/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from "react"; | ||
| import clsx from "clsx"; | ||
| import styles from "./featurecard.module.scss"; | ||
| import useBaseUrl from "@docusaurus/useBaseUrl"; | ||
| import Link from "@docusaurus/Link"; | ||
|
|
||
| const FeatureCard = ({icon, title, description, to}) => { | ||
| return ( | ||
| <div className="col col--4"> | ||
| <Link to={useBaseUrl(to)} className={clsx("card", styles.feature)}> | ||
| <div> | ||
| {icon} | ||
| <strong>{title} →</strong> | ||
| <span>{description}</span> | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeatureCard; |
36 changes: 36 additions & 0 deletions
36
docs-website/src/pages/docs/_components/FeatureCardSection/featurecardsection.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
|
|
||
|
|
||
| .feature { | ||
| flex-direction: row; | ||
| padding: 0.675rem; | ||
| color: var(--ifm-text-color); | ||
| margin: 0.5rem; | ||
| min-height: calc(100% - 1rem); | ||
| text-decoration: none !important; | ||
| img { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| svg { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| strong, | ||
| span { | ||
| display: block; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
| strong { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| span { | ||
| font-size: 0.875rem; | ||
| line-height: 1.25em; | ||
| } | ||
| &:hover { | ||
| border-color: var(--ifm-color-primary); | ||
| } | ||
| } |
65 changes: 65 additions & 0 deletions
65
docs-website/src/pages/docs/_components/FeatureCardSection/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React from "react"; | ||
| import FeatureCard from '../FeatureCard' | ||
| import { | ||
| EyeTwoTone, | ||
| HeartTwoTone, | ||
| ApiTwoTone, | ||
| AlertTwoTone, | ||
| CompassTwoTone, | ||
| ProfileTwoTone, | ||
| } from "@ant-design/icons"; | ||
|
|
||
| const featureCardContent = [ | ||
| { | ||
| title: "Data Discovery", | ||
| description: "Search your entire data ecosystem, including dashboards, datasets, ML models, and raw files.", | ||
| to: "docs/how/search", | ||
| icon: <EyeTwoTone /> | ||
| }, | ||
| { | ||
| title: "Data Governance", | ||
| description: "Define ownership and track PII.", | ||
| to: "https://www.acryldata.io/blog/the-3-must-haves-of-metadata-management-part-2?utm_source=datahub&utm_medium=referral&utm_content=blog", | ||
| icon: <CompassTwoTone /> | ||
| }, | ||
| { | ||
| title: "Data Quality Control", | ||
| description: "Improve data quality through metadata tests, assertions, data freshness checks, and data contracts.", | ||
| to: "https://www.acryldata.io/blog/data-contracts-in-datahub-combining-verifiability-with-holistic-data-management?utm_source=datahub&utm_medium=referral&utm_content=blog", | ||
| icon: <AlertTwoTone /> | ||
| }, | ||
| { | ||
| title: "UI-based Ingestion", | ||
| description: "Easily set up integrations in minutes using DataHub's intuitive UI-based ingestion feature.", | ||
| to: "docs/ui-ingestion", | ||
| icon: <ProfileTwoTone /> | ||
| }, | ||
| { | ||
| title: "APIs and SDKs", | ||
| description: "For users who prefer programmatic control, DataHub offers a comprehensive set of APIs and SDKs.", | ||
| to: "docs/api/datahub-apis", | ||
| icon: <ApiTwoTone /> | ||
| }, | ||
| { | ||
| title: "Vibrant Community", | ||
| description: "Our community provides support through office hours, workshops, and a Slack channel.", | ||
| to: "docs/slack", | ||
| icon: <HeartTwoTone /> | ||
| } | ||
| ] | ||
|
|
||
| const FeatureCards = () => { | ||
| return ( | ||
| <div style={{ padding: "2vh 0" }}> | ||
| <div className="container" style={{ padding: "0"}}> | ||
| <div className="row row--no-gutters"> | ||
| {featureCardContent.map((props, idx) => ( | ||
| <FeatureCard key={idx} {...props} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeatureCards; |
22 changes: 22 additions & 0 deletions
22
docs-website/src/pages/docs/_components/QuickstartCard/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from "react"; | ||
| import clsx from "clsx"; | ||
| import styles from "./quickstartcard.module.scss"; | ||
| import Link from "@docusaurus/Link"; | ||
| import useBaseUrl from "@docusaurus/useBaseUrl"; | ||
|
|
||
|
|
||
| const QuickstartCard = ({ icon, title, to, color, fontColor }) => { | ||
| return ( | ||
| <div className="col col--6"> | ||
| <Link to={to} className={clsx("card", styles.feature)} style={{ background: color, color: fontColor}}> | ||
| <img src={useBaseUrl(`/img/${icon}.svg`)} /> | ||
| <div style={{ margin: "auto 0"}}> | ||
| <strong>{title} →</strong> | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| export default QuickstartCard; |
48 changes: 48 additions & 0 deletions
48
docs-website/src/pages/docs/_components/QuickstartCard/quickstartcard.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| .feature { | ||
| flex-direction: row; | ||
| height: 10rem; | ||
| flex-shrink: 0; | ||
| padding: 3rem; | ||
| color: var(--ifm-text-color); | ||
| margin: 0rem 2rem 1rem 0rem; | ||
| min-height: calc(100% - 1rem); | ||
| text-decoration: none !important; | ||
|
|
||
|
|
||
| img { | ||
| width: 3rem; | ||
| height: 3rem; | ||
| margin: auto 1rem; | ||
| } | ||
| svg { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| strong, | ||
| span { | ||
| display: block; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
| strong { | ||
| font-weight: 600; | ||
| padding: auto 0; | ||
| } | ||
|
|
||
| span { | ||
| font-size: 0.875rem; | ||
| line-height: 1.25em; | ||
| } | ||
| &:hover { | ||
| border-color: var(--ifm-color-primary); | ||
| } | ||
|
|
||
| .quickstart-text { | ||
| margin: auto 0; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .quickstart-text { | ||
| margin: auto 0; | ||
| } |
35 changes: 35 additions & 0 deletions
35
docs-website/src/pages/docs/_components/QuickstartCards/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from "react"; | ||
| import QuickstartCard from '../QuickstartCard' | ||
|
|
||
| const quickstartContent = [ | ||
| { | ||
| title: "Quickstart with DataHub", | ||
| icon: "datahub-logo-color-mark", | ||
| to: "quickstart", | ||
| color: '#FFF', | ||
| fontColor: '#091013', | ||
| }, | ||
| { | ||
| title: "Learn about Managed DataHub", | ||
| icon: "acryl-logo-transparent-mark", | ||
| to: "managed-datahub/managed-datahub-overview", | ||
| color: '#091013', | ||
| fontColor: '#FFF', | ||
| } | ||
| ] | ||
|
|
||
| const QuickstartCards = () => { | ||
| return ( | ||
| <div style={{ padding: "2vh 0" }}> | ||
| <div className="container" style={{ padding: "0"}}> | ||
| <div className="row row--no-gutters"> | ||
| {quickstartContent.map((props, idx) => ( | ||
| <QuickstartCard key={idx} {...props} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default QuickstartCards; |
34 changes: 34 additions & 0 deletions
34
docs-website/src/pages/docs/_components/QuickstartCards/quickstartcards.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| .feature { | ||
| flex-direction: row; | ||
| padding: 0.675rem; | ||
| color: var(--ifm-text-color); | ||
| margin: 0.5rem; | ||
| min-height: calc(100% - 1rem); | ||
| text-decoration: none !important; | ||
| img { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| svg { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| margin-right: 0.75rem; | ||
| } | ||
| strong, | ||
| span { | ||
| display: block; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
| strong { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| span { | ||
| font-size: 0.875rem; | ||
| line-height: 1.25em; | ||
| } | ||
| &:hover { | ||
| border-color: var(--ifm-color-primary); | ||
| } | ||
| } |
Oops, something went wrong.