Feat/files blog post (#25)

* feat: Blog post on reading and writing files

* feat: progress on the article and added GH style admonitions support

* feat: more progress on the article

* feat: more progress on the article

* chore: more progress on article

* feat: Completed article

* chore: make prettier pretty and happy

Author: lmammino

astro.config.ts

@@ -6,6 +6,8 @@ import tailwindcss from '@tailwindcss/vite'
 import { defineConfig, fontProviders } from 'astro/config'
 import expressiveCode from 'astro-expressive-code'
 import partytown from '@astrojs/partytown'
+import remarkDirective from 'remark-directive' /* Handle ::: directives as nodes */
+import { remarkAdmonitions } from './src/plugins/remark-admonitions' /* Add admonitions */
 
 // https://astro.build/config
 export default defineConfig({
@@ -16,6 +18,9 @@ export default defineConfig({
     sitemap(),
     partytown({ config: { forward: ['dataLayer.push'] } }),
   ],
+  markdown: {
+    remarkPlugins: [remarkDirective, remarkAdmonitions],
+  },
   vite: {
     plugins: [tailwindcss()],
   },

ec.config.mjs

@@ -1,8 +1,11 @@
+import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections'
+
 const config = {
   themes: ['material-theme-ocean', 'min-light'],
   themeCssSelector(theme) {
     return `[data-code-theme='${theme.name}']`
   },
+  plugins: [pluginCollapsibleSections({})],
   useDarkModeMediaQuery: false,
 }
 

package.json

@@ -17,6 +17,7 @@
     "@astrojs/partytown": "^2.1.4",
     "@astrojs/react": "^4.3.1",
     "@astrojs/sitemap": "^3.6.0",
+    "@expressive-code/plugin-collapsible-sections": "^0.41.3",
     "@lucide/astro": "^0.522.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/typography": "^0.5.16",
@@ -30,24 +31,33 @@
     "clsx": "^2.1.1",
     "daisyui": "^5.0.43",
     "framer-motion": "^12.15.0",
+    "hastscript": "^9.0.1",
     "lucide-react": "^0.511.0",
+    "mdast": "^3.0.0",
+    "mdast-util-directive": "^3.1.0",
+    "mdast-util-to-markdown": "^2.1.2",
+    "mdast-util-to-string": "^4.0.0",
     "ogl": "^1.0.11",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rehype-accessible-emojis": "^0.3.2",
+    "remark-directive": "^4.0.0",
     "remark-toc": "^9.0.0",
     "sharp": "^0.34.3",
     "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.8",
-    "three": "^0.180.0"
+    "three": "^0.180.0",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
   "devDependencies": {
-    "@eslint/js": "9.35.0",
-    "@types/three": "^0.180.0",
+    "@eslint/js": "latest",
+    "@types/mdast": "^4.0.4",
+    "@types/three": "latest",
     "@typescript-eslint/eslint-plugin": "8.37.0",
-    "@typescript-eslint/parser": "8.43.0",
+    "@typescript-eslint/parser": "latest",
     "astro-eslint-parser": "1.2.2",
     "eslint": "9.35.0",
     "eslint-config-prettier": "10.1.8",