Fixed a few website issues and upgraded packages (#2535)

ChilliCream · Nov 4, 2020 · b28feeb · b28feeb
1 parent 115f47c
commit b28feeb
Show file tree

Hide file tree

Showing 9 changed files with 2,005 additions and 2,568 deletions.
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -88,16 +88,10 @@ module.exports = {
             resolve: `gatsby-remark-autolink-headers`,
             options: {
               offsetY: 60,
+              icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>`,
             },
           },
           `gatsby-remark-reading-time`,
-          {
-            resolve: `gatsby-remark-code-buttons`,
-            options: {
-              tooltipText: `Copy`,
-              toasterText: "Copied code example",
-            },
-          },
           {
             resolve: `gatsby-remark-mermaid`,
             options: {
@@ -106,6 +100,13 @@ module.exports = {
               },
             },
           },
+          {
+            resolve: `gatsby-remark-code-buttons`,
+            options: {
+              tooltipText: `Copy`,
+              toasterText: "Copied code example",
+            },
+          },
           {
             resolve: `gatsby-remark-prismjs`,
             options: {

diff --git a/website/src/components/misc/article-sections.tsx b/website/src/components/misc/article-sections.tsx
@@ -4,6 +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";
 
 interface ArticleSectionsProperties {
   data: ArticleSectionsFragment;
@@ -74,15 +75,17 @@ export const ArticleSections: FunctionComponent<ArticleSectionsProperties> = ({
   return data.tableOfContents!.length > 0 ? (
     <Container>
       <Title>In this article</Title>
-      <Content
-        onClick={handleCloseClick}
-        dangerouslySetInnerHTML={{
-          __html: data.tableOfContents!.replace(
-            /href=\"(.*?#)(.*?)\"/gi,
-            'id="toc-$2" href="/docs$1$2"'
-          ),
-        }}
-      />
+      <MostProminentSection>
+        <Content
+          onClick={handleCloseClick}
+          dangerouslySetInnerHTML={{
+            __html: data.tableOfContents!.replace(
+              /href=\"(.*?#)(.*?)\"/gi,
+              'id="toc-$2" href="/docs$1$2"'
+            ),
+          }}
+        />
+      </MostProminentSection>
     </Container>
   ) : (
     <></>

diff --git a/website/src/components/misc/doc-page-elements.tsx b/website/src/components/misc/doc-page-elements.tsx
@@ -43,6 +43,10 @@ export const FixedContainer = styled.div`
   }
 `;
 
+export const MostProminentSection = styled.div`
+  overflow-y: initial;
+`;
+
 export const Aside = styled.aside`
   ${PaneBase}
   z-index: 2;
@@ -60,6 +64,10 @@ export const Aside = styled.aside`
     > ${FixedContainer} {
       ${FullSize};
       right: initial;
+
+      ${MostProminentSection} {
+        height: calc(100vh - 280px);
+      }
     }
   }
 `;
@@ -81,6 +89,10 @@ export const Navigation = styled.nav`
     > ${FixedContainer} {
       ${FullSize};
       left: initial;
+
+      ${MostProminentSection} {
+        height: calc(100vh - 220px);
+      }
     }
   }
 `;

diff --git a/website/src/components/misc/doc-page-navigation.tsx b/website/src/components/misc/doc-page-navigation.tsx
@@ -16,7 +16,12 @@ import {
   toggleNavigationGroup,
   toggleTOC,
 } from "../../state/common";
-import { BodyStyle, FixedContainer, Navigation } from "./doc-page-elements";
+import {
+  BodyStyle,
+  FixedContainer,
+  MostProminentSection,
+  Navigation,
+} from "./doc-page-elements";
 import { DocPagePaneHeader } from "./doc-page-pane-header";
 import { IconContainer } from "./icon-container";
 import { Link } from "./link";
@@ -250,29 +255,31 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
             ))}
           </ProductVersions>
         )}
-        {!productSwitcherOpen &&
-          activeVersion?.items &&
-          buildNavigationStructure(
-            activeVersion.items
-              .filter((item) => !!item)
-              .map<Item>((item) => ({
-                path: item!.path!,
-                title: item!.title!,
-                items: item!.items
-                  ? item?.items
-                      .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!
-                : ""
-            }`
-          )}
+        {!productSwitcherOpen && activeVersion?.items && (
+          <MostProminentSection>
+            {buildNavigationStructure(
+              activeVersion.items
+                .filter((item) => !!item)
+                .map<Item>((item) => ({
+                  path: item!.path!,
+                  title: item!.title!,
+                  items: item!.items
+                    ? item?.items
+                        .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!
+                  : ""
+              }`
+            )}
+          </MostProminentSection>
+        )}
       </FixedContainer>
     </Navigation>
   );

diff --git a/website/src/components/widgets/doc-page.tsx b/website/src/components/widgets/doc-page.tsx
@@ -40,8 +40,6 @@ export const DocPage: FunctionComponent<DocPageProperties> = ({
   const selectedVersion = (result && result[2]) || "";
   const title = frontmatter!.title!;
 
-  console.log(path);
-
   const handleToggleTOC = useCallback(() => {
     dispatch(toggleTOC());
   }, []);
@@ -70,7 +68,7 @@ export const DocPage: FunctionComponent<DocPageProperties> = ({
                 <NewspaperIconSvg /> About this article
               </Button>
             </ResponsiveMenu>
-            <ArticleTitle>{title}</ArticleTitle>
+            <DocArticleTitle>{title}</DocArticleTitle>
           </ArticleHeader>
           <ArticleContent dangerouslySetInnerHTML={{ __html: html! }} />
         </Article>
@@ -123,14 +121,28 @@ const Container = styled.div`
 `;
 
 const ResponsiveMenu = styled.div`
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 2;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 30px 20px 20px;
+  background: linear-gradient(
+    180deg,
+    #ffffff 30%,
+    rgba(255, 255, 255, 0.75) 100%
+  );
 
   @media only screen and (min-width: 820px) {
+    position: initial;
+    right: initial;
+    left: initial;
+    z-index: initial;
     padding-right: 50px;
     padding-left: 50px;
+    background: initial;
   }
 
   @media only screen and (min-width: 1070px) {
@@ -144,6 +156,14 @@ const ResponsiveMenu = styled.div`
   }
 `;
 
+const DocArticleTitle = styled(ArticleTitle)`
+  margin-top: 68px;
+
+  @media only screen and (min-width: 820px) {
+    margin-top: 20px;
+  }
+`;
+
 const Button = styled.button`
   display: flex;
   flex-direction: row;

diff --git a/website/src/docs/hotchocolate/fetching-data/index.md b/website/src/docs/hotchocolate/fetching-data/index.md
@@ -2,6 +2,8 @@
 title: "Resolver"
 ---
 
+# Introduction
+
 When it comes to fetching data in a GraphQL server you will always end up with a resolver.
 **A resolver is a generic function that fetches data from an arbitrary data source for a particular field.**
 This means every field has it's own individual resolver function in order to fetch or select data. Even if there isn't a resolver defined for one field, Hot Chocolate will create a default resolver for this particular field behind the scenes.

diff --git a/website/src/docs/hotchocolate/v10/execution-engine/batching.md b/website/src/docs/hotchocolate/v10/execution-engine/batching.md
@@ -4,7 +4,7 @@ title: Batching
 
 Hot Chocolate supports operation batching and request batching. But before we get into the details lets reflect on what batching is and what you can do with it.
 
-[![Batching](/docs/shared/batching.png)](https://youtu.be/ViXL0YQnioU?t=626)
+[![Batching](../../../shared/batching.png)](https://youtu.be/ViXL0YQnioU?t=626)
 
 # Introduction
 

diff --git a/website/src/state/state.helpers.ts b/website/src/state/state.helpers.ts
@@ -1,34 +1,32 @@
-export interface Action<Payload = unknown> {
+export interface Action<Payload = void> {
   type: string;
   payload: Payload;
 }
 
-interface ActionCreator<Payload = unknown> {
+interface ActionCreator<Payload = void> {
   type: string;
-  (payload?: Payload): Action<Payload>;
+  (payload: Payload): Action<Payload>;
 }
 
-export function createAction<Payload = unknown>(
+export function createAction<Payload = void>(
   type: string
 ): ActionCreator<Payload> {
-  const actionCreator = <ActionCreator<Payload>>function (payload?: Payload) {
-    return {
-      type,
-      payload,
-    };
-  };
+  const actionCreator: ActionCreator<Payload> = (payload: Payload) => ({
+    type,
+    payload,
+  });
 
   actionCreator.type = type;
 
   return actionCreator;
 }
 
-interface ActionReducer<State, Payload = unknown> {
+interface ActionReducer<State, Payload = void> {
   type: string;
   reduce: (state: State, payload: Payload) => State;
 }
 
-export function onAction<State, Payload = unknown>(
+export function onAction<State, Payload = void>(
   action: ActionCreator<Payload>,
   reduce: (state: State, payload: Payload) => State
 ): ActionReducer<State, Payload> {