GraphQL Documentation

package.json

@@ -2,108 +2,86 @@
   "name": "saasquatch-docs",
   "private": true,
   "scripts": {
-    "start": "react-static start",
-    "gen:xls": "picklesdoc xlsx features docs --testers=2",
-    "stage": "react-static build --staging",
-    "build": "react-static build",
-    "bundle": "react-static bundle",
-    "export": "react-static export",
+    "start": "TS_NODE_PROJECT=tsconfig.static.json node -r ts-node/register node_modules/.bin/react-static start",
+    "stage": "TS_NODE_PROJECT=tsconfig.static.json node -r ts-node/register node_modules/.bin/react-static build --staging",
+    "build": "TS_NODE_PROJECT=tsconfig.static.json node -r ts-node/register node_modules/.bin/react-static build",
+    "bundle": "TS_NODE_PROJECT=tsconfig.static.json node -r ts-node/register node_modules/.bin/react-static bundle",
+    "export": "TS_NODE_PROJECT=tsconfig.static.json node -r ts-node/register node_modules/.bin/react-static export",
     "serve": "serve build -p $PORT -s",
-    "heroku-postbuild": "echo \"No Build\"",
-    "heroku": "serve saasquatch-docs-preview-herokuapp -p $PORT"
-  },
-  "dependencies": {
-    "@reach/router": "^1.2.1",
-    "@saasquatch/visual-dev": "^1.0.2",
-    "@types/dompurify": "^2.0.2",
-    "anchor-js": "^3.2.2",
-    "chai": "^3.5.0",
-    "contentful": "^3.8.1",
-    "debug": "^2.2.0",
-    "downshift": "^6.1.7",
-    "extend": "^3.0.0",
-    "get-folder-size": "^1.0.0",
-    "hammerjs": "^2.0.8",
-    "highlight.js": "^9.5.0",
-    "jquery": "^3.5.0",
-    "jquery.mmenu": "^5.6.5",
-    "js-yaml": "^3.0.2",
-    "json-schema-resolve-allof": "^1.1.4",
-    "less": "^3.8.1",
-    "lodash": "^4.17.19",
-    "magnific-popup": "^1.1.0",
-    "markdown-toc": "^0.13.0",
-    "moment": "^2.24.0",
-    "npm-run-all": "^4.1.3",
-    "performance-now": "^0.2.0",
-    "picklesdoc": "^1.2.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-hotkeys-hook": "^2.4.0",
-    "react-mailchimp-subscribe": "^2.1.0",
-    "react-static": "^7.2.0",
-    "react-static-plugin-reach-router": "^7.2.0",
-    "react-static-plugin-sitemap": "^7.2.0",
-    "react-static-plugin-source-filesystem": "^7.2.0",
-    "react-static-plugin-typescript": "^7.2.0",
-    "request": "^2.88.0",
-    "request-promise": "^4.1.1",
-    "serve": "^11.3.2",
-    "slug": "0.9.1",
-    "swagger-parser": "^3.4.1",
-    "use-debounce": "^5.1.0",
-    "webpack": "^4.20.2",
-    "zenscroll": "^3.3.0"
+    "gen:xls": "picklesdoc xlsx features docs --testers=2"
   },
   "devDependencies": {
     "@saasquatch/schema": "^1.16.8",
+    "@saasquatch/visual-dev": "^1.0.2",
     "@tippyjs/react": "^4.0.0",
+    "@types/dompurify": "^2.0.2",
     "@types/highlight.js": "^9.12.3",
     "@types/jquery": "^3.3.35",
     "@types/js-cookie": "^2.2.5",
-    "@types/node": "^12.7.2",
-    "@types/reach__router": "^1.2",
+    "@types/node": "^16.11.48",
     "@types/react": "^16.9.1",
     "@types/react-dom": "^16.8.5",
     "@types/react-hot-loader": "^4.1.0",
     "@types/react-modal": "^3.10.5",
     "@types/react-router": "^5.1.5",
     "@types/react-router-dom": "^5.1.4",
-    "@types/react-sidebar": "^3.0.0",
-    "@types/styled-components": "^4.4.0",
+    "@types/styled-components": "^5.1.26",
     "@types/swagger-schema-official": "^2.0.21",
-    "@types/webpack-env": "^1.14.0",
+    "@types/webpack-env": "^1.18.0",
+    "chai": "^3.5.0",
+    "contentful": "^3.8.1",
     "dompurify": "^2.0.11",
+    "downshift": "^6.1.7",
+    "extend": "^3.0.0",
+    "get-folder-size": "^1.0.0",
     "globby": "^10.0.1",
-    "graphiql": "^0.16.0",
-    "graphql": "^14.5.8",
+    "graphql": "^16.5.0",
     "gray-matter": "^4.0.2",
+    "hammerjs": "^2.0.8",
+    "highlight.js": "^9.5.0",
+    "hotkeys-js": "^3.9.4",
     "html-react-parser": "^0.10.3",
-    "jquery.mmenu": "^5.7.8",
+    "jquery": "^3.5.0",
+    "jquery.mmenu": "^5.6.5",
     "js-cookie": "^2.2.1",
-    "js-yaml": "^3.13.1",
+    "js-yaml": "^3.0.2",
     "json-loader": "^0.5.7",
-    "json-ref-parser": "^1.0.0",
     "json-schema-ref-parser": "^7.1.2",
+    "json-schema-resolve-allof": "^1.1.4",
+    "less": "^3.8.1",
+    "lodash": "^4.17.19",
+    "magnific-popup": "^1.1.0",
+    "markdown-toc": "^0.13.0",
     "marked": "^0.3.19",
     "mermaid": "^8.4.8",
-    "multimatch": "^4.0.0",
+    "moment": "^2.24.0",
     "mz": "^2.7.0",
-    "react-commonmark": "^3.0.0",
+    "picklesdoc": "^1.2.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-hot-loader": "^4.12.11",
     "react-modal": "^3.11.2",
-    "react-popper": "^2.2.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.2",
-    "react-sidebar": "^3.0.2",
+    "react-static": "^7.2.0",
     "react-static-plugin-less": "^7.2.2",
     "react-static-plugin-react-router": "^7.2.3",
+    "react-static-plugin-sitemap": "^7.2.0",
+    "react-static-plugin-source-filesystem": "^7.2.0",
+    "react-static-plugin-typescript": "^7.2.0",
     "react-sticky": "^6.0.3",
-    "styled-components": "^4.4.1",
-    "typescript": "^3.5.3",
+    "request": "^2.88.0",
+    "request-promise": "^4.1.1",
+    "slug": "0.9.1",
+    "styled-components": "^5.3.5",
+    "swagger-parser": "^3.4.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4",
     "unstated-next": "^1.1.0",
+    "use-debounce": "^5.1.0",
     "uuid": "^3.4.0",
+    "webpack": "^4.20.2",
     "yaml-loader": "^0.5.0"
   }
 }

schema-test.ts

@@ -0,0 +1,41 @@
+import { schemaText } from "./src/graphql/schema";
+import { processSchema } from "./src/graphql/processSchema";
+
+const {
+  categories,
+  queries,
+  mutations,
+  objects,
+  inputObjects,
+  scalars,
+  enums,
+  interfaces,
+  unions,
+} = processSchema(schemaText);
+
+// console.log("============ CATEGORIES");
+// console.log(JSON.stringify(categories, null, 2));
+
+// console.log("============ QUERIES");
+// console.log(JSON.stringify(queries, null, 2));
+
+// console.log("============ MUTATIONS");
+// console.log(JSON.stringify(mutations, null, 2));
+
+// console.log("============ OBJECTS");
+// console.log(JSON.stringify(objects, null, 2));
+
+// console.log("============ INPUT OBJECTS");
+// console.log(JSON.stringify(inputObjects["UserInput"], null, 2));
+
+// console.log("============ SCALARS");
+// console.log(JSON.stringify(scalars, null, 2));
+
+// console.log("============ ENUMS");
+// console.log(JSON.stringify(enums, null, 2));
+
+// console.log("============ INTERFACES");
+// console.log(JSON.stringify(interfaces, null, 2));
+
+// console.log("============ UNIONS");
+// console.log(JSON.stringify(unions, null, 2));

serve.json

@@ -1,3 +1,3 @@
 {
-    "cleanUrls": false
-}
+  "cleanUrls": false
+}

src/components/GraphQLExample.tsx

@@ -1,51 +1,56 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled from "styled-components";
-// @ts-ignore
-import GraphiQL from "graphiql";
-
-import { getSchema } from "../iddl";
-
-import "graphiql/graphiql.css";
-import { useAsyncMemo } from "src/util/useAsyncMemo";
+import Markdown from "./Markdown";
 
 const Container = styled.div`
-  position: relative;
-  min-height: 300px;
-  border: 1px solid #eee;
-  -webkit-box-shadow: -1px 2px 20px 2px rgba(217, 217, 217, 1);
-  -moz-box-shadow: -1px 2px 20px 2px rgba(217, 217, 217, 1);
-  box-shadow: -1px 2px 20px 2px rgba(217, 217, 217, 1);
-
-  .graphiql-container {
-    min-height: 300px;
+  display: flex;
+  align-items: stretch;
+  box-shadow: rgb(217 217 217) -1px 2px 20px 2px;
+  margin-top: 24px;
+  * {
+    flex: 1;
   }
-  .topBarWrap {
-    display: none;
+`;
+
+const Block = styled.div<{ $bgColor: string }>`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.$bgColor};
+
+  * pre {
+    box-sizing: border-box;
+    height: 100%;
+    background-color: ${(props) => props.$bgColor};
+    margin: 0;
+    padding: 12px;
   }
 `;
 
-export default function GraphQLExample({
+const Title = styled.div`
+  flex: 0;
+  text-transform: uppercase;
+  background-color: #edeaea;
+  font-size: 10px;
+  padding: 4px 8px;
+  height: fit-content;
+`;
+
+const GraphQLExample: React.FC<{ query: string; response: string }> = ({
   query,
   response,
-}: {
-  query: string;
-  response: string;
-}) {
-  const schema = useAsyncMemo(() => getSchema(), []);
-
+}) => {
   return (
     <Container>
-      <div className="graphiql-container">
-        {schema && (
-          <GraphiQL
-            schema={schema}
-            query={query}
-            response={response}
-            fetcher={async () => JSON.parse(response) as any}
-            // readOnly={true}
-          />
-        )}
-      </div>
+      <Block $bgColor="#fff">
+        <Title>Query</Title>
+        <Markdown source={`\`\`\`graphql\n${query}\n\`\`\``} />
+      </Block>
+      <Block $bgColor="#f8f8f8">
+        <Title>Response</Title>
+        <Markdown source={`\`\`\`json\n${response}\n\`\`\``} />
+      </Block>
     </Container>
   );
-}
+};
+
+export default GraphQLExample;

src/components/homepages/HomePage.tsx

@@ -28,7 +28,7 @@ export const HomePage: React.FC<HomePageProps> = ({
       <CardGrid>
         {cards.map((card) => {
           return (
-            <div style={{ display: "inline-block" }}>
+            <div key={card.linkUrl} style={{ display: "inline-block" }}>
               <Card
                 title={card.title}
                 description={card.description}

src/containers/redirect.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Redirect } from "react-router";
+import { useRouteData } from "react-static";
+
+export default () => {
+  const { to } = useRouteData();
+  return <Redirect to={to} />;
+};

src/containers/single/ThemeFields.tsx

@@ -23,7 +23,7 @@ export default () => {
 
       <pre>
         <code>
-          {JSON.stringify(exampleSwaggerSchema(ThemeContext), null, 2)} */}
+          {JSON.stringify(exampleSwaggerSchema(ThemeContext), null, 2)}
         </code>
       </pre>
     </TocFrame>

src/containers/single/guides.tsx

@@ -97,6 +97,13 @@ const writingWebComponent = {
   linkUrl: "/developer/widgets/writing-a-web-component-for-saasquatch",
 };
 
+const customGraphQLWidget = {
+  title: "Custom Widget via GraphQL",
+  description:
+    "Our widgets use our GraphQL API, so you can build your own custom widget using simple GraphQL queries and make something unique to meet your requirements.",
+  linkUrl: "/graphql/custom-widget",
+};
+
 // Cards to be rendered array & render function
 
 const CardsArray: Array<CardProps> = [
@@ -113,6 +120,7 @@ const CardsArray: Array<CardProps> = [
   attributionTechGuide,
   commonPitfalls,
   writingWebComponent,
+  customGraphQLWidget,
 ];
 
 export default function render() {