New pricing (#43)

---------

Co-authored-by: Robert Olejnik <[email protected]>

Author: filipslezaklab

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
-  "cSpell.words": ["pricebox"],
+  "cSpell.words": [
+    "dirreferent",
+    "pricebox"
+  ],
   "typescript.tsdk": "node_modules\\typescript\\lib"
 }

README.md

@@ -1,5 +1,7 @@
 # defguard website
 
+Defguard website built on [Astro](https://astro.build)!
+
 ## Editing content
 
 Most of the content is written in HTML but some parts ware made with ease of configuration in mind.
@@ -17,9 +19,15 @@ Files that build content on website are written in `.mdx` files and are stored i
 Every content file begins with special section that defines additional information for that file's context, for example title, order of display etc.
 You can find definitions of this information inside [content.ts](./src/content/config.ts).
 
+## Content editing notes
+
+### Pricing
+
+Pricing is a special case where we need to render MDX directly on client side only, this means importing any components in pricing collection is forbidden because it will not work. Raw HTML is still OK since we render it through rehype-raw.
+
 ## Editor recommendation
 
-[VSCode](https://code.visualstudio.com/download) is as far the easiest to setup.
+[VSCode](https://code.visualstudio.com/download) is by far the easiest to setup.
 
 ### Recommended extensions
 
@@ -33,9 +41,42 @@ Extensions to install:
 
 ## Development
 
+### Installing Node.js
+
+Version of Node.js should be the same Major as the one specified in [.nvmrc](./.nvmrc) file.
+
+#### Official source
+
+Follow instructions from [official site](https://nodejs.org/en/download/package-manager).
+
+#### Node version manager (NVM)(Recommended for development)
+
+Supports using dirreferent version of Node.js for each project.
+
+- [Windows](https://github.com/coreybutler/nvm-windows)
+- [Mac/Linux](https://github.com/nvm-sh/nvm)
+
+After correct install, in root of the project use (once):
+
+```bash
+nvm install
+```
+
+And then:
+
+```bash
+nvm use
+```
+
 ### Installing dependencies
 
-Install Node.js version specified inside `.nvmrc` and install `pnpm`  
+Make sure package manager pnpm is installed.
+If not use this command to install it:
+
+```bash
+npm i -g pnpm
+```
+
 Then run install dependencies with:
 
 ```bash

astro.config.mjs

@@ -16,11 +16,7 @@ const __dirname = path.dirname(__filename);
 export default defineConfig({
   site: "https://defguard.net",
   prefetch: true,
-  integrations: [
-    mdx(),
-    preact({ compat: true }),
-    playformCompress(),
-  ],
+  integrations: [mdx(), preact({ compat: true }), playformCompress()],
   markdown: {
     rehypePlugins: [
       [
@@ -41,6 +37,7 @@ export default defineConfig({
     css: {
       preprocessorOptions: {
         scss: {
+          api: "modern",
           additionalData: `@use "@/styles/mixins" as *;`,
         },
       },

package.json

@@ -9,48 +9,50 @@
     "preview": "astro preview",
     "astro": "astro"
   },
-  "packageManager": "pnpm@9.7.1",
+  "packageManager": "pnpm@9.14.2",
   "pnpm": {
     "default": "9.7.1"
   },
   "engines": {
     "node": ">=22.3"
   },
   "dependencies": {
-    "@astrojs/check": "^0.3.4",
-    "@astrojs/mdx": "^2.0.3",
-    "@astrojs/preact": "^3.1.0",
-    "@astrolib/analytics": "^0.5.0",
-    "@floating-ui/react": "^0.26.6",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/preact": "^3.5.3",
+    "@astrolib/analytics": "^0.6.1",
+    "@floating-ui/react": "^0.26.28",
     "@nanostores/preact": "^0.5.2",
-    "@playform/compress": "^0.1.1",
-    "@preact/signals": "^1.2.2",
+    "@playform/compress": "^0.1.6",
+    "@preact/signals": "^1.3.0",
     "@tuplo/numberfmt": "^1.11.0",
     "@types/lodash-es": "^4.17.12",
-    "astro": "^4.1.0",
-    "astro-font": "^0.0.67",
+    "astro": "^4.16.13",
+    "astro-font": "^0.1.81",
     "astro-imagetools": "^0.9.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
-    "nanostores": "^0.11.2",
-    "pnpm": "^8.15.9",
-    "preact": "^10.19.3",
+    "nanostores": "^0.11.3",
+    "preact": "^10.24.3",
+    "react-markdown": "^9.0.1",
     "rehype-external-links": "^3.0.0",
-    "sass": "^1.69.7",
-    "sharp": "0.33.1",
-    "short-unique-id": "^5.0.3",
-    "typescript": "^5.3.3",
+    "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-sync-external-store": "^1.2.2",
     "user-agent-data-types": "^0.4.2",
-    "zustand": "^4.5.0"
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.4.0",
+    "@astrojs/ts-plugin": "^1.10.4",
     "@typescript-eslint/parser": "^6.17.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-astro": "^0.31.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-astro": "^0.12.3"
+    "eslint-plugin-astro": "^1.3.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1"
   },
   "overrides": {
     "react": "npm:@preact/compat@latest",