update dependencies

.github/dependabot.yml

@@ -8,3 +8,9 @@ updates:
       - "🤖 Dependencies"
     schedule:
       interval: "daily"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    labels:
+      - "🤖 Dependencies"
+    schedule:
+      interval: "daily"

.github/workflows/ci.yml

@@ -8,12 +8,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Installing dependencies

.github/workflows/deploy.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
@@ -18,7 +18,7 @@ jobs:
           yarn build
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@3.7.1
+        uses: JamesIves/github-pages-deploy-action@4.7.1
         with:
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           BRANCH: gh-pages

.gitignore

@@ -1,9 +1,15 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# IDE
+.idea
+
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+package-lock.json
+.yarn
+.yarnrc.yml
 
 # testing
 /coverage

components/blocks/LowMemoryFootprint.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@use '../../styles/mixins';
 
 .lmfBlock .mid {
   align-items: flex-start;
@@ -8,7 +8,7 @@
   text-align: right;
 }
 
-@include mobile-break {
+@include mixins.mobile-break {
   .lmfBlock .mid .left,
   .lmfBlock .mid .right {
     text-align: center;

components/blocks/MainBlock.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@use '../../styles/mixins';
 
 .mainBlock {
   text-align: center;
@@ -38,7 +38,7 @@
   color: #74818d;
 }
 
-@include mobile-break {
+@include mixins.mobile-break {
   .mainBlock {
     padding: 2em 1em;
 

components/blocks/MediaBlock.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@use '../../styles/mixins';
 
 .mediaBlock {
   border-top: 3px solid #E6ECF1;
@@ -17,7 +17,7 @@
   width: 75%;
   margin: 0 auto;
 
-  @include mobile-break {
+  @include mixins.mobile-break {
     width: auto;
   }
 }

components/blocks/SponsorsBlock.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@use '../../styles/mixins';
 
 .sponsorsBlock {
   .mid {
@@ -20,7 +20,7 @@
     img {
       height: 100px;
 
-      @include mobile-break {
+      @include mixins.mobile-break {
         height: auto;
       }
     }

components/common/TheFooter.module.scss

@@ -1,8 +1,8 @@
-@import '../../styles/colors';
+@use '../../styles/colors';
 
 .mainFooter {
   text-align: center;
-  background: $accent-darker;
+  background: colors.$accent-darker;
   padding: 2em 0.5em;
   font-size: 0.8em;
   color: #fff;

components/common/TheHeader.module.scss

@@ -1,5 +1,5 @@
-@import '../../styles/colors';
-@import '../../styles/mixins';
+@use '../../styles/colors';
+@use '../../styles/mixins';
 
 .header {
   padding: 1em;
@@ -25,7 +25,7 @@
       }
 
       &:hover {
-        background: $accent;
+        background: colors.$accent;
         color: #fff;
         text-decoration: none;
       }
@@ -51,7 +51,7 @@
     }
   }
 
-  @include mobile-break {
+  @include mixins.mobile-break {
     padding: 0;
 
     .headerMid {

components/common/TheHeader.tsx

@@ -22,7 +22,7 @@ class TheHeader extends Component<{}, TheHeaderState> {
 
   private readonly links: GenericLink[] = [
     { url: 'https://docs.gofiber.io', text: '📖 Docs' },
-    { url: 'https://github.com/gofiber/recipes', text: '🍳 Examples' },
+    { url: 'https://github.com/gofiber/recipes', text: '🍳 Recipes' },
     { url: 'https://github.com/gofiber/fiber', text: '📝 GitHub' },
     { url: 'https://www.buymeacoffee.com/fenny', text: '☕ Buy a Coffee' },
     { url: '/discord', text: '💬 Discord' },

components/windows/BrowserWindow.tsx

@@ -1,8 +1,9 @@
 import styles from './BrowserWindow.module.scss';
-import { Component } from 'react';
+import {Component, ReactNode} from 'react';
 
 interface BrowserWindowProps {
   url: string;
+  children?: ReactNode;
 }
 
 class BrowserWindow extends Component<BrowserWindowProps> {

components/windows/CodeBlock.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/colors';
+@use '../../styles/colors';
 
 .codeWindowContent {
   pre {
@@ -7,7 +7,7 @@
 
     code {
       display: block;
-      background: $accent;
+      background: colors.$accent;
       border-bottom-left-radius: 3px;
       border-bottom-right-radius: 3px;
       line-height: 1.2;

components/windows/CodeBlock.tsx

@@ -1,11 +1,17 @@
 import styles from './CodeBlock.module.scss';
-import { Component } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { Component, createRef } from 'react';
 import hljs from 'highlight.js';
 
-class CodeBlock extends Component {
+interface CodeBlockProps {
+  children: React.ReactNode;
+}
+
+class CodeBlock extends Component<CodeBlockProps> {
+  codeRef = createRef<HTMLElement>();
   componentDidMount() {
-    hljs.highlightBlock(findDOMNode(this.refs.code));
+    if (this.codeRef.current) {
+      hljs.highlightBlock(this.codeRef.current);
+    }
   }
 
   render() {
@@ -22,7 +28,7 @@ class CodeBlock extends Component {
 
           <div className={`window-content ${styles.codeWindowContent}`}>
             <pre>
-              <code className="go" ref="code">
+              <code className="go" ref={this.codeRef}>
                 {this.props.children}
               </code>
             </pre>

eslint.config.mjs

@@ -0,0 +1,72 @@
+import stylistic from '@stylistic/eslint-plugin';
+import prettier from 'eslint-plugin-prettier';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+import { includeIgnoreFile } from '@eslint/compat';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, '.gitignore');
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends('plugin:prettier/recommended'),
+  ...compat.extends('plugin:@next/next/recommended'),
+  includeIgnoreFile(gitignorePath),
+  {
+    plugins: {
+      stylistic,
+      prettier,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'module',
+
+      parserOptions: {
+        project: 'tsconfig.json',
+      },
+    },
+
+    rules: {
+      'stylistic/indent': 'off',
+
+      'stylistic/member-delimiter-style': [
+        'error',
+        {
+          multiline: {
+            delimiter: 'semi',
+            requireLast: true,
+          },
+
+          singleline: {
+            delimiter: 'semi',
+            requireLast: false,
+          },
+        },
+      ],
+
+      'no-unused-expressions': 'error',
+      'stylistic/semi': ['error', 'always'],
+      curly: 'error',
+      eqeqeq: ['error', 'always'],
+      'no-redeclare': 'error',
+      'no-throw-literal': 'error',
+    },
+    ignores: ['node_modules/*', '.next/*', '.yarn/*', '*.config.*'],
+  },
+];

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  sassOptions: {
+    silenceDeprecations: ['legacy-js-api'],
+  },
+  output: 'export',
+};

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.1",
   "private": true,
   "scripts": {
-    "build": "next build && next export",
+    "build": "next build",
     "dev": "next dev",
-    "lint": "eslint . --ext .ts --ext .tsx",
+    "lint": "eslint .",
     "start": "next start"
   },
   "dependencies": {
@@ -17,18 +17,24 @@
     "next": "^15.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sass": "^1.81.0"
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.3",
+    "@eslint/js": "^9.15.0",
+    "@next/eslint-plugin-next": "^15.0.3",
+    "@stylistic/eslint-plugin": "^2.11.0",
     "@types/node": "^20.17.9",
     "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@typescript-eslint/parser": "^8.16.0",
     "eslint": "^9.15.0",
     "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.4.1",
-    "typescript": "^5.7.2"
-  }
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.16.0"
+  },
+  "packageManager": "[email protected]"
 }