Merge branch 'main' into feat/add-day-night-circle

satellytes · Jan 16, 2024 · 41049c9 · 41049c9
2 parents 125cb47 + 7d27a00
commit 41049c9
Show file tree

Hide file tree

Showing 61 changed files with 1,344 additions and 971 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -13,8 +13,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'yarn'

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -14,8 +14,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'yarn'

diff --git a/.github/workflows/update-npm.yml b/.github/workflows/update-npm.yml
@@ -12,11 +12,11 @@ jobs:
   dependency-update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'yarn'

diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -44,7 +44,6 @@ const gatsbyConfig: GatsbyConfig = {
   },
   plugins: [
     `gatsby-plugin-sass`,
-    'gatsby-plugin-react-helmet',
     `gatsby-plugin-smoothscroll`,
     `gatsby-plugin-image`,
     `gatsby-plugin-catch-links` /* Please use gatsby-link for remark content */,

diff --git a/package.json b/package.json
@@ -41,15 +41,14 @@
     "canvas": "^2.11.2",
     "date-fns": "^2.30.0",
     "fast-xml-parser": "^4.2.2",
-    "gatsby": "^5.12.11",
+    "gatsby": "^5.12.12",
     "gatsby-background-image": "^1.6.0",
     "gatsby-plugin-canonical-urls": "^5.10.0",
     "gatsby-plugin-catch-links": "^5.10.0",
     "gatsby-plugin-feed": "^5.12.3",
     "gatsby-plugin-gatsby-cloud": "^5.12.2",
     "gatsby-plugin-image": "^3.12.3",
     "gatsby-plugin-manifest": "^5.12.3",
-    "gatsby-plugin-react-helmet": "^6.10.0",
     "gatsby-plugin-react-i18next": "^3.0.1",
     "gatsby-plugin-readingtime": "^3.0.1",
     "gatsby-plugin-robots-txt": "^1.8.0",
@@ -63,13 +62,13 @@
     "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-images": "^7.12.3",
     "gatsby-remark-prismjs": "^7.10.0",
-    "gatsby-source-contentful": "^8.12.4",
+    "gatsby-source-contentful": "^8.12.5",
     "gatsby-source-filesystem": "^5.12.1",
     "gatsby-transformer-json": "^5.10.0",
     "gatsby-transformer-remark": "^6.12.3",
     "gatsby-transformer-sharp": "^5.12.3",
     "html-entities": "^2.3.2",
-    "i18next": "^22.5.0",
+    "i18next": "^23.7.8",
     "leaflet": "^1.9.4",
     "leaflet-gesture-handling": "^1.2.2",
     "modern-normalize": "^2.0.0",
@@ -78,58 +77,57 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.44.2",
-    "react-i18next": "^12.3.1",
+    "react-hook-form": "^7.49.0",
+    "react-i18next": "^13.5.0",
     "react-leaflet": "^4.2.1",
     "react-medium-image-zoom": "^5.1.6",
-    "react-share": "^4.4.1",
+    "react-share": "^5.0.3",
     "react-spring": "^9.7.3",
-    "react-use": "^17.4.0",
+    "react-use": "^17.4.2",
     "rehype-react": "^7.2.0",
     "sass": "^1.62.1",
     "schema-dts": "^1.1.2",
-    "sharp": "^0.32.1",
+    "sharp": "^0.33.0",
     "showdown": "^2.1.0",
     "slugify": "^1.6.6",
     "striptags": "^3.2.0",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.1",
+    "stylis": "^4.0.0",
     "unified": "^10.1.1",
     "util": "^0.12.5",
     "webpack": "^5.84.1",
     "what-input": "^5.2.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@babel/core": "^7.23.5",
+    "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.10",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.38",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "@types/react-helmet": "^6.1.9",
-    "@types/react-syntax-highlighter": "^15.5.10",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@types/showdown": "^2.0.6",
-    "@types/styled-components": "^5.1.32",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "babel-loader": "^9.1.2",
-    "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jsdom": "^22.1.0",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
+    "jsdom": "^23.0.1",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.1",
     "serve": "^14.2.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,md}": [
@@ -138,6 +136,7 @@
     ]
   },
   "resolutions": {
-    "webpack": "^5"
+    "webpack": "^5",
+    "styled-components": "^6"
   }
 }
diff --git a/src/components/content/header-block/header-block.tsx b/src/components/content/header-block/header-block.tsx
@@ -19,7 +19,7 @@ interface HeaderBlockProps {
 }
 
 interface LargeProps {
-  large?: boolean;
+  $large?: boolean;
 }
 
 const BlockWrapper = styled.div`
@@ -66,14 +66,14 @@ const Metaline = styled.p<LargeProps>`
   ${TextStyles.textS}
   letter-spacing: -0.01em;
   color: rgba(0, 0, 0, 0.5);
-  margin-top: ${({ large }) => (large ? '32px' : '16px')};
+  margin-top: ${({ $large }) => ($large ? '32px' : '16px')};
 `;
 
 const HeaderBlockText = styled.p<LargeProps>`
-  ${({ large }) => (large ? TextStyles.textSR : TextStyles.textS)};
+  ${({ $large }) => ($large ? TextStyles.textSR : TextStyles.textS)};
 
   ${up('md')} {
-    ${({ large }) => (large ? TextStyles.textR : TextStyles.textSR)};
+    ${({ $large }) => ($large ? TextStyles.textR : TextStyles.textSR)};
   }
   margin: 16px 0 0;
   letter-spacing: -0.01em;
@@ -91,9 +91,9 @@ export const HeaderBlock = (props: HeaderBlockProps) => {
         <Topline>{props.topline}</Topline>
         <Headline>{props.headline}</Headline>
         {props.metaline && (
-          <Metaline large={props.large}>{props.metaline}</Metaline>
+          <Metaline $large={props.large}>{props.metaline}</Metaline>
         )}
-        <HeaderBlockText large={props.large}>{props.children}</HeaderBlockText>
+        <HeaderBlockText $large={props.large}>{props.children}</HeaderBlockText>
       </TextWrapper>
       {props.illustration && (
         <IconWrapper>

diff --git a/src/components/content/heroes/aurora/aurora-components.ts b/src/components/content/heroes/aurora/aurora-components.ts
@@ -4,7 +4,7 @@ const BACKGROUND_LAYER_Z = -2;
 const FOREGROUND_LAYER_Z = -1;
 
 interface AuroraBackgroundProps {
-  source: string;
+  $source: string;
   overwriteBackground?: string;
 }
 
@@ -22,7 +22,7 @@ export const AuroraBackground = styled.div<AuroraBackgroundProps>`
   ${(props) =>
     props.overwriteBackground === undefined
       ? css`
-          background-image: url(${props.source});
+          background-image: url(${props.$source});
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center -20vw;

diff --git a/src/components/content/heroes/aurora/aurora.tsx b/src/components/content/heroes/aurora/aurora.tsx
@@ -34,7 +34,7 @@ export const Aurora = ({ type, className }: AuroraProps) => {
   return (
     <AuroraContainer className={className}>
       <AuroraBackground
-        source={getSource(type)}
+        $source={getSource(type)}
         overwriteBackground={weatherBackground}
       />
       <AuroraForeground>

diff --git a/src/components/content/heroes/aurora/default-flares.tsx b/src/components/content/heroes/aurora/default-flares.tsx
@@ -6,33 +6,33 @@ export const DefaultFlares = () => {
     <>
       <Flare
         opacity={0.5}
-        speedMultiplier={2}
-        stepSize={20}
-        flareType={FlareType.LIGHT}
+        $speedMultiplier={2}
+        $stepSize={20}
+        $flareType={FlareType.LIGHT}
         x={'20vw'}
         y={'90vh'}
         size={550}
-        rotation={0}
+        $rotation={0}
       />
       <Flare
         opacity={0.3}
-        stepSize={40}
-        flareType={FlareType.LIGHT}
+        $stepSize={40}
+        $flareType={FlareType.LIGHT}
         x={'80vw'}
         y={'20vw'}
         size={250}
-        rotation={70}
-        animationOffset={7}
+        $rotation={70}
+        $animationOffset={7}
       />
       <Flare
         opacity={0.6}
-        speedMultiplier={0.5}
-        stepSize={-80}
-        flareType={FlareType.LIGHT}
+        $speedMultiplier={0.5}
+        $stepSize={-80}
+        $flareType={FlareType.LIGHT}
         x={'20vw'}
         y={'0vh'}
         size={400}
-        rotation={180}
+        $rotation={180}
       />
     </>
   );
@@ -42,22 +42,22 @@ export const DefaultFlaresDark = () => {
   return (
     <>
       <Flare
-        stepSize={20}
-        flareType={FlareType.DARK}
+        $stepSize={20}
+        $flareType={FlareType.DARK}
         x={'50vw'}
         y={'50vw'}
         size={150}
-        rotation={30}
-        animationOffset={3}
+        $rotation={30}
+        $animationOffset={3}
       />
       <Flare
-        stepSize={0}
-        flareType={FlareType.DARK}
+        $stepSize={0}
+        $flareType={FlareType.DARK}
         x={'70vw'}
         y={'300px'}
         size={100}
-        rotation={80}
-        animationOffset={14}
+        $rotation={80}
+        $animationOffset={14}
       />
     </>
   );

diff --git a/src/components/content/heroes/aurora/flare.ts b/src/components/content/heroes/aurora/flare.ts
@@ -16,20 +16,20 @@ export interface FlareProps {
    * we can use an existing css property to scale that value into a size we can see
    * The bigger the value, the bigger the area being walked on.
    */
-  stepSize?: number;
+  $stepSize?: number;
   /**
    * The human eye spots similar animations really quickly
    * that's why we want to allow to rotate the entire animation with this value
    * This creates enough noise, so it looks like a distinct animation.
    */
-  rotation?: number;
+  $rotation?: number;
   /**
    * The actual animation has a fixed duration (currently 240s) to appear
    * very slowly. This multiplier allows to scale the value. A value of 2 means
    * half the time (120s) which makes the animation twice as fast. If you pass 0.5
    * the animation will run 480s (half the speed)
    */
-  speedMultiplier?: number;
+  $speedMultiplier?: number;
   /**
    * the actual center of the animation give by x & y
    * This again involves a custom CSS property which is made available
@@ -41,15 +41,15 @@ export interface FlareProps {
   /**
    * we have two types of flares. One is light and one is dark.
    */
-  flareType?: FlareType;
+  $flareType?: FlareType;
   /**
    * This is again to add more noise to the human eye
    * not to spot the fact that the actual animation is shared between all flares
    * The offset is given as a positive number and will be transformed
    * into a negative animation-delay (in seconds) which will cause the animation to start in-between.
    * The negative value is required to prevent any pause in the beginning.
    */
-  animationOffset?: number;
+  $animationOffset?: number;
   opacity?: number;
   background?: string;
   blur?: number;
@@ -74,9 +74,9 @@ function getFlareImage(type: FlareType) {
 }
 
 export const Flare = styled.div<FlareProps>`
-  --flare-step-size: ${(props) => props.stepSize ?? 20}px;
+  --flare-step-size: ${(props) => props.$stepSize ?? 20}px;
   --flare-size: ${(props) => props.size ?? 100}px;
-  --flare-rotate: ${(props) => props.rotation ?? 0}deg;
+  --flare-rotate: ${(props) => props.$rotation ?? 0}deg;
   --flare-x: ${(props) => props.x ?? 0};
   --flare-y: ${(props) => props.y ?? 0};
   --flare-opacity: ${(props) => props.opacity ?? 1};
@@ -96,12 +96,13 @@ export const Flare = styled.div<FlareProps>`
   ${(props) =>
     props.background
       ? `background: ${props.background}; border-radius: 1000px;`
-      : getFlareImage(props.flareType ?? FlareType.LIGHT)}
+      : getFlareImage(props.$flareType ?? FlareType.LIGHT)}
   filter: blur(${(props) => props.blur ?? 0}px);
   animation: ${WanderAnimation}
-    ${(props) => FLARE_ANIMATION_DURATION * (1 / (props.speedMultiplier ?? 1))}s
+    ${(props) =>
+      FLARE_ANIMATION_DURATION * (1 / (props.$speedMultiplier ?? 1))}s
     infinite linear;
-  animation-delay: ${(props) => -1 * (props.animationOffset ?? 0)}s;
+  animation-delay: ${(props) => -1 * (props.$animationOffset ?? 0)}s;
   ${(props) => (props.noAnimation ? 'animation: none;' : '')}
 
   transform: translate(var(--flare-x, 0), var(--flare-y, 0))