feat: ukraine badge

Author: ntnyq

.github/workflows/gh-pages.yml

@@ -15,9 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - run: yarn install --frozen-lockfile --non-interactive
+      - run: yarn install
       - run: yarn build
 
       - uses: peaceiris/actions-gh-pages@v3

.vscode/settings.json

@@ -1,8 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.words": [
-    "Okawari",
+    "amap",
     "jinke",
+    "Okawari",
     "xstate"
   ]
-}
+}

gatsby-config.js

@@ -9,7 +9,9 @@ const resolve = (...args) => path.resolve(__dirname, ...args)
 
 module.exports = {
   flags: {
-    PRESERVE_WEBPACK_CACHE: true,
+    FAST_DEV: true,
+    PARALLEL_SOURCING: true,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
   },
 
   siteMetadata: {

package.json

@@ -48,44 +48,44 @@
     "root": true
   },
   "dependencies": {
-    "@loadable/component": "^5.15.0",
-    "gatsby": "^3.9.1",
-    "gatsby-image": "^3.9.0",
-    "gatsby-plugin-google-analytics": "^3.9.0",
-    "gatsby-plugin-graphql-codegen": "^3.0.0",
-    "gatsby-plugin-manifest": "^3.9.0",
-    "gatsby-plugin-offline": "^4.9.0",
-    "gatsby-plugin-react-helmet": "^4.9.0",
-    "gatsby-plugin-sharp": "^3.9.0",
-    "gatsby-plugin-styled-components": "^4.9.0",
-    "gatsby-plugin-typescript": "^3.9.0",
-    "gatsby-source-filesystem": "^3.9.0",
-    "gatsby-transformer-json": "^3.9.0",
-    "gatsby-transformer-sharp": "^3.9.0",
-    "prop-types": "^15.7.2",
+    "@loadable/component": "^5.15.2",
+    "gatsby": "^4.8.1",
+    "gatsby-image": "^3.11.0",
+    "gatsby-plugin-google-analytics": "^4.8.0",
+    "gatsby-plugin-graphql-codegen": "^3.1.1",
+    "gatsby-plugin-manifest": "^4.8.1",
+    "gatsby-plugin-offline": "^5.8.1",
+    "gatsby-plugin-react-helmet": "^5.8.0",
+    "gatsby-plugin-sharp": "^4.8.1",
+    "gatsby-plugin-styled-components": "^5.8.0",
+    "gatsby-plugin-typescript": "^4.8.1",
+    "gatsby-source-filesystem": "^4.8.1",
+    "gatsby-transformer-json": "^4.8.0",
+    "gatsby-transformer-sharp": "^4.8.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-jinke-music-player": "^4.24.1",
-    "styled-components": "^5.3.0",
+    "react-jinke-music-player": "^4.24.2",
+    "styled-components": "^5.3.3",
     "styled-reset": "^4.3.4"
   },
   "devDependencies": {
-    "@ntnyq/eslint-config-prettier-typescript-react": "^0.1.14",
-    "@ntnyq/prettier-config": "^0.3.0",
+    "@ntnyq/eslint-config-prettier-typescript-react": "^0.1.16",
+    "@ntnyq/prettier-config": "^0.3.1",
     "@types/loadable__component": "^5.13.4",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-helmet": "^6.1.2",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-helmet": "^6.1.5",
     "@types/scrollreveal": "^0.0.7",
-    "@types/styled-components": "^5.1.11",
-    "dotenv": "^10.0.0",
-    "eslint": "^7.31.0",
-    "husky": "^7.0.1",
-    "lint-staged": "^11.0.1",
-    "prettier": "^2.3.2",
-    "sort-package-json": "^1.50.0",
-    "typescript": "^4.3.5"
+    "@types/styled-components": "^5.1.23",
+    "dotenv": "^16.0.0",
+    "eslint": "^8.10.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.4",
+    "prettier": "^2.5.1",
+    "sort-package-json": "^1.54.0",
+    "typescript": "^4.5.5"
   },
   "resolution": {
     "xstate": "4.9.1"

src/components/AudioPlayer/index.tsx

@@ -9,8 +9,8 @@ interface Props {
   options: ReactJkMusicPlayerProps
 }
 
-const VideoPlayer: React.FC<Props> = ({ children, options }) => (
+const AudioPlayer: React.FC<Props> = ({ children, options }) => (
   <ReactJkMusicPlayer {...options}>{children}</ReactJkMusicPlayer>
 )
 
-export default VideoPlayer
+export default AudioPlayer

src/components/Badge/Ukraine.tsx

@@ -0,0 +1,27 @@
+/**
+ * @see https://github.com/virae/we-stand-with-ukraine
+ */
+
+import React from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  title?: string
+}
+
+const Badge = styled.div`
+  position: fixed;
+  top: 20px;
+  right: -80px;
+  z-index: 9999;
+  width: 300px;
+  height: 84px;
+  background: linear-gradient(-180deg, #005bbb 50%, #ffd500 50%);
+  transform: rotate(45deg);
+`
+
+const Ukraine: React.FC<Props> = ({ title = `We stand with Ukraine` }) => (
+  <Badge title={title} />
+)
+
+export default Ukraine

src/components/index.ts

@@ -2,3 +2,5 @@ export { default as App } from './App'
 export { default as Head } from './Head'
 
 export { default as Hero } from './Hero'
+
+export { default as Ukraine } from './Badge/UKRaine'

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
-import { App, Head, Hero } from '../components'
+import { App, Head, Hero, Ukraine } from '../components'
 
 const query = graphql`
   query {
@@ -26,6 +26,7 @@ const Index: React.FC = () => {
       <App>
         <Hero />
       </App>
+      <Ukraine />
     </React.Fragment>
   )
 }