New home (#45)

* wip

* up

* roadmap

* scroll sections animated

* add click area to slider indicator

* eslint fixes

* fix components astro loading issues

* seo add sitemap gen

* cookie dialog client side only

* fixes

* tos and privacy

* speedup slider animation

* TOS

* review fixes

---------

Co-authored-by: Robert Olejnik <robert@olejnik.email>

Author: filipslezaklab

.editorconfig

@@ -8,3 +8,6 @@ insert_final_newline = true
 charset = utf-8
 indent_style = space
 indent_size = 2
+tab_width = 2
+rulers = 90
+insert_final_newline = true

.nvmrc

@@ -1 +1 @@
-v22.3
+v23.3

.prettierrc.mjs

@@ -5,6 +5,9 @@ export default {
   semi: true,
   printWidth: 90,
   plugins: ["prettier-plugin-astro"],
+  trailingComma: "all",
+  endOfLine: "lf",
+  jsxSingleQuote: false,
   overrides: [
     {
       files: "*.astro",

.vscode/settings.json

@@ -1,7 +1,12 @@
 {
   "cSpell.words": [
     "dirreferent",
-    "pricebox"
+    "frontmatter",
+    "pricebox",
+    "Roadwarrior"
   ],
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false
 }

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine AS base
+FROM node:23-alpine AS base
 
 RUN apk update
 RUN corepack enable

Dockerfile.build

@@ -1,4 +1,4 @@
-FROM node:22-alpine AS base
+FROM node:23-alpine AS base
 
 RUN apk update
 RUN corepack enable

astro.config.mjs

@@ -1,4 +1,3 @@
-import preact from "@astrojs/preact";
 import { defineConfig } from "astro/config";
 import path from "path";
 import rehypeExternalLinks from "rehype-external-links";
@@ -8,15 +7,32 @@ import mdx from "@astrojs/mdx";
 
 import playformCompress from "@playform/compress";
 
+import react from "@astrojs/react";
+
+import sitemap from "@astrojs/sitemap";
+
 const __filename = fileURLToPath(import.meta.url);
 
 const __dirname = path.dirname(__filename);
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://defguard.net",
+  trailingSlash: "ignore",
   prefetch: true,
-  integrations: [mdx(), preact({ compat: true }), playformCompress()],
+  integrations: [
+    react(),
+    mdx(),
+    playformCompress(),
+    sitemap({
+      i18n: {
+        defaultLocale: "en",
+        locales: {
+          en: "en-US",
+        },
+      },
+    }),
+  ],
   markdown: {
     rehypePlugins: [
       [

eslint.config.js

@@ -1,29 +1,53 @@
-export default [
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import react from "eslint-plugin-react";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
   {
-    extends: ["plugin:astro/recommended"],
-    overrides: [
-      {
-        files: ["*.astro"],
-        parser: "astro-eslint-parser",
-        parserOptions: {
-          parser: "@typescript-eslint/parser",
-          extraFileExtensions: [".astro"],
-        },
-        rules: {
-          "max-len": [
-            "error",
-            {
-              code: 90,
-              comments: 140,
-              tabWidth: 2,
-              ignorePattern: "^import .* |.*LL\\..*|.*d=.* | *from .*",
-              ignoreComments: true,
-              ignoreRegExpLiterals: true,
-              ignoreTemplateLiterals: true,
-            },
-          ],
+    extends: [js.configs.recommended, ...tseslint.configs.strictTypeChecked],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: import.meta.dirname,
+        ecmaFeatures: {
+          jsx: true,
         },
       },
-    ],
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      react: react,
+      "react-hooks": reactHooks,
+      "simple-import-sort": simpleImportSort,
+    },
+    settings: {
+      react: {
+        version: "18.3",
+      },
+    },
+    rules: {
+      ...react.configs.flat.recommended.rules,
+      ...react.configs.flat["jsx-runtime"].rules,
+      ...reactHooks.configs.recommended.rules,
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+      "@typescript-eslint/restrict-template-expressions": [
+        "error",
+        {
+          allowNumber: true,
+          allowBoolean: true,
+          allowRegExp: true,
+        },
+      ],
+      "@typescript-eslint/no-unnecessary-condition": "off",
+    },
   },
-];
+  eslintConfigPrettier,
+);

package.json

@@ -7,58 +7,65 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "prettier:fix": "prettier --write src",
+    "eslint:fix": "eslint src/**/*.{ts,tsx,astro} --fix",
+    "fix": "pnpm prettier:fix && pnpm eslint:fix",
+    "prettier:lint": "prettier --check src",
+    "eslint:lint": "eslint src/**/*.{ts,tsx,astro} --max-warnings 0",
+    "lint": "pnpm prettier:lint && pnpm tsc && pnpm eslint:lint && pnpm astro check"
   },
   "packageManager": "pnpm@9.14.2",
   "pnpm": {
-    "default": "9.7.1"
+    "default": "9.14.2"
   },
   "engines": {
-    "node": ">=22.3"
+    "node": ">=23"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/mdx": "^3.1.9",
-    "@astrojs/preact": "^3.5.3",
+    "@astrojs/react": "^3.6.3",
+    "@astrojs/sitemap": "^3.2.1",
     "@astrolib/analytics": "^0.6.1",
     "@floating-ui/react": "^0.26.28",
-    "@nanostores/preact": "^0.5.2",
     "@playform/compress": "^0.1.6",
-    "@preact/signals": "^1.3.0",
     "@tuplo/numberfmt": "^1.11.0",
-    "@types/lodash-es": "^4.17.12",
-    "astro": "^4.16.13",
+    "astro": "^4.16.16",
     "astro-font": "^0.1.81",
     "astro-imagetools": "^0.9.0",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
-    "nanostores": "^0.11.3",
-    "preact": "^10.24.3",
+    "motion": "^11.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "rehype-external-links": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "sass": "^1.81.0",
     "sharp": "0.33.5",
     "short-unique-id": "^5.2.0",
     "typescript": "^5.6.3",
-    "typescript-cookie": "^1.0.6",
+    "use-breakpoint": "^4.0.5",
     "use-sync-external-store": "^1.2.2",
     "user-agent-data-types": "^0.4.2",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.4",
-    "@typescript-eslint/parser": "^6.17.0",
-    "eslint": "^8.56.0",
+    "@eslint/js": "^9.15.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "5.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.12.0",
     "prettier": "^3.3.3",
-    "prettier-plugin-astro": "^0.14.1"
-  },
-  "overrides": {
-    "react": "npm:@preact/compat@latest",
-    "react-dom": "npm:@preact/compat@latest"
-  },
-  "volta": {
-    "node": "21.6.1"
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript-eslint": "^8.15.0"
   }
 }