a lot of work done, a lot of work to do :P

frontend/astro.config.js

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

frontend/package.json

@@ -13,6 +13,7 @@
     "format:check": "prettier . --check --config ./.prettierrc"
   },
   "dependencies": {
+    "@astrojs/mdx": "^1.1.5",
     "@astrojs/tailwind": "^5.0.2",
     "@sanity/client": "^6.9.1",
     "@sanity/image-url": "^1.0.2",

frontend/pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@astrojs/mdx':
+    specifier: ^1.1.5
+    version: 1.1.5(astro@3.6.4)
   '@astrojs/tailwind':
     specifier: ^5.0.2
     version: 5.0.2(astro@3.6.4)(tailwindcss@3.3.5)
@@ -84,6 +87,32 @@ packages:
       - supports-color
     dev: false
 
+  /@astrojs/mdx@1.1.5(astro@3.6.4):
+    resolution: {integrity: sha512-4bveyB1Lb1vWo2kdHJjQYoCytWlrIjAxHATHUTuYnBPmdPjsfy9wuCnb9rozwyyarDABx87CzG5gotBNYd+dVA==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      astro: ^3.0.0
+    dependencies:
+      '@astrojs/markdown-remark': 3.5.0(astro@3.6.4)
+      '@mdx-js/mdx': 2.3.0
+      acorn: 8.11.2
+      astro: 3.6.4
+      es-module-lexer: 1.4.1
+      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.5
+      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
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@astrojs/prism@3.0.0:
     resolution: {integrity: sha512-g61lZupWq1bYbcBnYZqdjndShr/J3l/oFobBKPA3+qMat146zce3nz2kdO4giGbhYDt4gYdhmoBz0vZJ4sIurQ==}
     engines: {node: '>=18.14.1'}
@@ -769,6 +798,30 @@ packages:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /@mdx-js/mdx@2.3.0:
+    resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      '@types/mdx': 2.0.10
+      estree-util-build-jsx: 2.2.2
+      estree-util-is-identifier-name: 2.1.0
+      estree-util-to-js: 1.2.0
+      estree-walker: 3.0.3
+      hast-util-to-estree: 2.3.3
+      markdown-extensions: 1.1.1
+      periscopic: 3.1.0
+      remark-mdx: 2.3.0
+      remark-parse: 10.0.2
+      remark-rehype: 10.1.0
+      unified: 10.1.2
+      unist-util-position-from-estree: 1.1.2
+      unist-util-stringify-position: 3.0.3
+      unist-util-visit: 4.1.2
+      vfile: 5.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -824,6 +877,12 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: false
 
+  /@types/acorn@4.0.6:
+    resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: false
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
@@ -859,6 +918,12 @@ packages:
       '@types/ms': 0.7.34
     dev: false
 
+  /@types/estree-jsx@1.0.3:
+    resolution: {integrity: sha512-pvQ+TKeRHeiUGRhvYwRrQ/ISnohKkSJR14fT2yqyZ4e9K5vqc7hrtY2Y1Dw0ZwAzQ6DQsxsaCUuSIIi8v0Cq6w==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: false
+
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: false
@@ -895,6 +960,10 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/mdx@2.0.10:
+    resolution: {integrity: sha512-Rllzc5KHk0Al5/WANwgSPl1/CwjqCy+AZrGd78zuK+jO9aDM6ffblZ+zIjgPNAaEBmlO0RYDvLNh7wD0zKVgEg==}
+    dev: false
+
   /@types/ms@0.7.34:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: false
@@ -925,6 +994,14 @@ packages:
     resolution: {integrity: sha512-5b0PkOJsFBX5alChuIO3qpkt5vIZBevzLPhUQ1UP8UzVjL3F1VllnZxp/thfD8R5ol7D7WHkgZHIjdUBX4tDpQ==}
     dev: false
 
+  /acorn-jsx@5.3.2(acorn@8.11.2):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.11.2
+    dev: false
+
   /acorn@8.11.2:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
@@ -986,6 +1063,11 @@ packages:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
     dev: false
 
+  /astring@1.8.6:
+    resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
+    hasBin: true
+    dev: false
+
   /astro-portabletext@0.9.6:
     resolution: {integrity: sha512-v8YKRgjCpaxr94NefXRsH5ti9YoXqCrYah46epdJ4AdwtvIiLZA8vONFQjk5Y2cJ2UEEeGd+/8lo+tWmlo3aPw==}
     dependencies:
@@ -1218,6 +1300,10 @@ packages:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
     dev: false
 
+  /character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+    dev: false
+
   /chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -1572,6 +1658,39 @@ packages:
     hasBin: true
     dev: false
 
+  /estree-util-attach-comments@2.1.1:
+    resolution: {integrity: sha512-+5Ba/xGGS6mnwFbXIuQiDPTbuTxuMCooq3arVv7gPZtYpjp+VXH/NkHAP35OOefPhNG/UGqU3vt/LTABwcHX0w==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: false
+
+  /estree-util-build-jsx@2.2.2:
+    resolution: {integrity: sha512-m56vOXcOBuaF+Igpb9OPAy7f9w9OIkb5yhjsZuaPm7HoGi4oTOQi0h2+yZ+AtKklYFZ+rPC4n0wYCJCEU1ONqg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      estree-util-is-identifier-name: 2.1.0
+      estree-walker: 3.0.3
+    dev: false
+
+  /estree-util-is-identifier-name@2.1.0:
+    resolution: {integrity: sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==}
+    dev: false
+
+  /estree-util-to-js@1.2.0:
+    resolution: {integrity: sha512-IzU74r1PK5IMMGZXUVZbmiu4A1uhiPgW5hm1GjcOfr4ZzHaMPpLNJjR7HjXiIOzi25nZDrgFTobHTkV5Q6ITjA==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      astring: 1.8.6
+      source-map: 0.7.4
+    dev: false
+
+  /estree-util-visit@1.2.1:
+    resolution: {integrity: sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      '@types/unist': 2.0.10
+    dev: false
+
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
@@ -1881,6 +2000,28 @@ packages:
       zwitch: 2.0.4
     dev: false
 
+  /hast-util-to-estree@2.3.3:
+    resolution: {integrity: sha512-ihhPIUPxN0v0w6M5+IiAZZrn0LH2uZomeWwhn7uP7avZC6TE7lIiEh2yBMPr5+zi1aUCXq6VoYRgs2Bw9xmycQ==}
+    dependencies:
+      '@types/estree': 1.0.5
+      '@types/estree-jsx': 1.0.3
+      '@types/hast': 2.3.8
+      '@types/unist': 2.0.10
+      comma-separated-tokens: 2.0.3
+      estree-util-attach-comments: 2.1.1
+      estree-util-is-identifier-name: 2.1.0
+      hast-util-whitespace: 2.0.1
+      mdast-util-mdx-expression: 1.3.2
+      mdast-util-mdxjs-esm: 1.3.1
+      property-information: 6.4.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 0.4.4
+      unist-util-position: 4.0.4
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /hast-util-to-html@8.0.4:
     resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==}
     dependencies:
@@ -2018,6 +2159,10 @@ packages:
     dev: false
     optional: true
 
+  /inline-style-parser@0.1.1:
+    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
+    dev: false
+
   /into-stream@6.0.0:
     resolution: {integrity: sha512-XHbaOAvP+uFKUFsOgoNPRjLkwB+I22JFPFe5OjTkQ0nwgj6+pSjb4NmB6VMxaPshLiOf+zcpOCBQuLwC1KHhZA==}
     engines: {node: '>=10'}
@@ -2026,6 +2171,17 @@ packages:
       p-is-promise: 3.0.0
     dev: false
 
+  /is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+    dev: false
+
+  /is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+    dev: false
+
   /is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
     requiresBuild: true
@@ -2048,6 +2204,10 @@ packages:
     dependencies:
       hasown: 2.0.0
 
+  /is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+    dev: false
+
   /is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2074,6 +2234,10 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+    dev: false
+
   /is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
     engines: {node: '>=14.16'}
@@ -2101,6 +2265,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-reference@3.0.2:
+    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: false
+
   /is-retry-allowed@2.2.0:
     resolution: {integrity: sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==}
     engines: {node: '>=10'}
@@ -2257,6 +2427,11 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: false
 
+  /markdown-extensions@1.1.1:
+    resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: false
@@ -2361,6 +2536,61 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-mdx-expression@1.3.2:
+    resolution: {integrity: sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      '@types/hast': 2.3.8
+      '@types/mdast': 3.0.15
+      mdast-util-from-markdown: 1.3.1
+      mdast-util-to-markdown: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-jsx@2.1.4:
+    resolution: {integrity: sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      '@types/hast': 2.3.8
+      '@types/mdast': 3.0.15
+      '@types/unist': 2.0.10
+      ccount: 2.0.1
+      mdast-util-from-markdown: 1.3.1
+      mdast-util-to-markdown: 1.5.0
+      parse-entities: 4.0.1
+      stringify-entities: 4.0.3
+      unist-util-remove-position: 4.0.2
+      unist-util-stringify-position: 3.0.3
+      vfile-message: 3.1.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx@2.0.1:
+    resolution: {integrity: sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw==}
+    dependencies:
+      mdast-util-from-markdown: 1.3.1
+      mdast-util-mdx-expression: 1.3.2
+      mdast-util-mdx-jsx: 2.1.4
+      mdast-util-mdxjs-esm: 1.3.1
+      mdast-util-to-markdown: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdxjs-esm@1.3.1:
+    resolution: {integrity: sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==}
+    dependencies:
+      '@types/estree-jsx': 1.0.3
+      '@types/hast': 2.3.8
+      '@types/mdast': 3.0.15
+      mdast-util-from-markdown: 1.3.1
+      mdast-util-to-markdown: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-phrasing@3.0.1:
     resolution: {integrity: sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==}
     dependencies:
@@ -2514,6 +2744,67 @@ packages:
       micromark-util-types: 1.1.0
     dev: false
 
+  /micromark-extension-mdx-expression@1.0.8:
+    resolution: {integrity: sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==}
+    dependencies:
+      '@types/estree': 1.0.5
+      micromark-factory-mdx-expression: 1.0.9
+      micromark-factory-space: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-events-to-acorn: 1.2.3
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-mdx-jsx@1.0.5:
+    resolution: {integrity: sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA==}
+    dependencies:
+      '@types/acorn': 4.0.6
+      '@types/estree': 1.0.5
+      estree-util-is-identifier-name: 2.1.0
+      micromark-factory-mdx-expression: 1.0.9
+      micromark-factory-space: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+      vfile-message: 3.1.4
+    dev: false
+
+  /micromark-extension-mdx-md@1.0.1:
+    resolution: {integrity: sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA==}
+    dependencies:
+      micromark-util-types: 1.1.0
+    dev: false
+
+  /micromark-extension-mdxjs-esm@1.0.5:
+    resolution: {integrity: sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w==}
+    dependencies:
+      '@types/estree': 1.0.5
+      micromark-core-commonmark: 1.1.0
+      micromark-util-character: 1.2.0
+      micromark-util-events-to-acorn: 1.2.3
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      unist-util-position-from-estree: 1.1.2
+      uvu: 0.5.6
+      vfile-message: 3.1.4
+    dev: false
+
+  /micromark-extension-mdxjs@1.0.1:
+    resolution: {integrity: sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==}
+    dependencies:
+      acorn: 8.11.2
+      acorn-jsx: 5.3.2(acorn@8.11.2)
+      micromark-extension-mdx-expression: 1.0.8
+      micromark-extension-mdx-jsx: 1.0.5
+      micromark-extension-mdx-md: 1.0.1
+      micromark-extension-mdxjs-esm: 1.0.5
+      micromark-util-combine-extensions: 1.1.0
+      micromark-util-types: 1.1.0
+    dev: false
+
   /micromark-factory-destination@1.1.0:
     resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
     dependencies:
@@ -2531,6 +2822,19 @@ packages:
       uvu: 0.5.6
     dev: false
 
+  /micromark-factory-mdx-expression@1.0.9:
+    resolution: {integrity: sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA==}
+    dependencies:
+      '@types/estree': 1.0.5
+      micromark-util-character: 1.2.0
+      micromark-util-events-to-acorn: 1.2.3
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      unist-util-position-from-estree: 1.1.2
+      uvu: 0.5.6
+      vfile-message: 3.1.4
+    dev: false
+
   /micromark-factory-space@1.1.0:
     resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
     dependencies:
@@ -2614,6 +2918,19 @@ packages:
     resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
     dev: false
 
+  /micromark-util-events-to-acorn@1.2.3:
+    resolution: {integrity: sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w==}
+    dependencies:
+      '@types/acorn': 4.0.6
+      '@types/estree': 1.0.5
+      '@types/unist': 2.0.10
+      estree-util-visit: 1.2.1
+      micromark-util-symbol: 1.1.0
+      micromark-util-types: 1.1.0
+      uvu: 0.5.6
+      vfile-message: 3.1.4
+    dev: false
+
   /micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
     dev: false
@@ -2926,6 +3243,19 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /parse-entities@4.0.1:
+    resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
+    dependencies:
+      '@types/unist': 2.0.10
+      character-entities: 2.0.2
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.0.2
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+    dev: false
+
   /parse-headers@2.0.5:
     resolution: {integrity: sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==}
     dev: false
@@ -2974,6 +3304,14 @@ packages:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
     dev: false
 
+  /periscopic@3.1.0:
+    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 3.0.3
+      is-reference: 3.0.2
+    dev: false
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -3240,6 +3578,15 @@ packages:
       - supports-color
     dev: false
 
+  /remark-mdx@2.3.0:
+    resolution: {integrity: sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==}
+    dependencies:
+      mdast-util-mdx: 2.0.1
+      micromark-extension-mdxjs: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /remark-parse@10.0.2:
     resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==}
     dependencies:
@@ -3465,6 +3812,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: false
+
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
@@ -3583,6 +3935,12 @@ packages:
     dev: false
     optional: true
 
+  /style-to-object@0.4.4:
+    resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
+    dependencies:
+      inline-style-parser: 0.1.1
+    dev: false
+
   /sucrase@3.34.0:
     resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
     engines: {node: '>=8'}
@@ -3786,6 +4144,12 @@ packages:
       array-iterate: 2.0.1
     dev: false
 
+  /unist-util-position-from-estree@1.1.2:
+    resolution: {integrity: sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==}
+    dependencies:
+      '@types/unist': 2.0.10
+    dev: false
+
   /unist-util-position@4.0.4:
     resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
     dependencies:
@@ -3798,6 +4162,13 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /unist-util-remove-position@4.0.2:
+    resolution: {integrity: sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ==}
+    dependencies:
+      '@types/unist': 2.0.10
+      unist-util-visit: 4.1.2
+    dev: false
+
   /unist-util-stringify-position@3.0.3:
     resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
     dependencies:

frontend/src/components/BlogPostMetadata.astro

@@ -1,15 +1,20 @@
 ---
-import type { ImageObject } from '../lib/cms/types';
-import urlFor from '../lib/cms/urlFor';
+import type { CollectionEntry } from 'astro:content';
+import { getImage } from 'astro:assets';
 
-export interface Props {
-  description: string;
-  image: ImageObject;
-  twitterCardType: 'summary' | 'summary_large_image' | 'player' | 'app';
-  title: string;
-}
+export type Props = CollectionEntry<'blog'>['data']['linkPreview'];
 
-const { description, image, twitterCardType, title } = Astro.props;
+const { description, image, title } = Astro.props;
+
+const imageUrl = (
+  await getImage({
+    src: import.meta
+      .glob('/src/assets/blog/*.{jpeg,jpg,png,gif,webp}')
+      [image.path](),
+    width: 2,
+    height: 3,
+  })
+).src;
 ---
 
 <meta name="og:title" content={title} />
@@ -17,9 +22,6 @@ const { description, image, twitterCardType, title } = Astro.props;
 <meta name="description" content={description} />
 <meta name="og:description" content={description} />
 <meta name="twitter:description" content={description} />
-<meta name="og:image" content={urlFor(image).width(1200).height(630).url()} />
-<meta
-  name="twitter:image"
-  content={urlFor(image).width(1200).height(630).url()}
-/>
-<meta name="twitter:card" content={twitterCardType} />
+<meta name="og:image" content={imageUrl} />
+<meta name="og:image:alt" content={image.altText} />
+<!-- I exclude Twitter meta tags on purpose :) I miss Twitter -->

frontend/src/components/mdx/BlogPostSubtitle.astro

@@ -0,0 +1,3 @@
+<h2 class="mb-2 text-green-800 text-justify sm:text-lg">
+  <slot />
+</h2>

frontend/src/components/mdx/blogPostComponents.ts

@@ -0,0 +1,32 @@
+import ShowableFigure from './components/ShowableFigure.astro';
+import NumberListItem from './components/NumberListItem.astro';
+import InlineLink from './components/InlineLink.astro';
+import InlineCode from './components/InlineCode.astro';
+import BulletList from './components/BulletList.astro';
+import NumberList from './components/NumberList.astro';
+import BulletListItem from './components/BulletListItem.astro';
+import Heading1 from './components/Heading1.astro';
+import Heading2 from './components/Heading2.astro';
+import Heading3 from './components/Heading3.astro';
+import Heading4 from './components/Heading4.astro';
+import Heading5 from './components/Heading5.astro';
+import Heading6 from './components/Heading6.astro';
+import Paragraph from './components/Paragraph.astro';
+import FootnoteMark from './components/FootnoteMark.astro';
+
+const components = {
+  img: ShowableFigure,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  h5: Heading5,
+  h6: Heading6,
+  p: Paragraph,
+  code: InlineCode,
+  a: InlineLink,
+  ul: BulletList,
+  ol: NumberList,
+};
+
+export default components;

frontend/src/components/mdx/components/BulletList.astro

@@ -0,0 +1,3 @@
+<ul class="list-disc ps-2 list-inside">
+  <slot />
+</ul>

frontend/src/components/mdx/components/InlineLink.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type Props = HTMLAttributes<'a'>;
+---
+
+<a
+  class:list={[
+    'text-primary-800 underline transition-colors duration-100 hover:text-primary-700',
+    Astro.props.class,
+  ]}
+  {...Astro.props}><slot /></a
+>

frontend/src/components/mdx/components/NumberList.astro

@@ -0,0 +1,3 @@
+<ol class="list-decimal ps-2 list-inside">
+  <slot />
+</ol>

frontend/src/components/portableText/BlogPostContent.astro

@@ -1,61 +0,0 @@
----
-import { PortableText } from 'astro-portabletext';
-import type { SomePortableTextComponents } from '../../../node_modules/astro-portabletext/lib/types';
-import type { PortableTextBlock } from '@portabletext/types';
-
-import ShowableFigure from './components/ShowableFigure.astro';
-import NumberListItem from './components/NumberListItem.astro';
-import InlineLink from './components/InlineLink.astro';
-import InlineCode from './components/InlineCode.astro';
-import BulletList from './components/BulletList.astro';
-import NumberList from './components/NumberList.astro';
-import BulletListItem from './components/BulletListItem.astro';
-import Heading1 from './components/Heading1.astro';
-import Heading2 from './components/Heading2.astro';
-import Heading3 from './components/Heading3.astro';
-import Heading4 from './components/Heading4.astro';
-import Heading5 from './components/Heading5.astro';
-import Heading6 from './components/Heading6.astro';
-import Paragraph from './components/Paragraph.astro';
-import FootnoteMark from './components/FootnoteMark.astro';
-import ReferenceMark from './components/ReferenceMark.astro';
-
-export interface Props {
-  content: PortableTextBlock[];
-}
-
-const components: SomePortableTextComponents = {
-  type: {
-    image: ShowableFigure,
-  },
-  block: {
-    h1: Heading1,
-    h2: Heading2,
-    h3: Heading3,
-    h4: Heading4,
-    h5: Heading5,
-    h6: Heading6,
-    normal: Paragraph,
-  },
-  mark: {
-    code: InlineCode,
-    link: InlineLink,
-    footnote: FootnoteMark,
-    referenceToSource: ReferenceMark,
-  },
-  list: {
-    bullet: BulletList,
-    number: NumberList,
-  },
-  listItem: {
-    bullet: BulletListItem,
-    number: NumberListItem,
-  },
-};
-
-const { content } = Astro.props;
----
-
-<div class="text-justify">
-  <PortableText components={components} value={content} />
-</div>

frontend/src/components/portableText/BlogPostSubtitle.astro

@@ -1,22 +0,0 @@
----
-import { PortableText } from 'astro-portabletext';
-import type { PortableTextBlock } from '@portabletext/types';
-
-import Paragraph from './components/Paragraph.astro';
-
-export interface Props {
-  content: PortableTextBlock[];
-}
-
-const components = {
-  block: {
-    normal: Paragraph,
-  },
-};
-
-const { content } = Astro.props;
----
-
-<h2 class="mb-2 text-green-800 text-justify sm:text-lg">
-  <PortableText components={components} value={content} />
-</h2>

frontend/src/components/portableText/components/BulletList.astro

@@ -1,3 +0,0 @@
-<ul class="list-disc ps-2 list-inside [counter-reset:list-counter]">
-  <slot />
-</ul>

frontend/src/components/portableText/components/InlineLink.astro

@@ -1,14 +0,0 @@
----
-import type { PortableTextLink } from '@portabletext/types';
-
-export interface Props {
-  node: { markDef: PortableTextLink };
-}
-
-const { node: value } = Astro.props;
----
-
-<a
-  class="text-primary-800 break-words underline hover:text-primary-700"
-  href={value.markDef.href}><slot /></a
->

frontend/src/components/portableText/components/NumberList.astro

@@ -1,3 +0,0 @@
-<ol class="[counter-reset:list-counter] ps-2 list-inside">
-  <slot />
-</ol>

frontend/src/components/portableText/components/ReferenceMark.astro

@@ -1,27 +0,0 @@
----
-import InlineLink from '../../InlineLink.astro';
-
-export interface ReferenceMark {
-  linkToReference: string;
-  authors: string;
-  dateOfPublication: string;
-  notes: string;
-  title: string;
-}
-
-export interface Props {
-  node: { markDef: ReferenceMark };
-}
-
-const ref = Astro.props.node.markDef;
----
-
-<slot /><InlineLink
-  class="ml-1 text-sm no-underline"
-  href={ref.linkToReference}
-  title={ref.title}
->
-  [{ref.authors}{ref.dateOfPublication ? `, ${ref.dateOfPublication}` : ''}{
-    ref.notes ? ` - ${ref.notes}` : ''
-  }]
-</InlineLink>

frontend/src/content/blog/pt/somos-uma-familia-pobre.mdx

@@ -0,0 +1,29 @@
+---
+title: '“Somos uma família pobre”: como o caso da Nobre é um sintoma da doença capitalista'
+subtitle: >
+  Depois das manifestações e greves dos trabalhadores e trabalhadoras da Nobre Alimentação,
+  fica mais uma vez claro que a máquina de gerar lucros que é o capitalismo não cumpre
+  o seu propósito na sociedade.
+slug: somos-uma-familia-pobre-a-doenca-capitalista
+summary: >
+  No dia 1 de maio, uma análise das greves e manifestações das trabalhadoras da
+  Nobre e como o sistema capitalista provoca esta situação de forma permanente.
+publishDate: 2023-05-01
+linkPreview:
+  image:
+    path: /src/assets/blog/somos-uma-familia-pobre_link-preview-image.jpeg
+    altText: >
+      Uma foto de uma manifestação, mas que só mostra as bandeiras que as pessoas
+      seguram sobre as suas cabeça. A bandeira no centro é roxa, da Extinction Rebellion.
+      Também há um punho vermelho socialista, de cartão. No fundo, vê-se um prédio alto,
+      desfocado.
+---
+
+Recentemente, com grande taxa de adesão, as trabalhadoras e trabalhadores da Nobre Alimentação - conhecida pelo fabrico de enchidos - [organizaram greves e manifestações](https://sicnoticias.pt/pais/2023-04-28-Uma-familia-pobre-trabalhadores-da-Nobre-em-greve-9e790445), utilizando essas ferramentas fundamentais para expressar o seu profundo descontentamento em relação à empresa.
+Lutam por salários mais altos, carga horária mais baixa e mais dias de férias, para além de um sistema de progressão nas carreiras que, até agora, parece ser completamente inexistente.
+Nas manifestações, a falar à comunicação social, uma das funcionárias afirma que a empresa criou um lema interno que usava para comunicar às pessoas que lá trabalham: “Somos uma família Nobre”.
+As manifestantes aproveitaram para virar este lema do avesso e trazê-lo para a realidade que conhecem: “Somos uma família pobre”.
+
+# Something
+
+Go there [there](#something)

frontend/src/content/config.ts

@@ -6,10 +6,31 @@ const libraryCollection = defineCollection({
     title: z.string(),
     checkedOut: z.boolean(),
     link: z.string().url(),
-    description: z.string().optional(),
+    description: z.ostring(),
+  }),
+});
+
+const blogCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    subtitle: z.string(),
+    summary: z.string(),
+    publishDate: z.date(),
+    linkPreview: z.object({
+      // If not defined, will take the value of `title`
+      title: z.ostring(),
+      // If not defined, will take the value of `summary`
+      description: z.ostring(),
+      image: z.object({
+        path: z.string(),
+        altText: z.string(),
+      }),
+    }),
   }),
 });
 
 export const collections = {
   library: libraryCollection,
+  blog: blogCollection,
 };

frontend/src/pages/blog/index.astro

@@ -1,10 +1,10 @@
 ---
-import client from "../../lib/cms/client";
-import { forBlogPage } from "../../lib/cms/queries/blogPosts";
-import ButtonLink from "../../components/ButtonLink.astro";
-import CardLink from "../../components/CardLink.astro";
-import PageTitle from "../../components/PageTitle.astro";
-import Layout from "../../layouts/Layout.astro";
+import client from '../../lib/cms/client';
+import { forBlogPage } from '../../lib/cms/queries/blogPosts';
+import ButtonLink from '../../components/ButtonLink.astro';
+import CardLink from '../../components/CardLink.astro';
+import PageTitle from '../../components/PageTitle.astro';
+import Layout from '../../layouts/Layout.astro';
 
 const posts: {
   title: string;
@@ -12,7 +12,7 @@ const posts: {
   summary: string;
   slug: string;
 }[] = await client.fetch(forBlogPage, {
-  lang: "en_EN",
+  lang: 'en_EN',
 });
 ---
 
@@ -25,7 +25,7 @@ const posts: {
     {
       posts.map(({ title, slug, publishDate, summary }) => (
         <CardLink link={`/blog/${slug}`}>
-          <article class="flex flex-col">
+          <article class="flex flex-col gap-2">
             <span class="text-lg sm:text-xl font-medium break-words text-primary-700">
               {title}
             </span>

frontend/src/pages/blogue/[slug]/index.astro

@@ -1,58 +1,54 @@
 ---
-import type { PortableTextBlock } from '@portabletext/types';
-import client from '../../../lib/cms/client';
-import { forBlogPostPage } from '../../../lib/cms/queries/blogPosts';
-import BlogPostContent from '../../../components/portableText/BlogPostContent.astro';
-import BlogPostSubtitle from '../../../components/portableText/BlogPostSubtitle.astro';
+import BlogPostSubtitle from '../../../components/mdx/BlogPostSubtitle.astro';
 import ButtonLink from '../../../components/ButtonLink.astro';
 import PageTitle from '../../../components/PageTitle.astro';
 import Layout from '../../../layouts/Layout.astro';
 import BlogPostMetadata from '../../../components/BlogPostMetadata.astro';
-import type { ImageObject } from '../../../lib/cms/types';
 import BlogPostFootnotes from '../../../components/BlogPostFootnotes.astro';
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import blogPostComponents from '../../../components/mdx/blogPostComponents';
 
 export interface Props {
-  title: string;
-  subtitle: PortableTextBlock[];
-  content: PortableTextBlock[];
-  publishDate: string;
-  headerImage: ImageObject;
-  summary: string;
-  readTime: string;
-  twitterCardType: 'summary' | 'summary_large_image' | 'player' | 'app';
-  linkPreviewDescription: string;
-  linkPreviewImage: ImageObject;
+  blogPost: CollectionEntry<'blog'>;
 }
 
 export async function getStaticPaths() {
-  const posts: (Props & {
-    slug: string;
-  })[] = await client.fetch(forBlogPostPage, {
-    lang: 'pt_PT',
-  });
+  const posts = await getCollection('blog', ({ id }) => id.startsWith('pt'));
 
   return posts.map(({ slug, ...blogPost }) => {
     return {
       params: { slug },
-      props: blogPost,
+      props: { blogPost },
     };
   });
 }
 
-const {
-  title,
-  subtitle,
-  content,
-  publishDate,
-  headerImage,
-  summary,
-  readTime,
-  twitterCardType,
-  linkPreviewDescription,
-  linkPreviewImage,
-} = Astro.props;
-
+const { blogPost } = Astro.props;
 const { slug } = Astro.params;
+
+const {
+  data: {
+    title,
+    subtitle,
+    summary,
+    publishDate,
+    linkPreview: {
+      title: linkPreviewTitle,
+      description: linkPreviewDescription,
+      image: linkPreviewImage,
+    },
+  },
+  body,
+} = blogPost;
+
+const readTime = Math.ceil(body.length / 5 / 180);
+
+const { Content, headings } = await blogPost.render();
+
+const formattedPublishDate = publishDate.toLocaleDateString('pt', {
+  dateStyle: 'short',
+});
 ---
 
 <Layout
@@ -63,24 +59,25 @@ const { slug } = Astro.params;
 >
   <BlogPostMetadata
     slot="metadata"
-    title={title}
+    title={linkPreviewTitle ?? title}
     description={linkPreviewDescription ?? summary}
-    image={linkPreviewImage ?? headerImage}
-    twitterCardType={twitterCardType}
+    image={linkPreviewImage}
   />
   <article class="max-w-prose m-auto pt-8">
     <header class="mb-5">
       <PageTitle class="mb-2 break-words">{title}</PageTitle>
-      <BlogPostSubtitle content={subtitle} />
+      <BlogPostSubtitle>{subtitle}</BlogPostSubtitle>
       <span class="text-lg sm:text-xl">
-        <time datetime={publishDate}>{publishDate}</time>
+        <time datetime={formattedPublishDate}>{formattedPublishDate}</time>
          &bull;
-        {readTime}
+        {readTime} min
       </span>
     </header>
-    <BlogPostContent content={content} />
+    <div class="text-justify">
+      <Content components={blogPostComponents} />
+    </div>
     <hr class="my-5 border-t border-primary-700" />
-    <BlogPostFootnotes blogPostContent={content} />
+    <!-- <BlogPostFootnotes blogPostContent={content} /> -->
   </article>
   <Fragment slot="footer">
     <nav class="flex gap-4">

frontend/src/pages/blogue/index.astro

@@ -1,19 +1,12 @@
 ---
-import client from "../../lib/cms/client";
-import { forBlogPage } from "../../lib/cms/queries/blogPosts";
-import ButtonLink from "../../components/ButtonLink.astro";
-import CardLink from "../../components/CardLink.astro";
-import PageTitle from "../../components/PageTitle.astro";
-import Layout from "../../layouts/Layout.astro";
+import ButtonLink from '../../components/ButtonLink.astro';
+import CardLink from '../../components/CardLink.astro';
+import PageTitle from '../../components/PageTitle.astro';
+import Layout from '../../layouts/Layout.astro';
 
-const posts: {
-  title: string;
-  publishDate: string;
-  summary: string;
-  slug: string;
-}[] = await client.fetch(forBlogPage, {
-  lang: "pt_PT",
-});
+import { getCollection } from 'astro:content';
+
+const posts = await getCollection('blog', ({ id }) => id.startsWith('pt'));
 ---
 
 <Layout
@@ -28,14 +21,21 @@ const posts: {
   </header>
   <ol>
     {
-      posts.map(({ title, slug, publishDate, summary }) => (
+      posts.map(({ data: { title, publishDate, summary }, slug }) => (
         <CardLink link={`/blogue/${slug}`}>
-          <article class="flex flex-col">
+          <article class="flex flex-col gap-2">
             <span class="text-lg sm:text-xl font-medium break-words text-primary-700">
               {title}
             </span>
-            <time datetime={publishDate} class="text-sm text-primary-800">
-              {publishDate}
+            <time
+              datetime={publishDate.toLocaleDateString('pt', {
+                dateStyle: 'short',
+              })}
+              class="text-sm text-primary-800"
+            >
+              {publishDate.toLocaleDateString('pt', {
+                dateStyle: 'short',
+              })}
             </time>
             <span>{summary}</span>
           </article>

frontend/src/pages/index.astro

@@ -89,7 +89,9 @@ import Layout from '../layouts/Layout.astro';
       </InlineLink>.
     </p>
     <p class="mb-3">
-      Se quiseres ver-me, tens <InlineLink href="/me.jpeg">{'aqui'}</InlineLink>
+      Se quiseres ver-me, tens <InlineLink href="/me.jpeg">
+        {'aqui'}
+      </InlineLink>
        uma foto minha!
     </p>
     <p>