Merge branch 'release/1.1.0'

Author: Spring3

README.md

@@ -22,7 +22,7 @@ Production:
 - [Gatsby](https://github.com/gatsbyjs/gatsby)
 - [React](https://github.com/facebook/react)
 - [React-spring](https://github.com/pmndrs/react-spring) for animations
-- [Styled Components](https://www.styled-components.com/)
+- [Emotion](https://emotion.sh/)
 
 ### Data
 

gatsby-config.js

@@ -10,6 +10,7 @@ module.exports = {
     description: "Danv's personal website",
   },
   plugins: [
+    'gatsby-plugin-emotion',
     'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-plugin-manifest',
@@ -79,7 +80,6 @@ module.exports = {
     'gatsby-plugin-sharp',
     'gatsby-plugin-catch-links',
     'gatsby-plugin-offline',
-    'gatsby-plugin-styled-components',
     'gatsby-plugin-gatsby-cloud',
   ],
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "website",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Danv's personal website",
   "scripts": {
     "build": "gatsby build",
@@ -13,16 +13,19 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/css": "^11.1.3",
+    "@emotion/react": "^11.1.5",
+    "emotion-theming": "^11.0.0",
     "gatsby": "^3.2.1",
     "gatsby-plugin-catch-links": "^3.2.0",
+    "gatsby-plugin-emotion": "^6.2.0",
     "gatsby-plugin-gdpr-cookies": "^1.0.14",
     "gatsby-plugin-manifest": "^3.2.0",
     "gatsby-plugin-nprogress": "^3.2.0",
     "gatsby-plugin-offline": "^4.2.0",
     "gatsby-plugin-react-helmet": "^4.2.0",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^3.2.0",
-    "gatsby-plugin-styled-components": "^4.2.0",
     "gatsby-remark-copy-linked-files": "^3.2.0",
     "gatsby-remark-images": "^4.2.0",
     "gatsby-source-filesystem": "^3.2.0",
@@ -39,11 +42,9 @@
     "react-responsive-carousel": "^3.2.18",
     "react-spring": "^9.0.0-rc.3",
     "react-use": "^17.2.1",
-    "react-use-gesture": "^9.1.3",
-    "styled-components": "^5.2.3"
+    "react-use-gesture": "^9.1.3"
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "1.12.0",
     "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",

package.json

@@ -1,45 +1,45 @@
 import React, { memo, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import { createGlobalStyle } from 'styled-components';
+import { Global, css } from '@emotion/react';
 import { Globals } from 'react-spring';
 import { CookieBanner } from './common/cookie/CookieBanner';
 import 'normalize.css';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 
-const GlobalStylesComponent = createGlobalStyle`
-:root {
-  --text-color-primary: #282C36;
-  --text-color-secondary: #767B91;
-  --background-color: white;
-  --background-color-dark: #f5f5f5;
-  --shadow-color: #E0E0E0;
-  --marker-green: #A9E5BB;
-  --marker-yellow: #FCF6B1;
-  --marker-red: #F78888;
-  --marker-blue: #BCE5FF;
-  --marker-purple: #C3A9FF;
-  --border-radius: 3px;
-  --page-size: 45em;
-  --color-red: #EF3934;
-  --color-green: #44C95C;
-  --color-yellow: #FFB402;
-  --color-blue: #2F86EB;
-
-}
+const globalStyles = css`
+  :root {
+    --text-color-primary: #282c36;
+    --text-color-secondary: #434750;
+    --background-color: white;
+    --background-color-dark: #f5f5f5;
+    --shadow-color: #e0e0e0;
+    --marker-green: #a9e5bb;
+    --marker-yellow: #fcf6b1;
+    --marker-red: #f78888;
+    --marker-blue: #bce5ff;
+    --marker-purple: #c3a9ff;
+    --border-radius: 3px;
+    --page-size: 45em;
+    --color-red: #ef3934;
+    --color-green: #44c95c;
+    --color-yellow: #ffb402;
+    --color-blue: #2f86eb;
+  }
 
-body {
-  font-size: 16px;
-  background-color: var(--background-color);
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  color: var(--text-color-primary);
-}
+  body {
+    font-size: 16px;
+    background-color: var(--background-color);
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+      Roboto, Ubuntu, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    color: var(--text-color-primary);
+  }
 
-main {
-  padding: 0;
-  position: relative;
-}
+  main {
+    padding: 0;
+    position: relative;
+  }
 `;
 
 const GlobalStyles = () => {
@@ -51,7 +51,7 @@ const GlobalStyles = () => {
     });
   }, [prefersReducedMotion]);
 
-  return <GlobalStylesComponent />;
+  return <Global styles={globalStyles} />;
 };
 
 const OGP = memo(({ title, description, image = '/icon_ogp.png' }) => {