Add Introduction entry to table of contents (#223)

* Add Introduction entry to table of contents

* Update local visual-regression snapshots

* Update Playwright baseline screenshots (Linux)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: ajeetchaulagain

src/components/markdown-renderer/styles.tsx

@@ -1,7 +1,7 @@
 import { Paragraph } from 'components/paragraph/Paragraph';
 import styled, { DefaultTheme } from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
-import { mb, mt, ml, pb } from 'styled-components-spacing';
+import { mb, mt, ml, pb, my } from 'styled-components-spacing';
 import { Heading } from '../heading/Heading';
 import { Link } from '../link/Link';
 
@@ -51,8 +51,8 @@ export const OrderedList = styled.ol`
 
 // Fixes for gatsby span wrapper
 export const Span = styled.span`
-  &.gatsby-resp-image-wrapper {
-    margin: 0 !important;
+  & > .gatsby-resp-image-wrapper {
+    ${my(5)};
   }
 `;
 

src/components/table-of-contents/TableOfContents.tsx

@@ -26,7 +26,11 @@ const TocItems = ({
           onClick={(e) => {
             e.preventDefault();
             onClickItem?.();
-            document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+            if (id === 'introduction') {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            } else {
+              document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+            }
           }}
         >
           {text}

src/hooks/useTableOfContents.ts

@@ -9,15 +9,20 @@ const useTableOfContents = () => {
 
   useEffect(() => {
     const els = Array.from(
-      document.querySelectorAll<HTMLElement>('h2[id], h3[id]')
+      document.querySelectorAll<HTMLElement>('[id="introduction"], h2[id], h3[id]')
     );
 
     setHeadings(
-      els.map((el) => ({
-        id: el.id,
-        text: el.textContent ?? '',
-        level: el.tagName === 'H2' ? 2 : 3,
-      }))
+      els.map((el) => {
+        if (el.id === 'introduction') {
+          return { id: 'introduction', text: 'Introduction', level: 2 as const };
+        }
+        return {
+          id: el.id,
+          text: el.textContent ?? '',
+          level: el.tagName === 'H2' ? 2 : (3 as const),
+        };
+      })
     );
 
     const INITIAL_TOP = 320; // 20rem
@@ -31,7 +36,7 @@ const useTableOfContents = () => {
       // headings, making the captured `els` reference stale detached nodes
       // whose getBoundingClientRect() returns all zeros.
       const liveEls = Array.from(
-        document.querySelectorAll<HTMLElement>('h2[id], h3[id]')
+        document.querySelectorAll<HTMLElement>('[id="introduction"], h2[id], h3[id]')
       );
       let currentId = liveEls[0]?.id ?? '';
       for (const el of liveEls) {

src/posts/nestjs-aws-lambda-cdk-deployment.md

@@ -29,7 +29,7 @@ By the end of this guide, you’ll have:
 - Infrastructure defined as code: a Lambda function, HTTP API Gateway, provisioned with AWS CDK
 - A GitHub Actions workflow that builds and deploys your stack automatically on every push to `main`
 
-### ![Simple artchitecture diagram of NestJS deployment in AWS Lambda](../images/nestjs-aws-serverless/nestjs-serverless-lambda-simple-diagram.png)
+![Simple artchitecture diagram of NestJS deployment in AWS Lambda](../images/nestjs-aws-serverless/nestjs-serverless-lambda-simple-diagram.png)
 
 The complete source code is available on [GitHub](https://github.com/ajeetchaulagain/nestjs-serverless-aws-lambda-cdk).
 

src/templates/BlogPage/BlogPage.tsx

@@ -94,7 +94,7 @@ const BlogTemplate: React.FC<PageProps<DataProps, PageContextProps>> = (
       />
       <HeroBlank />
       <ContentRenderer>
-        <PostHeaderContainer>
+        <PostHeaderContainer id="introduction">
           <PostHeaderLeftColumn>
             <Heading size="xlarge">{title}</Heading>