From 1055ecdd7da4b2076fb66bac215fbf29f87cd068 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 21 Mar 2023 14:10:52 -0500 Subject: [PATCH 01/10] add mobile layout to guide step --- pages/docs/[[...doc]].tsx | 27 +++++++-------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/pages/docs/[[...doc]].tsx b/pages/docs/[[...doc]].tsx index 98f0434c..d45ba060 100644 --- a/pages/docs/[[...doc]].tsx +++ b/pages/docs/[[...doc]].tsx @@ -918,28 +918,15 @@ const QuickStart = (content: { content: QuickStartContent }) => { {c.entries.map((step: QuickStartStep, i: number) => { if (step.hidden) return null return ( -
-
-
+
+
+
{i + 1}
-
+
-
-
+
+
{step.title} @@ -959,7 +946,7 @@ const QuickStart = (content: { content: QuickStartContent }) => { {step.content}
-
+
{step.code && ( Date: Tue, 21 Mar 2023 16:33:24 -0500 Subject: [PATCH 02/10] tweak mobile layout for docs header --- components/Docs/Docs.module.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/Docs/Docs.module.scss b/components/Docs/Docs.module.scss index 761410bf..04635e1d 100644 --- a/components/Docs/Docs.module.scss +++ b/components/Docs/Docs.module.scss @@ -1009,7 +1009,8 @@ h5:hover .headingCopyIcon { flex: 0 0 auto; height: auto; border-bottom: 1px solid var(--divider-on-dark); - padding: var(--size-large) var(--size-large); + padding: 24px var(--size-large) 20px; + gap: 8px; position: relative; max-width: none; top: 0; @@ -1030,6 +1031,8 @@ h5:hover .headingCopyIcon { .leftInner { padding: 0; + border-bottom: 0; + margin-left: -8px; } .tocMenu { @@ -1092,10 +1095,6 @@ h5:hover .headingCopyIcon { word-break: break-word; } - .leftSection { - top: 0; - } - .centerSection { padding: var(--size-large) var(--size-medium) var(--size-4xLarge); } From bff92ca55299b80d6ef65a62a9e174bb09dd77c1 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 21 Mar 2023 16:53:05 -0500 Subject: [PATCH 03/10] make doc subheadings link --- components/Docs/Docs.module.scss | 1 - pages/docs/[[...doc]].tsx | 10 +++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/Docs/Docs.module.scss b/components/Docs/Docs.module.scss index 04635e1d..cebe40c2 100644 --- a/components/Docs/Docs.module.scss +++ b/components/Docs/Docs.module.scss @@ -225,7 +225,6 @@ h4, h5 { scroll-margin-top: var(--size-large); - margin: var(--size-large) 0 !important; &:hover { text-decoration: underline; diff --git a/pages/docs/[[...doc]].tsx b/pages/docs/[[...doc]].tsx index d45ba060..e25bbb39 100644 --- a/pages/docs/[[...doc]].tsx +++ b/pages/docs/[[...doc]].tsx @@ -771,7 +771,15 @@ const DocPage = ({ h1: (props) =>

, h2: (props) => { if (props.children && typeof props.children === 'string') { - return

+ const id = generateIdString(props.children as string) + return ( + +
+ + ) } return <> }, From 923bb4c18bd294e416de224f7283160e8850d4a3 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 21 Mar 2023 17:01:41 -0500 Subject: [PATCH 04/10] consistently generate subheading ids --- .../DocsTypographyRenderer/DocsTypographyRenderer.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/components/Docs/DocsTypographyRenderer/DocsTypographyRenderer.tsx b/components/Docs/DocsTypographyRenderer/DocsTypographyRenderer.tsx index 0e654df0..cf0db92c 100644 --- a/components/Docs/DocsTypographyRenderer/DocsTypographyRenderer.tsx +++ b/components/Docs/DocsTypographyRenderer/DocsTypographyRenderer.tsx @@ -1,12 +1,12 @@ -import styles from '../Docs.module.scss' +import classNames from 'classnames' +import Link from 'next/link' import { useRouter } from 'next/router' +import { createElement } from 'react' +import { BiLink } from 'react-icons/bi' import { HeroVideo } from '../../Home/HeroVideo/HeroVideo' import { Callout } from '../Callout/Callout' +import styles from '../Docs.module.scss' import { HighlightCodeBlock } from '../HighlightCodeBlock/HighlightCodeBlock' -import Link from 'next/link' -import { BiLink } from 'react-icons/bi' -import { createElement } from 'react' -import classNames from 'classnames' const getIdFromHTMLHeaderProps = (props: any) => { return props?.children @@ -34,6 +34,7 @@ export const generateIdString = (str: string) => { .trim() .split(' ') .join('-') + .toLowerCase() } const copyHeadingIcon = (index: number) => { From 0425baed2500f6653b811476037532e07b183581 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 28 Mar 2023 11:07:03 -0500 Subject: [PATCH 05/10] Fix weird docs sidebar scrolling --- pages/docs/[[...doc]].tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pages/docs/[[...doc]].tsx b/pages/docs/[[...doc]].tsx index e25bbb39..6e1e8eb9 100644 --- a/pages/docs/[[...doc]].tsx +++ b/pages/docs/[[...doc]].tsx @@ -105,7 +105,7 @@ const useIntersectionObserver = (setActiveId: (s: string) => void) => { } const observer = new IntersectionObserver(callback, { - rootMargin: '0px 0px -40% 0px', + rootMargin: '-45% 0px', }) const headingElements = Array.from(document.querySelectorAll('h4, h5')) @@ -465,6 +465,8 @@ const PageRightBar = ({ relativePath }: { title: string; relativePath: string }) e.preventDefault() document.querySelector(`#${heading.id}`)?.scrollIntoView({ behavior: 'smooth', + block: 'center', + inline: 'center', }) const basePath = router.asPath.split('#')[0] const newUrl = `${basePath}#${heading.id}` From 9a631deb7209c07a4aa3a10a4fd0998e7dea51e5 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 28 Mar 2023 11:08:08 -0500 Subject: [PATCH 06/10] Close docs table of contents after navigating on mobile --- pages/docs/[[...doc]].tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/pages/docs/[[...doc]].tsx b/pages/docs/[[...doc]].tsx index 6e1e8eb9..4b1f3be5 100644 --- a/pages/docs/[[...doc]].tsx +++ b/pages/docs/[[...doc]].tsx @@ -498,11 +498,13 @@ const TableOfContents = ({ docPaths, openParent, openTopLevel = false, + onNavigate, }: { toc: TocEntry openParent: boolean openTopLevel?: boolean docPaths: DocPath[] + onNavigate?: () => void }) => { const hasChildren = !!toc?.children.length @@ -515,7 +517,8 @@ const TableOfContents = ({ setIsCurrentPage(currentPage === window.location.pathname) const isParentOfCurrentPage = window.location.pathname.includes(docPaths[toc.docPathId || 0]?.simple_path) setOpen((prevOpenState) => prevOpenState || isParentOfCurrentPage) - }, [docPaths, toc.docPathId]) + onNavigate?.() + }, [docPaths, toc.docPathId, onNavigate]) return (
@@ -722,6 +725,7 @@ const DocPage = ({ docPaths={docOptions} openParent={false} openTopLevel={false} + onNavigate={() => setOpen(false)} /> )) )} From a4e85491266ff747b377dd5fc2e1af3c7508efa1 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 28 Mar 2023 11:08:37 -0500 Subject: [PATCH 07/10] adjust header padding on landing page --- pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 8dd21111..568879b6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -155,12 +155,12 @@ const Home: NextPage = () => {
-

+

The open source, fullstack
Monitoring Platform.

-
+
Date: Tue, 28 Mar 2023 11:09:51 -0500 Subject: [PATCH 08/10] extend docs left sidebar to viewport height --- components/Docs/Docs.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Docs/Docs.module.scss b/components/Docs/Docs.module.scss index cebe40c2..3ae408d9 100644 --- a/components/Docs/Docs.module.scss +++ b/components/Docs/Docs.module.scss @@ -45,7 +45,7 @@ flex-direction: column; flex: 0 0 300px; position: sticky; - height: calc(100vh - 54px); + height: 100vh; top: 0px; z-index: 5; max-width: 300px; From 5e4a834b14a2035e0b578994335baccbbe40c532 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 28 Mar 2023 11:10:15 -0500 Subject: [PATCH 09/10] tweak docs header styling on mobile --- components/Docs/Docs.module.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/Docs/Docs.module.scss b/components/Docs/Docs.module.scss index 3ae408d9..2c491153 100644 --- a/components/Docs/Docs.module.scss +++ b/components/Docs/Docs.module.scss @@ -1008,7 +1008,6 @@ h5:hover .headingCopyIcon { flex: 0 0 auto; height: auto; border-bottom: 1px solid var(--divider-on-dark); - padding: 24px var(--size-large) 20px; gap: 8px; position: relative; max-width: none; @@ -1029,15 +1028,15 @@ h5:hover .headingCopyIcon { } .leftInner { - padding: 0; - border-bottom: 0; - margin-left: -8px; + padding: 8px; } .tocMenu { display: flex; flex-direction: column; align-items: flex-start; + padding: 8px; + margin: 0 8px; .tocMenuLabel { display: flex; From 46e3ed9b0fb2b8bdcc377c3b97ed42b4335cdb65 Mon Sep 17 00:00:00 2001 From: Crawron Date: Tue, 28 Mar 2023 11:10:29 -0500 Subject: [PATCH 10/10] remove double slashes from link hrefs --- pages/docs/[[...doc]].tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/pages/docs/[[...doc]].tsx b/pages/docs/[[...doc]].tsx index 4b1f3be5..9a921cc5 100644 --- a/pages/docs/[[...doc]].tsx +++ b/pages/docs/[[...doc]].tsx @@ -435,7 +435,11 @@ const PageRightBar = ({ relativePath }: { title: string; relativePath: string }) Community / Support - + Suggest Edits?