From 511f66d844e720f91727970cd9880f02f61f2afc Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 30 Jun 2021 11:01:28 -0500 Subject: [PATCH 1/8] Fix typos in sidebar.json user-guide section --- content/docs/sidebar.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/sidebar.json b/content/docs/sidebar.json index 2418d6a950..834e686f5d 100644 --- a/content/docs/sidebar.json +++ b/content/docs/sidebar.json @@ -100,7 +100,7 @@ }, { "slug": "project-structure", - "source": "user-guide/project-structure/index.md", + "source": "project-structure/index.md", "children": [ { "label": "Pipelines Files (dvc.yaml)", @@ -138,7 +138,7 @@ { "label": "Experiment Management", "slug": "experiment-management", - "source": "user-guide/experiment-management/index.md", + "source": "experiment-management/index.md", "children": ["checkpoints"] }, "setup-google-drive-remote", From ca9c4faa312590b12e2267ed56aba89cebbec3fc Mon Sep 17 00:00:00 2001 From: julieg18 Date: Wed, 30 Jun 2021 17:01:12 -0500 Subject: [PATCH 2/8] Add glossary page to doc/user-guide * add Documentation Markdown/Main and WithJSX components * add template for creating doc pages with jsx instead of markdown * add glossary page to pages directory --- content/docs/sidebar.json | 5 + .../Documentation/Markdown/Main/index.tsx | 109 ++++++ .../Markdown/Main/styles.module.css | 313 ++++++++++++++++++ .../Documentation/Markdown/index.tsx | 96 +----- .../Documentation/Markdown/styles.module.css | 312 ----------------- .../Documentation/WithJSX/index.tsx | 41 +++ src/components/Documentation/index.tsx | 5 +- src/gatsby/common.js | 2 + src/pages/doc/user-guide/glossary.tsx | 26 ++ src/templates/doc-jsx.tsx | 33 ++ 10 files changed, 538 insertions(+), 404 deletions(-) create mode 100644 src/components/Documentation/Markdown/Main/index.tsx create mode 100644 src/components/Documentation/Markdown/Main/styles.module.css create mode 100644 src/components/Documentation/WithJSX/index.tsx create mode 100644 src/pages/doc/user-guide/glossary.tsx create mode 100644 src/templates/doc-jsx.tsx diff --git a/content/docs/sidebar.json b/content/docs/sidebar.json index 834e686f5d..0da54ce7d5 100644 --- a/content/docs/sidebar.json +++ b/content/docs/sidebar.json @@ -94,6 +94,11 @@ "slug": "user-guide", "source": "user-guide/index.md", "children": [ + { + "label": "Glossary", + "slug": "glossary", + "source": "basic-concepts" + }, { "label": "What is DVC?", "slug": "what-is-dvc" diff --git a/src/components/Documentation/Markdown/Main/index.tsx b/src/components/Documentation/Markdown/Main/index.tsx new file mode 100644 index 0000000000..91a815f455 --- /dev/null +++ b/src/components/Documentation/Markdown/Main/index.tsx @@ -0,0 +1,109 @@ +import React, { useEffect, useRef, useCallback } from 'react' +import cn from 'classnames' +import { navigate } from '@reach/router' + +import Link from '../../../Link' +import Tutorials from '../../TutorialsLinks' +import { getPathWithSource } from '../../../../utils/shared/sidebar' + +import 'github-markdown-css/github-markdown.css' +import sharedStyles from '../../styles.module.css' +import styles from './styles.module.css' + +const isInsideCodeBlock = (node: Element): boolean => { + while (node?.parentNode) { + if (node.tagName === 'PRE') { + return true + } + + if (node.tagName === 'ARTICLE') { + return false + } + + node = node.parentNode as Element + } + + return false +} + +interface IMainProps { + githubLink: string + tutorials: { [type: string]: string } + prev?: string + next?: string +} + +const Main: React.FC = ({ + children, + prev, + next, + tutorials, + githubLink +}) => { + const touchstartXRef = useRef(0) + const touchendXRef = useRef(0) + const isCodeBlockRef = useRef(false) + const handleSwipeGesture = useCallback(() => { + if (isCodeBlockRef.current) return + + if (next && touchstartXRef.current - touchendXRef.current > 100) { + navigate(next) + } + + if (prev && touchendXRef.current - touchstartXRef.current > 100) { + navigate(prev) + } + }, [prev, next]) + const onTouchStart = useCallback(e => { + isCodeBlockRef.current = isInsideCodeBlock(e.target) + touchstartXRef.current = e.changedTouches[0].screenX + }, []) + const onTouchEnd = useCallback(e => { + touchendXRef.current = e.changedTouches[0].screenX + handleSwipeGesture() + }, []) + + useEffect(() => { + document.addEventListener('touchstart', onTouchStart, false) + document.addEventListener('touchend', onTouchEnd, false) + + return (): void => { + document.removeEventListener('touchstart', onTouchStart) + document.removeEventListener('touchend', onTouchEnd) + } + }, []) + + return ( +
+ {tutorials && ( +
+ +
+ )} + + Edit on + GitHub + +
{children}
+
+ + + Prev + + + Next + + +
+
+ ) +} + +export default Main diff --git a/src/components/Documentation/Markdown/Main/styles.module.css b/src/components/Documentation/Markdown/Main/styles.module.css new file mode 100644 index 0000000000..89c2141166 --- /dev/null +++ b/src/components/Documentation/Markdown/Main/styles.module.css @@ -0,0 +1,313 @@ +:global { + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } + + em { + font-style: italic; + } + + #markdown-root { + @keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + animation-duration: 1s; + animation-fill-mode: both; + + :local { + animation-name: fadeIn; + } + } + + .markdown-body { + font-family: inherit; + font-size: 18px; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: 500; + } + + img + em, + :global(.gatsby-resp-image-wrapper) + em { + color: #6a737d; + font-size: 0.9em; + display: block; + margin-top: -6px; + text-align: center; + } + + :global(.gatsby-resp-image-wrapper) + em { + margin-top: 0; + } + + a[target='_blank'] { + white-space: nowrap; + + &::after { + position: relative; + top: 1px; + right: 0; + width: 12px; + height: 12px; + margin-left: 1px; + content: url(/img/external-link.svg); + } + } + + :global(a.gatsby-resp-image-link)::after { + content: unset; + } + + .anchor { + margin-left: -24px; + } + + li { + margin: 16px 0; + } + + pre[class*='language-'] { + background: #40354d; + color: #ccc; + + .token.line { + color: #ddd; + } + + .token.comment, + .token.block-comment { + font-weight: normal; + color: #a0a0a0; + } + + .token.input { + user-select: none; + } + + .token.prolog, + .token.doctype, + .token.cdata { + color: #999; + } + + .token.url, + .token.constant, + .token.operator, + .token.punctuation { + color: #a0a0a0; + } + + .token.property, + .token.tag, + .token.boolean, + .token.function-name, + .token.symbol, + .token.deleted { + color: #4badd2; + } + + .token.function { + color: #ae41bb; + } + + .token.number, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #219161; + } + + .token.entity, + .token.variable { + color: #a67f59; + } + + .token.class-name { + color: #0086b3; + } + + .token.dvc { + color: #56b1d0; + font-weight: bold; + } + + .token.usage, + .token.git { + color: #e9836e; + } + + .token.command, + .token.selector, + .token.atrule, + .token.attr-value, + .token.keyword { + color: #e4b872; + } + + .token.regex, + .token.important { + color: #b68; + } + + .token.parameter { + color: #a0a0a0; + } + + .token.function-variable { + color: #7ece42; + } + + .token.important { + font-weight: normal; + } + + .token.bold { + font-weight: bold; + } + + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } + + .token.namespace { + opacity: 0.7; + } + } + } + + details p { + font-size: 17px; + color: var(--color-gray-dark); + margin-left: 20px; + margin-right: 10px; + } + + details pre { + font-size: 14px; + color: var(--color-gray-dark); + margin-left: 20px; + margin-right: 10px; + } +} + +.content { + min-width: 200px; + margin: 30px; + flex: 1; + background-color: #fff; + + @media (--xs-scr) { + margin: 15px 0; + } +} + +.tutorialsWrapper { + position: relative; + z-index: 1; + float: right; + margin: 5px 0 0 10px; + + @media (--md-scr) { + margin: 0 0 15px 0; + } + + @media only screen and (min-width: 1200px) { + display: none; + } +} + +.githubLink { + display: none; + float: right; + margin: 5px 0 10px 10px; + z-index: 1; + position: relative; + + @media (--md-scr) { + float: none; + margin: 0 0 15px 0; + } + + @media only screen and (max-width: 1200px) { + display: inline-flex; + } +} + +.githubIcon { + background-image: url(/img/github_icon.svg); +} + +.navButtons { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 40px; + font-size: 14px; + font-weight: 600; +} + +.navButton { + text-decoration: none; + background: white; + padding: 10px 15px; + text-transform: uppercase; + color: #333; + border-bottom: 3px solid #13adc7; + display: inline-flex; + align-items: center; + transition: 0.2s border-color ease-out; + + &:hover { + border-bottom: 3px solid #11849b; + } + + &[disabled] { + pointer-events: none; + opacity: 0.5; + } +} + +.navButtonIcon { + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + background-image: url(/img/arrow.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition: all 0.3s; + + &.next { + margin-left: 7px; + } + + &.prev { + margin-right: 7px; + mask-position: center; + transform: rotate(180deg); + margin-top: 2px; + } +} diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx index 625c35c169..fc76f76243 100644 --- a/src/components/Documentation/Markdown/index.tsx +++ b/src/components/Documentation/Markdown/index.tsx @@ -1,40 +1,13 @@ -import React, { - useCallback, - useEffect, - useRef, - ReactNode, - ReactElement -} from 'react' -import cn from 'classnames' -import { navigate } from '@reach/router' +import React, { ReactNode, ReactElement } from 'react' import rehypeReact from 'rehype-react' import Collapsible from 'react-collapsible' +import Main from './Main' import Link from '../../Link' import Tooltip from './Tooltip' -import Tutorials from '../TutorialsLinks' -import { getPathWithSource } from '../../../utils/shared/sidebar' -import 'github-markdown-css/github-markdown.css' -import sharedStyles from '../styles.module.css' import styles from './styles.module.css' -const isInsideCodeBlock = (node: Element): boolean => { - while (node?.parentNode) { - if (node.tagName === 'PRE') { - return true - } - - if (node.tagName === 'ARTICLE') { - return false - } - - node = node.parentNode as Element - } - - return false -} - const Details: React.FC<{ children: Array<{ props: { children: ReactNode } } | string> }> = ({ children }) => { @@ -150,69 +123,10 @@ const Markdown: React.FC = ({ tutorials, githubLink }) => { - const touchstartXRef = useRef(0) - const touchendXRef = useRef(0) - const isCodeBlockRef = useRef(false) - const handleSwipeGesture = useCallback(() => { - if (isCodeBlockRef.current) return - - if (next && touchstartXRef.current - touchendXRef.current > 100) { - navigate(next) - } - - if (prev && touchendXRef.current - touchstartXRef.current > 100) { - navigate(prev) - } - }, [prev, next]) - const onTouchStart = useCallback(e => { - isCodeBlockRef.current = isInsideCodeBlock(e.target) - touchstartXRef.current = e.changedTouches[0].screenX - }, []) - const onTouchEnd = useCallback(e => { - touchendXRef.current = e.changedTouches[0].screenX - handleSwipeGesture() - }, []) - - useEffect(() => { - document.addEventListener('touchstart', onTouchStart, false) - document.addEventListener('touchend', onTouchEnd, false) - - return (): void => { - document.removeEventListener('touchstart', onTouchStart) - document.removeEventListener('touchend', onTouchEnd) - } - }, []) - return ( -
- {tutorials && ( -
- -
- )} - - Edit on - GitHub - -
{renderAst(htmlAst)}
-
- - - Prev - - - Next - - -
-
+
+ {renderAst(htmlAst)} +
) } diff --git a/src/components/Documentation/Markdown/styles.module.css b/src/components/Documentation/Markdown/styles.module.css index 7b80e711c5..08f999dfb3 100644 --- a/src/components/Documentation/Markdown/styles.module.css +++ b/src/components/Documentation/Markdown/styles.module.css @@ -1,202 +1,4 @@ :global { - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - - em { - font-style: italic; - } - - #markdown-root { - @keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - animation-duration: 1s; - animation-fill-mode: both; - - :local { - animation-name: fadeIn; - } - } - - .markdown-body { - font-family: inherit; - font-size: 18px; - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 500; - } - - img + em, - :global(.gatsby-resp-image-wrapper) + em { - color: #6a737d; - font-size: 0.9em; - display: block; - margin-top: -6px; - text-align: center; - } - - :global(.gatsby-resp-image-wrapper) + em { - margin-top: 0; - } - - a[target='_blank'] { - white-space: nowrap; - - &::after { - position: relative; - top: 1px; - right: 0; - width: 12px; - height: 12px; - margin-left: 1px; - content: url(/img/external-link.svg); - } - } - - :global(a.gatsby-resp-image-link)::after { - content: unset; - } - - .anchor { - margin-left: -24px; - } - - li { - margin: 16px 0; - } - - pre[class*='language-'] { - background: #40354d; - color: #ccc; - - .token.line { - color: #ddd; - } - - .token.comment, - .token.block-comment { - font-weight: normal; - color: #a0a0a0; - } - - .token.input { - user-select: none; - } - - .token.prolog, - .token.doctype, - .token.cdata { - color: #999; - } - - .token.url, - .token.constant, - .token.operator, - .token.punctuation { - color: #a0a0a0; - } - - .token.property, - .token.tag, - .token.boolean, - .token.function-name, - .token.symbol, - .token.deleted { - color: #4badd2; - } - - .token.function { - color: #ae41bb; - } - - .token.number, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - color: #219161; - } - - .token.entity, - .token.variable { - color: #a67f59; - } - - .token.class-name { - color: #0086b3; - } - - .token.dvc { - color: #56b1d0; - font-weight: bold; - } - - .token.usage, - .token.git { - color: #e9836e; - } - - .token.command, - .token.selector, - .token.atrule, - .token.attr-value, - .token.keyword { - color: #e4b872; - } - - .token.regex, - .token.important { - color: #b68; - } - - .token.parameter { - color: #a0a0a0; - } - - .token.function-variable { - color: #7ece42; - } - - .token.important { - font-weight: normal; - } - - .token.bold { - font-weight: bold; - } - - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - - .token.namespace { - opacity: 0.7; - } - } - } - .Collapsible { margin-bottom: 10px; background-color: rgba(36, 173, 197, 0.2); @@ -237,120 +39,6 @@ -moz-border-radius: 15px; padding: 10px; } - - details p { - font-size: 17px; - color: var(--color-gray-dark); - margin-left: 20px; - margin-right: 10px; - } - - details pre { - font-size: 14px; - color: var(--color-gray-dark); - margin-left: 20px; - margin-right: 10px; - } -} - -.content { - min-width: 200px; - margin: 30px; - flex: 1; - background-color: #fff; - - @media (--xs-scr) { - margin: 15px 0; - } -} - -.tutorialsWrapper { - position: relative; - z-index: 1; - float: right; - margin: 5px 0 0 10px; - - @media (--md-scr) { - margin: 0 0 15px 0; - } - - @media only screen and (min-width: 1200px) { - display: none; - } -} - -.githubLink { - display: none; - float: right; - margin: 5px 0 10px 10px; - z-index: 1; - position: relative; - - @media (--md-scr) { - float: none; - margin: 0 0 15px 0; - } - - @media only screen and (max-width: 1200px) { - display: inline-flex; - } -} - -.githubIcon { - background-image: url(/img/github_icon.svg); -} - -.navButtons { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 40px; - font-size: 14px; - font-weight: 600; -} - -.navButton { - text-decoration: none; - background: white; - padding: 10px 15px; - text-transform: uppercase; - color: #333; - border-bottom: 3px solid #13adc7; - display: inline-flex; - align-items: center; - transition: 0.2s border-color ease-out; - - &:hover { - border-bottom: 3px solid #11849b; - } - - &[disabled] { - pointer-events: none; - opacity: 0.5; - } -} - -.navButtonIcon { - display: inline-block; - width: 1em; - height: 1em; - line-height: 1; - background-image: url(/img/arrow.svg); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: all 0.3s; - - &.next { - margin-left: 7px; - } - - &.prev { - margin-right: 7px; - mask-position: center; - transform: rotate(180deg); - margin-top: 2px; - } } .cards { diff --git a/src/components/Documentation/WithJSX/index.tsx b/src/components/Documentation/WithJSX/index.tsx new file mode 100644 index 0000000000..78747fc435 --- /dev/null +++ b/src/components/Documentation/WithJSX/index.tsx @@ -0,0 +1,41 @@ +import React from 'react' + +import MarkdownMain from '../Markdown/Main' +import RightPanel from '../RightPanel' + +import { IHeading, getGithubLink } from '../' +import { getItemByPath } from '../../../utils/shared/sidebar' + +interface IDocumentationProps { + path: string + headings: Array +} + +const Documentation: React.FC = ({ + children, + path, + headings +}) => { + const { source, prev, next, tutorials } = getItemByPath(path) + const githubLink = getGithubLink(source) + + return ( + <> + + {children} + + + + ) +} + +export default Documentation diff --git a/src/components/Documentation/index.tsx b/src/components/Documentation/index.tsx index 64b7618cd8..88c2cf480f 100644 --- a/src/components/Documentation/index.tsx +++ b/src/components/Documentation/index.tsx @@ -10,6 +10,9 @@ export interface IHeading { text: string } +export const getGithubLink = (source: string): string => + `https://github.com/iterative/dvc.org/blob/master/content${source}` + interface IDocumentationProps { path: string headings: Array @@ -22,7 +25,7 @@ const Documentation: React.FC = ({ headings }) => { const { source, prev, next, tutorials } = getItemByPath(path) - const githubLink = `https://github.com/iterative/dvc.org/blob/master/content${source}` + const githubLink = getGithubLink(source) return ( <> diff --git a/src/gatsby/common.js b/src/gatsby/common.js index ccbf661c68..21960a1d89 100644 --- a/src/gatsby/common.js +++ b/src/gatsby/common.js @@ -1,6 +1,7 @@ const remark = require('remark') const remarkHTML = require('remark-html') const is404Regexp = /^\/404/ +const isDocsRegexp = /^\/doc/ const trailingSlashRegexp = /\/$/ const alertLandingArray = ['/enterprise'] @@ -25,6 +26,7 @@ const setPageContext = (page, actions) => { context: { ...page.context, is404: is404Regexp.test(page.path), + isDocs: isDocsRegexp.test(page.path), isAlertLanding } }) diff --git a/src/pages/doc/user-guide/glossary.tsx b/src/pages/doc/user-guide/glossary.tsx new file mode 100644 index 0000000000..4e782fdbfd --- /dev/null +++ b/src/pages/doc/user-guide/glossary.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +import DocWithJsx from '../../../templates/doc-jsx' +import useGlossary from '../../../utils/front/glossary' + +const Glossary: React.FC = () => { + const { contents } = useGlossary() + + return ( + +

Glossary

+ {contents + .sort((c1, c2) => { + const c1Name = c1.name.toLowerCase() + const c2Name = c2.name.toLowerCase() + return c1Name < c2Name ? -1 : c2Name < c1Name ? 1 : 0 + }) + .map(({ name, desc }: { name: string; desc: string }, i: number) => { + const html = `${name}: ${desc.replace(//, '')}` + return

+ })} + + ) +} + +export default Glossary diff --git a/src/templates/doc-jsx.tsx b/src/templates/doc-jsx.tsx new file mode 100644 index 0000000000..94f85676da --- /dev/null +++ b/src/templates/doc-jsx.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { getItemByPath } from '../utils/shared/sidebar' + +import SEO from '../components/SEO' + +import Documentation from '../components/Documentation/WithJSX' + +export interface IJSXDocPageProps { + title?: string + description?: string + slug: string + headings: [] +} + +const JSXDocPage: React.FC = ({ + title, + description, + children, + slug, + headings +}) => { + const { label } = getItemByPath(slug) + return ( + <> + + + {children} + + + ) +} + +export default JSXDocPage From 4b42509628ccaee35455ba46546d0a100766dce7 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Thu, 1 Jul 2021 07:09:07 -0500 Subject: [PATCH 3/8] Move user-guide/glossary to bottom of user-guide --- content/docs/sidebar.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/sidebar.json b/content/docs/sidebar.json index 0da54ce7d5..3ba08943ce 100644 --- a/content/docs/sidebar.json +++ b/content/docs/sidebar.json @@ -94,11 +94,6 @@ "slug": "user-guide", "source": "user-guide/index.md", "children": [ - { - "label": "Glossary", - "slug": "glossary", - "source": "basic-concepts" - }, { "label": "What is DVC?", "slug": "what-is-dvc" @@ -178,6 +173,11 @@ { "label": "Anonymized Usage Analytics", "slug": "analytics" + }, + { + "label": "Glossary", + "slug": "glossary", + "source": "basic-concepts" } ] }, From 6bdea402d1afe8dabcc4a36ecb6edcd6c5394dfa Mon Sep 17 00:00:00 2001 From: julieg18 Date: Thu, 1 Jul 2021 07:21:04 -0500 Subject: [PATCH 4/8] Use one dangerouslySetInnerHTML in glossary page --- src/pages/doc/user-guide/glossary.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/pages/doc/user-guide/glossary.tsx b/src/pages/doc/user-guide/glossary.tsx index 4e782fdbfd..8aaead07e9 100644 --- a/src/pages/doc/user-guide/glossary.tsx +++ b/src/pages/doc/user-guide/glossary.tsx @@ -5,20 +5,22 @@ import useGlossary from '../../../utils/front/glossary' const Glossary: React.FC = () => { const { contents } = useGlossary() + const html = contents + .sort((c1, c2) => { + const c1Name = c1.name.toLowerCase() + const c2Name = c2.name.toLowerCase() + return c1Name < c2Name ? -1 : c2Name < c1Name ? 1 : 0 + }) + .map( + ({ name, desc }: { name: string; desc: string }) => + `

${name}: ${desc.replace(//, '')}

` + ) + .join('') return ( -

Glossary

- {contents - .sort((c1, c2) => { - const c1Name = c1.name.toLowerCase() - const c2Name = c2.name.toLowerCase() - return c1Name < c2Name ? -1 : c2Name < c1Name ? 1 : 0 - }) - .map(({ name, desc }: { name: string; desc: string }, i: number) => { - const html = `${name}: ${desc.replace(//, '')}` - return

- })} +

Glossary

+
) } From 1b20e14b03115159cc79e44620ca0d07bb5c1ffd Mon Sep 17 00:00:00 2001 From: julieg18 Date: Thu, 1 Jul 2021 07:46:19 -0500 Subject: [PATCH 5/8] Fix typo in pages/glossary.tsx regex --- src/pages/doc/user-guide/glossary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/doc/user-guide/glossary.tsx b/src/pages/doc/user-guide/glossary.tsx index 8aaead07e9..5461720685 100644 --- a/src/pages/doc/user-guide/glossary.tsx +++ b/src/pages/doc/user-guide/glossary.tsx @@ -13,7 +13,7 @@ const Glossary: React.FC = () => { }) .map( ({ name, desc }: { name: string; desc: string }) => - `

${name}: ${desc.replace(//, '')}

` + `

${name}: ${desc.replace(/<\/?p>/g, '')}

` ) .join('') From fda5deafbb518a9e2e06cd15011770044cd56ae1 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Thu, 1 Jul 2021 08:20:11 -0500 Subject: [PATCH 6/8] Add AutoLinkHeader component for JSX doc pages --- .../WithJSX/AutoLinkHeader/index.tsx | 68 +++++++++++++++++++ src/pages/doc/user-guide/glossary.tsx | 3 +- 2 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx diff --git a/src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx b/src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx new file mode 100644 index 0000000000..ea958b9f47 --- /dev/null +++ b/src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx @@ -0,0 +1,68 @@ +import React from 'react' + +interface IHeaderProps { + level?: 1 | 2 | 3 | 4 | 5 | 6 + headerAttributes?: object +} + +const Header: React.FC = ({ + children, + level, + headerAttributes +}) => { + switch (level) { + case 6: + return
{children}
+ case 5: + return
{children}
+ case 4: + return

{children}

+ case 3: + return

{children}

+ case 2: + return

{children}

+ default: + return

{children}

+ } +} + +interface IAutoLinkHeaderProps { + id: string + level?: 1 | 2 | 3 | 4 | 5 | 6 +} + +const AutoLinkHeader: React.FC = ({ + children, + id, + level +}) => { + return ( +
+ {children} + + + +
+ ) +} + +export default AutoLinkHeader diff --git a/src/pages/doc/user-guide/glossary.tsx b/src/pages/doc/user-guide/glossary.tsx index 5461720685..3c1eda7231 100644 --- a/src/pages/doc/user-guide/glossary.tsx +++ b/src/pages/doc/user-guide/glossary.tsx @@ -1,6 +1,7 @@ import React from 'react' import DocWithJsx from '../../../templates/doc-jsx' +import AutoLinkHeader from '../../../components/Documentation/WithJSX/AutoLinkHeader' import useGlossary from '../../../utils/front/glossary' const Glossary: React.FC = () => { @@ -19,7 +20,7 @@ const Glossary: React.FC = () => { return ( -

Glossary

+ Glossary
) From 7edac9316ce2a5a8392744f2287bce72d8ff00bb Mon Sep 17 00:00:00 2001 From: julieg18 Date: Thu, 1 Jul 2021 17:05:45 -0500 Subject: [PATCH 7/8] Convert AutoLinkHeader into AutoLinkElement --- .../WithJSX/AutoLinkElement/index.tsx | 76 +++++++++++++++++++ .../WithJSX/AutoLinkElement/styles.module.css | 9 +++ .../WithJSX/AutoLinkHeader/index.tsx | 68 ----------------- src/pages/doc/user-guide/glossary.tsx | 43 +++++++---- 4 files changed, 114 insertions(+), 82 deletions(-) create mode 100644 src/components/Documentation/WithJSX/AutoLinkElement/index.tsx create mode 100644 src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css delete mode 100644 src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx diff --git a/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx b/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx new file mode 100644 index 0000000000..f23c946855 --- /dev/null +++ b/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx @@ -0,0 +1,76 @@ +import React from 'react' +import styles from './styles.module.css' + +interface IElementProps { + attributes?: object + el?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' +} + +const Element: React.FC = ({ children, el, attributes }) => { + switch (el) { + case 'h6': + return
{children}
+ case 'h5': + return
{children}
+ case 'h4': + return

{children}

+ case 'h3': + return

{children}

+ case 'h2': + return

{children}

+ case 'h1': + return

{children}

+ default: + return {children} + } +} + +interface IAutoLinkHeaderProps { + id: string + el?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' + anchorStyle?: object +} + +const AutoLinkElement: React.FC = ({ + children, + id, + el, + anchorStyle +}) => { + return ( + <> + + {children} + + + + + + ) +} + +export default AutoLinkElement diff --git a/src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css b/src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css new file mode 100644 index 0000000000..b508b1b7b5 --- /dev/null +++ b/src/components/Documentation/WithJSX/AutoLinkElement/styles.module.css @@ -0,0 +1,9 @@ +.autoLinkEl { + svg { + visibility: hidden; + } + + &:hover svg { + visibility: visible; + } +} diff --git a/src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx b/src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx deleted file mode 100644 index ea958b9f47..0000000000 --- a/src/components/Documentation/WithJSX/AutoLinkHeader/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react' - -interface IHeaderProps { - level?: 1 | 2 | 3 | 4 | 5 | 6 - headerAttributes?: object -} - -const Header: React.FC = ({ - children, - level, - headerAttributes -}) => { - switch (level) { - case 6: - return
{children}
- case 5: - return
{children}
- case 4: - return

{children}

- case 3: - return

{children}

- case 2: - return

{children}

- default: - return

{children}

- } -} - -interface IAutoLinkHeaderProps { - id: string - level?: 1 | 2 | 3 | 4 | 5 | 6 -} - -const AutoLinkHeader: React.FC = ({ - children, - id, - level -}) => { - return ( -
- {children} - - - -
- ) -} - -export default AutoLinkHeader diff --git a/src/pages/doc/user-guide/glossary.tsx b/src/pages/doc/user-guide/glossary.tsx index 3c1eda7231..48eed6f17d 100644 --- a/src/pages/doc/user-guide/glossary.tsx +++ b/src/pages/doc/user-guide/glossary.tsx @@ -1,27 +1,42 @@ import React from 'react' import DocWithJsx from '../../../templates/doc-jsx' -import AutoLinkHeader from '../../../components/Documentation/WithJSX/AutoLinkHeader' +import AutoLinkElement from '../../../components/Documentation/WithJSX/AutoLinkElement' import useGlossary from '../../../utils/front/glossary' const Glossary: React.FC = () => { const { contents } = useGlossary() - const html = contents - .sort((c1, c2) => { - const c1Name = c1.name.toLowerCase() - const c2Name = c2.name.toLowerCase() - return c1Name < c2Name ? -1 : c2Name < c1Name ? 1 : 0 - }) - .map( - ({ name, desc }: { name: string; desc: string }) => - `

${name}: ${desc.replace(/<\/?p>/g, '')}

` - ) - .join('') return ( - Glossary -
+ + Glossary + + {contents + .sort((c1, c2) => { + const c1Name = c1.name.toLowerCase() + const c2Name = c2.name.toLowerCase() + return c1Name < c2Name ? -1 : c2Name < c1Name ? 1 : 0 + }) + .map(({ name, desc }: { name: string; desc: string }, i: number) => ( +

+ + + {name} + + + :{' '} + /g, '') }} + > +

+ ))} ) } From f17b6014ac4bd267b83a8a2bbfb3cc93bf59b8a8 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Fri, 2 Jul 2021 07:27:11 -0500 Subject: [PATCH 8/8] Fix typos in doc-jsx.tsx and Documentation/WithJSX --- src/components/Documentation/WithJSX/index.tsx | 10 +++------- src/templates/doc-jsx.tsx | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Documentation/WithJSX/index.tsx b/src/components/Documentation/WithJSX/index.tsx index 78747fc435..5ac53e647a 100644 --- a/src/components/Documentation/WithJSX/index.tsx +++ b/src/components/Documentation/WithJSX/index.tsx @@ -6,16 +6,12 @@ import RightPanel from '../RightPanel' import { IHeading, getGithubLink } from '../' import { getItemByPath } from '../../../utils/shared/sidebar' -interface IDocumentationProps { +interface IWithJSXProps { path: string headings: Array } -const Documentation: React.FC = ({ - children, - path, - headings -}) => { +const WithJSX: React.FC = ({ children, path, headings }) => { const { source, prev, next, tutorials } = getItemByPath(path) const githubLink = getGithubLink(source) @@ -38,4 +34,4 @@ const Documentation: React.FC = ({ ) } -export default Documentation +export default WithJSX diff --git a/src/templates/doc-jsx.tsx b/src/templates/doc-jsx.tsx index 94f85676da..085f39c1f2 100644 --- a/src/templates/doc-jsx.tsx +++ b/src/templates/doc-jsx.tsx @@ -5,7 +5,7 @@ import SEO from '../components/SEO' import Documentation from '../components/Documentation/WithJSX' -export interface IJSXDocPageProps { +interface IJSXDocPageProps { title?: string description?: string slug: string