@compiiile/compiiile 2.18.3 → 2.18.5

package/.compiiile/src/style/slides.css

@@ -104,6 +104,11 @@
 		background-color: var(--blockquote-background-color) !important;
 	}
 
+	blockquote p {
+		display: block !important;
+		margin: 0 !important;
+	}
+
 	ul {
 		margin-left: 0;
 	}

package/4-pro-features.mdx

@@ -633,3 +633,40 @@ The `CDetails` component allows you to hide a block and reveal it by clicking on
     </CDetails>
 	```
 </CDetails>
+
+
+### CSlide
+
+The `CSlide` component can be used for every slide, it allows you to align content the way you want (horizontally and vertically), and to use custom themes.
+
+- The `theme` prop applies a theme to the slide: `catpuccin-mocha`, `catpuccin-macchiato`, `catpuccin-frappe`, `catpuccin-latte`, `beetroot`, `blueberry`, `lemon`, `courgette`, `aubergine`, `carrot`. If not set, the default theme is applied.
+- The `headingSerif` boolean prop changes the headings font to a serif one.
+- The `headingMono` boolean prop changes the headings font to a monospace one.
+- The `align` prop accepts a string with the horizontal and vertical alignement : `<left|center|right|stretch> <top|center|bottom>`, default `center center`.
+- The `textAlign` prop overrides the text alignement for the slide : `left`, `center`, `right`
+- For custom themes, you can provide these props : `textColor`, `backgroundColor`, and `controlsColor` that overrides theme colors.
+
+`defaultTheme`, `headingSerif`, `headingMono`, `textColor`, `backgroundColor`, `controlsColor` can also be set in the frontmatter for all `CSlide` components, or be defined in the `site.data.slides` compiiile's config object key.
+
+<CDetails summary="Example">
+    ```mdx
+    <CSlide theme="catpuccin-mocha" align="stretch center" controlsColor="#0000FF">
+
+    # A slide with a custom theme
+
+    </CSlide>
+    ```
+</CDetails>
+
+
+### CGap
+
+The `CGap` component can be used in slides, allowing you to add a gap between elements.
+
+- The gap can be set with the `width` and `height` prop (accepting CSS values).
+
+<CDetails summary="Example">
+    ```mdx
+    <CGap height="100px" />
+    ```
+</CDetails>

package/5-pro-slides.mdx

@@ -47,6 +47,14 @@ description: "Use icons, admonitions, mermaid diagrams, markmap mindmaps in Mark
 
 ---
 
+<CSlide theme="lemon" headingSerif="true">
+
+    # Custom themes
+
+</CSlide>
+
+---
+
 <CGrid gap="20px" template="1 1">
     <CCard hintText="Go to the specific page">
         [Some link](./3-pro-installation.md)

package/README.md

@@ -191,7 +191,7 @@ Other frontmatter keys are handled:
 - `ignore` : Boolean value (`true` or `false`) to ignore the current file and exclude it from Compiiile (the file is not ignored by default).
 - `hidden` : Boolean value (`true` or `false`) to hide the file from the navbar and siblings links (the file is not hidden by default).
 
-> :bulb: You can override slides theme by passing it to a `theme` query parameter in your slide url (for example `/s/slides?theme=light`). See the `theme` config parameter below for valid values.
+> :bulb: You can override slides theme (light or dark) by passing it to a `theme` query parameter in your slide url (for example `/s/slides?theme=light`). See the `theme` config parameter below for valid values.
 
 ### Routing
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@compiiile/compiiile",
 	"private": false,
-	"version": "2.18.3",
+	"version": "2.18.5",
 	"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",
@@ -29,7 +29,7 @@
 		"@babel/eslint-parser": "^7.28.0",
 		"@babel/parser": "^7.28.0",
 		"@compiiile/compiiile-print": "^1.0.6",
-		"@compiiile/compiiile-pro": "^1.2.0",
+		"@compiiile/compiiile-pro": "^1.3.1",
 		"@eslint/compat": "^1.3.1",
 		"@eslint/js": "^9.34.0",
 		"@fontsource-variable/archivo": "^5.2.6",