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.
Merge branch 'datahub-project:master' into master
- Loading branch information
Showing
34 changed files
with
1,127 additions
and
248 deletions.
There are no files selected for viewing
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
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
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
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
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
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
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
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,16 @@ | ||
import { useEffect } from 'react'; | ||
|
||
export const useCommandS = (onPress: () => void) => { | ||
useEffect(() => { | ||
const handleKeyDown = (event: KeyboardEvent) => { | ||
if (event.metaKey && event.key === 's') { | ||
event.preventDefault(); | ||
onPress(); | ||
} | ||
}; | ||
window.addEventListener('keydown', handleKeyDown); | ||
return () => { | ||
window.removeEventListener('keydown', handleKeyDown); | ||
}; | ||
}, [onPress]); | ||
}; |
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
30 changes: 30 additions & 0 deletions
30
docs-website/src/learn/_components/LearnItemCard/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,30 @@ | ||
import React from "react"; | ||
import clsx from "clsx"; | ||
import Link from "@docusaurus/Link"; | ||
import { useBlogPost } from "@docusaurus/theme-common/internal"; | ||
import styles from "./styles.module.scss"; | ||
|
||
export default function LearnItemCard() { | ||
const { metadata } = useBlogPost(); | ||
const { permalink, title, description, formattedDate, frontMatter } = metadata; | ||
return ( | ||
<div className={clsx("col col--4", styles.featureCol)}> | ||
<Link to={permalink} className={clsx("card", styles.card)}> | ||
{frontMatter?.image ? ( | ||
<div className={styles.card_image}> | ||
<img src={frontMatter?.image} alt={title} /> | ||
</div> | ||
) : ( | ||
<div className={clsx("card__header", styles.featureHeader)}> | ||
<h2>{title}</h2> | ||
</div> | ||
)} | ||
<div className={clsx("card__body", styles.featureBody)}> | ||
<div>{description}</div> | ||
</div> | ||
|
||
<div className={clsx(styles.card_date)}>Published on {formattedDate}</div> | ||
</Link> | ||
</div> | ||
); | ||
} |
53 changes: 53 additions & 0 deletions
53
docs-website/src/learn/_components/LearnItemCard/styles.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,53 @@ | ||
.featureCol { | ||
display: flex; | ||
} | ||
|
||
.card_date { | ||
padding: 1rem 2rem; | ||
font-size: 0.8rem; | ||
font-style: italic; | ||
color: gray; | ||
margin-top: auto; | ||
} | ||
|
||
.card_feature { | ||
font-size: 2rem; | ||
font-weight: 700; | ||
} | ||
|
||
.card { | ||
color: var(--ifm-text-color); | ||
text-decoration: none !important; | ||
padding: 0rem; | ||
margin-bottom: 2rem; | ||
align-self: stretch; | ||
flex-grow: 1; | ||
&:hover { | ||
border-color: var(--ifm-color-primary); | ||
} | ||
hr { | ||
margin: 0; | ||
} | ||
} | ||
|
||
.featureHeader { | ||
h2 { | ||
margin-bottom: 1rem !important; | ||
font-size: 1.25rem; | ||
} | ||
padding: 1rem 2rem; | ||
} | ||
|
||
.featureBody { | ||
padding: 0 2rem; | ||
} | ||
|
||
.card_image { | ||
margin: 0; | ||
margin-bottom: 0.5rem; | ||
|
||
img { | ||
width: 100%; | ||
height: auto; | ||
} | ||
} |
91 changes: 91 additions & 0 deletions
91
docs-website/src/learn/_components/LearnListPage/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,91 @@ | ||
import React, { useState } from "react"; | ||
import clsx from "clsx"; | ||
|
||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; | ||
import { PageMetadata, HtmlClassNameProvider, ThemeClassNames } from "@docusaurus/theme-common"; | ||
import BlogListPaginator from "@theme/BlogListPaginator"; | ||
import SearchMetadata from "@theme/SearchMetadata"; | ||
import { BlogPostProvider } from "@docusaurus/theme-common/internal"; | ||
import LearnItemCard from "../LearnItemCard"; | ||
import Layout from "@theme/Layout"; | ||
import styles from "./styles.module.scss"; | ||
|
||
function BlogListPageMetadata(props) { | ||
const { metadata } = props; | ||
const { | ||
siteConfig: { title: siteTitle }, | ||
} = useDocusaurusContext(); | ||
const { blogDescription, blogTitle, permalink } = metadata; | ||
const isBlogOnlyMode = permalink === "/"; | ||
const title = isBlogOnlyMode ? siteTitle : blogTitle; | ||
return ( | ||
<> | ||
<PageMetadata title={title} description={blogDescription} /> | ||
<SearchMetadata tag="blog_posts_list" /> | ||
</> | ||
); | ||
} | ||
|
||
function BlogListPageContent(props) { | ||
const { metadata, items } = props; | ||
const [activeFilters, setActiveFilters] = useState([]); | ||
// These are currently hardcoded, check the frontmatter of the blog posts to see what audiences are available | ||
const audiences = ["Data Governance Leads", "Data Engineers", "Data Architects", "Data Platform Leads", "Data Analysts"]; | ||
|
||
const filteredItems = activeFilters?.length | ||
? (items || []).filter((post) => activeFilters.some((activeFilter) => post?.content?.frontMatter?.audience?.some((a) => a === activeFilter))) | ||
: items; | ||
|
||
const handleFilterToggle = (audience) => { | ||
if (activeFilters.includes(audience)) { | ||
setActiveFilters(activeFilters.filter((filter) => filter !== audience)); | ||
} else { | ||
setActiveFilters([...new Set([...activeFilters, audience])]); | ||
} | ||
}; | ||
|
||
return ( | ||
<Layout> | ||
<header className={"hero"}> | ||
<div className="container"> | ||
<div className="hero__content"> | ||
<div> | ||
<h1 className="hero__title">DataHub Learn</h1> | ||
<p className="hero__subtitle">Learn about the hot topics in the data ecosystem and how DataHub can help you with your data journey.</p> | ||
</div> | ||
</div> | ||
<div className={styles.filterBar}> | ||
<strong>For: </strong> | ||
{audiences.map((audience) => ( | ||
<button | ||
className={`button button--secondary ${activeFilters.includes(audience) && "button--active"}`} | ||
onClick={() => handleFilterToggle(audience)} | ||
> | ||
{audience} | ||
</button> | ||
))} | ||
</div> | ||
</div> | ||
</header> | ||
<div className="container"> | ||
<div className="row"> | ||
{(filteredItems || []).map(({ content: BlogPostContent }) => ( | ||
<BlogPostProvider key={BlogPostContent.metadata.permalink} content={BlogPostContent}> | ||
<LearnItemCard /> | ||
</BlogPostProvider> | ||
))} | ||
</div> | ||
<BlogListPaginator metadata={metadata} /> | ||
</div> | ||
</Layout> | ||
); | ||
} | ||
|
||
export default function BlogListPage(props) { | ||
return ( | ||
<HtmlClassNameProvider className={clsx(ThemeClassNames.wrapper.blogPages, ThemeClassNames.page.blogListPage)}> | ||
<BlogListPageMetadata {...props} /> | ||
<BlogListPageContent {...props} /> | ||
</HtmlClassNameProvider> | ||
); | ||
} |
7 changes: 7 additions & 0 deletions
7
docs-website/src/learn/_components/LearnListPage/styles.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,7 @@ | ||
.filterBar { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
gap: 10px; | ||
flex-wrap: wrap; | ||
} |
Oops, something went wrong.