refactor: use eslint, reformat

.eslintrc.cjs

@@ -0,0 +1,64 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021 : true,
+    },
+    extends  : ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended"],
+    overrides: [
+        {
+            env: {
+                node: true,
+            },
+            files        : [".eslintrc.{js,cjs}"],
+            parserOptions: {
+                sourceType: "script",
+            },
+        },
+    ],
+    parser       : "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType : "module",
+    },
+    plugins: ["@typescript-eslint", "react"],
+    rules  : {
+        "object-curly-spacing"              : ["error", "always"],
+        "brace-style"                       : ["error", "allman"],
+        quotes                              : ["error", "double"],
+        semi                                : ["error", "always"],
+        "linebreak-style"                   : ["error", "unix"],
+        indent                              : ["error", 4],
+        "@typescript-eslint/no-namespace"   : "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "no-else-return"                    : 1,
+        "space-unary-ops"                   : 2,
+        "react/jsx-tag-spacing"             : ["error", {
+            "closingSlash"     : "never",
+            "beforeSelfClosing": "always",
+            "afterOpening"     : "never",
+            "beforeClosing"    : "never"
+        }],
+        "keyword-spacing": ["error", {
+            "before": true,
+            "after" : true,
+        }],
+        "arrow-spacing"      : "error",
+        "comma-spacing"      : ["error", { "before": false, "after": true }],
+        "space-infix-ops"    : ["error", { "int32Hint": false }],
+        "space-before-blocks": ["error", { "functions": "always", "keywords": "always", "classes": "always" }],
+        "no-multi-spaces"    : "error",
+        "no-trailing-spaces" : "error",
+        "semi-spacing"       : "error",
+        "key-spacing"        : [2, {
+            "singleLine": {
+                "beforeColon": false,
+                "afterColon" : true
+            },
+            "multiLine": {
+                "beforeColon": false,
+                "afterColon" : true,
+                "align"      : "colon"
+            }
+        }]
+    },
+};

docusaurus.config.js

@@ -1,146 +1,151 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const { themes } = require('prism-react-renderer');
+const { themes } = require("prism-react-renderer");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Saucer',
-  tagline: 'Next-Gen desktop apps with web-frontend in C++',
+    title  : "Saucer",
+    tagline: "Next-Gen desktop apps with web-frontend in C++",
 
-  projectName: 'saucer-docs',
-  organizationName: 'saucer',
-  trailingSlash: false,
+    projectName     : "saucer-docs",
+    organizationName: "saucer",
+    trailingSlash   : false,
 
-  baseUrl: `/`,
-  favicon: 'img/favicon.ico',
-  url: 'https://saucer.github.io',
+    baseUrl: "/",
+    favicon: "img/favicon.ico",
+    url    : "https://saucer.github.io",
 
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+    onBrokenLinks        : "throw",
+    onBrokenMarkdownLinks: "warn",
 
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
-  },
+    i18n: {
+        defaultLocale: "en",
+        locales      : ["en"],
+    },
 
-  markdown: {
-    mermaid: true,
-  },
+    markdown: {
+        mermaid: true,
+    },
 
-  themes: ['@docusaurus/theme-mermaid'],
+    themes: ["@docusaurus/theme-mermaid"],
 
-  presets: [
-    [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        theme: {
-          customCss: require.resolve('./src/css/custom.css'),
-        },
-        blog: {
-          routeBasePath: '/news',
-        },
-      }),
+    presets: [
+        [
+            "classic",
+            /** @type {import('@docusaurus/preset-classic').Options} */
+            ({
+                theme: {
+                    customCss: require.resolve("./src/css/custom.css"),
+                },
+                blog: {
+                    routeBasePath: "/news",
+                },
+            }),
+        ],
     ],
-  ],
 
-  themeConfig:
+    themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      navbar: {
-        title: 'Saucer',
-        logo: {
-          alt: 'Logo',
-          src: 'img/logo_no_text.png',
-        },
-        items: [
-          {
-            type: 'doc',
-            label: 'Docs',
-            position: 'left',
-            docId: 'getting-started/readme',
-          },
-          // { to: '/news', label: 'News', position: 'left' },
-          {
-            href: 'https://github.com/saucer/saucer',
-            label: 'GitHub',
-            position: 'right',
-          },
-          {
-            href: 'https://discord.gg/ndhmQE4225',
-            label: 'Discord',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Community',
+        navbar: {
+            title: "Saucer",
+            logo : {
+                alt: "Logo",
+                src: "img/logo_no_text.png",
+            },
             items: [
-              {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/saucer',
-              },
-              {
-                label: 'Discord',
-                href: 'https://discord.gg/ndhmQE4225',
-              },
+                {
+                    type    : "doc",
+                    label   : "Docs",
+                    position: "left",
+                    docId   : "getting-started/readme",
+                },
+                // { to: '/news', label: 'News', position: 'left' },
+                {
+                    href    : "https://github.com/saucer/saucer",
+                    label   : "GitHub",
+                    position: "right",
+                },
+                {
+                    href    : "https://discord.gg/ndhmQE4225",
+                    label   : "Discord",
+                    position: "right",
+                },
             ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Saucer`,
-      },
-      prism: {
-        theme: themes.github,
-        darkTheme: themes.oneDark,
-        additionalLanguages: ['cmake'],
-        magicComments: [
-          {
-            className: 'code-block-gray',
-            line: 'highlight-next-line',
-            block: { start: 'highlight-start', end: 'highlight-end' },
-          },
-          {
-            className: 'code-block-red',
-            block:
+        },
+        footer: {
+            style: "dark",
+            links: [
+                {
+                    title: "Community",
+                    items: [
+                        {
+                            label: "Stack Overflow",
+                            href : "https://stackoverflow.com/questions/tagged/saucer",
+                        },
+                        {
+                            label: "Discord",
+                            href : "https://discord.gg/ndhmQE4225",
+                        },
+                    ],
+                },
+            ],
+            copyright: `Copyright © ${new Date().getFullYear()} Saucer`,
+        },
+        prism: {
+            theme              : themes.github,
+            darkTheme          : themes.oneDark,
+            additionalLanguages: ["cmake"],
+            magicComments      : [
+                {
+                    className: "code-block-gray",
+                    line     : "highlight-next-line",
+                    block    : { start: "highlight-start", end: "highlight-end" },
+                },
+                {
+                    className: "code-block-red",
+                    block:
             {
-              start: 'red-start',
-              end: 'red-end',
+                start: "red-start",
+                end  : "red-end",
             },
-            line: 'red',
-          },
-          {
-            className: 'code-block-green',
-            block:
+                    line: "red",
+                },
+                {
+                    className: "code-block-green",
+                    block:
             {
-              start: 'green-start',
-              end: 'green-end',
+                start: "green-start",
+                end  : "green-end",
             },
-            line: 'green',
-          },
-        ],
-      },
-    }),
-  plugins: [
-    () => ({
-      name: 'custom-webpack-plugin',
-      configureWebpack() {
-        return {
-          module: {
-            rules: [
-              {
-                test: /.*cpp$/,
-                use: 'raw-loader',
-              },
+                    line: "green",
+                },
             ],
-          },
-        };
-      },
+        },
     }),
-  ],
+    plugins: [
+        () => ({
+            name: "custom-webpack-plugin",
+            configureWebpack()
+            {
+                return {
+                    module: {
+                        rules: [
+                            {
+                                test: /.*cpp$/,
+                                use : "raw-loader",
+                            },
+                            {
+                                test: /.*cmake$/,
+                                use : "raw-loader",
+                            },
+                        ],
+                    },
+                };
+            },
+        }),
+    ],
 };
 
 module.exports = config;

package.json

@@ -37,6 +37,11 @@
     "@tsconfig/docusaurus": "^2.0.2",
     "@types/node": "^20.8.7",
     "@types/react": "^18.2.31",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "tsconfig.json": "link:@tsconfig/docusaurus/tsconfig.json",
     "typescript": "^5.2.2"
   },