From a4942896dd896add25e08703306ed5c2bfbb4b66 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Mon, 11 Oct 2021 15:04:35 -0500 Subject: [PATCH 1/4] Add markdown tabs --- .../Markdown/ToggleProvider/index.tsx | 48 ++++++++++ .../Documentation/Markdown/index.tsx | 94 ++++++++++++++++++- .../Documentation/Markdown/styles.module.css | 50 ++++++++++ 3 files changed, 189 insertions(+), 3 deletions(-) create mode 100644 src/components/Documentation/Markdown/ToggleProvider/index.tsx diff --git a/src/components/Documentation/Markdown/ToggleProvider/index.tsx b/src/components/Documentation/Markdown/ToggleProvider/index.tsx new file mode 100644 index 0000000000..7d4df78c6c --- /dev/null +++ b/src/components/Documentation/Markdown/ToggleProvider/index.tsx @@ -0,0 +1,48 @@ +import React, { createContext, useState } from 'react' + +interface ITogglesData { + [key: string]: { texts: string[]; checkedInd: number } +} + +interface ITogglesContext { + addNewToggle?: (id: string, texts: string[]) => void + updateToggleInd?: (id: string, newInd: number) => void + togglesData?: ITogglesData +} + +export const TogglesContext = createContext({}) + +export const TogglesProvider: React.FC = ({ children }) => { + const [togglesData, setTogglesData] = useState({}) + + const addNewToggle = (id: string, texts: string[]): void => { + const togglesDataCopy: ITogglesData = { ...togglesData } + togglesDataCopy[id] = { texts, checkedInd: 0 } + setTogglesData(togglesDataCopy) + } + + const updateToggleInd = (id: string, newInd: number): void => { + const togglesDataCopy: ITogglesData = { ...togglesData } + const selectedTabText = togglesDataCopy[id].texts[newInd] + togglesDataCopy[id] = { ...togglesDataCopy[id], checkedInd: newInd } + + for (const [toggleId, { texts }] of Object.entries(togglesDataCopy)) { + if (texts.includes(selectedTabText)) { + togglesDataCopy[toggleId] = { + ...togglesDataCopy[toggleId], + checkedInd: togglesDataCopy[id].texts.indexOf(selectedTabText) + } + } + } + + setTogglesData(togglesDataCopy) + } + + return ( + + {children} + + ) +} diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx index fc76f76243..f7881d23a5 100644 --- a/src/components/Documentation/Markdown/index.tsx +++ b/src/components/Documentation/Markdown/index.tsx @@ -1,4 +1,11 @@ -import React, { ReactNode, ReactElement } from 'react' +import React, { + useEffect, + useState, + ReactNode, + ReactElement, + useContext +} from 'react' +import { nanoid } from 'nanoid' import rehypeReact from 'rehype-react' import Collapsible from 'react-collapsible' @@ -7,6 +14,7 @@ import Link from '../../Link' import Tooltip from './Tooltip' import styles from './styles.module.css' +import { TogglesContext, TogglesProvider } from './ToggleProvider' const Details: React.FC<{ children: Array<{ props: { children: ReactNode } } | string> @@ -95,6 +103,84 @@ const Card: React.FC<{ ) } +const ToggleTab: React.FC<{ + id: string + title: string + ind: number + onChange: () => void + checked: boolean +}> = ({ children, id, checked, ind, onChange, title }) => { + const inputId = `tab-${id}-${ind}` + + return ( + <> + + + {children} + + ) +} + +const Toggle: React.FC<{ + children: Array<{ props: { title: string } } | string> +}> = ({ children }) => { + const [toggleId, setToggleId] = useState('') + const { + addNewToggle = (): null => null, + updateToggleInd = (): null => null, + togglesData = {} + } = useContext(TogglesContext) + const tabs: Array<{ props: { title: string } } | string> = children.filter( + child => child !== '\n' + ) + const tabsTitles = tabs.map(tab => + typeof tab === 'object' ? tab.props.title : '' + ) + + useEffect(() => { + if (toggleId === '') { + const newId = nanoid() + addNewToggle(newId, tabsTitles) + setToggleId(newId) + } + + if (toggleId && !togglesData[toggleId]) { + addNewToggle(toggleId, tabsTitles) + } + }, [togglesData]) + + return ( +
+ {tabs.map((tab, i) => ( + updateToggleInd(toggleId, i)} + > + {tab} + + ))} +
+ ) +} + +const Tab: React.FC = ({ children }) => ( +
{children}
+) + const renderAst = new rehypeReact({ // eslint-disable-next-line @typescript-eslint/no-explicit-any createElement: React.createElement as any, @@ -104,7 +190,9 @@ const renderAst = new rehypeReact({ abbr: Abbr, a: Link, card: Card, - cards: Cards + cards: Cards, + toggle: Toggle, + tab: Tab } }).Compiler @@ -125,7 +213,7 @@ const Markdown: React.FC = ({ }) => { return (
- {renderAst(htmlAst)} + {renderAst(htmlAst)}
) } diff --git a/src/components/Documentation/Markdown/styles.module.css b/src/components/Documentation/Markdown/styles.module.css index 08f999dfb3..7c8f0f591c 100644 --- a/src/components/Documentation/Markdown/styles.module.css +++ b/src/components/Documentation/Markdown/styles.module.css @@ -118,3 +118,53 @@ a.card { background-color: var(--color-light-blue); } } + +.toggle { + display: flex; + flex-wrap: wrap; + + input { + height: 0; + opacity: 0; + position: absolute; + width: 0; + overflow: hidden; + } + + input:checked + label { + color: var(--color-azure); + border-color: var(--color-azure); + } + + input:checked + label + .tab { + height: initial; + opacity: initial; + position: static; + width: 100%; + overflow: visible; + } + + .tabHeading { + padding: 12px 16px 10px; + background-color: transparent; + border: none; + border-bottom: 2px solid transparent; + font-weight: bold; + font-size: 16px; + font-family: var(--font-brandon); + order: -1; + + &:hover { + cursor: pointer; + } + } +} + +.tab { + margin: 10px 0 0; + height: 0; + opacity: 0; + position: absolute; + overflow: hidden; + width: 0; +} From 90170449e38fce9af407d88a331a2f15798f3616 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Mon, 11 Oct 2021 15:06:06 -0500 Subject: [PATCH 2/4] TBD Add example markdown tabs in DVC docs home --- content/docs/index.md | 84 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/content/docs/index.md b/content/docs/index.md index decee1eef6..4c4858e956 100644 --- a/content/docs/index.md +++ b/content/docs/index.md @@ -5,6 +5,39 @@ Data Version Control, or DVC, is a data and ML advantage of the existing engineering toolset that you're already familiar with (Git, CI/CD, etc.). + + + + +```dvc +$ git status + Changes to be committed: + new file: .dvc/.gitignore + new file: .dvc/config + ... +$ git commit -m "Initialize DVC" +``` + + + + + +```dvc +$ dvc init +``` + + + + + +```dvc +$ dvc exp run --set-param featurize.max_features=3000 +``` + + + + + @@ -25,6 +58,41 @@ advantage of the existing engineering toolset that you're already familiar with + + + + +- nd ligula lacus sed mi. Proin hendrerit molestie est vitae tempor. Nulla + ultrices, tortor sed convallis molestie, sed sapien varius pharetra ut id + justo. +- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat + accumsan +- risus mauris porta ipsum, vitae suscipit eros felis at risus. Duis in nunc et + quam mattis porta. Fusce eget fermentum velit. Nullam id lectus + + + + + +- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat + accumsan + + + + + +- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat + accumsan +- risus mauris porta ipsum, vitae suscipit eros felis at risus. Duis in nunc et + quam mattis porta. Fusce eget fermentum velit. Nullam id lectus + + + + + ✅ Please join our [community](/community) or use the [support](/support) channels if you have any questions or need specific help. We are very responsive ⚡. @@ -34,3 +102,19 @@ us a ⭐ if you like the project! ✅ Contribute to DVC [on GitHub](https://github.com/iterative/dvc) or help us improve this [documentation](https://github.com/iterative/dvc.org) 🙏. + + + + +nd ligula lacus sed mi. Proin hendrerit molestie est vitae tempor. Nulla ultrices, tortor sed convallis molestie, risus mauris porta ipsum, vitae suscipit eros felis at risus. Duis in nunc et quam mattis porta. Fusce eget fermentum velit. Nullam id lectus sed sapien varius pharetra ut id justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat accumsan + + + +da quis vel est. Sed at varius lectus, ac tincidunt diam. Donec eu convallis sem, ac scelerisque risus. Aliquam eu turpis tristique, fermentum justo in, ultricies arcu. Nulla mi quam, ultricies sed tincidunt sed, tristique at quam. Etiam tellus enim, ullamcorper a velit et, euismod lobortis diam. Maecenas commodo auctor metus efficitur ornare. Quisque ut est fermentum, viverra augue a, dignissim tellus. Sed et vulputate lorem, sollicitudin tempus ante. Aenean sed nunc vel metus euismo + + + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo nisi, scelerisque non molestie dapibus, rhoncus eu lorem. Aenean luctus diam mauris, non aliquam urna interdum ac. Suspendisse pellentesque neque ipsum, id pharetra nisi tincidunt eget. Duis auctor enim nisl, vel vestibulum mi feugiat quis. Nulla volutpat turpis non gravida dictum. Suspendisse venenatis lacus vitae nisl bibendum rhoncus. Fusce justo sapien, rhoncus vitae congue quis, porttitor at dui. Aenean rhoncus egestas enim, at accumsan enim molestie quis. Etiam aliquam tincidunt sem vel tempor. Integer sollicitudin dictum maximus. Vestibulum ornare leo quis tortor bibendum, sed fri + + + From 1e5c1f99da7bfe34d0f7cd6c080e18afbd2ea0cb Mon Sep 17 00:00:00 2001 From: julieg18 Date: Mon, 11 Oct 2021 16:03:41 -0500 Subject: [PATCH 3/4] Revert "TBD Add example markdown tabs in DVC docs" This reverts commit 90170449e38fce9af407d88a331a2f15798f3616. --- content/docs/index.md | 84 ------------------------------------------- 1 file changed, 84 deletions(-) diff --git a/content/docs/index.md b/content/docs/index.md index 4c4858e956..decee1eef6 100644 --- a/content/docs/index.md +++ b/content/docs/index.md @@ -5,39 +5,6 @@ Data Version Control, or DVC, is a data and ML advantage of the existing engineering toolset that you're already familiar with (Git, CI/CD, etc.). - - - - -```dvc -$ git status - Changes to be committed: - new file: .dvc/.gitignore - new file: .dvc/config - ... -$ git commit -m "Initialize DVC" -``` - - - - - -```dvc -$ dvc init -``` - - - - - -```dvc -$ dvc exp run --set-param featurize.max_features=3000 -``` - - - - - @@ -58,41 +25,6 @@ $ dvc exp run --set-param featurize.max_features=3000 - - - - -- nd ligula lacus sed mi. Proin hendrerit molestie est vitae tempor. Nulla - ultrices, tortor sed convallis molestie, sed sapien varius pharetra ut id - justo. -- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac - turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat - accumsan -- risus mauris porta ipsum, vitae suscipit eros felis at risus. Duis in nunc et - quam mattis porta. Fusce eget fermentum velit. Nullam id lectus - - - - - -- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac - turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat - accumsan - - - - - -- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac - turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat - accumsan -- risus mauris porta ipsum, vitae suscipit eros felis at risus. Duis in nunc et - quam mattis porta. Fusce eget fermentum velit. Nullam id lectus - - - - - ✅ Please join our [community](/community) or use the [support](/support) channels if you have any questions or need specific help. We are very responsive ⚡. @@ -102,19 +34,3 @@ us a ⭐ if you like the project! ✅ Contribute to DVC [on GitHub](https://github.com/iterative/dvc) or help us improve this [documentation](https://github.com/iterative/dvc.org) 🙏. - - - - -nd ligula lacus sed mi. Proin hendrerit molestie est vitae tempor. Nulla ultrices, tortor sed convallis molestie, risus mauris porta ipsum, vitae suscipit eros felis at risus. Duis in nunc et quam mattis porta. Fusce eget fermentum velit. Nullam id lectus sed sapien varius pharetra ut id justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ac aliquet risus. Vestibulum ut felis nec erat accumsan - - - -da quis vel est. Sed at varius lectus, ac tincidunt diam. Donec eu convallis sem, ac scelerisque risus. Aliquam eu turpis tristique, fermentum justo in, ultricies arcu. Nulla mi quam, ultricies sed tincidunt sed, tristique at quam. Etiam tellus enim, ullamcorper a velit et, euismod lobortis diam. Maecenas commodo auctor metus efficitur ornare. Quisque ut est fermentum, viverra augue a, dignissim tellus. Sed et vulputate lorem, sollicitudin tempus ante. Aenean sed nunc vel metus euismo - - - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo nisi, scelerisque non molestie dapibus, rhoncus eu lorem. Aenean luctus diam mauris, non aliquam urna interdum ac. Suspendisse pellentesque neque ipsum, id pharetra nisi tincidunt eget. Duis auctor enim nisl, vel vestibulum mi feugiat quis. Nulla volutpat turpis non gravida dictum. Suspendisse venenatis lacus vitae nisl bibendum rhoncus. Fusce justo sapien, rhoncus vitae congue quis, porttitor at dui. Aenean rhoncus egestas enim, at accumsan enim molestie quis. Etiam aliquam tincidunt sem vel tempor. Integer sollicitudin dictum maximus. Vestibulum ornare leo quis tortor bibendum, sed fri - - - From 474b5cafdd1d2ceb122d8cd1d99a3a6b55334b3b Mon Sep 17 00:00:00 2001 From: "Restyled.io" Date: Mon, 11 Oct 2021 21:08:34 +0000 Subject: [PATCH 4/4] Restyled by prettier --- src/components/Documentation/Markdown/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx index f7881d23a5..5c7b679b87 100644 --- a/src/components/Documentation/Markdown/index.tsx +++ b/src/components/Documentation/Markdown/index.tsx @@ -42,7 +42,7 @@ const Details: React.FC<{ */ return ( {filteredChildren.slice(1)}