Puto vscode

astro.config.mjs

@@ -1,14 +1,12 @@
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
-
 import react from "@astrojs/react";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [
-    tailwind({
-      applyBaseStyles: false,
-    }),
-    react()
-  ]
+  integrations: [tailwind({
+    applyBaseStyles: false
+  }), react(), mdx()]
 });

package-lock.json

@@ -8,6 +8,7 @@
       "name": "fosc-v3",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/mdx": "^1.1.1",
         "@astrojs/react": "^3.0.0",
         "@astrojs/tailwind": "^5.0.0",
         "@tailwindcss/typography": "tailwindcss/typography",
@@ -20,6 +21,7 @@
         "lucide-react": "^0.274.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "sass": "^1.69.0",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.3.3",
         "tailwindcss-animate": "^1.0.7",
@@ -83,6 +85,34 @@
         "astro": "^3.2.3"
       }
     },
+    "node_modules/@astrojs/mdx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/mdx/-/mdx-1.1.1.tgz",
+      "integrity": "sha512-3dfL12ZqI6NCjx0iVOYVSyljlVgsxds5mOhe78xoCVjyqSpZZsxzz4Dt5WfGxDon2nc2bD6XGiZ2PIy8fmX6NQ==",
+      "dependencies": {
+        "@astrojs/markdown-remark": "3.2.1",
+        "@mdx-js/mdx": "^2.3.0",
+        "acorn": "^8.10.0",
+        "es-module-lexer": "^1.3.0",
+        "estree-util-visit": "^1.2.1",
+        "github-slugger": "^2.0.0",
+        "gray-matter": "^4.0.3",
+        "hast-util-to-html": "^8.0.4",
+        "kleur": "^4.1.4",
+        "rehype-raw": "^6.1.1",
+        "remark-gfm": "^3.0.1",
+        "remark-smartypants": "^2.0.0",
+        "source-map": "^0.7.4",
+        "unist-util-visit": "^4.1.2",
+        "vfile": "^5.3.7"
+      },
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "astro": "^3.2.3"
+      }
+    },
     "node_modules/@astrojs/prism": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.0.0.tgz",
@@ -862,6 +892,34 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdx-js/mdx": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
+      "integrity": "sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/mdx": "^2.0.0",
+        "estree-util-build-jsx": "^2.0.0",
+        "estree-util-is-identifier-name": "^2.0.0",
+        "estree-util-to-js": "^1.1.0",
+        "estree-walker": "^3.0.0",
+        "hast-util-to-estree": "^2.0.0",
+        "markdown-extensions": "^1.0.0",
+        "periscopic": "^3.0.0",
+        "remark-mdx": "^2.0.0",
+        "remark-parse": "^10.0.0",
+        "remark-rehype": "^10.0.0",
+        "unified": "^10.0.0",
+        "unist-util-position-from-estree": "^1.0.0",
+        "unist-util-stringify-position": "^3.0.0",
+        "unist-util-visit": "^4.0.0",
+        "vfile": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -908,6 +966,14 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@types/acorn": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
+      "integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.2.tgz",
@@ -958,6 +1024,14 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
       "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA=="
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.1.tgz",
+      "integrity": "sha512-sHyakZlAezNFxmYRo0fopDZW+XvK6ipeZkkp5EAOLjdPfZp8VjZBJ67vSRI99RSCAoqXVmXOHS4fnWoxpuGQtQ==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/hast": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.6.tgz",
@@ -984,6 +1058,11 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdx": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.8.tgz",
+      "integrity": "sha512-r7/zWe+f9x+zjXqGxf821qz++ld8tp6Z4jUS6qmPZUXH6tfh4riXOhAqb12tWGWAevCFtMt1goLWkQMqIJKpsA=="
+    },
     "node_modules/@types/ms": {
       "version": "0.7.32",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.32.tgz",
@@ -1074,6 +1153,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -1182,6 +1269,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/astring": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/astring/-/astring-1.8.6.tgz",
+      "integrity": "sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==",
+      "bin": {
+        "astring": "bin/astring"
+      }
+    },
     "node_modules/astro": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/astro/-/astro-3.2.3.tgz",
@@ -1591,6 +1686,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2041,6 +2145,73 @@
         "node": ">=4"
       }
     },
+    "node_modules/estree-util-attach-comments": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-2.1.1.tgz",
+      "integrity": "sha512-+5Ba/xGGS6mnwFbXIuQiDPTbuTxuMCooq3arVv7gPZtYpjp+VXH/NkHAP35OOefPhNG/UGqU3vt/LTABwcHX0w==",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-build-jsx": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-2.2.2.tgz",
+      "integrity": "sha512-m56vOXcOBuaF+Igpb9OPAy7f9w9OIkb5yhjsZuaPm7HoGi4oTOQi0h2+yZ+AtKklYFZ+rPC4n0wYCJCEU1ONqg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "estree-util-is-identifier-name": "^2.0.0",
+        "estree-walker": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz",
+      "integrity": "sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-to-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-1.2.0.tgz",
+      "integrity": "sha512-IzU74r1PK5IMMGZXUVZbmiu4A1uhiPgW5hm1GjcOfr4ZzHaMPpLNJjR7HjXiIOzi25nZDrgFTobHTkV5Q6ITjA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "astring": "^1.8.0",
+        "source-map": "^0.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-visit": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.2.1.tgz",
+      "integrity": "sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-visit/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -2381,6 +2552,37 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-estree": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-2.3.3.tgz",
+      "integrity": "sha512-ihhPIUPxN0v0w6M5+IiAZZrn0LH2uZomeWwhn7uP7avZC6TE7lIiEh2yBMPr5+zi1aUCXq6VoYRgs2Bw9xmycQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "estree-util-attach-comments": "^2.0.0",
+        "estree-util-is-identifier-name": "^2.0.0",
+        "hast-util-whitespace": "^2.0.0",
+        "mdast-util-mdx-expression": "^1.0.0",
+        "mdast-util-mdxjs-esm": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^0.4.1",
+        "unist-util-position": "^4.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-estree/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/hast-util-to-html": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.4.tgz",
@@ -2507,6 +2709,11 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "node_modules/import-meta-resolve": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
@@ -2536,6 +2743,33 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "optional": true
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
@@ -2586,6 +2820,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -2635,6 +2878,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -2682,6 +2934,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/is-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
@@ -2955,6 +3215,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/markdown-extensions": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
+      "integrity": "sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -3245,6 +3513,116 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
       "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
     },
+    "node_modules/mdast-util-mdx": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-2.0.1.tgz",
+      "integrity": "sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^1.0.0",
+        "mdast-util-mdx-expression": "^1.0.0",
+        "mdast-util-mdx-jsx": "^2.0.0",
+        "mdast-util-mdxjs-esm": "^1.0.0",
+        "mdast-util-to-markdown": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.2.tgz",
+      "integrity": "sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^2.0.0",
+        "@types/mdast": "^3.0.0",
+        "mdast-util-from-markdown": "^1.0.0",
+        "mdast-util-to-markdown": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression/node_modules/@types/mdast": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.13.tgz",
+      "integrity": "sha512-HjiGiWedR0DVFkeNljpa6Lv4/IZU1+30VY5d747K7lBudFc3R0Ibr6yJ9lN3BE28VnZyDfLF/VB1Ql1ZIbKrmg==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.4.tgz",
+      "integrity": "sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^2.0.0",
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "ccount": "^2.0.0",
+        "mdast-util-from-markdown": "^1.1.0",
+        "mdast-util-to-markdown": "^1.3.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-remove-position": "^4.0.0",
+        "unist-util-stringify-position": "^3.0.0",
+        "vfile-message": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx/node_modules/@types/mdast": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.13.tgz",
+      "integrity": "sha512-HjiGiWedR0DVFkeNljpa6Lv4/IZU1+30VY5d747K7lBudFc3R0Ibr6yJ9lN3BE28VnZyDfLF/VB1Ql1ZIbKrmg==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.1.tgz",
+      "integrity": "sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^2.0.0",
+        "@types/mdast": "^3.0.0",
+        "mdast-util-from-markdown": "^1.0.0",
+        "mdast-util-to-markdown": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm/node_modules/@types/mdast": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.13.tgz",
+      "integrity": "sha512-HjiGiWedR0DVFkeNljpa6Lv4/IZU1+30VY5d747K7lBudFc3R0Ibr6yJ9lN3BE28VnZyDfLF/VB1Ql1ZIbKrmg==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/mdast-util-phrasing": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
@@ -3568,6 +3946,103 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-mdx-expression": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.8.tgz",
+      "integrity": "sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "micromark-factory-mdx-expression": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-events-to-acorn": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.5.tgz",
+      "integrity": "sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA==",
+      "dependencies": {
+        "@types/acorn": "^4.0.0",
+        "@types/estree": "^1.0.0",
+        "estree-util-is-identifier-name": "^2.0.0",
+        "micromark-factory-mdx-expression": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0",
+        "vfile-message": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdx-md": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.1.tgz",
+      "integrity": "sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA==",
+      "dependencies": {
+        "micromark-util-types": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.1.tgz",
+      "integrity": "sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==",
+      "dependencies": {
+        "acorn": "^8.0.0",
+        "acorn-jsx": "^5.0.0",
+        "micromark-extension-mdx-expression": "^1.0.0",
+        "micromark-extension-mdx-jsx": "^1.0.0",
+        "micromark-extension-mdx-md": "^1.0.0",
+        "micromark-extension-mdxjs-esm": "^1.0.0",
+        "micromark-util-combine-extensions": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.5.tgz",
+      "integrity": "sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "micromark-core-commonmark": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-events-to-acorn": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "unist-util-position-from-estree": "^1.1.0",
+        "uvu": "^0.5.0",
+        "vfile-message": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz",
@@ -3609,6 +4084,31 @@
         "uvu": "^0.5.0"
       }
     },
+    "node_modules/micromark-factory-mdx-expression": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.9.tgz",
+      "integrity": "sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-events-to-acorn": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "unist-util-position-from-estree": "^1.0.0",
+        "uvu": "^0.5.0",
+        "vfile-message": "^3.0.0"
+      }
+    },
     "node_modules/micromark-factory-space": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
@@ -3800,6 +4300,36 @@
         }
       ]
     },
+    "node_modules/micromark-util-events-to-acorn": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.3.tgz",
+      "integrity": "sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/acorn": "^4.0.0",
+        "@types/estree": "^1.0.0",
+        "@types/unist": "^2.0.0",
+        "estree-util-visit": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0",
+        "vfile-message": "^3.0.0"
+      }
+    },
+    "node_modules/micromark-util-events-to-acorn/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/micromark-util-html-tag-name": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz",
@@ -4305,6 +4835,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/parse-latin": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/parse-latin/-/parse-latin-5.0.1.tgz",
@@ -4358,6 +4912,16 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
       "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
     },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -4946,6 +5510,19 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
       "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
     },
+    "node_modules/remark-mdx": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.3.0.tgz",
+      "integrity": "sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==",
+      "dependencies": {
+        "mdast-util-mdx": "^2.0.0",
+        "micromark-extension-mdxjs": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "10.0.2",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz",
@@ -5212,6 +5789,22 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.69.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.0.tgz",
+      "integrity": "sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
@@ -5406,6 +5999,14 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -5560,6 +6161,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.2.tgz",
+      "integrity": "sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==",
+      "dependencies": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -5910,11 +6519,46 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-position-from-estree": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.2.tgz",
+      "integrity": "sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position-from-estree/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/unist-util-position/node_modules/@types/unist": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
       "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
     },
+    "node_modules/unist-util-remove-position": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-4.0.2.tgz",
+      "integrity": "sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position/node_modules/@types/unist": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
+      "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",

package.json

@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^1.1.1",
     "@astrojs/react": "^3.0.0",
     "@astrojs/tailwind": "^5.0.0",
     "@tailwindcss/typography": "tailwindcss/typography",
@@ -22,6 +23,7 @@
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.69.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",

src/components/Badge.astro

@@ -1,44 +1,42 @@
 ---
 import foscLogo from "../assets/img/fosc-logo-old.png";
 import { Image } from "astro:assets";
-
 ---
+
 <div id="container" class="h-[30vh]">
-    <Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
+  <Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
 </div>
 
 <style>
-    #logo {
+  #logo {
+    /* Add border styles to create thickness */
+    border: -2px solid #ccc; /* Adjust border width for thickness */
+    border-radius: 50%;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
+  }
 
-      /* Add border styles to create thickness */
-      border: -2px solid #ccc; /* Adjust border width for thickness */
-      border-radius: 50%; 
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
-    }
-  
-    #container {
-      perspective: 400px; /* Add perspective to the container for 3D effect */
-    }
+  #container {
+    perspective: 400px; /* Add perspective to the container for 3D effect */
+  }
 </style>
 
-
 <script>
-// script.ts
-interface LogoElement extends HTMLElement {
+  // script.ts
+  interface LogoElement extends HTMLElement {
     rotationX: number;
     rotationY: number;
-}
+  }
 
-const logo = document.querySelector("#logo") as LogoElement;
-const logoContainer = document.querySelector("#container") as HTMLElement;
+  const logo = document.querySelector("#logo") as LogoElement;
+  const logoContainer = document.querySelector("#container") as HTMLElement;
 
-let sensitivity = 100; // Adjust the sensitivity as needed
-let mouseX = 0;
-let mouseY = 0;
-let targetRotationX = 0;
-let targetRotationY = 0;
+  let sensitivity = 100; // Adjust the sensitivity as needed
+  let mouseX = 0;
+  let mouseY = 0;
+  let targetRotationX = 0;
+  let targetRotationY = 0;
 
-function updateLogoRotation() {
+  function updateLogoRotation() {
     const { left, top, width, height } = logoContainer.getBoundingClientRect();
     const centerX = left + width / 2;
     const centerY = top + height / 2;
@@ -48,9 +46,9 @@ function updateLogoRotation() {
 
     targetRotationX = -dy;
     targetRotationY = dx;
-}
+  }
 
-function animateRotation() {
+  function animateRotation() {
     const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
 
     const dx = targetRotationX - logo.rotationX;
@@ -62,27 +60,25 @@ function animateRotation() {
     logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
 
     requestAnimationFrame(animateRotation);
-}
+  }
 
-document.addEventListener('mousemove', (e: MouseEvent) => {
+  document.addEventListener("mousemove", (e: MouseEvent) => {
     mouseX = e.clientX;
     mouseY = e.clientY;
     updateLogoRotation();
-});
+  });
 
-document.addEventListener('mouseleave', () => {
+  document.addEventListener("mouseleave", () => {
     mouseX = 0;
     mouseY = 0;
     targetRotationX = 0;
     targetRotationY = 0;
     updateLogoRotation();
-});
-
-// Initial rotation values
-logo.rotationX = 0;
-logo.rotationY = 0;
-
-animateRotation();
+  });
 
+  // Initial rotation values
+  logo.rotationX = 0;
+  logo.rotationY = 0;
 
+  animateRotation();
 </script>

src/components/CodeHello.astro

@@ -0,0 +1,8 @@
+<div class="mockup-code">
+    <pre data-prefix="1"><code>#!/usr/bin/env meme</code></pre> 
+    <pre data-prefix="2"><code>FOSC was a hackerspace located at Universidad Politécnica de Cartagena</code></pre> 
+    <pre data-prefix="3">A student association focused on expanding free software and hacker culture<code></code></pre>
+    <pre data-prefix="4"><code>The space is no longer active but ideas don't need spaces</code></pre> 
+    <pre data-prefix="5"><code>Our spirit lives on during hackathons, conventions and more</code></pre> 
+    <pre data-prefix="6"><code>Expect us</code></pre> 
+</div>

src/components/Footer.astro

@@ -0,0 +1,22 @@
+---
+import { Image } from 'astro:assets';
+
+import foscLogo from '../assets/img/fosc-logo-old.png'
+---
+<footer class="footer footer-center p-10 bg-base-100 text-base-content text-primary-content">
+  <aside>
+    <Image class="w-20" src={foscLogo} alt="FOSC Logo"></Image>
+    <p class="font-bold">
+      Free Open Source Club <br/>Stealing your code since 2018
+    </p> 
+    <p>Copyright is for suckers</p>
+    <a class="underline" target="_blank" href="https://git.fosc.space/fosc/new.fosc.space">Steal this website</a>
+  </aside> 
+  <!-- <nav>
+    <div class="grid grid-flow-col gap-4">
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a> 
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a> 
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
+    </div>
+  </nav> -->
+</footer>

src/components/Gallery.astro

@@ -0,0 +1,43 @@
+---
+import { Image } from "astro:assets";
+
+import junction2018 from "../assets/gallery/junction2018.jpg";
+import santi from "../assets/gallery/santi.jpg";
+import kids from "../assets/gallery/kids.jpg";
+import sec from "../assets/gallery/sec.jpg";
+import junction20181 from "../assets/gallery/junction2018-1.jpg";
+import app from "../assets/gallery/app.jpg";
+import bitup from "../assets/gallery/bitup.jpg";
+import soldadura from "../assets/gallery/soldadura.jpg";
+import hacking from "../assets/gallery/hacking.jpg";
+import junction2019_1 from "../assets/gallery/junction2019-1.jpg";
+import pepemod from "../assets/gallery/pepemod.jpg";
+import atresmedia from "../assets/gallery/atresmedia.jpg";
+import junction2019 from "../assets/gallery/junction2019.jpg";
+import printer3d from "../assets/gallery/printer3d.jpg";
+import flp1 from "../assets/gallery/flp1.jpg";
+import soldadura1 from "../assets/gallery/soldadura1.jpg";
+import nn1 from "../assets/gallery/nn1.jpg";
+import fosc from "../assets/gallery/fosc.jpg";
+---
+
+<div class="columns-3xs gap-4">
+  <Image class="mb-4 rounded-lg" src={junction2018} alt="Winners at Junction 2018" />
+  <Image class="mb-4 rounded-lg" src={santi} alt="Explaining MCU glitching at Makers Murcia" />
+  <Image class="mb-4 rounded-lg" src={kids} alt="Showing 3D printing at Semana de la Ciencia" />
+  <Image class="mb-4 rounded-lg" src={sec} alt="More Semana de la Ciencia" />
+  <Image class="mb-4 rounded-lg" src={junction20181} alt="Hacking at Junction 2018" />
+  <Image class="mb-4 rounded-lg" src={app} alt="Speaking for Puertas Violetas app" />
+  <Image class="mb-4 rounded-lg" src={bitup} alt="Giving an ESP32 hacking talk at BITUP 2019" />
+  <Image class="mb-4 rounded-lg" src={soldadura} alt="Learning to solder" />
+  <Image class="mb-4 rounded-lg" src={hacking} alt="Installing Coreboot open firmware into a Thinkpad x230" />
+  <Image class="mb-4 rounded-lg" src={junction2019_1} alt="Posing at Junction 2019" />
+  <Image class="mb-4 rounded-lg" src={pepemod} alt="Soldering Nitrocaster's adapter board to a Thinkpad x230" />
+  <Image class="mb-4 rounded-lg" src={atresmedia} alt="Having fun in Atresmedia" />
+  <Image class="mb-4 rounded-lg" src={junction2019} alt="Hacking at Junction 2019" />
+  <Image class="mb-4 rounded-lg" src={printer3d} alt="3D printer, 3D printing" />
+  <Image class="mb-4 rounded-lg" src={flp1} alt="First FOSC LAN Party" />
+  <Image class="mb-4 rounded-lg" src={soldadura1} alt="Soldering workshop" />
+  <Image class="mb-4 rounded-lg" src={nn1} alt="Giving an open firmware talk at Navaja Negra 2019" />
+  <Image class="mb-4 rounded-lg" src={fosc} alt="Showing some stuff during Cable Amarillo" />
+</div>

src/components/HackerText.astro

@@ -6,7 +6,7 @@ interface Props {
 const { text } = Astro.props;
 ---
 
-<p id="text" data-value={text} class="mt-4 text-center text-7xl font-['Researcher']">{text}</p>
+<p id="text" data-value={text} class="drop-shadow-lg mt-4 text-center text-7xl font-['Researcher']">{text}</p>
 
 <script>
     // Code I stole

src/components/Navbar.astro

@@ -10,16 +10,16 @@ import foscLogo from '../assets/img/fosc-logo-new.png'
     
     <div class="navbar-start">
         <!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->
-        <a class="btn btn-ghost normal-case text-xl font-['Researcher']">FOSC</a>
+        <li><a href="/" class="btn btn-ghost normal-case text-xl font-['Researcher']">FOSC</a></li>
     </div>
 
     <div class="navbar-center">
         <div class="hidden lg:flex">
             <ul class="menu menu-horizontal px-1">
-                <NavItem href="/example" title="Cloud" />
-                <NavItem href="/example" title="Gallery" />
-                <NavItem href="/example" title="Downloads" />
-                <NavItem href="/example" title="Blog" />
+                <NavItem href="https://cloud.fosc.space" title="Cloud" />
+                <NavItem href="https://gallery.fosc.space" title="Gallery" />
+                <NavItem href="https://download.fosc.space" title="Downloads" />
+                <NavItem href="/blog" title="Blog" />
             </ul>
         </div>
 

src/content/blog/test.mdx

@@ -0,0 +1,20 @@
+---
+title: 'Test Post 1'
+description: 'Lorem ipsum dolor sit amet'
+date: 2023-10-08
+cover: '../../assets/gallery/junction2019-1.jpg'
+coverAlt: 'Hacking'
+---
+
+# Title
+
+This is a test
+
+## Subtitle
+
+### I have serious formatting issues
+
+#### I think I need tailwind typography
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/content/blog/test2.mdx

@@ -0,0 +1,20 @@
+---
+title: 'Test Post 2'
+description: 'Lorem ipsum dolor sit amet'
+date: 2023-10-07
+cover: '../../assets/gallery/junction2019-1.jpg'
+coverAlt: 'Hacking'
+---
+
+# Title
+
+This is a test
+
+## Subtitle
+
+### I have serious formatting issues
+
+#### I think I need tailwind typography
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/content/blog/test3.mdx

@@ -0,0 +1,20 @@
+---
+title: 'Test Post 3'
+description: 'Lorem ipsum dolor sit amet'
+date: 2022-08-07
+cover: '../../assets/gallery/junction2019-1.jpg'
+coverAlt: 'Hacking'
+---
+
+# Title
+
+This is a test
+
+## Subtitle
+
+### I have serious formatting issues
+
+#### I think I need tailwind typography
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/content/config.ts

@@ -0,0 +1,16 @@
+import { defineCollection, z } from "astro:content";
+
+const blogCollection = defineCollection({
+  schema: ({ image }) => z.object({
+    title: z.string(),
+    date:  z.date(),
+    cover: image().refine((img) => img.width >= 1080, {
+      message: "Cover image must be at least 1080 pixels wide!",
+    }),
+    coverAlt: z.string(),
+  }),
+});
+
+export const collections = {
+  blog: blogCollection,
+};

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/example.astro

@@ -1,47 +0,0 @@
----
-interface Props {
-  title: string;
-}
-
-const { title } = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-
-  </head>
-
-  <body>
-    <slot />
-  </body>
-</html>
-
-<style is:global>
-  :root {
-    --accent: 136, 58, 234;
-    --accent-light: 224, 204, 250;
-    --accent-dark: 49, 10, 101;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      rgb(var(--accent-light)) 30%,
-      white 60%
-    );
-  }
-  html {
-    font-family: system-ui, sans-serif;
-    background: #913117;
-    background-size: 224px;
-  }
-  code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-  }
-</style>

src/layouts/new.astro

@@ -0,0 +1,79 @@
+---
+import "@/styles/globals.css";
+
+import Navbar from "../components/Navbar.astro";
+import Footer from "../components/Footer.astro";
+
+import backgroundImage1 from "../assets/gallery/coreboot2.jpg";
+---
+
+<!doctype html>
+<html lang="en">
+  <!-- Ah shit, here we go again. -->
+
+  <head>
+    <meta charset="utf-8" />
+    <title>FOSC</title>
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- Theme manager -->
+    <script is:inline>
+      // ☝️ This script prevent the FART effect.
+      if (localStorage.getItem("theme") === null) {
+        document.documentElement.setAttribute("data-theme", "black");
+      } else
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("theme")
+        );
+      // "theme" LocalStorage value is set by the package to remember user preference.
+      // The value is checked and applyed before rendering anything.
+    </script>
+    <script>
+      import { themeChange } from "theme-change";
+      themeChange();
+      // 👆 you could import the CDN directly instead of these two lines
+    </script>
+  </head>
+
+  <body>
+    
+    <!-- Apply filters to background -->
+    <div class="background bg-fixed bg-cover bg-center bg-repeat-y">
+      <div class="background-filter"></div>
+    </div>
+
+    <!-- Vertical screen space is initially shared by navbar and splash content, further content can be obtained by scrolling -->
+    <!-- This is our true body for all intents and purposes -->
+    <!-- Placing content outside this div causes blurry useless things -->
+    <div class="flex flex-col h-screen">
+      <Navbar />
+
+      <div class="container mx-auto">
+        <slot />
+      </div>
+
+      <Footer />
+    </div>
+  </body>
+</html>
+
+<style>
+  .background {
+    background-image: url(../assets/gallery/coreboot2.jpg);
+    background-position: bottom;
+    height: 100vh;
+    width: 100%;
+    position: fixed; /* Ensure the background div stays in place */
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  .background-filter {
+    background: hsl(var(--b1));
+    opacity: 50%;
+    backdrop-filter: blur(8px); 
+    height: 100vh;
+
+  }
+</style>

src/pages/blog/[...slug].astro

@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import Layout from '../../layouts/new.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('blog');
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'blog'>;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<Layout  {...post.data}>
+    <Content></Content>
+</Layout>

src/pages/blog/index.astro

@@ -0,0 +1,33 @@
+---
+import "@/styles/globals.css";
+import { Image } from "astro:assets";
+
+import Layout from "../../layouts/new.astro";
+
+// Get blogposts from content folder
+import { getCollection } from "astro:content";
+const posts = (await getCollection("blog")).sort(
+  (a, b) => a.data.date.valueOf() + b.data.date.valueOf()
+);
+---
+
+<Layout>
+  <div class="text-center my-10">
+    <p>FOSC's Blog</p>
+  </div>
+
+  <div class="columns-3xs gap-4">
+    {
+      posts.map((post) => (
+        <div class="max-w-xs mx-4">
+          <a href={`/blog/${post.slug}/`}>
+            <Image class="w-full h-auto" src={post.data.cover} alt={post.data.coverAlt} />
+            <div class="p-4">
+              <h4 class="text-xl font-semibold mb-2">{post.data.title}</h4>
+            </div>
+          </a>
+        </div>
+      ))
+    }
+  </div>
+</Layout>

src/pages/index.astro

@@ -1,75 +1,32 @@
 ---
 import "@/styles/globals.css";
 
-import Navbar from "../components/Navbar.astro";
-import HackerText from "../components/HackerText.astro";
-import Badge from "../components/Badge.astro"
+import Layout from "../layouts/new.astro";
 
-// Image imports
-import { Image } from "astro:assets";
-import foscLogo from "../assets/img/fosc-logo-old.png";
+import HackerText from "../components/HackerText.astro";
+import Badge from "../components/Badge.astro";
+import Gallery from "../components/Gallery.astro";
+import CodeHello from "../components/CodeHello.astro";
 ---
 
-<!doctype html>
-<html lang="en">
-  <!-- Ah shit, here we go again. -->
-
-  <head>
-    <meta charset="utf-8" />
-    <title>FOSC</title>
-    <meta name="generator" content={Astro.generator} />
-
-    <!-- Theme manager -->
-    <script is:inline>
-      // ☝️ This script prevent the FART effect.
-      if (localStorage.getItem("theme") === null) {
-        document.documentElement.setAttribute("data-theme", "light");
-      } else
-        document.documentElement.setAttribute(
-          "data-theme",
-          localStorage.getItem("theme")
-        );
-      // "theme" LocalStorage value is set by the package to remember user preference.
-      // The value is checked and applyed before rendering anything.
-    </script>
-    <script>
-      import { themeChange } from 'theme-change';
-      themeChange();
-      // 👆 you could import the CDN directly instead of these two lines
-    </script>
-  </head>
-
-  <body class="bg-fixed bg-cover bg-center bg-repeat-y">
-
-    <!-- Vertical screen space is initially shared by navbar and splash content, further content can be obtained by scrolling -->
-    <div class="flex flex-col h-screen">
-      <Navbar />
-
-      <div class="backdrop-blur object-cover flex-grow">
-
-        <!-- Floating center items -->
-        <div class="container-sm mx-auto px-4 flex flex-col justify-center items-center">
-          <div class="mt-[10vh]">
-            <Badge></Badge>
-          </div>
-          <div class="mt-[5vh]">
-            <HackerText text="FOSC"></HackerText>
-          </div>
-        </div>
-
-        <div class="container mx-auto flex justify-center items-center">
-
-        </div>
-
-      </div>
+<Layout>
+  <!-- Logo + brand -->
+  <div class="container mx-auto flex flex-col justify-center items-center">
+    <div class="mt-[10vh]">
+      <Badge />
     </div>
-  </body>
-</html>
+    <div class="mt-[5vh]">
+      <HackerText text="FOSC" />
+    </div>
+  </div>
 
-<style>
-  /* body {
-    background-color: black !important;
-    background-image: url(../img/coreboot2.webp);
-  } */
-</style>
+  <!-- Wall of pictures -->
+  <div class="container py-20 mx-auto">
+    <Gallery />
+  </div>
 
+  <!-- Text description -->
+  <div class="container py-20 mx-auto">
+    <CodeHello />
+  </div>
+</Layout>

tailwind.config.cjs

@@ -2,7 +2,10 @@ const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  plugins: [require("daisyui")],
+  plugins: [
+    require("@tailwindcss/typography"),
+    require("daisyui")
+  ],
   daisyui: {
     themes: [
       "light",