@compiiile/compiiile 2.17.1 → 2.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
import WorkspaceLayout from "../layouts/WorkspaceLayout.astro"
|
|
3
3
|
import ContentWrapper from "../components/ContentWrapper.vue"
|
|
4
|
-
import {routeList} from "virtual:compiiile"
|
|
4
|
+
import {routeList, site} from "virtual:compiiile"
|
|
5
5
|
import SlidesLayout from "../layouts/SlidesLayout.astro"
|
|
6
6
|
import path from "node:path"
|
|
7
7
|
|
|
@@ -31,7 +31,8 @@ export async function getStaticPaths() {
|
|
|
31
31
|
uuid: route.name,
|
|
32
32
|
title: route.meta.title,
|
|
33
33
|
description: route.meta.description || "",
|
|
34
|
-
textAlign: route.meta.textAlign
|
|
34
|
+
textAlign: route.meta.textAlign,
|
|
35
|
+
meta: route.meta
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
})
|
|
@@ -39,11 +40,13 @@ export async function getStaticPaths() {
|
|
|
39
40
|
|
|
40
41
|
let {path} = Astro.params;
|
|
41
42
|
|
|
42
|
-
const {name, title, description, asSlides, textAlign} = Astro.props
|
|
43
|
+
const {name, title, description, asSlides, textAlign, meta} = Astro.props
|
|
44
|
+
site.pageFrontmatter = meta
|
|
43
45
|
|
|
44
|
-
const {Content} = Astro.props.md
|
|
46
|
+
const {Content, getHeadings} = Astro.props.md
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
|
|
49
|
+
const tableOfContent = getHeadings()
|
|
47
50
|
---
|
|
48
51
|
|
|
49
52
|
{asSlides ?
|
package/README.md
CHANGED
|
@@ -100,7 +100,7 @@ terminal to get Compiiile running with a couple of markdown files as tests:
|
|
|
100
100
|
|
|
101
101
|
```bash
|
|
102
102
|
# creating a new folder and go into this folder
|
|
103
|
-
mkdir test-compiiile && cd test-compiiile
|
|
103
|
+
mkdir test-compiiile && cd test-compiiile
|
|
104
104
|
# installing compiiile as global dependency using npm
|
|
105
105
|
npm i -g @compiiile/compiiile
|
|
106
106
|
# a first test file
|
|
@@ -108,7 +108,7 @@ echo '# Test Compiiile\n\n> Here is a blockquote for you\n\n## Your markdown awa
|
|
|
108
108
|
# a second test file as slides
|
|
109
109
|
echo '---\nasSlides: true\n---\n\n# Slide 1\n\n---\n\n# And this is slide 2' > slides.md
|
|
110
110
|
# running Compiiile for these 2 files
|
|
111
|
-
compiiile --title="📚 Compiiile"
|
|
111
|
+
compiiile --title="📚 Compiiile"
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
Et voilà , you should be able to preview your files in your browser :tada:.
|
|
@@ -201,24 +201,24 @@ The home page of Compiiile (`/`) points to a `README.md` file located at the roo
|
|
|
201
201
|
|
|
202
202
|
Here is the list of parameters that you can set to customize Compiiile (none are required):
|
|
203
203
|
|
|
204
|
-
| Parameter | Type
|
|
205
|
-
|
|
206
|
-
| `title` | `string`
|
|
207
|
-
| `description` | `string`
|
|
208
|
-
| `logo` | `string`
|
|
209
|
-
| `logoUrl` | `string`
|
|
210
|
-
| `dest` | `string`
|
|
211
|
-
| `siteUrl` | `string`
|
|
212
|
-
| `astroConfig` | `Object`
|
|
213
|
-
| `data` | `Object`
|
|
214
|
-
| `theme` | `string`
|
|
215
|
-
| `useAutoTitles` | `Boolean`
|
|
216
|
-
| `noIndex` | `Boolean`
|
|
217
|
-
| `publicDir` | `string`
|
|
218
|
-
| `vite.server.fs.allow` | `string[]`
|
|
219
|
-
| `printReady` | `Boolean`
|
|
220
|
-
| `css` | `string`
|
|
221
|
-
| `integrations` | `AstroIntegration[]`
|
|
204
|
+
| Parameter | Type | Description |
|
|
205
|
+
| ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
206
|
+
| `title` | `string` | The title to display on the top-left of the User Interface |
|
|
207
|
+
| `description` | `string` | The description that is rendered by default for the SEO |
|
|
208
|
+
| `logo` | `string` | The relative path of the logo to display in the TopBar and as favicon |
|
|
209
|
+
| `logoUrl` | `string` | The url to go to when clicking on the logo, defaults to the home page if not set |
|
|
210
|
+
| `dest` | `string` | The folder in which to build files, defaults to `./.compiiile/dist` |
|
|
211
|
+
| `siteUrl` | `string` | The url of the website in production (without trailing slash), used for the SEO tag `og:image` |
|
|
212
|
+
| `astroConfig` | `Object` | Override [default Astro config](https://docs.astro.build/en/reference/configuration-reference/) |
|
|
213
|
+
| `data` | `Object` | An object with data to use in MDX files (check use case below) |
|
|
214
|
+
| `theme` | `string` | The website theme, value can be : `auto` (default value: adapts to system preferences) \| `light` \| `dark` |
|
|
215
|
+
| `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` |
|
|
216
|
+
| `noIndex` | `Boolean` | If set to `true`, the `robots.txt` file will disallow all routes, preventing indexation. Defaults to `false` |
|
|
217
|
+
| `publicDir` | `string` | The folder name in which you can serve public files, defaults to `public` |
|
|
218
|
+
| `vite.server.fs.allow` | `string[]` | Add local paths to vite's server fs allow list |
|
|
219
|
+
| `printReady` | `Boolean` | Add a `/print` page to display a full ready-to-print content (uses `@compiiile/compiiile-print`) |
|
|
220
|
+
| `css` | `string` | A relative path to a custom CSS file to customize the style <br/>:warning: Requires `compiiile-pro` |
|
|
221
|
+
| `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 |
|
|
222
222
|
|
|
223
223
|
You can use these parameters in 2 ways:
|
|
224
224
|
|
|
@@ -317,11 +317,9 @@ import Test from "./Test.vue"
|
|
|
317
317
|
<Test client:load />
|
|
318
318
|
```
|
|
319
319
|
|
|
320
|
-
You should
|
|
321
|
-
use [Astro's client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) to load
|
|
322
|
-
your component's script.
|
|
320
|
+
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).
|
|
323
321
|
|
|
324
|
-
###
|
|
322
|
+
### Using config data values
|
|
325
323
|
|
|
326
324
|
To use config values, you can access it by importing the `site` variable in your MDX file and then access the `data`
|
|
327
325
|
key:
|
|
@@ -332,6 +330,41 @@ import { site } from "virtual:compiiile"
|
|
|
332
330
|
# {site.data.someProperty}
|
|
333
331
|
```
|
|
334
332
|
|
|
333
|
+
### Using frontmatter variables
|
|
334
|
+
|
|
335
|
+
In your MDX files, all frontmatter variables are available via the `frontmatter` variable:
|
|
336
|
+
|
|
337
|
+
```mdx
|
|
338
|
+
---
|
|
339
|
+
description: some description
|
|
340
|
+
---
|
|
341
|
+
|
|
342
|
+
{ frontmatter.description }
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
> :books: More info in the [dedicated Astro documentation](https://docs.astro.build/en/guides/integrations-guide/mdx/#using-frontmatter-variables-in-mdx).
|
|
346
|
+
|
|
347
|
+
In your custom components, you can access the current page's frontmatter by using the `pageFrontmatter` property from Compiiile's Vite plugin:
|
|
348
|
+
|
|
349
|
+
```vue
|
|
350
|
+
<template>
|
|
351
|
+
<p>{{ frontmatter.description }}</p>
|
|
352
|
+
</template>
|
|
353
|
+
|
|
354
|
+
<script>
|
|
355
|
+
import { site } from "virtual:compiiile"
|
|
356
|
+
|
|
357
|
+
export default {
|
|
358
|
+
name: "CustomComponent",
|
|
359
|
+
computed: {
|
|
360
|
+
frontmatter() {
|
|
361
|
+
return site.pageFrontmatter
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
</script>
|
|
366
|
+
```
|
|
367
|
+
|
|
335
368
|
## Ignoring files and folders
|
|
336
369
|
|
|
337
370
|
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
CHANGED
|
@@ -25,7 +25,7 @@ export const loadConfig = async () => {
|
|
|
25
25
|
name: process.env.COMPIIILE_TEMP_CONFIG_NAME || "compiiile",
|
|
26
26
|
cwd: process.env.COMPIIILE_TEMP_DIR || source
|
|
27
27
|
})
|
|
28
|
-
configFromFile = {...compiiileConfig.config}
|
|
28
|
+
configFromFile = { ...compiiileConfig.config }
|
|
29
29
|
if (!process.env.COMPIIILE_CONFIG_FILE) {
|
|
30
30
|
process.env.COMPIIILE_CONFIG_FILE = compiiileConfig.configFile
|
|
31
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import remarkEmoji from "remark-emoji"
|
|
2
2
|
import rehypeImagePlugin from "./rehypeImagePlugin.js"
|
|
3
3
|
import rehypeLinkPlugin from "./rehypeLinkPlugin.js"
|
|
4
4
|
import rehypeSlug from "rehype-slug"
|
|
@@ -7,7 +7,7 @@ import { h } from "hastscript"
|
|
|
7
7
|
import rehypeHandleYamlMatterPlugin from "./rehypeHandleYamlMatterPlugin.js"
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
remarkPlugins: [
|
|
10
|
+
remarkPlugins: [remarkEmoji],
|
|
11
11
|
rehypePlugins: [
|
|
12
12
|
rehypeImagePlugin,
|
|
13
13
|
rehypeLinkPlugin,
|
|
@@ -3,6 +3,9 @@ import { matter } from "vfile-matter"
|
|
|
3
3
|
export default function rehypeHandleYamlMatterPlugin() {
|
|
4
4
|
return function (_, file) {
|
|
5
5
|
matter(file)
|
|
6
|
-
file.data.astro.frontmatter =
|
|
6
|
+
file.data.astro.frontmatter = {
|
|
7
|
+
...file.data.astro.frontmatter,
|
|
8
|
+
...file.data.matter
|
|
9
|
+
}
|
|
7
10
|
}
|
|
8
11
|
}
|