chore: Yarn update libs (#601)

.yarnrc.yml

@@ -2,4 +2,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
 
-yarnPath: .yarn/releases/yarn-2.4.2.cjs
+yarnPath: .yarn/releases/yarn-3.0.2.cjs

README.md

@@ -20,7 +20,7 @@ npm install -g yarn
 yarn install
 ```
 
-Use `yarn start` to compile and serve the build directory in real-time. It reloads every time there's a change. Then view the website at [https://localhost:3000](https://localhost:3000)
+Use `yarn start` to compile and serve the build directory in real-time. It reloads every time there's a change. Then view the website at [https://localhost:8080](https://localhost:8080)
 
 ```sh
 yarn start
@@ -34,10 +34,11 @@ Whenever you want, fix auto-fixable lint errors and format files:
   yarn run lint:prettier
 ```
 
-From while to while, update the dependencies with this command:
+From while to while, update the dependencies with this commands:
 
 ```sh
-  yarn upgrade-interactive
+  yarn set version latest
+  yarn yarn-upgrade-all
 ```
 
 ### Tips
@@ -49,7 +50,7 @@ From while to while, update the dependencies with this command:
 
 ## Deploy
 
-**Push to master**. [Netlify](https://app.netlify.com/sites/hackupc) will build and deploy automatically.
+**Push to main**. [Netlify](https://app.netlify.com/sites/hackupc) will build and deploy automatically.
 
 If you push something that doesn't build, don't worry, it won't be published.
 

config/webpack.dev.js

@@ -16,16 +16,16 @@ module.exports = {
   },
   mode: 'development',
   devServer: {
-    contentBase: path.resolve('dist'),
+    static: {
+      directory: path.resolve('dist'),
+    },
     compress: true,
-    port: 3000,
-    overlay: true,
-    // Uncomment the two lines below to enable hot reload on mobile
-    // host: '172.17.197.80', // Your ip, update it. This is mine.
-    // disableHostCheck: true,
-    // http2: true,
+    client: {
+      overlay: true,
+    },
+    hot: true,
   },
-  devtool: 'eval-cheap-module-source-map',
+  devtool: 'source-map',
   module: {
     rules: [
       {

config/webpack.prod.js

@@ -23,6 +23,7 @@ module.exports = {
     filename: '[name].[chunkhash:8].bundle.js',
     chunkFilename: '[name].[chunkhash:8].chunk.js',
   },
+  devtool: 'source-map',
   mode: 'production',
   module: {
     rules: [

package.json

@@ -14,42 +14,42 @@
     "lint:prettier": "prettier . --write"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.8",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
     "@types/eslint": "^7.28.0",
     "@types/gtag.js": "^0.0.7",
-    "@types/node": "^16.4.0",
+    "@types/node": "^16.9.4",
     "@types/prettier": "^2.3.2",
-    "@types/stylelint": "^13.13.1",
+    "@types/stylelint": "^13.13.2",
     "@types/webfontloader": "^1.6.33",
     "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
-    "compression-webpack-plugin": "^8.0.1",
-    "css-loader": "^6.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^9.0.0",
+    "css-loader": "^6.3.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "glob": "^7.1.7",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.1",
-    "lint-staged": "^11.0.1",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
     "markup-inline-loader": "^4.0.0",
-    "mini-css-extract-plugin": "^2.1.0",
+    "mini-css-extract-plugin": "^2.3.0",
     "postcss": "^8.3.6",
     "postcss-easing-gradients": "^3.0.1",
     "postcss-focus-visible": "^5.0.0",
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^7.0.2",
-    "prettier": "2.3.2",
+    "prettier": "^2.4.1",
     "prettier-config-standard": "^4.0.0",
     "purgecss-webpack-plugin": "^4.0.3",
-    "sass": "^1.35.2",
+    "sass": "^1.41.1",
     "sass-loader": "^12.1.0",
     "style-loader": "^3.2.1",
     "stylelint": "^13.13.1",
@@ -58,20 +58,21 @@
     "stylelint-config-sass-guidelines": "^8.0.0",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.20.1",
-    "terser-webpack-plugin": "^5.1.4",
-    "ts-loader": "^9.2.3",
-    "typescript": "^4.3.5",
-    "webpack": "^5.45.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
+    "stylelint-scss": "^3.21.0",
+    "terser-webpack-plugin": "^5.2.4",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.3",
+    "webpack": "^5.53.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1",
     "webpack-pwa-manifest": "^4.3.0",
-    "workbox-webpack-plugin": "^6.1.5"
+    "workbox-webpack-plugin": "^6.3.0",
+    "yarn-upgrade-all": "^0.5.4"
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@fontsource/montserrat": "^4.5.0",
-    "core-js": "^3.15.2",
+    "@fontsource/montserrat": "^4.5.1",
+    "core-js": "^3.18.0",
     "focus-visible": "^5.2.0",
     "lax.js": "^2.0.3",
     "normalize.css": "^8.0.1"

src/styles/sections/sponsors-and-partners.scss

@@ -1,6 +1,6 @@
-@use "sass:math";
+@use 'sass:math';
 
-@use "sass:map";
+@use 'sass:map';
 
 .section--sponsors,
 .section--partners {

src/styles/sections/what-is-a-hackathon.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 .section--what-is-a-hackathon {
   background-color: $c-bg-dark;