[Draft] Core Web Vitals case study

gatsby-config.js

@@ -24,7 +24,7 @@ module.exports = {
     logoUrl: `${siteUrl}/logo-black-raster.png`,
   },
   plugins: [
-    'gatsby-plugin-preact',
+    // 'gatsby-plugin-preact',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-styled-components',
     'gatsby-plugin-typescript',
@@ -34,7 +34,7 @@ module.exports = {
       resolve: `gatsby-plugin-page-creator`,
       options: {
         path: `${__dirname}/src/pages`,
-        ignore: ['**/styled.ts', '**/*.styled.ts'],
+        ignore: ['**/styled.ts', '**/*.styled.ts', 'talks/**/*.content.tsx'],
       },
     },
     {

src/components/Logo/index.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
+import Script from '../Script';
 import { LogoSvg } from './styled';
 
 interface LogoProps {
@@ -26,34 +26,27 @@ const Logo = ({
         color={logoKind === LogoKind.Black ? 'black' : 'white'}
       />
       {isPlayful && (
-        <Helmet>
-          <script>
-            {`
-              function initLogoAnimation() {
-                const playAnimation = () => document.querySelector('.js--site-logo').classList.add('js--site-logo_animation-enabled');
-                const stopAnimation = () => document.querySelector('.js--site-logo').classList.remove('js--site-logo_animation-enabled');
-                // This callback listens to all animationEnd events
-                // and removes the animation as soon as the last element’s animation completes
-                const stopAnimationIfAllDone = (event) => {
-                  const target = event.target;
+        <Script
+          // Use `type="module"` to defer script execution until the document is parsed
+          type="module"
+          innerHTMLCode={`
+            const playAnimation = () => document.querySelector('.js--site-logo').classList.add('js--site-logo_animation-enabled');
+            const stopAnimation = () => document.querySelector('.js--site-logo').classList.remove('js--site-logo_animation-enabled');
+            // This callback listens to all animationEnd events
+            // and removes the animation as soon as the last element’s animation completes
+            const stopAnimationIfAllDone = (event) => {
+              const target = event.target;
 
-                  if (target === target.parentNode.lastChild) {
-                    stopAnimation();
-                  }
-                }
-
-                document.querySelector('.js--site-logo').addEventListener('click', playAnimation);
-                document.querySelector('.js--site-logo').addEventListener('mouseenter', playAnimation);
-                document.querySelector('.js--site-logo').addEventListener('animationend', stopAnimationIfAllDone);
+              if (target === target.parentNode.lastChild) {
+                stopAnimation();
               }
+            }
 
-              if (document.readyState === 'loading')
-                document.addEventListener('DOMContentLoaded', initLogoAnimation)
-              else
-                initLogoAnimation()
-            `}
-          </script>
-        </Helmet>
+            document.querySelector('.js--site-logo').addEventListener('click', playAnimation);
+            document.querySelector('.js--site-logo').addEventListener('mouseenter', playAnimation);
+            document.querySelector('.js--site-logo').addEventListener('animationend', stopAnimationIfAllDone);
+          `}
+        />
       )}
     </div>
   );

src/components/Logo/styled.ts

@@ -8,7 +8,7 @@ const moveLetters = keyframes`
 
   50% {
     transform: translateY(-3px);
-  } 
+  }
 
   100% {
     transform: translateY(0);

src/components/talks/LiveDemo/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Container, Caption, CaptionHeader, Video } from './styled';
+
+interface LiveDemoProps {
+  slideId: string;
+  title: string;
+  videoSource: string;
+  videoType: 'video/mp4'; // Add new types if necessary
+  videoWidth: number;
+  videoHeight: number;
+  className?: string;
+}
+
+// TODO: #-link to the demo
+const LiveDemo = ({
+  slideId,
+  title,
+  className,
+  videoSource,
+  videoType,
+  videoWidth,
+  videoHeight,
+}: LiveDemoProps) => (
+  <Container className={className} id={slideId}>
+    <Caption>
+      <CaptionHeader>Live Demo:</CaptionHeader> {title}
+    </Caption>
+    <Video
+      controls
+      style={{
+        aspectRatio: `${videoWidth} / ${videoHeight}`,
+        maxWidth: videoWidth,
+      }}
+    >
+      <source src={videoSource} type={videoType} />
+    </Video>
+  </Container>
+);
+
+export default LiveDemo;

src/components/talks/LiveDemo/styled.ts

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import media from '../../../styles/media';
+import { colors, gridSize, sizes } from '../../../styles/variables';
+
+export const Container = styled.figure`
+  position: relative;
+  margin: 0;
+  padding: ${gridSize * 4}px 0 ${gridSize * 6}px;
+
+  color: white;
+
+  ${media.small`
+    padding: ${gridSize * 2}px 0 ${gridSize * 3}px;
+  `}
+
+  &::before {
+    content: '';
+
+    /* Positioning is based on https://css-tricks.com/full-width-containers-limited-width-parents/#no-calc-needed */
+    position: absolute;
+    top: 0;
+    left: 50%;
+    right: 50%;
+    bottom: 0;
+    z-index: -1;
+
+    margin-left: -50vw;
+    margin-right: -50vw;
+
+    background: #222;
+  }
+`;
+
+export const Caption = styled.figcaption`
+  font-size: 36px;
+  margin-bottom: ${gridSize * 2}px;
+
+  ${media.small`
+    font-size: 24px;
+    margin-bottom: ${gridSize * 1.5}px;
+  `}
+`;
+
+export const CaptionHeader = styled.span`
+  font-weight: 900;
+  background: ${colors.brightYellow};
+  color: black;
+  padding: 0 ${gridSize}px;
+  margin-left: -${gridSize}px;
+`;
+
+export const Video = styled.video`
+  width: 100%;
+`;

src/components/talks/SectionHeader/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { JSXChildrenProp } from '../../../types';
+import { Container, Link } from './styled';
+
+const SectionHeader = ({
+  id,
+  className,
+  children,
+}: {
+  id: string;
+  className?: string;
+  children: JSXChildrenProp;
+}) => {
+  return (
+    <Container id={id} className={className}>
+      <Link href={`#${id}`}>{children}</Link>
+    </Container>
+  );
+};
+
+export default SectionHeader;

src/components/talks/SectionHeader/styled.ts

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import media from '../../../styles/media';
+
+export const Container = styled.h2``;
+
+export const Link = styled.a`
+  color: inherit;
+  border: none;
+  position: relative;
+
+  font-size: 60px;
+  font-weight: bold;
+  white-space: nowrap;
+  letter-spacing: -1px;
+
+  ${media.small`
+    font-size: 48px;
+    white-space: normal;
+    line-height: 1;
+  `};
+
+  &::before {
+    content: '#';
+
+    position: absolute;
+    left: -135px;
+
+    /* Increase the area to allow moving the mouse from the image to the element */
+    width: 180px;
+    text-align: center;
+
+    color: #ccc;
+
+    /* Hide & animate the element */
+    opacity: 0;
+    transform: scale(0.8);
+    pointer-events: none;
+    transition: all 0.15s ease-out;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    &::before {
+      opacity: 1;
+      transform: scale(1);
+      pointer-events: auto;
+      transition: none;
+    }
+  }
+`;

src/components/talks/Slide/styled.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import media from '../../../styles/media';
-import { sizes } from '../../../styles/variables';
+import { gridSize, sizes } from '../../../styles/variables';
 import GatsbyImage from '../../Image';
 
 export const Container = styled.figure`
@@ -58,7 +58,8 @@ export const ImageWrapper = styled.a`
     line-height: 120px;
 
     color: #ccc;
-    font-size: 48px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 60px;
     font-weight: bold;
 
     /* Hide & animate the element */
@@ -99,6 +100,13 @@ export const Text = styled.figcaption`
       font-size: 1.25em;
     `}
   `}
+
+  > pre > code {
+    display: block;
+    padding: ${gridSize / 2}px ${gridSize}px;
+    margin: 0 -${gridSize}px;
+    white-space: pre-wrap;
+  }
 `;
 
 export const SlideLink = styled.a`