Fix broken sidenav

website/src/blog/2020-11-23-hot-chocolate-11/2020-11-23-hot-chocolate-11.md

@@ -386,9 +386,7 @@ Apart from the refactoring of the data integration API, we introduced our new Ge
 {
   pubs(
     where: {
-      location: {
-        within: { geometry: { type: Point, coordinates: [1, 1] } }
-      }
+      location: { within: { geometry: { type: Point, coordinates: [1, 1] } } }
     }
   ) {
     id
@@ -471,7 +469,7 @@ But as I said in the beginning, there is a lot more coming with the next dot upd
 
 # Extensibility
 
-With Hot Chocolate 11, we have invested in adding extensibility points, where our customers and partners who want to extend Hot Chocolate can do so easily and safely. When customizations are created, the creator can be assured that the integrity of Hot Chocolate will be maintained in the future and those extensions will continue to work as designed through minor and major releases of Hot Chocolate.  Our existing extensions, `HotChocolate.Data` and `HotChocolate.Stitching` already take advantage of this new extensibility feature.
+With Hot Chocolate 11, we have invested in adding extensibility points, where our customers and partners who want to extend Hot Chocolate can do so easily and safely. When customizations are created, the creator can be assured that the integrity of Hot Chocolate will be maintained in the future and those extensions will continue to work as designed through minor and major releases of Hot Chocolate. Our existing extensions, `HotChocolate.Data` and `HotChocolate.Stitching` already take advantage of this new extensibility feature.
 
 We essentially created a new interception API that can hook into the type initialization to completely rewrite an inferred schema. It can create new types when it finds an attribute or branch of types and essentially creates versions of the same graph. It gives you a powerful API that visits each type during its various initialization stages and lets you change the APIs.
 

website/src/components/misc/article-elements.tsx → website/src/components/articles/article-elements.tsx

@@ -1,29 +1,17 @@
 import styled from "styled-components";
+import { IsPhablet, IsSmallDesktop } from "../doc-page/shared-style";
 
-export const ArticleWrapper = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
+export const ArticleHeader = styled.header`
+  position: relative;
 
-  @media only screen and (min-width: 820px) {
-    padding: 20px 10px 0;
-  }
-`;
+  ${IsSmallDesktop(`
+    padding-top: 54px;
+  `)}
 
-export const Article = styled.article`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  margin-bottom: 40px;
-  padding-bottom: 20px;
+  ${IsPhablet(`
+    padding-top: 20px;
+  `)}
 
-  @media only screen and (min-width: 820px) {
-    border-radius: 4px;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
-  }
-`;
-
-export const ArticleHeader = styled.header`
   @media only screen and (min-width: 820px) {
     > .gatsby-image-wrapper {
       border-radius: 4px 4px 0 0;

website/src/components/misc/article-sections.tsx → website/src/components/articles/article-sections.tsx

@@ -4,7 +4,7 @@ import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import { ArticleSectionsFragment } from "../../../graphql-types";
 import { closeAside } from "../../state/common";
-import { MostProminentSection } from "./doc-page-elements";
+import { MostProminentSection } from "../doc-page/doc-page-elements";
 
 interface ArticleSectionsProperties {
   data: ArticleSectionsFragment;

website/src/components/articles/article.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import React, { FunctionComponent } from "react";
+
+export const Article: FunctionComponent = ({ children }) => {
+  return <ArticleElement>{children}</ArticleElement>;
+};
+
+const ArticleElement = styled.article`
+  overflow: hidden;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  margin-bottom: 40px;
+  padding-bottom: 20px;
+  max-width: 800px;
+
+  @media only screen and (min-width: 820px) {
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  }
+`;

website/src/components/misc/blog-article-tags.tsx → website/src/components/blog-article/blog-article-tags.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "gatsby";
 import React, { FunctionComponent } from "react";
 import styled from "styled-components";
-import { Link } from "./link";
+import { Link } from "../misc/link";
 
 interface BlogArticleTagsProperties {
   tags: string[];

website/src/components/widgets/blog-article.tsx → website/src/components/blog-article/blog-article.tsx

@@ -3,17 +3,17 @@ import Img, { FluidObject } from "gatsby-image";
 import React, { FunctionComponent } from "react";
 import styled from "styled-components";
 import { BlogArticleFragment } from "../../../graphql-types";
-import { ArticleComments } from "../misc/article-comments";
+import { ArticleComments } from "../articles/article-comments";
 import {
-  Article,
   ArticleContent,
   ArticleHeader,
   ArticleTitle,
-  ArticleWrapper,
-} from "../misc/article-elements";
-import { BlogArticleMetadata } from "../misc/blog-article-metadata";
-import { BlogArticleSharebar } from "../misc/blog-article-sharebar";
-import { BlogArticleTags } from "../misc/blog-article-tags";
+} from "../articles/article-elements";
+import { BlogArticleMetadata } from "./blog-article-metadata";
+import { BlogArticleSharebar } from "./blog-article-sharebar";
+import { BlogArticleTags } from "./blog-article-tags";
+import { IsTablet } from "../doc-page/shared-style";
+import { Article } from "../articles/article";
 
 interface BlogArticleProperties {
   data: BlogArticleFragment;
@@ -75,6 +75,15 @@ export const BlogArticleGraphQLFragment = graphql`
   }
 `;
 
+const ArticleWrapper = styled.div`
+  display: grid;
+  grid-template-rows: 1fr auto;
+  padding: 20px 10px 0;
+  ${IsTablet(`
+    padding: 0;
+  `)}
+`;
+
 const Container = styled.div`
   display: flex;
   flex: 0 0 auto;

website/src/components/doc-page/doc-page-article-wrapper.tsx

@@ -0,0 +1,43 @@
+import React, { createRef, FunctionComponent, useEffect } from "react";
+import styled from "styled-components";
+import { DocPageDesktopGridColumns, IsSmallDesktop } from "./shared-style";
+import { useDispatch } from "react-redux";
+import { setArticleHeight } from "../../state/common";
+
+export const ArticleWrapper: FunctionComponent = ({ children }) => {
+  const ref = createRef<HTMLDivElement>();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const handleResize = () => {
+      const totalArticleHeight = ref.current?.offsetHeight ?? 0;
+
+      if (totalArticleHeight > 0) {
+        const articleViewportHeight =
+          window.innerHeight > totalArticleHeight
+            ? totalArticleHeight - 25
+            : window.innerHeight - 85;
+        dispatch(
+          setArticleHeight({ articleHeight: articleViewportHeight + "px" })
+        );
+      } else {
+        dispatch(setArticleHeight({ articleHeight: "94vh" }));
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  });
+
+  return <ArticleWrapperElement ref={ref}>{children}</ArticleWrapperElement>;
+};
+
+export const ArticleWrapperElement = styled.div`
+  display: grid;
+  ${DocPageDesktopGridColumns};
+  ${IsSmallDesktop(`
+    grid-template-columns: 1fr;
+  `)}
+  grid-template-rows: 1fr;
+  padding: 6px;
+`;

website/src/components/doc-page/doc-page-aside.tsx

@@ -0,0 +1,63 @@
+import React, { FunctionComponent, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { State } from "../../state";
+import { toggleAside } from "../../state/common";
+import { BodyStyle, DocPageStickySideBarStyle } from "./doc-page-elements";
+import { DocPagePaneHeader } from "./doc-page-pane-header";
+import styled from "styled-components";
+import {
+  BoxShadow,
+  IsSmallDesktop,
+  SmallDesktopBreakpointNumber,
+} from "./shared-style";
+
+export const DocPageAside: FunctionComponent = ({ children }) => {
+  const showAside = useSelector<State, boolean>(
+    (state) => state.common.showAside
+  );
+
+  const height = useSelector<State, string>((state) => {
+    return state.common.articleViewportHeight;
+  });
+
+  const dispatch = useDispatch();
+
+  const handleCloseAside = useCallback(() => {
+    dispatch(toggleAside());
+  }, []);
+
+  return (
+    <Aside calculatedHeight={height} className={showAside ? "show" : ""}>
+      <BodyStyle disableScrolling={showAside} />
+      <DocPagePaneHeader
+        title="About this article"
+        showWhenScreenWidthIsSmallerThan={SmallDesktopBreakpointNumber}
+        onClose={handleCloseAside}
+      />
+      {children}
+    </Aside>
+  );
+};
+
+export const Aside = styled.aside<{ calculatedHeight: string }>`
+  ${DocPageStickySideBarStyle}
+
+  margin-left: 0;
+  transition: transform 250ms;
+  background-color: white;
+  padding: 25px 0 0;
+
+  &.show {
+    transform: none;
+  }
+
+  ${({ calculatedHeight }) =>
+    IsSmallDesktop(`
+      transform: translateX(100%);
+      height: ${calculatedHeight};
+      position: fixed;
+      top: 60px;
+      right: 0;
+      ${BoxShadow}
+    `)}
+`;

website/src/components/misc/doc-page-community.tsx → website/src/components/doc-page/doc-page-community.tsx

@@ -2,8 +2,8 @@ import { graphql } from "gatsby";
 import React, { FunctionComponent } from "react";
 import styled from "styled-components";
 import { DocPageCommunityFragment } from "../../../graphql-types";
-import { IconContainer } from "./icon-container";
-import { Link } from "./link";
+import { IconContainer } from "../misc/icon-container";
+import { Link } from "../misc/link";
 
 import GitHubIconSvg from "../../images/github.svg";
 import SlackIconSvg from "../../images/slack.svg";

website/src/components/doc-page/doc-page-elements.tsx

@@ -0,0 +1,34 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { IsMobile, IsTablet } from "./shared-style";
+
+export const MostProminentSection = styled.div``;
+
+export const DocPageStickySideBarStyle = `
+  max-height: 90vh;
+  display: block;
+  align-self: start;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+  z-index: 25;
+
+  ${IsTablet(`
+    max-height: none;
+    width: 350px;
+  `)}
+
+  ${IsMobile(`
+    width: 100%;
+  `)}
+`;
+
+export const BodyStyle = createGlobalStyle<{ disableScrolling: boolean }>`
+  body {
+    overflow-y: ${({ disableScrolling }) =>
+      disableScrolling ? "hidden" : "initial"};
+
+    @media only screen and (min-width: 600px) {
+      overflow-y: initial;
+    }
+  }
+`;

website/src/components/misc/doc-page-legacy.tsx → website/src/components/doc-page/doc-page-legacy.tsx

@@ -3,7 +3,7 @@ import { useCookies } from "react-cookie";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { State } from "../../state";
-import { Link } from "./link";
+import { Link } from "../misc/link";
 import { hideLegacyDocHeader, showLegacyDocInfo } from "../../state/common";
 
 import TimesIconSvg from "../../images/times.svg";