@compiiile/compiiile 2.17.0 → 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

@@ -99,11 +99,16 @@ To make yourself an idea and quickly get started using Compiiile, here are some
 terminal to get Compiiile running with a couple of markdown files as tests:
 
 ```bash
-mkdir test-compiiile && cd test-compiiile # creating a new folder and go into this folder
-yarn global add @compiiile/compiiile # installing compiiile as global dependency using yarn
-echo '# Test Compiiile\n\n> Here is a blockquote for you\n\n## Your markdown awaits below' > README.md # a first test file
-echo '---\nasSlides: true\n---\n\n# Slide 1\n\n---\n\n# And this is slide 2' > slides.md # a second test file as slides
-compiiile --title="📚 Compiiile" # running Compiiile for these 2 files
+# creating a new folder and go into this folder
+mkdir test-compiiile && cd test-compiiile 
+# installing compiiile as global dependency using npm
+npm i -g @compiiile/compiiile
+# a first test file
+echo '# Test Compiiile\n\n> Here is a blockquote for you\n\n## Your markdown awaits below' > README.md
+# a second test file as slides
+echo '---\nasSlides: true\n---\n\n# Slide 1\n\n---\n\n# And this is slide 2' > slides.md
+# running Compiiile for these 2 files
+compiiile --title="📚 Compiiile" 
 ```
 
 Et voilà, you should be able to preview your files in your browser :tada:.
@@ -196,23 +201,24 @@ The home page of Compiiile (`/`) points to a `README.md` file located at the roo
 
 Here is the list of parameters that you can set to customize Compiiile (none are required):
 
-| Parameter              | Type       | Description                                                                                                          |
-| ---------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------- |
-| `title`                | `string`   | The title to display on the top-left of the User Interface                                                           |
-| `description`          | `string`   | The description that is rendered by default for the SEO                                                              |
-| `logo`                 | `string`   | The relative path of the logo to display in the TopBar and as favicon                                                |
-| `logoUrl`              | `string`   | The url to go to when clicking on the logo, defaults to the home page if not set                                     |
-| `dest`                 | `string`   | The folder in which to build files, defaults to `./.compiiile/dist`                                                  |
-| `siteUrl`              | `string`   | The url of the website in production (without trailing slash), used for the SEO tag `og:image`                       |
-| `astroConfig`          | `Object`   | Override [default Astro config](https://docs.astro.build/en/reference/configuration-reference/)                      |
-| `data`                 | `Object`   | An object with data to use in MDX files (check use case below)                                                       |
-| `theme`                | `string`   | The website theme, value can be : `auto` (default value: adapts to system preferences) \| `light` \| `dark`          |
-| `useAutoTitles`        | `Boolean`  | If set to `true`, use the first file heading as title to be displayed in the navbar and for SEO. Defaults to `false` |
-| `noIndex`              | `Boolean`  | If set to `true`, the `robots.txt` file will disallow all routes, preventing indexation. Defaults to `false`         |
-| `publicDir`            | `string`   | The folder name in which you can serve public files, defaults to `public`                                            |
-| `vite.server.fs.allow` | `string[]` | Add local paths to vite's server fs allow list                                                                       |
-| `printReady`           | `Boolean`  | Add a `/print` page to display a full ready-to-print content (uses `@compiiile/compiiile-print`)                     |
-| `css`                  | `string`   | A relative path to a custom CSS file to customize the style <br/>:warning: Requires `compiiile-pro`                  |
+| Parameter              | Type       | Description                                                                                                                                                                             |
+|------------------------| ---------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `title`                | `string`   | The title to display on the top-left of the User Interface                                                                                                                              |
+| `description`          | `string`   | The description that is rendered by default for the SEO                                                                                                                                 |
+| `logo`                 | `string`   | The relative path of the logo to display in the TopBar and as favicon                                                                                                                   |
+| `logoUrl`              | `string`   | The url to go to when clicking on the logo, defaults to the home page if not set                                                                                                        |
+| `dest`                 | `string`   | The folder in which to build files, defaults to `./.compiiile/dist`                                                                                                                     |
+| `siteUrl`              | `string`   | The url of the website in production (without trailing slash), used for the SEO tag `og:image`                                                                                          |
+| `astroConfig`          | `Object`   | Override [default Astro config](https://docs.astro.build/en/reference/configuration-reference/)                                                                                         |
+| `data`                 | `Object`   | An object with data to use in MDX files (check use case below)                                                                                                                          |
+| `theme`                | `string`   | The website theme, value can be : `auto` (default value: adapts to system preferences) \| `light` \| `dark`                                                                             |
+| `useAutoTitles`        | `Boolean`  | If set to `true`, use the first file heading as title to be displayed in the navbar and for SEO. Defaults to `false`                                                                    |
+| `noIndex`              | `Boolean`  | If set to `true`, the `robots.txt` file will disallow all routes, preventing indexation. Defaults to `false`                                                                            |
+| `publicDir`            | `string`   | The folder name in which you can serve public files, defaults to `public`                                                                                                               |
+| `vite.server.fs.allow` | `string[]` | Add local paths to vite's server fs allow list                                                                                                                                          |
+| `printReady`           | `Boolean`  | Add a `/print` page to display a full ready-to-print content (uses `@compiiile/compiiile-print`)                                                                                        |
+| `css`                  | `string`   | A relative path to a custom CSS file to customize the style <br/>:warning: Requires `compiiile-pro`                                                                                     |
+| `integrations`         | `AstroIntegration[]`   | An array of Astro Integrations for [custom Astro hooks implementations](https://docs.astro.build/en/reference/integrations-reference/#astroconfigsetup): injecting CSS, javascript, etc |
 
 You can use these parameters in 2 ways:
 
@@ -311,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:
@@ -326,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/loadConfig.js

@@ -25,7 +25,7 @@ export const loadConfig = async () => {
 			name: process.env.COMPIIILE_TEMP_CONFIG_NAME || "compiiile",
 			cwd: process.env.COMPIIILE_TEMP_DIR || source
 		})
-		configFromFile = JSON.parse(JSON.stringify(compiiileConfig.config))
+		configFromFile = {...compiiileConfig.config}
 		if (!process.env.COMPIIILE_CONFIG_FILE) {
 			process.env.COMPIIILE_CONFIG_FILE = compiiileConfig.configFile
 		}

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.0",
+	"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",