Fixes the error that caused the side not being scrollable #3415 (#3658)

Co-authored-by: Frederic Birke <fred@freds.garden>
ChilliCream · May 4, 2021 · 476d6d6 · 476d6d6
1 parent 49ab59b
commit 476d6d6
Show file tree

Hide file tree

Showing 30 changed files with 238 additions and 216 deletions.
diff --git a/website/.storybook/main.js b/website/.storybook/main.js
@@ -1,10 +1,4 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+};
diff --git a/website/.vscode/settings.json b/website/.vscode/settings.json
@@ -1,4 +1,8 @@
 {
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.renderWhitespace": "all",
   "editor.rulers": [0, 80],

diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -57,7 +57,7 @@ module.exports = {
             options: {
               maxWidth: 800,
               quality: 90,
-              backgroundColor: 'transparent',
+              backgroundColor: "transparent",
             },
           },
         ],

diff --git a/website/package.json b/website/package.json
@@ -61,7 +61,8 @@
     "react-redux": "^7.2.1",
     "react-responsive-carousel": "^3.2.11",
     "react-share": "^4.2.1",
-    "styled-components": "^5.2.0"
+    "redux-devtools-extension": "^2.13.9",
+    "styled-components": "^5.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

diff --git a/website/src/components/articles/article-elements.tsx b/website/src/components/articles/article-elements.tsx
@@ -1,16 +1,15 @@
 import styled from "styled-components";
-import { IsPhablet, IsSmallDesktop } from "../../shared-style";
+import { IsSmallDesktop } from "../../shared-style";
 
-export const ArticleHeader = styled.header`
+export const ArticleHeader = styled.header<{ readonly kind: "blog" | "doc" }>`
   position: relative;
 
-  ${IsSmallDesktop(`
-    padding-top: 54px;
-  `)}
-
-  ${IsPhablet(`
-    padding-top: 20px;
-  `)}
+  ${({ kind }) =>
+    kind === "doc"
+      ? IsSmallDesktop(`
+    padding-top: 60px;
+  `)
+      : ""}
 
   @media only screen and (min-width: 820px) {
     > .gatsby-image-wrapper {

diff --git a/website/src/components/articles/article-sections.tsx b/website/src/components/articles/article-sections.tsx
@@ -37,17 +37,23 @@ export const ArticleSections: FunctionComponent<ArticleSectionsProperties> = ({
       .map((item) => ({
         id: item.url,
         position:
-          (document.getElementById(item.url.substring(1))?.offsetTop ?? 80) - 80,
+          (document.getElementById(item.url.substring(1))?.offsetTop ?? 80) -
+          80,
       }))
       .reverse();
 
     setHeadings(result);
   }, [data]);
 
   useEffect(() => {
-    setActiveHeadingId(
-      headings.find((id) => yScrollPosition >= id.position)?.id
+    const activeHeading = headings.find((id) => yScrollPosition >= id.position)
+      ?.id;
+    window.history.pushState(
+      undefined,
+      activeHeading ?? "ChilliCream Docs",
+      "./" + (activeHeading ?? "")
     );
+    setActiveHeadingId(activeHeading);
   }, [headings, yScrollPosition]);
 
   const tocItems: TableOfContentItem[] = data.tableOfContents.items ?? [];
@@ -125,8 +131,8 @@ const Title = styled.h6`
 `;
 
 const TocItemContainer = styled.ul`
-  display: flex;
-  flex-direction: column;
+  position: absolute;
+  display: block;
   margin: 0;
   padding: 0 25px 10px;
   list-style-type: none;

diff --git a/website/src/components/blog-article/blog-article.tsx b/website/src/components/blog-article/blog-article.tsx
@@ -37,7 +37,7 @@ export const BlogArticle: FunctionComponent<BlogArticleProperties> = ({
       <BlogArticleSharebar data={data} tags={existingTags} />
       <ArticleWrapper>
         <Article>
-          <ArticleHeader>
+          <ArticleHeader kind="blog">
             {featuredImage && <Img fluid={featuredImage} />}
             <ArticleTitle>{title}</ArticleTitle>
             <BlogArticleMetadata data={mdx!} />

diff --git a/website/src/components/doc-page/doc-page-article-wrapper.tsx b/website/src/components/doc-page/doc-page-article-wrapper.tsx
@@ -39,5 +39,4 @@ export const ArticleWrapperElement = styled.div`
     grid-template-columns: 1fr;
   `)}
   grid-template-rows: 1fr;
-  padding: 6px;
 `;
diff --git a/website/src/components/doc-page/doc-page-aside.tsx b/website/src/components/doc-page/doc-page-aside.tsx
@@ -42,6 +42,7 @@ export const DocPageAside: FunctionComponent = ({ children }) => {
 export const Aside = styled.aside<{ calculatedHeight: string }>`
   ${DocPageStickySideBarStyle}
 
+  height: 100%;
   margin-left: 0;
   transition: transform 250ms;
   background-color: white;

diff --git a/website/src/components/doc-page/doc-page-elements.tsx b/website/src/components/doc-page/doc-page-elements.tsx
@@ -25,7 +25,7 @@ export const DocPageStickySideBarStyle = `
 export const BodyStyle = createGlobalStyle<{ disableScrolling: boolean }>`
   body {
     overflow-y: ${({ disableScrolling }) =>
-    disableScrolling ? "hidden" : "initial"};
+      disableScrolling ? "hidden" : "initial"};
 
     @media only screen and (min-width: 600px) {
       overflow-y: initial;

diff --git a/website/src/components/doc-page/doc-page-navigation.tsx b/website/src/components/doc-page/doc-page-navigation.tsx
@@ -103,8 +103,8 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
                   ? "active"
                   : ""
                 : isActive(selectedPath, itemPath)
-                  ? "active"
-                  : ""
+                ? "active"
+                : ""
             }
             onClick={handleClickNavigationItem}
           >
@@ -256,16 +256,15 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
                 title: item!.title!,
                 items: item!.items
                   ? item?.items
-                    .filter((item) => !!item)
-                    .map<Item>((item) => ({
-                      path: item!.path!,
-                      title: item!.title!,
-                    }))
+                      .filter((item) => !!item)
+                      .map<Item>((item) => ({
+                        path: item!.path!,
+                        title: item!.title!,
+                      }))
                   : undefined,
               })),
-            `/docs/${activeProduct!.path!}${activeVersion?.path?.length && activeVersion.path.length > 0
-              ? "/" + activeVersion.path!
-              : ""
+            `/docs/${activeProduct!.path!}${
+              !!activeVersion?.path?.length ? "/" + activeVersion.path! : ""
             }`
           )}
         </MostProminentSection>

diff --git a/website/src/components/doc-page/doc-page.tsx b/website/src/components/doc-page/doc-page.tsx
@@ -1,21 +1,9 @@
 import { graphql } from "gatsby";
+import { MDXRenderer } from "gatsby-plugin-mdx";
 import React, { FunctionComponent, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { DocPageFragment } from "../../../graphql-types";
-import { toggleAside, toggleTOC } from "../../state/common";
-import { ArticleComments } from "../articles/article-comments";
-import {
-  ArticleContent,
-  ArticleHeader,
-  ArticleTitle,
-} from "../articles/article-elements";
-import { ArticleSections } from "../articles/article-sections";
-import { Aside, DocPageAside } from "./doc-page-aside";
-import { DocPageCommunity } from "./doc-page-community";
-import { DocPageLegacy } from "./doc-page-legacy";
-import { DocPageNavigation, Navigation } from "./doc-page-navigation";
-
 import ListAltIconSvg from "../../images/list-alt.svg";
 import NewspaperIconSvg from "../../images/newspaper.svg";
 import {
@@ -25,13 +13,24 @@ import {
   IsSmallDesktop,
   IsTablet,
 } from "../../shared-style";
+import { State } from "../../state";
+import { toggleAside, toggleTOC } from "../../state/common";
 import { Article } from "../articles/article";
+import { ArticleComments } from "../articles/article-comments";
+import {
+  ArticleContent,
+  ArticleHeader,
+  ArticleTitle,
+} from "../articles/article-elements";
+import { ArticleSections } from "../articles/article-sections";
 import {
   ArticleWrapper,
   ArticleWrapperElement,
 } from "./doc-page-article-wrapper";
-import { State } from "../../state";
-import { MDXRenderer } from "gatsby-plugin-mdx";
+import { Aside, DocPageAside } from "./doc-page-aside";
+import { DocPageCommunity } from "./doc-page-community";
+import { DocPageLegacy } from "./doc-page-legacy";
+import { DocPageNavigation, Navigation } from "./doc-page-navigation";
 
 interface DocPageProperties {
   data: DocPageFragment;
@@ -76,11 +75,8 @@ export const DocPage: FunctionComponent<DocPageProperties> = ({
         <ArticleContainer>
           <Article>
             {false && <DocPageLegacy />}
-            <ArticleHeader>
+            <ArticleHeader kind="doc">
               <ResponsiveMenuWrapper>
-                <ResponsiveMenuBackground
-                  hasScrolled={hasScrolled}
-                ></ResponsiveMenuBackground>
                 <ResponsiveMenu hasScrolled={hasScrolled}>
                   <Button onClick={handleToggleTOC} className="toc-toggle">
                     <ListAltIconSvg /> Table of contents
@@ -143,7 +139,6 @@ const ArticleContainer = styled.div`
 
   ${IsSmallDesktop(`
       grid-column: 1;
-      margin-top: 10px;
   `)};
 
   ${IsPhablet(`
@@ -201,26 +196,27 @@ const Container = styled.div`
   }
 `;
 
-const ResponsiveMenu = styled.div<{ hasScrolled: boolean }>`
+const ResponsiveMenu = styled.div<{ readonly hasScrolled: boolean }>`
   position: fixed;
   transition: all 100ms linear 0s;
-  top: 100px;
-  ${(state) => (state.hasScrolled ? "top: 60px;" : "")}
+  ${({ hasScrolled }) => (hasScrolled ? "top: 60px;" : "top: 80px;")}
   box-sizing: border-box;
   z-index: 3;
   display: flex;
   flex-direction: row;
   align-items: center;
+  border-radius: 4px 4px 0 0;
   background: linear-gradient(
     180deg,
     #ffffff 30%,
     rgba(255, 255, 255, 0.75) 100%
   );
 
-  width: 800px;
+  width: 820px;
+  height: 60px;
   margin-left: auto;
   margin-right: auto;
-  padding: 20px;
+  padding: 0 20px;
 
   ${IsPhablet(`
     left: 0;
@@ -248,37 +244,6 @@ const ResponsiveMenu = styled.div<{ hasScrolled: boolean }>`
   `)}
 `;
 
-const ResponsiveMenuBackground = styled.div<{ hasScrolled: boolean }>`
-  display: ${(state) => (state.hasScrolled ? "initial" : "none")};
-  position: fixed;
-  height: 60px;
-  top: 60px;
-  box-sizing: border-box;
-  z-index: 2;
-  background: linear-gradient(
-    180deg,
-    #ffffff 30%,
-    rgba(255, 255, 255, 0.75) 100%
-  );
-
-  width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 20px;
-
-  ${IsPhablet(`
-    left: 0;
-    width: auto;
-    right: 0;
-    margin-left: 0;
-    margin-right: 0;
-  `)}
-
-  ${IsDesktop(`
-    display: none;
-  `)}
-`;
-
 const Button = styled.button`
   display: flex;
   flex-direction: row;

diff --git a/website/src/components/misc/page-top.tsx b/website/src/components/misc/page-top.tsx
@@ -1,8 +1,7 @@
 import React, { createRef, FunctionComponent } from "react";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
-
 import ArrowUpIconSvg from "../../images/arrow-up.svg";
-import { useSelector } from "react-redux";
 import { State } from "../../state";
 
 export const PageTop: FunctionComponent<{ onTopScroll: () => void }> = ({
@@ -29,11 +28,10 @@ const JumpToTop = styled.button`
   &.show {
     display: initial;
   }
-
   position: fixed;
   right: 50px;
   bottom: 50px;
-  z-index: 20;
+  z-index: 29;
   display: none;
   border-radius: 50%;
   padding: 8px;
@@ -43,16 +41,13 @@ const JumpToTop = styled.button`
   opacity: 0.6;
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
   transition: opacity 0.2s ease-in-out;
-
   &:hover {
     opacity: 1;
   }
-
   svg {
     width: 30px;
     height: 30px;
   }
-
   @media only screen and (min-width: 1600px) {
     right: calc(((100vw - 1320px) / 2) - 100px);
   }

diff --git a/website/src/components/structure/header.tsx b/website/src/components/structure/header.tsx
@@ -1,20 +1,19 @@
 import { graphql, useStaticQuery } from "gatsby";
 import React, { FunctionComponent, useState } from "react";
+import { useSelector } from "react-redux";
 import styled, { createGlobalStyle } from "styled-components";
 import { GetHeaderDataQuery } from "../../../graphql-types";
-import { IconContainer } from "../misc/icon-container";
-import { Link } from "../misc/link";
-import { Search } from "../misc/search";
-
 import BarsIconSvg from "../../images/bars.svg";
-import GithubIconSvg from "../../images/github.svg";
-import LogoIconSvg from "../../images/chillicream-winking.svg";
 import LogoTextSvg from "../../images/chillicream-text.svg";
+import LogoIconSvg from "../../images/chillicream-winking.svg";
+import GithubIconSvg from "../../images/github.svg";
 import SlackIconSvg from "../../images/slack.svg";
 import TimesIconSvg from "../../images/times.svg";
 import TwitterIconSvg from "../../images/twitter.svg";
-import { useSelector } from "react-redux";
 import { State } from "../../state";
+import { IconContainer } from "../misc/icon-container";
+import { Link } from "../misc/link";
+import { Search } from "../misc/search";
 
 export const Header: FunctionComponent = () => {
   const showShadow = useSelector<State, boolean>(

diff --git a/website/src/components/structure/main-content-container/main-content-container.tsx b/website/src/components/structure/main-content-container/main-content-container.tsx
@@ -17,7 +17,9 @@ export const MainContentContainer: FunctionComponent = ({ children }) => {
 
   useEffect(() => {
     ref.current?.addEventListener("scroll", handleScroll);
-    return () => ref.current?.removeEventListener("scroll", handleScroll);
+    return () => {
+      ref.current?.removeEventListener("scroll", handleScroll);
+    };
   }, []);
 
   useEffect(() => {