chore: update major dependencies

package.json

@@ -69,7 +69,7 @@
     "gatsby-transformer-remark": "^6.12.3",
     "gatsby-transformer-sharp": "^5.12.3",
     "html-entities": "^2.3.2",
-    "i18next": "^22.5.0",
+    "i18next": "^23.7.7",
     "leaflet": "^1.9.4",
     "leaflet-gesture-handling": "^1.2.2",
     "modern-normalize": "^2.0.0",
@@ -80,53 +80,54 @@
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.44.2",
-    "react-i18next": "^12.3.1",
+    "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.2",
     "react-spring": "^9.7.3",
-    "react-use": "^17.4.0",
+    "react-use": "^17.4.1",
     "rehype-react": "^7.2.0",
     "sass": "^1.62.1",
     "schema-dts": "^1.1.2",
     "sharp": "^0.32.1",
     "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",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.10",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.38",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
     "@types/react-helmet": "^6.1.9",
     "@types/react-syntax-highlighter": "^15.5.10",
     "@types/showdown": "^2.0.6",
     "@types/styled-components": "^5.1.32",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "babel-loader": "^9.1.2",
     "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.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.0",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
     "serve": "^14.2.0",
     "ts-jest": "^29.1.0",
     "typescript": "^5.3.2"
@@ -138,6 +139,7 @@
     ]
   },
   "resolutions": {
-    "webpack": "^5"
+    "webpack": "^5",
+    "styled-components": "^6"
   }
 }

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>

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;

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>

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}
       />
     </>
   );

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))

src/components/content/heroes/aurora/weather-easter-egg/sun.tsx

@@ -118,22 +118,22 @@ export const Sun = () => {
       </AuroraSunDiv>
       <AuroraSunReflectionDiv timePercent={timePercent} />
       <Flare
-        stepSize={0}
-        flareType={FlareType.LIGHT}
+        $stepSize={0}
+        $flareType={FlareType.LIGHT}
         x={'70vw'}
         y={'300px'}
         size={100}
-        rotation={80}
-        animationOffset={14}
+        $rotation={80}
+        $animationOffset={14}
       />
       <Flare
-        stepSize={20}
-        flareType={FlareType.LIGHT}
+        $stepSize={20}
+        $flareType={FlareType.LIGHT}
         x={'50vw'}
         y={'50vw'}
         size={150}
-        rotation={30}
-        animationOffset={3}
+        $rotation={30}
+        $animationOffset={3}
       />
       <DefaultFlares />
     </>

src/components/content/heroes/blog-hero.tsx

@@ -61,13 +61,13 @@ export const BlogHero = ({
   const gatsbyImageData = getImage(image);
 
   return (
-    <HeroContainer naturalHeight={naturalHeight}>
+    <HeroContainer $naturalHeight={naturalHeight}>
       {gatsbyImageData && (
         <GatsbyImage style={coverContainerCss} alt="" image={gatsbyImageData} />
       )}
 
       {title && (
-        <TextContainer dimmed>
+        <TextContainer $dimmed>
           <HeroText hideMobileText={hideMobileText} title={title}>
             {children}
           </HeroText>

src/components/content/heroes/hero-text.tsx

@@ -14,7 +14,7 @@ export const HeroText = ({ title, children, hideMobileText }: HeroWithText) => {
   return (
     <HeroTextStyled>
       <Headline>{title}</Headline>
-      <Text hideMobileText={hideMobileText}>{children}</Text>
+      <Text $hideMobileText={hideMobileText}>{children}</Text>
     </HeroTextStyled>
   );
 };
@@ -39,15 +39,15 @@ const Headline = styled.h1`
   }
 `;
 
-const Text = styled.div<{ hideMobileText?: boolean }>`
+const Text = styled.div<{ $hideMobileText?: boolean }>`
   ${TextStyles.textR}
 
   ${up('md')} {
     ${TextStyles.textL}
   }
 
-  ${({ hideMobileText }) =>
-    hideMobileText &&
+  ${({ $hideMobileText }) =>
+    $hideMobileText &&
     css`
       ${down('md')} {
         display: none;

src/components/content/heroes/image-hero.tsx

@@ -34,7 +34,7 @@ export const ImageHero = ({
       )}
 
       {title && (
-        <TextContainer dimmed>
+        <TextContainer $dimmed>
           <HeroText hideMobileText={hideMobileText} title={title}>
             {children}
           </HeroText>