enhance seo (#5618)

website/gatsby-config.js

@@ -100,6 +100,15 @@ module.exports = {
       options: {
         rule: {
           include: /images/,
+          exclude: /images\/(artwork|companies|logo)/,
+        },
+      },
+    },
+    {
+      resolve: require.resolve(`./plugins/gatsby-plugin-svg-sprite`),
+      options: {
+        rule: {
+          include: /images\/(artwork|companies|logo)/,
         },
       },
     },

website/package.json

@@ -69,6 +69,7 @@
     "semver": "^7.3.8",
     "simple-git": "^2.39.0",
     "styled-components": "^5.3.0",
+    "svg-sprite-loader": "^6.0.11",
     "yaml": "^2.1.3"
   },
   "devDependencies": {

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

@@ -0,0 +1,42 @@
+exports.onCreateWebpackConfig = (
+  { actions, loaders, getConfig },
+  options = {}
+) => {
+  const prevConfig = getConfig();
+
+  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 };
+        }),
+        {
+          test: /\.svg$/,
+          ...rule,
+          use: [
+            {
+              loader: require.resolve("svg-sprite-loader"),
+              options: rest,
+            },
+          ],
+        },
+      ],
+    },
+  });
+};

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

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

website/src/components/articles/article-comments.tsx

@@ -2,7 +2,8 @@ import { graphql } from "gatsby";
 import { Disqus } from "gatsby-plugin-disqus";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { ArticleCommentsFragment } from "../../../graphql-types";
+
+import { ArticleCommentsFragment } from "@/graphql-types";
 
 export interface ArticleCommentsProps {
   readonly data: ArticleCommentsFragment;

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

@@ -1,5 +1,6 @@
 import styled from "styled-components";
-import { IsSmallDesktop } from "../../shared-style";
+
+import { IsSmallDesktop } from "@/shared-style";
 
 export interface ArticleHeaderProps {
   readonly kind: "blog" | "doc";

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

@@ -5,11 +5,12 @@ import { useDispatch } from "react-redux";
 import { asyncScheduler } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 import styled, { css } from "styled-components";
-import { ArticleSectionsFragment } from "../../../graphql-types";
-import { THEME_COLORS } from "../../shared-style";
-import { useObservable } from "../../state";
-import { closeAside } from "../../state/common";
-import { MostProminentSection } from "../doc-page/doc-page-elements";
+
+import { MostProminentSection } from "@/components/doc-page/doc-page-elements";
+import { ArticleSectionsFragment } from "@/graphql-types";
+import { THEME_COLORS } from "@/shared-style";
+import { useObservable } from "@/state";
+import { closeAside } from "@/state/common";
 
 const MAX_TOC_DEPTH = 2;
 

website/src/components/articles/article.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 
 export const Article = styled.article`

website/src/components/blog-article/blog-article-metadata.tsx

@@ -1,9 +1,10 @@
 import { graphql } from "gatsby";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { BlogArticleMetadataFragment } from "../../../graphql-types";
-import { THEME_COLORS } from "../../shared-style";
-import { Link } from "../misc/link";
+
+import { Link } from "@/components/misc/link";
+import { BlogArticleMetadataFragment } from "@/graphql-types";
+import { THEME_COLORS } from "@/shared-style";
 
 export interface BlogArticleMetadataProps {
   readonly data: BlogArticleMetadataFragment;

website/src/components/blog-article/blog-article-sharebar.tsx

@@ -2,9 +2,12 @@ import { graphql } from "gatsby";
 import React, { FC } from "react";
 import { LinkedinShareButton, TwitterShareButton } from "react-share";
 import styled from "styled-components";
-import { BlogArticleSharebarFragment } from "../../../graphql-types";
-import LinkedinIconSvg from "../../images/linkedin-square.svg";
-import TwitterIconSvg from "../../images/twitter-square.svg";
+
+import { BlogArticleSharebarFragment } from "@/graphql-types";
+
+// Icons
+import LinkedinIconSvg from "@/images/linkedin-square.svg";
+import TwitterIconSvg from "@/images/twitter-square.svg";
 
 export interface BlogArticleSharebarProps {
   readonly data: BlogArticleSharebarFragment;

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

@@ -1,8 +1,9 @@
 import { graphql } from "gatsby";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { THEME_COLORS } from "../../shared-style";
-import { Link } from "../misc/link";
+
+import { Link } from "@/components/misc/link";
+import { THEME_COLORS } from "@/shared-style";
 
 export interface BlogArticleTagsProps {
   readonly tags: string[];

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

@@ -3,14 +3,15 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import { MDXRenderer } from "gatsby-plugin-mdx";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { BlogArticleFragment } from "../../../graphql-types";
-import { Article } from "../articles/article";
-import { ArticleComments } from "../articles/article-comments";
+
+import { Article } from "@/components/articles/article";
+import { ArticleComments } from "@/components/articles/article-comments";
 import {
   ArticleContent,
   ArticleHeader,
   ArticleTitle,
-} from "../articles/article-elements";
+} from "@/components/articles/article-elements";
+import { BlogArticleFragment } from "@/graphql-types";
 import { BlogArticleMetadata } from "./blog-article-metadata";
 import { BlogArticleSharebar } from "./blog-article-sharebar";
 import { BlogArticleTags } from "./blog-article-tags";

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

@@ -1,10 +1,13 @@
 import React, { createRef, FC, PropsWithChildren, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
-import { DocPageDesktopGridColumns, IsSmallDesktop } from "../../shared-style";
-import { setArticleHeight } from "../../state/common";
 
-export const ArticleWrapper: FC<PropsWithChildren> = ({ children }) => {
+import { DocPageDesktopGridColumns, IsSmallDesktop } from "@/shared-style";
+import { setArticleHeight } from "@/state/common";
+
+export const ArticleWrapper: FC<PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const ref = createRef<HTMLDivElement>();
   const dispatch = useDispatch();
 

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

@@ -1,13 +1,14 @@
 import React, { FC, PropsWithChildren, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-import { BoxShadow, IsSmallDesktop } from "../../shared-style";
-import { State } from "../../state";
-import { toggleAside } from "../../state/common";
+
+import { BoxShadow, IsSmallDesktop } from "@/shared-style";
+import { State } from "@/state";
+import { toggleAside } from "@/state/common";
 import { BodyStyle, DocPageStickySideBarStyle } from "./doc-page-elements";
 import { DocPagePaneHeader } from "./doc-page-pane-header";
 
-export const DocPageAside: FC<PropsWithChildren> = ({ children }) => {
+export const DocPageAside: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const showAside = useSelector<State, boolean>(
     (state) => state.common.showAside
   );

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

@@ -1,12 +1,15 @@
 import { graphql } from "gatsby";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { DocPageCommunityFragment } from "../../../graphql-types";
-import GitHubIconSvg from "../../images/github.svg";
-import SlackIconSvg from "../../images/slack.svg";
-import { THEME_COLORS } from "../../shared-style";
-import { IconContainer } from "../misc/icon-container";
-import { Link } from "../misc/link";
+
+import { IconContainer } from "@/components/misc/icon-container";
+import { Link } from "@/components/misc/link";
+import { DocPageCommunityFragment } from "@/graphql-types";
+import { THEME_COLORS } from "@/shared-style";
+
+// Icons
+import GitHubIconSvg from "@/images/github.svg";
+import SlackIconSvg from "@/images/slack.svg";
 
 export interface DocPageCommunityProps {
   readonly data: DocPageCommunityFragment;

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

@@ -1,5 +1,6 @@
 import styled, { createGlobalStyle } from "styled-components";
-import { IsMobile, IsTablet } from "../../shared-style";
+
+import { IsMobile, IsTablet } from "@/shared-style";
 
 export const MostProminentSection = styled.div``;
 

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

@@ -2,10 +2,13 @@ import React, { FC, useEffect } from "react";
 import { useCookies } from "react-cookie";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-import TimesIconSvg from "../../images/times.svg";
-import { State } from "../../state";
-import { hideLegacyDocHeader, showLegacyDocInfo } from "../../state/common";
-import { Link } from "../misc/link";
+
+import { Link } from "@/components/misc/link";
+import { State } from "@/state";
+import { hideLegacyDocHeader, showLegacyDocInfo } from "@/state/common";
+
+// Icons
+import TimesIconSvg from "@/images/times.svg";
 
 export const DocPageLegacy: FC = () => {
   const show = useSelector<State, boolean>(

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

@@ -9,15 +9,19 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled, { css } from "styled-components";
-import { DocPageNavigationFragment } from "../../../graphql-types";
-import ArrowDownIconSvg from "../../images/arrow-down.svg";
-import ArrowUpIconSvg from "../../images/arrow-up.svg";
-import ProductSwitcherIconSvg from "../../images/th-large.svg";
-import { BoxShadow, IsTablet, THEME_COLORS } from "../../shared-style";
-import { State } from "../../state";
-import { closeTOC } from "../../state/common";
-import { IconContainer } from "../misc/icon-container";
-import { Link } from "../misc/link";
+
+import { IconContainer } from "@/components/misc/icon-container";
+import { Link } from "@/components/misc/link";
+import { DocPageNavigationFragment } from "@/graphql-types";
+import { BoxShadow, IsTablet, THEME_COLORS } from "@/shared-style";
+import { State } from "@/state";
+import { closeTOC } from "@/state/common";
+
+// Icons
+import ArrowDownIconSvg from "@/images/arrow-down.svg";
+import ArrowUpIconSvg from "@/images/arrow-up.svg";
+import ProductSwitcherIconSvg from "@/images/th-large.svg";
+
 import {
   DocPageStickySideBarStyle,
   MostProminentSection,

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

@@ -1,6 +1,8 @@
 import React, { FC } from "react";
 import styled from "styled-components";
-import TimesIconSvg from "../../images/times.svg";
+
+// Icons
+import TimesIconSvg from "@/images/times.svg";
 
 export interface DocPagePaneHeaderProps {
   readonly showWhenScreenWidthIsSmallerThan: number;

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

@@ -5,29 +5,33 @@ import { useDispatch } from "react-redux";
 import semverCoerce from "semver/functions/coerce";
 import semverCompare from "semver/functions/compare";
 import styled, { css } from "styled-components";
-import { DocPageFragment, DocsJson, Maybe } from "../../../graphql-types";
-import ListAltIconSvg from "../../images/list-alt.svg";
-import NewspaperIconSvg from "../../images/newspaper.svg";
+
+import { Article } from "@/components/articles/article";
+import { ArticleComments } from "@/components/articles/article-comments";
+import { ArticleContentFooter } from "@/components/articles/article-content-footer";
+import {
+  ArticleContent,
+  ArticleHeader,
+  ArticleTitle,
+} from "@/components/articles/article-elements";
+import { ArticleSections } from "@/components/articles/article-sections";
+import { TabGroupProvider } from "@/components/mdx/tabs";
+import { DocPageFragment, DocsJson, Maybe } from "@/graphql-types";
 import {
   DocPageDesktopGridColumns,
   IsDesktop,
   IsPhablet,
   IsSmallDesktop,
   IsTablet,
   THEME_COLORS,
-} from "../../shared-style";
-import { useObservable } from "../../state";
-import { toggleAside, toggleTOC } from "../../state/common";
-import { Article } from "../articles/article";
-import { ArticleComments } from "../articles/article-comments";
-import { ArticleContentFooter } from "../articles/article-content-footer";
-import {
-  ArticleContent,
-  ArticleHeader,
-  ArticleTitle,
-} from "../articles/article-elements";
-import { ArticleSections } from "../articles/article-sections";
-import { TabGroupProvider } from "../mdx/tabs";
+} from "@/shared-style";
+import { useObservable } from "@/state";
+import { toggleAside, toggleTOC } from "@/state/common";
+
+// Icons
+import ListAltIconSvg from "@/images/list-alt.svg";
+import NewspaperIconSvg from "@/images/newspaper.svg";
+
 import {
   ArticleWrapper,
   ArticleWrapperElement,

website/src/components/images/banana-cake-pop.tsx

@@ -2,7 +2,8 @@ import { graphql, useStaticQuery } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { GetBananaCakePopImageQuery } from "../../../graphql-types";
+
+import { GetBananaCakePopImageQuery } from "@/graphql-types";
 
 export interface BananaCakePopProps {
   readonly shadow?: boolean;

website/src/components/images/blog-post-banana-cake-pop-cloud.tsx

@@ -2,7 +2,8 @@ import { graphql, useStaticQuery } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { GetBlogPostBananaCakePopCloudImageQuery } from "../../../graphql-types";
+
+import { GetBlogPostBananaCakePopCloudImageQuery } from "@/graphql-types";
 
 export const BlogPostBananaCakePopCloud: FC = () => {
   const data = useStaticQuery<GetBlogPostBananaCakePopCloudImageQuery>(graphql`

website/src/components/images/blog-post-ef-meets-graphql.tsx

@@ -2,7 +2,8 @@ import { graphql, useStaticQuery } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { GetBlogPostEfMeetsGraphQlImageQuery } from "../../../graphql-types";
+
+import { GetBlogPostEfMeetsGraphQlImageQuery } from "@/graphql-types";
 
 export const BlogPostEFMeetsGraphQL: FC = () => {
   const data = useStaticQuery<GetBlogPostEfMeetsGraphQlImageQuery>(graphql`

website/src/components/images/blog-post-hot-chocolate-12.tsx

@@ -2,7 +2,8 @@ import { graphql, useStaticQuery } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import React, { FC } from "react";
 import styled from "styled-components";
-import { GetBlogPostChilliCreamPlatformImageQuery } from "../../../graphql-types";
+
+import { GetBlogPostChilliCreamPlatformImageQuery } from "@/graphql-types";
 
 export const BlogPostHotChocolate12: FC = () => {
   const data = useStaticQuery<GetBlogPostChilliCreamPlatformImageQuery>(graphql`

website/src/components/images/hot-chocolate.tsx

@@ -1,7 +1,8 @@
 import { graphql, useStaticQuery } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
 import React, { FC } from "react";
-import { GetHotChocolateImageQuery } from "../../../graphql-types";
+
+import { GetHotChocolateImageQuery } from "@/graphql-types";
 
 export const HotChocolate: FC = () => {
   const data = useStaticQuery<GetHotChocolateImageQuery>(graphql`