@compiiile/compiiile 2.17.1 → 2.18.0

package/.compiiile/src/pages/[...path].astro

@@ -1,7 +1,7 @@
 ---
 import WorkspaceLayout from "../layouts/WorkspaceLayout.astro"
 import ContentWrapper from "../components/ContentWrapper.vue"
-import {routeList} from "virtual:compiiile"
+import {routeList, site} from "virtual:compiiile"
 import SlidesLayout from "../layouts/SlidesLayout.astro"
 import path from "node:path"
 
@@ -31,7 +31,8 @@ export async function getStaticPaths() {
                 uuid: route.name,
                 title: route.meta.title,
                 description: route.meta.description || "",
-                textAlign: route.meta.textAlign
+                textAlign: route.meta.textAlign,
+                meta: route.meta
             }
         }
     })
@@ -39,11 +40,13 @@ export async function getStaticPaths() {
 
 let {path} = Astro.params;
 
-const {name, title, description, asSlides, textAlign} = Astro.props
+const {name, title, description, asSlides, textAlign, meta} = Astro.props
+site.pageFrontmatter = meta
 
-const {Content} = Astro.props.md
+const {Content, getHeadings} = Astro.props.md
 
-const tableOfContent = Astro.props.md.getHeadings()
+
+const tableOfContent = getHeadings()
 ---
 
 {asSlides ?

package/README.md

@@ -317,11 +317,9 @@ import Test from "./Test.vue"
 <Test client:load />
 ```
 
-You should
-use [Astro's client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) to load
-your component's script.
+You should use [Astro's client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) to load your component's script (`client:load` is not necessary on all your components).
 
-### Use config data values
+### Using config data values
 
 To use config values, you can access it by importing the `site` variable in your MDX file and then access the `data`
 key:
@@ -332,6 +330,42 @@ import { site } from "virtual:compiiile"
 # {site.data.someProperty}
 ```
 
+### Using frontmatter variables
+
+In your MDX files, all frontmatter variables are available via the `frontmatter` variable:
+
+```mdx
+---
+description: some description
+---
+
+{ frontmatter.description }
+```
+
+> :books: More info in the [dedicated Astro documentation](https://docs.astro.build/en/guides/integrations-guide/mdx/#using-frontmatter-variables-in-mdx).
+
+In your custom components, you can access the current page's frontmatter by using the `pageFrontmatter` property from Compiiile's Vite plugin:
+
+```vue
+<template>
+    <p>{{ frontmatter.description }}</p>
+</template>
+
+<script>
+    import { site } from "virtual:compiiile"
+
+    export default {
+        name: "CustomComponent",
+        computed: {
+            frontmatter(){
+                return site.pageFrontmatter
+            }
+        }
+    }
+</script>
+```
+
+
 ## Ignoring files and folders
 
 To ignore a whole folder or some files matching a certain pattern, you can add a `.compiiileignore` at the root of the folder where you run Compiiile.

package/bin/vitePluginCompiiile/markdownConfig.js

@@ -1,4 +1,4 @@
-import emoji from "remark-emoji"
+import remarkEmoji from "remark-emoji"
 import rehypeImagePlugin from "./rehypeImagePlugin.js"
 import rehypeLinkPlugin from "./rehypeLinkPlugin.js"
 import rehypeSlug from "rehype-slug"
@@ -7,7 +7,7 @@ import { h } from "hastscript"
 import rehypeHandleYamlMatterPlugin from "./rehypeHandleYamlMatterPlugin.js"
 
 export default {
-	remarkPlugins: [emoji],
+	remarkPlugins: [remarkEmoji],
 	rehypePlugins: [
 		rehypeImagePlugin,
 		rehypeLinkPlugin,

package/bin/vitePluginCompiiile/rehypeHandleYamlMatterPlugin.js

@@ -3,6 +3,9 @@ import { matter } from "vfile-matter"
 export default function rehypeHandleYamlMatterPlugin() {
 	return function (_, file) {
 		matter(file)
-		file.data.astro.frontmatter = file.data.matter
+		file.data.astro.frontmatter = {
+			...file.data.astro.frontmatter,
+			...file.data.matter
+		}
 	}
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@compiiile/compiiile",
 	"private": false,
-	"version": "2.17.1",
+	"version": "2.18.0",
 	"description": "The most convenient way to render a folder containing markdown files. Previewing and searching markdown files has never been that easy.",
 	"author": "AlbanCrepel <alban.crepel@gmail.com>",
 	"license": "GPL-3.0-only",