Upgrade dependencies and switch to yarn

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true

.github/workflows/update.yaml

@@ -17,15 +17,19 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '17.x'
 
-    - run: npm install
+    - uses: borales/actions-yarn@v2.3.0
       name: Install Dependencies
+      with:
+        cmd: install # will run `yarn install` command
 
-    - run: npm run build
+    - uses: borales/actions-yarn@v2.3.0
       name: Build Site
       env:
         YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
+      with:
+        cmd: build # will run `yarn build` command
 
     - name: Publish Site
       uses: cloudflare/wrangler-action@1.2.0

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/codeStyles/Project.xml

@@ -1,38 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <JSCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/unkn0wncat.net.iml" filepath="$PROJECT_DIR$/.idea/unkn0wncat.net.iml" />
-    </modules>
-  </component>
-</project>

.idea/unkn0wncat.net.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

.idea/watcherTasks.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
-</project>

.nvmrc

@@ -0,0 +1 @@
+v17.3.0

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "semi": false
-}

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": false,
+  "endOfLine": "lf"
+}

gatsby-config.js

@@ -36,7 +36,7 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-source-youtube-v2`,
+      resolve: `gatsby-source-youtube-v3`,
       options: {
         channelId: ['UCCoZp-6_P3CVFj4clQ6uaeg'],
         apiKey: process.env.YOUTUBE_API_KEY,

package.json

@@ -1,31 +1,31 @@
 {
   "name": "unkn0wncat-net",
   "description": "Unkn0wnCat.net",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Kevin Kandlbinder <kevin@kevink.dev>",
   "dependencies": {
-    "dotenv": "^10.0.0",
+    "dotenv": "^14.3.0",
-    "gatsby": "^2.32.13",
+    "gatsby": "^4.6.0",
-    "gatsby-plugin-manifest": "^2.12.1",
+    "gatsby-plugin-manifest": "^4.6.0",
-    "gatsby-plugin-offline": "^3.10.1",
+    "gatsby-plugin-offline": "^5.6.0",
-    "gatsby-plugin-react-helmet": "^3.10.0",
+    "gatsby-plugin-react-helmet": "^5.6.0",
-    "gatsby-plugin-sass": "^2.8.0",
+    "gatsby-plugin-sass": "^5.6.0",
-    "gatsby-plugin-sharp": "^2.14.4",
+    "gatsby-plugin-sharp": "^4.6.0",
-    "gatsby-plugin-sitemap": "^2.12.0",
+    "gatsby-plugin-sitemap": "^5.6.0",
-    "gatsby-plugin-styled-components": "^3.10.0",
+    "gatsby-plugin-styled-components": "^5.6.0",
     "gatsby-source-filesystem": "^4.2.0",
-    "gatsby-source-youtube-v2": "^1.0.1",
+    "gatsby-source-youtube-v3": "^3.0.2",
-    "gatsby-transformer-remark": "^2.16.1",
+    "gatsby-transformer-remark": "^5.6.0",
-    "gatsby-transformer-sharp": "^2.12.0",
+    "gatsby-transformer-sharp": "^4.6.0",
     "html-to-react": "^1.4.7",
-    "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "sass": "^1.49.0"
   },
   "devDependencies": {
-    "prettier": "2.4.1"
+    "prettier": "2.5.1"
   },
   "keywords": [
     "gatsby"

src/pages/index.js

@@ -11,9 +11,6 @@ import steamImage from "../images/assets/steam.jpg"
 
 import * as styles from "./index.module.scss";
 
-const HtmlToReactParser = require('html-to-react').Parser;
-let parser = new HtmlToReactParser();
-
 const makeStyle = function(image) {
   return {
     backgroundImage: "linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url("+image+")"
@@ -33,7 +30,10 @@ const IndexPage = ({ data }) => (
       <div>
         <h1>About me</h1>
 
-        { parser.parse(data.allMarkdownRemark.edges[0].node.html) }
+        <div
+          className="about-content"
+          dangerouslySetInnerHTML={{ __html: data.allMarkdownRemark.edges[0].node.html }}
+        />
       </div>
     </section>
     <section className={styles.social}>
@@ -66,7 +66,7 @@ const IndexPage = ({ data }) => (
 export const query = graphql`
 query {
   allMarkdownRemark(
-    filter: {fileAbsolutePath: {regex: "/home_about\\\\.md$/"}}
+    filter: {fileAbsolutePath: {regex: "/home_about.md$/"}}
   ) {
     edges {
       node {
@@ -75,7 +75,6 @@ query {
     }
   }
 }
-
 `
 
 export default IndexPage

src/pages/videos.module.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 $boxWidth: 300px;
 
 .videos {
@@ -8,7 +9,7 @@ $boxWidth: 300px;
 
     a {
       width: $boxWidth;
-      height: $boxWidth / 16 * 9;
+      height: math.div($boxWidth, 16) * 9;
       background-size: cover;
       background-position: center;
       color: white;