@compiiile/compiiile 2.3.1 → 2.4.1

package/.compiiile/src/components/SlidesContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="slidesDeckWrapper" class="slides-deck-wrapper">
+	<div ref="slidesDeckWrapper" :class="['slides-deck-wrapper', `text-align-${textAlign}`]" :style="{ textAlign }">
 		<slot></slot>
 	</div>
 </template>
@@ -7,6 +7,12 @@
 <script>
 	export default {
 		name: "SlidesContent",
+		props: {
+			textAlign: {
+				type: String,
+				default: "center"
+			}
+		},
 		data() {
 			return {
 				loaded: false
@@ -24,7 +30,12 @@
 
 			const Reveal = (await import("reveal.js")).default(deck, {
 				embedded: true,
-				pdfMaxPagesPerSlide: 1
+				pdfMaxPagesPerSlide: 1,
+				width: "100%",
+				height: "100%",
+				margin: 0,
+				minScale: 1,
+				maxScale: 1
 			})
 
 			await Reveal.initialize({

package/.compiiile/src/layouts/SlidesLayout.astro

@@ -1,11 +1,11 @@
 ---
 import SlidesContent from "../components/SlidesContent.vue";
 import BaseLayout from "./BaseLayout.astro";
-const { title, description } = Astro.props
+const { title, description, textAlign } = Astro.props
 ---
 
 <BaseLayout title={ title } description={ description } isNotFoundPage={ false }>
-    <SlidesContent client:load>
+    <SlidesContent client:load textAlign={textAlign}>
         <slot></slot>
     </SlidesContent>
 </BaseLayout>

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

@@ -26,7 +26,8 @@ export async function getStaticPaths() {
                 asSlides: !!route.meta.asSlides,
                 uuid: route.name,
                 title: route.meta.title,
-                description: route.meta.description || ""
+                description: route.meta.description || "",
+                textAlign: route.meta.textAlign
             }
         }
     })
@@ -34,7 +35,7 @@ export async function getStaticPaths() {
 
 let {path} = Astro.params;
 
-const {name, title, description, asSlides} = Astro.props
+const {name, title, description, asSlides, textAlign} = Astro.props
 
 const {Content} = Astro.props.md
 
@@ -42,7 +43,7 @@ const tableOfContent = Astro.props.md.getHeadings()
 ---
 
 {asSlides ?
-<SlidesLayout title={title} description={description}>
+<SlidesLayout title={title} description={description} textAlign={textAlign}>
     <div class="slides-content">
         <Content/>
     </div>

package/.compiiile/src/style/slides.scss

@@ -1,17 +1,33 @@
 :root {
 	--r-code-font: "JetBrains Mono Variable", monospace;
+	--slide-padding-vertical: 40px;
+	--slide-padding-horizontal: 80px;
 }
 
 .reveal {
 	height: 100vh;
 	width: 100vw;
 
+	.slides {
+		text-align: inherit;
+	}
+
+	section {
+		padding: var(--slide-padding-vertical) var(--slide-padding-horizontal);
+	}
+
 	pre code {
 		padding: 20px !important;
 		border-radius: 8px;
 		max-height: 80vh !important;
 	}
 
+	pre {
+		width: 100%;
+		margin: 0 auto;
+		max-width: 1200px;
+	}
+
 	h1,
 	h2,
 	h3,
@@ -23,26 +39,35 @@
 			"wght" 900,
 			"wdth" 125;
 		letter-spacing: -0.03em;
-		font-size: 24px;
+		font-size: 3.75vmin;
 		border: none !important;
+		margin-bottom: 4vmin;
+	}
+
+	h1 {
+		font-size: 12vmin;
+	}
+
+	h2 {
+		font-size: 6vmin;
 	}
 
 	font-family: "DM Sans Variable", sans-serif !important;
 
 	p,
 	li {
-		font-size: 24px !important;
+		font-size: max(3.25vmin, 18px) !important;
 	}
 
 	.hljs {
-		font-size: 18px !important;
+		font-size: 2vmin !important;
 	}
 
 	p code {
 		background-color: var(--layout-background-color);
 		padding: 2px 4px;
 		border-radius: 3px;
-		font-size: 18px;
+		font-size: 2vmin;
 	}
 
 	blockquote {
@@ -50,14 +75,18 @@
 		border: solid 1px var(--blockquote-border-color);
 		border-radius: 8px;
 		padding: 0.5em 1em;
+		width: 100%;
+		font-style: normal;
+		max-width: 1200px;
+		margin: 0 auto;
 	}
 
-	.header-anchor {
-		display: none;
+	ul {
+		margin-left: 0;
 	}
 
-	ul {
-		width: 70%;
+	.header-anchor {
+		display: none;
 	}
 
 	.slides a {
@@ -81,3 +110,22 @@
 .reveal .progress {
 	color: var(--slides-controls) !important;
 }
+
+.slides-deck-wrapper.text-align-left {
+	blockquote,
+	pre {
+		margin: 0;
+	}
+}
+
+.slides-deck-wrapper.text-align-right {
+	blockquote,
+	pre {
+		margin-left: auto;
+		margin-right: 0;
+	}
+}
+
+html.reveal-print .reveal .slides section {
+	padding: var(--slide-padding-vertical) var(--slide-padding-horizontal) !important;
+}

package/README.md

@@ -134,10 +134,11 @@ To separate your slides, just separate the content of your markdown with:
 
 :star2: You can make your slides print-ready by adding the `print-pdf` query parameter to your page, like: `https://compiiile.me/s/slides-preview?print-pdf`.
 
-Other frontmatter keys will be handled:
+Other frontmatter keys are handled:
 
 -   `title`: set the title to be displayed in the navbar and for SEO
 -   `description`: set the description for SEO
+-   `textAlign`: possible values are [CSS text-align values](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) (`left`, `center`, ...). This changes the default text alignment in slides. The default value is `center`.
 
 ### Routing
 
@@ -156,6 +157,7 @@ Here is the list of parameters that you can set to customize Compiiile (none are
 | `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)                                  |
 | `vite.server.fs.allow` | `string[]` | Add local paths to vite's server fs allow list                                                  |
 
 You can use these parameters in 2 ways:
@@ -193,6 +195,8 @@ v2 of Compiiile allows you to use MDX files with Vue components.
 
 For it to work, you should install some dependencies in your project folder: `yarn add vue astro fzf` (or `npm install vue astro fzf`).
 
+### Using components
+
 Let's say we have Vue a component `Test.vue` making an API request and listing results:
 
 ```vue
@@ -236,7 +240,7 @@ Let's say we have Vue a component `Test.vue` making an API request and listing r
 
 You can use it your MDX file like so:
 
-```
+```mdx
 import Test from "./Test.vue"
 
 <Test client:load />
@@ -244,6 +248,16 @@ import Test from "./Test.vue"
 
 You should use [Astro's client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) to load your component's script.
 
+### Use 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:
+
+```mdx
+import { site } from "virtual:compiiile"
+
+# {site.data.someProperty}
+```
+
 ## Common issues
 
 -   Make sure that the absolute path to the folder where you are running Compiiile doesn't contain any special character as it could prevent the project initialization.
@@ -261,6 +275,12 @@ Contributions are welcome after discussing the object of your contribution in th
 
 You can read more about it and the roadmap in the [dedicated contributing guide](./CONTRIBUTING.md).
 
+## Community projects
+
+Here is a list of projects related to Compiiile developed by the community:
+
+-   [compiiile-actions-cloudflare-pages](https://github.com/marketplace/actions/compiiile-cloudflare-pages): A simple GitHub action to deploy a Compiiile site to CloudFlare pages
+
 ## Support
 
 Open-source is a wonderful thing, so please if you found this project useful or use it as a part of a commercial project, **consider making a donation**.

package/bin/config.js

@@ -50,6 +50,8 @@ process.env.VITE_COMPIIILE_DESCRIPTION = argv.description ?? ""
 
 process.env.VITE_COMPIIILE_LOGO_URL = argv.logoUrl ?? ""
 
+process.env.VITE_COMPIIILE_DATA = JSON.stringify(argv.data ?? {})
+
 // Handling logo and favicon
 process.env.VITE_COMPIIILE_LOGO = null
 

package/bin/vitePluginCompiiile/models/Context.js

@@ -26,7 +26,8 @@ export default class {
 			logo: process.env.VITE_COMPIIILE_LOGO !== "null" ? process.env.VITE_COMPIIILE_LOGO : undefined,
 			logoUrl: process.env.VITE_COMPIIILE_LOGO_URL !== "" ? process.env.VITE_COMPIIILE_LOGO_URL : undefined,
 			siteUrl: process.env.VITE_COMPIIILE_SITE_URL !== "" ? process.env.VITE_COMPIIILE_SITE_URL : undefined,
-			base: process.env.VITE_COMPIIILE_BASE
+			base: process.env.VITE_COMPIIILE_BASE,
+			data: JSON.parse(process.env.VITE_COMPIIILE_DATA)
 		}
 	}
 
@@ -106,10 +107,15 @@ export default class {
 
 						fileListItem.textContent = unemojify(
 							renderedMarkdown.code
+								.replace(/^<hr>\n<h2(.|\n)*?<\/h2>/g, "")
+								.replace(/<br>/g, " ")
 								.replace(/<a.*aria-hidden.*>.*?<\/a>|<[^>]*>?/gi, "")
 								.replace(/[\r\n]{2,}/g, "\n")
 						)
+
 						const meta = renderedMarkdown.metadata.frontmatter
+
+
 						fileListItem.title = meta.title || fileName
 						fileListItem.meta = meta
 						fileListItem.meta.title = fileListItem.meta.title || fileListItem.title

package/index.md

@@ -0,0 +1 @@
+# Index

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@compiiile/compiiile",
 	"private": false,
-	"version": "2.3.1",
+	"version": "2.4.1",
 	"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",

package/slides-preview.mdx

@@ -2,11 +2,11 @@
 asSlides: true
 ---
 
-# 👋 Here are some slides
+# 👋 Here are<br/>some slides
 
 ---
 
-# It can contain some lists
+## It can contain some lists
 
 -   My first list item
 -   A second list item