From 69088559d28a6cdfccedc15e253bd2ae30910588 Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Thu, 3 Mar 2022 15:06:02 +0545 Subject: [PATCH 1/8] details block linkable and expand on current hash --- package.json | 1 + .../Markdown/Main/styles.module.css | 13 ++++-- .../Documentation/Markdown/index.tsx | 43 ++++++++++++++++--- yarn.lock | 18 ++++++++ 4 files changed, 66 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index b5c7a35a53..4affb6b093 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "react-focus-lock": "^2.6.0", "react-ga": "^3.3.0", "react-helmet": "^6.1.0", + "react-inlinesvg": "^2.3.0", "react-instantsearch-dom": "^6.20.0", "react-popover": "^0.5.10", "react-slick": "^0.28.1", diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css index d4324c4701..5f6864bfb6 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css @@ -79,15 +79,18 @@ content: unset; } - li .anchor svg { + li, + .collapsableDiv .anchor svg { visibility: hidden; } - li:hover .anchor svg { + li, + .collapsableDiv:hover .anchor svg { visibility: visible; } - li .anchor:focus svg { + li, + .collapsableDiv .anchor:focus svg { visibility: visible; } @@ -95,6 +98,10 @@ line-height: unset; } + .collapsableDiv .anchor { + line-height: 2.5; + } + .anchor { margin-left: -24px; } diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index 650ae47a0b..b73ad1a99b 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -18,8 +18,13 @@ import Tooltip from './Tooltip' import * as styles from './styles.module.css' import { TogglesContext, TogglesProvider } from './ToggleProvider' +import { linkIcon } from '../../../../../../static/icons' +import SVG from 'react-inlinesvg' +import { globalHistory as history } from '@reach/router' const Details: React.FC> = ({ children }) => { + const [isOpen, setIsOpen] = useState(false) + const { location } = history const filteredChildren: ReactNode[] = ( children as Array<{ props: { children: ReactNode } } | string> ).filter(child => child !== '\n') @@ -38,18 +43,44 @@ const Details: React.FC> = ({ children }) => { 0, firstChild.props.children.length - 1 ) as ReactNode[] + const id = triggerChildren + .toString() + .replace(/[^a-zA-Z ]/g, '') + .toLowerCase() + .trim() + .replaceAll(' ', '_') + + useEffect(() => { + if (location.hash === `#${id}`) { + setIsOpen(true) + } + + return () => { + setIsOpen(false) + } + }, [location.hash]) /* Collapsible's trigger type wants ReactElement, so we force a TS cast from ReactNode here. */ return ( - - {filteredChildren.slice(1)} - +
+ + + + + {filteredChildren.slice(1)} + +
) } diff --git a/yarn.lock b/yarn.lock index be144e217c..3b44a77f73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7428,6 +7428,11 @@ execall@^2.0.0: dependencies: clone-regexp "^2.1.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + exif-parser@^0.1.12: version "0.1.12" resolved "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz" @@ -13920,6 +13925,11 @@ react-focus-lock@^2.6.0: use-callback-ref "^1.2.5" use-sidecar "^1.0.5" +react-from-dom@^0.6.0: + version "0.6.1" + resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.1.tgz#6740f5a3d79e0c354703e5c096b8fdfe0db71b0f" + integrity sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg== + react-ga@^3.3.0: version "3.3.0" resolved "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz" @@ -13935,6 +13945,14 @@ react-helmet@^6.1.0: react-fast-compare "^3.1.1" react-side-effect "^2.1.0" +react-inlinesvg@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz#62283c0ce7e9d11d8190ec3e89589102288830fd" + integrity sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg== + dependencies: + exenv "^1.2.2" + react-from-dom "^0.6.0" + react-instantsearch-core@^6.20.0: version "6.20.0" resolved "https://registry.yarnpkg.com/react-instantsearch-core/-/react-instantsearch-core-6.20.0.tgz#802e4ea6f72370c74a4bb6f02143a742ef343dae" From e7f4b5f4d2f5177faec82b9ced87b4d0fc826f9b Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Thu, 3 Mar 2022 15:28:08 +0545 Subject: [PATCH 2/8] minor fix --- .../src/components/Documentation/Markdown/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index b73ad1a99b..a10b6ffe25 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -66,13 +66,13 @@ const Details: React.FC> = ({ children }) => { */ return (
- - + Date: Thu, 3 Mar 2022 17:50:27 +0545 Subject: [PATCH 3/8] fixed title props errror added back tabs component --- .../src/components/Documentation/Markdown/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index a10b6ffe25..019c4c6e33 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -20,11 +20,11 @@ import * as styles from './styles.module.css' import { TogglesContext, TogglesProvider } from './ToggleProvider' import { linkIcon } from '../../../../../../static/icons' import SVG from 'react-inlinesvg' -import { globalHistory as history } from '@reach/router' +import { useLocation } from '@reach/router' const Details: React.FC> = ({ children }) => { const [isOpen, setIsOpen] = useState(false) - const { location } = history + const location = useLocation() const filteredChildren: ReactNode[] = ( children as Array<{ props: { children: ReactNode } } | string> ).filter(child => child !== '\n') @@ -226,6 +226,9 @@ const Toggle: React.FC<{
) } +const Tab: React.FC = ({ children }) => { + return {children} +} // Rehype's typedefs don't allow for custom components, even though they work // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -239,7 +242,7 @@ const renderAst = new (rehypeReact as any)({ cards: Cards, details: Details, toggle: Toggle, - tab: React.Fragment + tab: Tab } }).Compiler From f39e4fc8e85ad5c5172d1b7b565d5df5396584ea Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Fri, 4 Mar 2022 16:30:23 +0545 Subject: [PATCH 4/8] fix: underscore to dash --- .../src/components/Documentation/Markdown/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index 019c4c6e33..ec52057e6a 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -48,7 +48,7 @@ const Details: React.FC> = ({ children }) => { .replace(/[^a-zA-Z ]/g, '') .toLowerCase() .trim() - .replaceAll(' ', '_') + .replaceAll(' ', '-') useEffect(() => { if (location.hash === `#${id}`) { From 19d70cce61623ef41728bd604d4e62a82ae7359a Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Fri, 4 Mar 2022 16:55:35 +0545 Subject: [PATCH 5/8] fix: remove react-inlinesvg --- package.json | 1 - .../Documentation/Markdown/index.tsx | 3 +-- yarn.lock | 18 ------------------ 3 files changed, 1 insertion(+), 21 deletions(-) diff --git a/package.json b/package.json index 4affb6b093..b5c7a35a53 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,6 @@ "react-focus-lock": "^2.6.0", "react-ga": "^3.3.0", "react-helmet": "^6.1.0", - "react-inlinesvg": "^2.3.0", "react-instantsearch-dom": "^6.20.0", "react-popover": "^0.5.10", "react-slick": "^0.28.1", diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index ec52057e6a..d3498ad3d0 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -19,7 +19,6 @@ import Tooltip from './Tooltip' import * as styles from './styles.module.css' import { TogglesContext, TogglesProvider } from './ToggleProvider' import { linkIcon } from '../../../../../../static/icons' -import SVG from 'react-inlinesvg' import { useLocation } from '@reach/router' const Details: React.FC> = ({ children }) => { @@ -71,7 +70,7 @@ const Details: React.FC> = ({ children }) => { aria-label={triggerChildren.toString()} className="anchor after" > - + Date: Mon, 7 Mar 2022 15:27:07 +0545 Subject: [PATCH 6/8] used github slugger above component level --- package.json | 1 + .../components/Documentation/Markdown/index.tsx | 16 ++++++++++------ yarn.lock | 5 +++++ 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b5c7a35a53..1cea16a95c 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "@babel/core": "^7.16.0", "@svgr/webpack": "^6.0.0", "@types/classnames": "^2.2.10", + "@types/github-slugger": "^1.3.0", "@types/isomorphic-fetch": "^0.0.35", "@types/promise-polyfill": "^6.0.3", "@types/react": "^17.0.37", diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index d3498ad3d0..3f477186b8 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -21,9 +21,13 @@ import { TogglesContext, TogglesProvider } from './ToggleProvider' import { linkIcon } from '../../../../../../static/icons' import { useLocation } from '@reach/router' +import GithubSlugger from 'github-slugger' +const slugger = new GithubSlugger() + const Details: React.FC> = ({ children }) => { const [isOpen, setIsOpen] = useState(false) const location = useLocation() + const filteredChildren: ReactNode[] = ( children as Array<{ props: { children: ReactNode } } | string> ).filter(child => child !== '\n') @@ -42,12 +46,12 @@ const Details: React.FC> = ({ children }) => { 0, firstChild.props.children.length - 1 ) as ReactNode[] - const id = triggerChildren - .toString() - .replace(/[^a-zA-Z ]/g, '') - .toLowerCase() - .trim() - .replaceAll(' ', '-') + + let slug = slugger.slug(triggerChildren.toString()) + if (slug[0] === '️') { + slug = slug.slice(1) + } + const id = slug.startsWith('-') ? slug.slice(1) : slug useEffect(() => { if (location.hash === `#${id}`) { diff --git a/yarn.lock b/yarn.lock index be144e217c..faffebf0cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3386,6 +3386,11 @@ resolved "https://registry.npmjs.org/@types/get-port/-/get-port-3.2.0.tgz" integrity sha512-TiNg8R1kjDde5Pub9F9vCwZA/BNW9HeXP5b9j7Qucqncy/McfPZ6xze/EyBdXS5FhMIGN6Fx3vg75l5KHy3V1Q== +"@types/github-slugger@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524" + integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g== + "@types/glob@*", "@types/glob@^7.1.1": version "7.1.4" resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz" From e4f3b701efd76e85a634327a9ab383e5c3fa2896 Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Fri, 11 Mar 2022 19:17:54 +0545 Subject: [PATCH 7/8] updated github slugger at the page level --- .../Documentation/Markdown/index.tsx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index 3f477186b8..dde79d4131 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -22,9 +22,11 @@ import { linkIcon } from '../../../../../../static/icons' import { useLocation } from '@reach/router' import GithubSlugger from 'github-slugger' -const slugger = new GithubSlugger() -const Details: React.FC> = ({ children }) => { +const Details: React.FC<{ slugger: GithubSlugger }> = ({ + slugger, + children +}) => { const [isOpen, setIsOpen] = useState(false) const location = useLocation() @@ -47,7 +49,7 @@ const Details: React.FC> = ({ children }) => { firstChild.props.children.length - 1 ) as ReactNode[] - let slug = slugger.slug(triggerChildren.toString()) + let slug = slugger.slug(triggerChildren.toString(), true) if (slug[0] === '️') { slug = slug.slice(1) } @@ -235,20 +237,21 @@ const Tab: React.FC = ({ children }) => { // Rehype's typedefs don't allow for custom components, even though they work // eslint-disable-next-line @typescript-eslint/no-explicit-any -const renderAst = new (rehypeReact as any)({ - createElement: React.createElement, - Fragment: React.Fragment, - components: { - a: Link, - abbr: Abbr, - card: Card, - cards: Cards, - details: Details, - toggle: Toggle, - tab: Tab - } -}).Compiler - +const renderAst = (slugger: GithubSlugger) => { + return new (rehypeReact as any)({ + createElement: React.createElement, + Fragment: React.Fragment, + components: { + a: Link, + abbr: Abbr, + card: Card, + cards: Cards, + details: (props: any) =>
, + toggle: Toggle, + tab: Tab + } + }).Compiler +} interface IMarkdownProps { htmlAst: Node githubLink: string @@ -264,9 +267,10 @@ const Markdown: React.FC = ({ tutorials, githubLink }) => { + const slugger = new GithubSlugger() return (
- {renderAst(htmlAst)} + {renderAst(slugger)(htmlAst)}
) } From e2f44301274c03d4bf7ec28128e4c624439abe0c Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Thu, 17 Mar 2022 14:43:41 +0545 Subject: [PATCH 8/8] fix: lowercase slugs --- .../src/components/Documentation/Markdown/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx index dde79d4131..b7a274dbcf 100644 --- a/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx +++ b/plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx @@ -49,7 +49,7 @@ const Details: React.FC<{ slugger: GithubSlugger }> = ({ firstChild.props.children.length - 1 ) as ReactNode[] - let slug = slugger.slug(triggerChildren.toString(), true) + let slug = slugger.slug(triggerChildren.toString()) if (slug[0] === '️') { slug = slug.slice(1) }