enhance website

website/gatsby-config.js

@@ -49,20 +49,19 @@ module.exports = {
           {
             resolve: `gatsby-remark-autolink-headers`,
             options: {
-              icon: `<svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 512 512"
-                        width="16"
-                        height="16"
-                        fill="var(--heading-text-color)"
-                      >
-                        <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>`,
+              icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" fill="var(--heading-text-color)"><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>`,
             },
           },
           {
             resolve: require.resolve(`./plugins/gatsby-remark-gather-links`),
           },
+          {
+            resolve: "gatsby-remark-external-links",
+            options: {
+              target: "_blank",
+              rel: "noopener noreferrer",
+            },
+          },
         ],
       },
     },
@@ -101,15 +100,15 @@ module.exports = {
       options: {
         rule: {
           include: /images/,
-          exclude: /images\/(artwork|brands|companies|logo)/,
+          exclude: /images\/(artwork|brands|companies|logo)\/.*\.svg$/,
         },
       },
     },
     {
       resolve: require.resolve(`./plugins/gatsby-plugin-svg-sprite`),
       options: {
         rule: {
-          include: /images\/(artwork|brands|companies|logo)/,
+          test: /images\/(artwork|brands|companies|logo)\/.*\.svg$/,
         },
       },
     },

website/package.json

@@ -47,6 +47,7 @@
     "gatsby-plugin-tsconfig-paths": "^1.0.5",
     "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-remark-autolink-headers": "^4.3.0",
+    "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-images": "^5.3.0",
     "gatsby-remark-mermaid": "^2.1.0",
     "gatsby-remark-reading-time": "^1.1.0",

website/plugins/gatsby-plugin-svg-sprite/gatsby-node.js

@@ -1,42 +1,31 @@
 exports.onCreateWebpackConfig = (
-  { actions, loaders, getConfig },
+  { actions, getConfig, rules },
   options = {}
 ) => {
-  const prevConfig = getConfig();
+  const config = getConfig();
+  const imagesRule = rules.images();
+  const imagesRuleTest = String(imagesRule.test);
 
   const { rule, ...rest } = options;
 
-  actions.replaceWebpackConfig({
-    ...prevConfig,
-    module: {
-      ...prevConfig.module,
-      rules: [
-        ...prevConfig.module.rules.map((item) => {
-          const { test } = item;
-
-          if (
-            test &&
-            test.toString() === "/\\.(ico|svg|jpg|jpeg|png|gif|webp)(\\?.*)?$/"
-          ) {
-            return {
-              ...item,
-              test: /\.(ico|jpg|jpeg|png|gif|webp)(\?.*)?$/,
-            };
-          }
-
-          return { ...item };
-        }),
+  config.module.rules = [
+    ...config.module.rules.filter(
+      (item) => String(item.test) !== imagesRuleTest
+    ),
+    {
+      ...rule,
+      use: [
         {
-          test: /\.svg$/,
-          ...rule,
-          use: [
-            {
-              loader: require.resolve("svg-sprite-loader"),
-              options: rest,
-            },
-          ],
+          loader: require.resolve("svg-sprite-loader"),
+          options: rest,
         },
       ],
     },
-  });
+    {
+      ...imagesRule,
+      test: new RegExp(imagesRuleTest.replace("svg|", "").slice(1, -1)),
+    },
+  ];
+
+  actions.replaceWebpackConfig(config);
 };

website/plugins/gatsby-plugin-svg-sprite/gatsby-ssr.js

@@ -0,0 +1,16 @@
+const React = require("react");
+
+const AttachPoint = [
+  <svg
+    key="sprite"
+    id="__SVG_SPRITE_NODE__"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    style={{ display: "none" }}
+    aria-hidden="true"
+  />,
+];
+
+exports.onRenderBody = ({ setPostBodyComponents }) => {
+  setPostBodyComponents(AttachPoint);
+};

website/plugins/gatsby-plugin-svg-sprite/index.js

@@ -0,0 +1 @@
+// noop

website/plugins/gatsby-plugin-svg-sprite/package.json

@@ -1,4 +1,4 @@
 {
   "name": "gatsby-plugin-svg-sprite",
-  "main": "gatsby-node.js"
+  "main": "index.js"
 }

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

@@ -73,13 +73,8 @@ export const DocPage: FC<DocPageProps> = ({ data, originPath }) => {
   }, []);
 
   useEffect(() => {
-    const classes = responsiveMenuRef.current?.className ?? "";
-
     const subscription = hasScrolled$.subscribe((hasScrolled) => {
-      if (responsiveMenuRef.current) {
-        responsiveMenuRef.current.className =
-          classes + (hasScrolled ? " scrolled" : "");
-      }
+      responsiveMenuRef.current?.classList.toggle("scrolled", hasScrolled);
     });
 
     return () => {

website/src/components/layout/header.tsx

@@ -133,13 +133,8 @@ export const Header: FC = () => {
   }, [setSearchOpen]);
 
   useEffect(() => {
-    const classes = containerRef.current?.className ?? "";
-
     const subscription = showShadow$.subscribe((showShadow) => {
-      if (containerRef.current) {
-        containerRef.current.className =
-          classes + (showShadow ? " shadow" : "");
-      }
+      containerRef.current?.classList.toggle("shadow", showShadow);
     });
 
     return () => {
@@ -240,7 +235,7 @@ const LogoLink = styled(Link)`
   flex: 0 0 auto;
   flex-direction: row;
   align-items: center;
-  padding: 0 20px;
+  padding-left: 20px;
   height: 60px;
 `;
 
@@ -971,7 +966,6 @@ const Group = styled.div`
   flex: 1 1 auto;
   flex-direction: row;
   justify-content: flex-end;
-  padding: 0 20px;
   height: 60px;
 
   @media only screen and (min-width: 284px) {
@@ -980,6 +974,7 @@ const Group = styled.div`
 
   @media only screen and (min-width: 992px) {
     flex: 0 0 auto;
+    padding-right: 20px;
   }
 `;
 

website/src/components/layout/main.tsx

@@ -29,7 +29,8 @@ export const Main: FC<PropsWithChildren<unknown>> = ({ children }) => {
       );
     };
 
-    ref.current?.addEventListener("scroll", handleScroll);
+    ref.current?.addEventListener("scroll", handleScroll, { passive: true });
+
     return () => {
       ref.current?.removeEventListener("scroll", handleScroll);
     };

website/src/components/misc/link.tsx

@@ -2,24 +2,14 @@ import { GatsbyLinkProps, Link as GatsbyLink } from "gatsby";
 import { OutboundLink } from "gatsby-plugin-google-analytics";
 import React, { FC } from "react";
 
-export const Link: FC<GatsbyLinkProps<unknown> & { prefetch?: false }> = ({
-  activeClassName,
-  partiallyActive,
-  to,
-  ref,
-  prefetch = true,
-  ...rest
-}) => {
+export const Link: FC<
+  Pick<GatsbyLinkProps<unknown>, "to" | "onClick"> & { prefetch?: false }
+> = ({ to, prefetch = true, ...rest }) => {
   const internal = /^\/(?!\/)/.test(to);
 
   return internal ? (
     prefetch ? (
-      <GatsbyLink
-        to={to}
-        activeClassName={activeClassName}
-        partiallyActive={partiallyActive}
-        {...rest}
-      />
+      <GatsbyLink to={to} {...rest} />
     ) : (
       <a href={to} {...rest} />
     )

website/src/components/misc/marketing-elements.tsx

@@ -88,7 +88,7 @@ export const ContentContainer = styled.div<{ noImage?: boolean }>`
   }
 `;
 
-export const SectionTitle = styled.h1<{ centerAlways?: boolean }>`
+export const SectionTitle = styled.h2<{ centerAlways?: boolean }>`
   flex: 0 0 auto;
   font-size: 1.75em;
   color: ${THEME_COLORS.text};

website/src/components/misc/page-top.tsx

@@ -18,12 +18,8 @@ export const PageTop: FC<PageTopProps> = ({ onTopScroll }) => {
   });
 
   useEffect(() => {
-    const classes = ref.current?.className ?? "";
-
     const subscription = showButton$.subscribe((showButton) => {
-      if (ref.current) {
-        ref.current.className = classes + (showButton ? " show" : "");
-      }
+      ref.current?.classList.toggle("show", showButton);
     });
 
     return () => {
@@ -44,7 +40,6 @@ const JumpToTop = styled.button`
   right: 24px;
   bottom: 24px;
   z-index: 29;
-  display: none;
   border-radius: 50%;
   padding: 8px;
   width: 50px;

website/src/components/sprites/index.tsx

@@ -1,17 +1,20 @@
 import React, { FC, SVGProps } from "react";
 
-const Sprite: FC<SVGProps<SVGElement>> = ({ viewBox, id, className }) => (
+type SpriteProps = Required<Pick<SVGProps<SVGElement>, "id" | "viewBox">> &
+  Pick<SVGProps<SVGElement>, "className">;
+
+const Sprite: FC<SpriteProps> = ({ id, viewBox, className }) => (
   <svg viewBox={viewBox} className={className}>
-    <use xlinkHref={`#${id}`} />
+    <use href={`#${id}`} />
   </svg>
 );
 
 export const Artwork = Sprite;
 export const Brand = Sprite;
 export const Company = Sprite;
 
-export const Logo: FC<SVGProps<SVGElement>> = ({ viewBox, id, className }) => (
+export const Logo: FC<SpriteProps> = ({ id, viewBox, className }) => (
   <svg id="logo" viewBox={viewBox} className={className}>
-    <use xlinkHref={`#${id}`} />
+    <use href={`#${id}`} />
   </svg>
 );

website/src/components/widgets/companies-section.tsx

@@ -48,7 +48,7 @@ export const CompaniesSection: FC = () => (
   <Section>
     <SectionRow>
       <ContentContainer noImage>
-        <SectionTitle centerAlways>Companies who trust us</SectionTitle>
+        <SectionTitle centerAlways>Companies Who Trust Us</SectionTitle>
         <Logos>
           <Logo width={140}>
             <Link to="https://additiv.com">

website/src/components/widgets/most-recent-bcp-blog-posts-section.tsx

@@ -54,7 +54,7 @@ export const MostRecentBcpBlogPostsSection: FC = () => {
     <Section>
       <SectionRow>
         <ContentContainer noImage>
-          <SectionTitle centerAlways>From our Blog</SectionTitle>
+          <SectionTitle centerAlways>From Our Blog</SectionTitle>
           <Articles>
             {data.allMdx.edges.map(({ node }) => {
               const featuredImage =

website/src/components/widgets/most-recent-blog-posts-section.tsx

@@ -49,7 +49,7 @@ export const MostRecentBlogPostsSection: FC = () => {
     <Section>
       <SectionRow>
         <ContentContainer noImage>
-          <SectionTitle centerAlways>From our Blog</SectionTitle>
+          <SectionTitle centerAlways>From Our Blog</SectionTitle>
           <Articles>
             {data.allMdx.edges.map(({ node }) => {
               const featuredImage =

website/src/custom.d.ts

@@ -3,7 +3,7 @@ declare module "*.svg" {
   export default content;
 }
 
-type Sprite = Record<string, unknown> & Record<"id", string>;
+type Sprite = Record<"id" | "viewBox", string>;
 
 declare module "@/images/artwork/*.svg" {
   const content: Sprite;

website/src/pages/index.tsx

@@ -88,7 +88,7 @@ const IndexPage: FC = () => {
             <Link to="/blog/2020/03/18/entity-framework">
               <BlogPostEFMeetsGraphQL />
               <SlideContent>
-                <SlideTitle>Entity Framework meets GraphQL</SlideTitle>
+                <SlideTitle>Entity Framework Meets GraphQL</SlideTitle>
                 <SlideDescription>
                   Get started with Hot Chocolate and Entity Framework
                 </SlideDescription>
@@ -104,7 +104,7 @@ const IndexPage: FC = () => {
           </ImageContainer>
           <ContentContainer>
             <SectionTitle>
-              What is the ChilliCream GraphQL platform?
+              What Is the ChilliCream GraphQL Platform?
             </SectionTitle>
             <p>
               It's a new way of defining modern APIs which are strongly typed
@@ -143,7 +143,7 @@ const IndexPage: FC = () => {
             <Artwork {...ContactUsSvg} />
           </ImageContainer>
           <ContentContainer>
-            <SectionTitle>What's your story?</SectionTitle>
+            <SectionTitle>What’s Your Story?</SectionTitle>
             <p>
               {
                 "We would be thrilled to hear your customer success story with Hot Chocolate! Write us an "

website/src/pages/products/bananacakepop.tsx

@@ -56,7 +56,9 @@ const BananaCakePopPage: FC = () => {
           <ProductDetails>
             <ProductDetailsHeader>
               <ProductName>Banana Cake Pop</ProductName>
-              <ProductDescription>\\ GraphQL IDE for Devs</ProductDescription>
+              <ProductDescription>
+                /* GraphQL IDE for Devs */
+              </ProductDescription>
             </ProductDetailsHeader>
             <ProductDownload appInfos={appInfos} />
             <ProductDetailsFooter></ProductDetailsFooter>
@@ -386,9 +388,9 @@ const ProductDetailsHeader = styled.div`
 
 export const ProductName = styled.h1`
   flex: 0 0 auto;
-  margin-bottom: 0;
   font-weight: normal;
   font-size: 2.222em;
+  text-align: center;
   color: ${THEME_COLORS.textContrast};
 
   ${IsMobile(css`
@@ -398,13 +400,13 @@ export const ProductName = styled.h1`
 
 export const ProductDescription = styled.h2`
   flex: 0 0 auto;
-  margin-bottom: 0;
   font-weight: normal;
-  font-size: 1.625em;
+  font-size: 1.25em;
+  text-align: center;
   color: ${THEME_COLORS.quaternary};
 
   ${IsMobile(css`
-    font-size: 1.125em;
+    font-size: 1em;
   `)}
 `;