Mermaid, Disqus and Images (ChilliCream#1556)

website/gatsby-config.js

@@ -3,14 +3,15 @@ module.exports = {
     title: `ChilliCream GraphQL`,
     description: `...`,
     author: `@Chilli_Cream`,
+    baseUrl: `https://chillicream.com`,
     topnav: [
       {
         name: `Platform`,
-        link: `/`,
+        link: `/platform`,
       },
       {
         name: `Docs`,
-        link: `/`,
+        link: `/docs`,
       },
       {
         name: `Blog`,
@@ -64,6 +65,7 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          `gatsby-remark-mermaid`,
           {
             resolve: `gatsby-remark-prismjs`,
             options: {
@@ -73,7 +75,7 @@ module.exports = {
           {
             resolve: `gatsby-remark-images`,
             options: {
-              maxWidth: 600,
+              maxWidth: 1100,
             },
           },
         ],

website/graphql-types.ts

@@ -2141,6 +2141,7 @@ export type SiteFieldsEnum =
   'siteMetadata___title' |
   'siteMetadata___description' |
   'siteMetadata___author' |
+  'siteMetadata___baseUrl' |
   'siteMetadata___topnav' |
   'siteMetadata___topnav___name' |
   'siteMetadata___topnav___link' |
@@ -2449,17 +2450,6 @@ export type SitePageFieldsEnum =
   'pluginCreator___pluginOptions___shortname' |
   'pluginCreator___pluginOptions___showLineNumbers' |
   'pluginCreator___pluginOptions___maxWidth' |
-  'pluginCreator___pluginOptions___pathPrefix' |
-  'pluginCreator___pluginOptions___wrapperStyle' |
-  'pluginCreator___pluginOptions___backgroundColor' |
-  'pluginCreator___pluginOptions___linkImagesToOriginal' |
-  'pluginCreator___pluginOptions___showCaptions' |
-  'pluginCreator___pluginOptions___markdownCaptions' |
-  'pluginCreator___pluginOptions___withWebp' |
-  'pluginCreator___pluginOptions___tracedSVG' |
-  'pluginCreator___pluginOptions___loading' |
-  'pluginCreator___pluginOptions___disableBgImageOnAlpha' |
-  'pluginCreator___pluginOptions___disableBgImage' |
   'pluginCreator___pluginOptions___google___families' |
   'pluginCreator___pluginOptions___short_name' |
   'pluginCreator___pluginOptions___start_url' |
@@ -2665,35 +2655,13 @@ export type SitePluginFieldsEnum =
   'pluginOptions___plugins___version' |
   'pluginOptions___plugins___pluginOptions___showLineNumbers' |
   'pluginOptions___plugins___pluginOptions___maxWidth' |
-  'pluginOptions___plugins___pluginOptions___pathPrefix' |
-  'pluginOptions___plugins___pluginOptions___wrapperStyle' |
-  'pluginOptions___plugins___pluginOptions___backgroundColor' |
-  'pluginOptions___plugins___pluginOptions___linkImagesToOriginal' |
-  'pluginOptions___plugins___pluginOptions___showCaptions' |
-  'pluginOptions___plugins___pluginOptions___markdownCaptions' |
-  'pluginOptions___plugins___pluginOptions___withWebp' |
-  'pluginOptions___plugins___pluginOptions___tracedSVG' |
-  'pluginOptions___plugins___pluginOptions___loading' |
-  'pluginOptions___plugins___pluginOptions___disableBgImageOnAlpha' |
-  'pluginOptions___plugins___pluginOptions___disableBgImage' |
   'pluginOptions___plugins___browserAPIs' |
   'pluginOptions___plugins___pluginFilepath' |
   'pluginOptions___name' |
   'pluginOptions___path' |
   'pluginOptions___shortname' |
   'pluginOptions___showLineNumbers' |
   'pluginOptions___maxWidth' |
-  'pluginOptions___pathPrefix' |
-  'pluginOptions___wrapperStyle' |
-  'pluginOptions___backgroundColor' |
-  'pluginOptions___linkImagesToOriginal' |
-  'pluginOptions___showCaptions' |
-  'pluginOptions___markdownCaptions' |
-  'pluginOptions___withWebp' |
-  'pluginOptions___tracedSVG' |
-  'pluginOptions___loading' |
-  'pluginOptions___disableBgImageOnAlpha' |
-  'pluginOptions___disableBgImage' |
   'pluginOptions___google___families' |
   'pluginOptions___short_name' |
   'pluginOptions___start_url' |
@@ -2827,17 +2795,6 @@ export type SitePluginPluginOptions = {
   shortname?: Maybe<Scalars['String']>;
   showLineNumbers?: Maybe<Scalars['Boolean']>;
   maxWidth?: Maybe<Scalars['Int']>;
-  pathPrefix?: Maybe<Scalars['String']>;
-  wrapperStyle?: Maybe<Scalars['String']>;
-  backgroundColor?: Maybe<Scalars['String']>;
-  linkImagesToOriginal?: Maybe<Scalars['Boolean']>;
-  showCaptions?: Maybe<Scalars['Boolean']>;
-  markdownCaptions?: Maybe<Scalars['Boolean']>;
-  withWebp?: Maybe<Scalars['Boolean']>;
-  tracedSVG?: Maybe<Scalars['Boolean']>;
-  loading?: Maybe<Scalars['String']>;
-  disableBgImageOnAlpha?: Maybe<Scalars['Boolean']>;
-  disableBgImage?: Maybe<Scalars['Boolean']>;
   google?: Maybe<SitePluginPluginOptionsGoogle>;
   short_name?: Maybe<Scalars['String']>;
   start_url?: Maybe<Scalars['String']>;
@@ -2857,17 +2814,6 @@ export type SitePluginPluginOptionsFilterInput = {
   shortname?: Maybe<StringQueryOperatorInput>;
   showLineNumbers?: Maybe<BooleanQueryOperatorInput>;
   maxWidth?: Maybe<IntQueryOperatorInput>;
-  pathPrefix?: Maybe<StringQueryOperatorInput>;
-  wrapperStyle?: Maybe<StringQueryOperatorInput>;
-  backgroundColor?: Maybe<StringQueryOperatorInput>;
-  linkImagesToOriginal?: Maybe<BooleanQueryOperatorInput>;
-  showCaptions?: Maybe<BooleanQueryOperatorInput>;
-  markdownCaptions?: Maybe<BooleanQueryOperatorInput>;
-  withWebp?: Maybe<BooleanQueryOperatorInput>;
-  tracedSVG?: Maybe<BooleanQueryOperatorInput>;
-  loading?: Maybe<StringQueryOperatorInput>;
-  disableBgImageOnAlpha?: Maybe<BooleanQueryOperatorInput>;
-  disableBgImage?: Maybe<BooleanQueryOperatorInput>;
   google?: Maybe<SitePluginPluginOptionsGoogleFilterInput>;
   short_name?: Maybe<StringQueryOperatorInput>;
   start_url?: Maybe<StringQueryOperatorInput>;
@@ -2927,33 +2873,11 @@ export type SitePluginPluginOptionsPluginsFilterListInput = {
 export type SitePluginPluginOptionsPluginsPluginOptions = {
   showLineNumbers?: Maybe<Scalars['Boolean']>;
   maxWidth?: Maybe<Scalars['Int']>;
-  pathPrefix?: Maybe<Scalars['String']>;
-  wrapperStyle?: Maybe<Scalars['String']>;
-  backgroundColor?: Maybe<Scalars['String']>;
-  linkImagesToOriginal?: Maybe<Scalars['Boolean']>;
-  showCaptions?: Maybe<Scalars['Boolean']>;
-  markdownCaptions?: Maybe<Scalars['Boolean']>;
-  withWebp?: Maybe<Scalars['Boolean']>;
-  tracedSVG?: Maybe<Scalars['Boolean']>;
-  loading?: Maybe<Scalars['String']>;
-  disableBgImageOnAlpha?: Maybe<Scalars['Boolean']>;
-  disableBgImage?: Maybe<Scalars['Boolean']>;
 };
 
 export type SitePluginPluginOptionsPluginsPluginOptionsFilterInput = {
   showLineNumbers?: Maybe<BooleanQueryOperatorInput>;
   maxWidth?: Maybe<IntQueryOperatorInput>;
-  pathPrefix?: Maybe<StringQueryOperatorInput>;
-  wrapperStyle?: Maybe<StringQueryOperatorInput>;
-  backgroundColor?: Maybe<StringQueryOperatorInput>;
-  linkImagesToOriginal?: Maybe<BooleanQueryOperatorInput>;
-  showCaptions?: Maybe<BooleanQueryOperatorInput>;
-  markdownCaptions?: Maybe<BooleanQueryOperatorInput>;
-  withWebp?: Maybe<BooleanQueryOperatorInput>;
-  tracedSVG?: Maybe<BooleanQueryOperatorInput>;
-  loading?: Maybe<StringQueryOperatorInput>;
-  disableBgImageOnAlpha?: Maybe<BooleanQueryOperatorInput>;
-  disableBgImage?: Maybe<BooleanQueryOperatorInput>;
 };
 
 export type SitePluginSortInput = {
@@ -2965,6 +2889,7 @@ export type SiteSiteMetadata = {
   title?: Maybe<Scalars['String']>;
   description?: Maybe<Scalars['String']>;
   author?: Maybe<Scalars['String']>;
+  baseUrl?: Maybe<Scalars['String']>;
   topnav?: Maybe<Array<Maybe<SiteSiteMetadataTopnav>>>;
   tools?: Maybe<SiteSiteMetadataTools>;
 };
@@ -2973,6 +2898,7 @@ export type SiteSiteMetadataFilterInput = {
   title?: Maybe<StringQueryOperatorInput>;
   description?: Maybe<StringQueryOperatorInput>;
   author?: Maybe<StringQueryOperatorInput>;
+  baseUrl?: Maybe<StringQueryOperatorInput>;
   topnav?: Maybe<SiteSiteMetadataTopnavFilterListInput>;
   tools?: Maybe<SiteSiteMetadataToolsFilterInput>;
 };
@@ -3062,7 +2988,7 @@ export type GetBlogArticleQueryVariables = {
 export type GetBlogArticleQuery = { markdownRemark: Maybe<(
     Pick<MarkdownRemark, 'html'>
     & { frontmatter: Maybe<Pick<MarkdownRemarkFrontmatter, 'author' | 'date' | 'path' | 'title'>> }
-  )> };
+  )>, site: Maybe<{ siteMetadata: Maybe<Pick<SiteSiteMetadata, 'baseUrl'>> }> };
 
 export type GatsbyImageSharpFixedFragment = Pick<ImageSharpFixed, 'base64' | 'width' | 'height' | 'src' | 'srcSet'>;
 

website/package.json

@@ -35,6 +35,7 @@
     "gatsby-plugin-ts": "^2.2.3",
     "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-remark-images": "^3.1.49",
+    "gatsby-remark-mermaid": "^1.2.0",
     "gatsby-remark-prismjs": "^3.3.34",
     "gatsby-source-filesystem": "^2.1.46",
     "gatsby-transformer-remark": "^2.6.58",

website/src/blog/2019-06-05-hot-chocolate-9.0.0.md

@@ -103,10 +103,13 @@ Starting with this version we have begun to invest into making _Hot Chocolate_ o
 
 With version 9 we are introducing the first step on this road with our new UTF-8 GraphQL parser. This new parser is not anymore, a port of the original graphql-js parser but a reimplementation that uses the raw bytes instead of strings, meaning we are using all those nice new `Span<T>` APIs. This makes it use less memory and perform faster. The new UTF-8 GraphQL parser is the fastest and most standard compliant parser on the .Net platform.
 
-<img src="../../../../img/lexer_mem.png" height="300" width="300">
-<img src="../../../../img/lexer_perf.png" height="300" width="300">
-<img src="../../../../img/parser_mem.png" height="300" width="300">
-<img src="../../../../img/parser_perf.png" height="300" width="300">
+![Lexer Memory](../images/blog/lexer_mem.png)
+
+![Lexer Performance](../images/blog/lexer_perf.png)
+
+![Parser Memory](../images/blog/parser_mem.png)
+
+![Parser Performance](../images/blog/parser_perf.png)
 
 **What do these charts mean?**
 
@@ -136,8 +139,9 @@ Apart from that we have started making our execution engine more efficient. We a
 
 With our release today _Hot Chocolate_ is depending on the use case at least to times faster in executing queries and uses half of the memory compared to GraphQL-DotNet. If you are using schema-first then the performance gains are more dramatic and you could look at up to 13 times faster execution performance compared to GraphQL-DotNet.
 
-<img src="../../../../img/exec_mem.png" height="300" width="300">
-<img src="../../../../img/exec_perf.png" height="300" width="300">
+![Execution Memory](../images/blog/exec_mem.png)
+
+![Execution Performance](../images/blog/exec_perf.png)
 
 **What will the new UTF-8 request parser help?**
 
@@ -157,13 +161,13 @@ With this release we have published a first draft of the new documentation and w
 
 When we released _Hot Chocolate_ version 8 we announced a new _Hot Chocolate Developer Tool_. Since that announcement we were heavily at work building that new tool.
 
-Today we are anouncing _Banana Cakepop_, a new tool that will help you explore and query GraphQL schemas.
+Today we are anouncing _Banana Cake Pop_, a new tool that will help you explore and query GraphQL schemas.
 
-<img src="../../../../img/banana.png">
+![Banana Cake Pop](../images/blog/banana.png)
 
-_Banana Cakepop_ is **NOT** built on top of GraphiQL like all the other tools but built from the ground up with **Monaco** at its heart.
+_Banana Cake Pop_ is **NOT** built on top of GraphiQL like all the other tools but built from the ground up with **Monaco** at its heart.
 
-We plan to invest a lot more effort into _Banana Cakepop_ going forward. Our plan is to build this ultimate GraphQL developer tool that provides advanced schema browsing, querying GraphQL endpoints, creating runbooks and many more things.
+We plan to invest a lot more effort into _Banana Cake Pop_ going forward. Our plan is to build this ultimate GraphQL developer tool that provides advanced schema browsing, querying GraphQL endpoints, creating runbooks and many more things.
 
 We will provide a plugin model so that you can add your own extensions.
 

website/src/blog/2019-08-14-hot-chocolate-10.0.0.md

@@ -7,7 +7,7 @@ authorURL: https://github.com/michaelstaib
 authorImageURL: https://avatars1.githubusercontent.com/u/9714350?s=100&v=4
 ---
 
-![Hot Chocolate](/img/blog/hotchocolate-banner.svg)
+![Hot Chocolate](../images/blog/hotchocolate-banner.png)
 
 Today we have released version 10 of _Hot Chocolate_. We originally started building version 9.1 which grew bigger and at one point became version 10. We have focused a lot on our server implementation. But let me walk you through our latest release.
 
@@ -293,9 +293,7 @@ With GraphQL most requests are provided as `JSON` that contains the request as a
 
 With the new _UTF-8 request parser_ we can finally just read the binary request stream and parse the JSON and the GraphQL request in one go. But there is more, we have given our new UTF-8 request parser access to our document cache, meaning while we parse the JSON request and hit the part were the GraphQL request is, we can look up if this query is already cached. This dramatically reduces memory usage and performance since we will not consume the query property anyway.
 
-<center>
-  <img src="../../../../img/request_parser_mem.png" width="50%">
-</center>
+![Request Parser Memory](../images/blog/request_parser_mem.png)
 
 The new request parser does only allocate 1/3 of the memory that GraphQL-DotNet uses with it\`s combination of JSON.Net and it\`s string based GraphQL parser.
 

website/src/blog/2019-09-27-strawberry-shake.md

@@ -7,7 +7,7 @@ authorURL: https://github.com/michaelstaib
 authorImageURL: https://avatars1.githubusercontent.com/u/9714350?s=100&v=4
 ---
 
-![Strawberry Shake](/img/blog/strawberry-shake-banner.svg)
+![Strawberry Shake](../images/blog/strawberry-shake-banner.png)
 
 **This post has been updated, please head over to the newer post [here](https://chillicream.com/blog/2019/11/25/strawberry-shake_2).**
 

website/src/blog/2019-11-25-strawberry-shake_2.md

@@ -7,7 +7,7 @@ authorURL: https://github.com/michaelstaib
 authorImageURL: https://avatars1.githubusercontent.com/u/9714350?s=100&v=4
 ---
 
-![Strawberry Shake](/img/blog/strawberry-shake-banner.svg)
+![Strawberry Shake](../images/blog/strawberry-shake-banner.png)
 
 We are busy, busy, busy working on version 11 of _Hot Chocolate_ and _Strawberry Shake_.
 

website/src/blog/2019-11-29-schema-design.md

@@ -7,7 +7,7 @@ authorURL: https://github.com/michaelstaib
 authorImageURL: https://avatars1.githubusercontent.com/u/9714350?s=100&v=4
 ---
 
-![Hot Chocolate](/img/blog/hotchocolate-banner.svg)
+![Hot Chocolate](../images/blog/hotchocolate-banner.png)
 
 When you think about how we build our GraphQL schemas with _Hot Chocolate_ we always need to fall back to either the schema types or the GraphQL SDL in order to get the typings right.
 

website/src/blog/2019-12-26-hotchocolate-10.3.0.md

@@ -7,12 +7,10 @@ authorURL: https://github.com/michaelstaib
 authorImageURL: https://avatars1.githubusercontent.com/u/9714350?s=100&v=4
 ---
 
-![Hot Chocolate](/img/blog/hotchocolate-banner.svg)
+![Hot Chocolate](../images/blog/hotchocolate-banner.png)
 
 Today we are releasing _Hot Chocolate_ version 10.3.0. Although the version number sounds like a small change, it is quite a nice update with lots of new features making _Hot Chocolate_ the most versatile and feature rich GraphQL server on the .NET platform.
 
-<!--truncate-->
-
 We are now working for a long time on version 11. Work on that has begun long before version 10.0.0 was finished. As we progressed with version 11, we felt that we could push some nice productivity features down to the version 10 branch and make users of _Hot Chocolate_ much happier.
 
 This decision culminated in version 10.3.0 and it really feels like a major update with an array of new possibilities that will make you smile.

website/src/components/misc/global-style.tsx

@@ -1,13 +1,21 @@
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
-  body,
   html {
+    font-family: sans-serif;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
     width: 100vw;
     height: 100vh;
     font-size: 16px;
     overflow: auto;
     background-color: #ccc;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   * {

website/src/components/misc/link.tsx

@@ -2,14 +2,21 @@ import { GatsbyLinkProps, Link as GatsbyLink } from "gatsby";
 import React, { FunctionComponent } from "react";
 
 export const Link: FunctionComponent<GatsbyLinkProps<unknown>> = ({
+  activeClassName,
   children,
   className,
+  partiallyActive,
   to,
 }) => {
   const internal = /^\/(?!\/)/.test(to);
 
   return internal ? (
-    <GatsbyLink to={to} className={className}>
+    <GatsbyLink
+      to={to}
+      className={className}
+      activeClassName={activeClassName}
+      partiallyActive={partiallyActive}
+    >
       {children}
     </GatsbyLink>
   ) : (

website/src/components/structure/header.tsx

@@ -39,7 +39,12 @@ export const Header: FunctionComponent = () => {
         </LogoLink>
         <Navigation>
           {topnav!.map((item, index) => (
-            <NavLink key={`topnav-item-${index}`} to={item!.link!}>
+            <NavLink
+              key={`topnav-item-${index}`}
+              to={item!.link!}
+              activeClassName="active"
+              partiallyActive
+            >
               {item!.name}
             </NavLink>
           ))}
@@ -152,7 +157,8 @@ const NavLink = styled(Link)`
   text-transform: uppercase;
   transition: background-color 0.2s ease-in-out;
 
-  :hover {
+  &.active,
+  &:hover {
     background-color: #b7020a;
   }
 `;