Skip to content

Commit 1c0e594

Browse files
minimalsmminimalsm
committed
Remove zen mode logic
1 parent 0f93173 commit 1c0e594

File tree

5 files changed

+45
-153
lines changed

5 files changed

+45
-153
lines changed

‎src/components/Layout.tsx‎

Lines changed: 40 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { ApolloProvider } from "@apollo/client"
33
import { Flex } from "@chakra-ui/react"
44

55
import Footer from "./Footer"
6-
import ZenMode from "./ZenMode"
76
import Nav from "./Nav"
87
import SideNav from "./SideNav"
98
import SideNavMobile from "./SideNavMobile"
@@ -12,14 +11,10 @@ import TranslationBannerLegal from "./TranslationBannerLegal"
1211
import FeedbackWidget from "./FeedbackWidget"
1312
import { SkipLink } from "./SkipLink"
1413

15-
import { ZenModeContext } from "../contexts/ZenModeContext"
1614
import { lightTheme as oldTheme } from "../theme"
1715

18-
import { useKeyPress } from "../hooks/useKeyPress"
19-
2016
import { isLangRightToLeft } from "../utils/translations"
2117
import { scrollIntoView } from "../utils/scrollIntoView"
22-
import { isMobile } from "../utils/isMobile"
2318

2419
import type { Context } from "../types"
2520

@@ -51,23 +46,11 @@ const Layout: React.FC<IProps> = ({
5146
pageContext,
5247
children,
5348
}) => {
54-
const [isZenMode, setIsZenMode] = useState<boolean>(false)
5549
const [shouldShowSideNav, setShouldShowSideNav] = useState<boolean>(false)
5650

57-
// Exit Zen Mode on 'esc' click
58-
useKeyPress(`Escape`, () => handleZenModeChange(false))
59-
6051
useEffect(() => {
6152
if (path.includes("/docs/")) {
6253
setShouldShowSideNav(true)
63-
64-
if (localStorage.getItem("zen-mode") !== null) {
65-
setIsZenMode(localStorage.getItem("zen-mode") === "true" && !isMobile())
66-
}
67-
} else {
68-
// isZenMode and shouldShowSideNav only applicable in /docs pages
69-
setIsZenMode(false)
70-
setShouldShowSideNav(false)
7154
}
7255

7356
if (location.hash && !location.hash.includes("gatsby")) {
@@ -76,16 +59,6 @@ const Layout: React.FC<IProps> = ({
7659
}
7760
}, [path, location])
7861

79-
const handleZenModeChange = (val?: boolean): void => {
80-
// Use 'val' param if provided. Otherwise toggle
81-
const newVal = val !== undefined ? val : !isZenMode
82-
83-
setIsZenMode(newVal)
84-
if (localStorage) {
85-
localStorage.setItem("zen-mode", String(newVal))
86-
}
87-
}
88-
8962
const isPageLanguageEnglish = pageContext.isDefaultLang
9063
const isPageContentEnglish = !!pageContext.isContentEnglish
9164
const isLegal = !!pageContext.isLegal
@@ -101,61 +74,51 @@ const Layout: React.FC<IProps> = ({
10174

10275
return (
10376
<ApolloProvider client={client}>
104-
<ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
105-
<SkipLink hrefId="#main-content" />
106-
<TranslationBanner
107-
shouldShow={shouldShowTranslationBanner}
108-
isPageContentEnglish={isPageContentEnglish}
109-
isPageRightToLeft={isPageRightToLeft}
110-
originalPagePath={pageContext.i18n.originalPath || ""}
111-
/>
112-
<TranslationBannerLegal
113-
shouldShow={isLegal}
114-
isPageRightToLeft={isPageRightToLeft}
115-
originalPagePath={pageContext.i18n.originalPath || ""}
116-
/>
117-
77+
<SkipLink hrefId="#main-content" />
78+
<TranslationBanner
79+
shouldShow={shouldShowTranslationBanner}
80+
isPageContentEnglish={isPageContentEnglish}
81+
isPageRightToLeft={isPageRightToLeft}
82+
originalPagePath={pageContext.i18n.originalPath || ""}
83+
/>
84+
<TranslationBannerLegal
85+
shouldShow={isLegal}
86+
isPageRightToLeft={isPageRightToLeft}
87+
originalPagePath={pageContext.i18n.originalPath || ""}
88+
/>
89+
90+
<Flex
91+
position="relative"
92+
margin="0px auto"
93+
minHeight="100vh"
94+
flexFlow="column"
95+
maxW={{
96+
lg: oldTheme.variables.maxPageWidth,
97+
}}
98+
>
99+
<Nav path={path} />
100+
{shouldShowSideNav && <SideNavMobile path={path} />}
118101
<Flex
119-
position="relative"
120-
margin="0px auto"
121-
minHeight="100vh"
122-
flexFlow="column"
123-
maxW={{
124-
lg: oldTheme.variables.maxPageWidth,
125-
}}
102+
flexDirection={{ base: "column", lg: "row" }}
103+
id="main-content"
104+
scrollMarginTop={20}
126105
>
127-
<ZenMode>
128-
<Nav path={path} />
129-
{shouldShowSideNav && <SideNavMobile path={path} />}
130-
</ZenMode>
131-
<Flex
132-
flexDirection={{ base: "column", lg: "row" }}
133-
id="main-content"
134-
scrollMarginTop={20}
135-
>
136-
{shouldShowSideNav && (
137-
<ZenMode>
138-
<SideNav path={path} />
139-
</ZenMode>
140-
)}
141-
<Flex flexDirection="column" width="100%">
142-
<Flex
143-
justifyContent="space-around"
144-
alignItems="flex-start"
145-
overflow="visible"
146-
width="100%"
147-
flexGrow="1"
148-
>
149-
{children}
150-
</Flex>
106+
{shouldShowSideNav && <SideNav path={path} />}
107+
<Flex flexDirection="column" width="100%">
108+
<Flex
109+
justifyContent="space-around"
110+
alignItems="flex-start"
111+
overflow="visible"
112+
width="100%"
113+
flexGrow="1"
114+
>
115+
{children}
151116
</Flex>
152117
</Flex>
153-
<ZenMode>
154-
<Footer />
155-
</ZenMode>
156-
<FeedbackWidget location={path} />
157118
</Flex>
158-
</ZenModeContext.Provider>
119+
<Footer />
120+
<FeedbackWidget location={path} />
121+
</Flex>
159122
</ApolloProvider>
160123
)
161124
}

‎src/components/TableOfContents/index.tsx‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1-
import React, { useContext } from "react"
1+
import React from "react"
22

33
import {
44
Box,
55
BoxProps,
66
calc,
77
Flex,
8-
FormControl,
9-
FormLabel,
108
Icon,
119
List,
1210
ListItem,
1311
Show,
14-
Switch,
1512
useToken,
1613
} from "@chakra-ui/react"
1714
import { FaGithub } from "react-icons/fa"
1815
import { useActiveHash } from "../../hooks/useActiveHash"
19-
import { ZenModeContext } from "../../contexts/ZenModeContext"
2016
import ButtonLink from "../ButtonLink"
2117
import Translation from "../Translation"
2218

2319
import Mobile from "./TableOfContentsMobile"
2420
import ItemsList from "./ItemsList"
2521
import { getCustomId, Item, outerListProps } from "./utils"
26-
import { trackCustomEvent } from "../../utils/matomo"
2722

2823
export { Item }
2924

@@ -45,7 +40,6 @@ const TableOfContents: React.FC<IProps> = ({
4540
isMobile = false,
4641
...rest
4742
}) => {
48-
const { isZenMode, handleZenModeChange } = useContext(ZenModeContext)
4943
// TODO: Replace with direct token implementation after UI migration is completed
5044
const lgBp = useToken("breakpoints", "lg")
5145

@@ -81,8 +75,6 @@ const TableOfContents: React.FC<IProps> = ({
8175
return <Mobile items={items} maxDepth={maxDepth} />
8276
}
8377

84-
const shouldShowZenModeToggle = slug?.includes("/docs/")
85-
8678
return (
8779
// TODO: Switch to `above="lg"` after completion of Chakra Migration
8880
<Show above={lgBp}>
@@ -109,34 +101,6 @@ const TableOfContents: React.FC<IProps> = ({
109101
</ButtonLink>
110102
</ListItem>
111103
)}
112-
{shouldShowZenModeToggle && (
113-
<Flex
114-
as={ListItem}
115-
alignItems="center"
116-
mb={2}
117-
py="2px"
118-
opacity={0.8}
119-
fontSize="sm"
120-
>
121-
<FormControl as={Flex} alignItems="center">
122-
<FormLabel htmlFor="zen-mode" mb={0} me={2} fontSize="sm">
123-
<Translation id="zen-mode" />
124-
</FormLabel>
125-
<Switch
126-
id="zen-mode"
127-
isChecked={isZenMode}
128-
onChange={() => {
129-
handleZenModeChange()
130-
trackCustomEvent({
131-
eventCategory: "zen mode",
132-
eventAction: "click",
133-
eventName: isZenMode ? "activate" : "deactivate",
134-
})
135-
}}
136-
/>
137-
</FormControl>
138-
</Flex>
139-
)}
140104
<ListItem>
141105
<Box mb={2} textTransform="uppercase">
142106
<Translation id="on-this-page" />

‎src/components/ZenMode.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/contexts/ZenModeContext.tsx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/templates/docs.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ComponentPropsWithoutRef, ReactNode, useContext } from "react"
1+
import React from "react"
22
import { graphql, PageProps } from "gatsby"
33
import { MDXProvider } from "@mdx-js/react"
44
import { MDXRenderer } from "gatsby-plugin-mdx"
@@ -43,9 +43,6 @@ import DeveloperDocsLinks from "../components/DeveloperDocsLinks"
4343
import RollupProductDevDoc from "../components/RollupProductDevDoc"
4444
import YouTube from "../components/YouTube"
4545

46-
import PostMergeBanner from "../components/Banners/PostMergeBanner"
47-
48-
import { ZenModeContext } from "../contexts/ZenModeContext"
4946
import { isLangRightToLeft } from "../utils/translations"
5047
import { Lang } from "../utils/languages"
5148
import { ChildOnlyProp, Context } from "../types"
@@ -138,9 +135,9 @@ const ListItem = (props: ListItemProps) => (
138135
<ChakraListItem color="text300" {...props} />
139136
)
140137

141-
const ContentContainer = (props: ChildOnlyProp & { isZenMode: boolean }) => (
138+
const ContentContainer = (props: ChildOnlyProp) => (
142139
<Flex
143-
justify={props.isZenMode ? "center" : "space-between"}
140+
justify={"space-between"}
144141
w="full"
145142
py={0}
146143
pl={0}
@@ -224,8 +221,6 @@ const DocsPage = ({
224221
data: { siteData, pageData: mdx, allCombinedTranslatorsJson },
225222
pageContext: { relativePath, slug },
226223
}: PageProps<Queries.DocsPageQuery, Context>) => {
227-
const { isZenMode } = useContext(ZenModeContext)
228-
229224
if (!siteData || !mdx?.frontmatter)
230225
throw new Error("Docs page template query does not return expected values")
231226
if (!mdx?.frontmatter?.title)
@@ -252,7 +247,7 @@ const DocsPage = ({
252247
<Translation id="banner-page-incomplete" />
253248
</BannerNotification>
254249
)}
255-
<ContentContainer isZenMode={isZenMode}>
250+
<ContentContainer>
256251
<Content>
257252
<H1 id="top">{mdx.frontmatter.title}</H1>
258253
{/* flip these positive first */}

0 commit comments

Comments
 (0)