@compiiile/compiiile 2.8.4 → 2.9.1

package/.compiiile/src/components/ContentWrapper.vue

@@ -207,7 +207,7 @@
 			margin-bottom: 20px;
 			display: block;
 			max-width: 100%;
-			overflow-x: scroll;
+			overflow-x: auto;
 		}
 
 		table tr {

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

@@ -20,8 +20,16 @@
 		},
 		async mounted() {
 			const slidesContent = document.querySelector(".slides-content")
+
 			slidesContent.innerHTML = `<div class="reveal deck"><div class="slides"><section>${slidesContent.innerHTML
 				.split("<hr>")
+				.map((section) => {
+					// Handle fragments, `--` processed as `<p>—</p>` in HTML
+					const fragments = section.split("<p>—</p>")
+					return fragments.length === 1
+						? section
+						: `<div class="fragment">` + fragments.join(`</div><div class="fragment">`) + "</div>"
+				})
 				.join("</section><section>")}</section></div></div>`
 
 			this.loaded = true
@@ -35,7 +43,8 @@
 				height: "100%",
 				margin: 0,
 				minScale: 1,
-				maxScale: 1
+				maxScale: 1,
+				pdfSeparateFragments: false
 			})
 
 			await Reveal.initialize({
@@ -44,11 +53,21 @@
 
 			this.$refs.slidesDeckWrapper.style.opacity = 1
 
-			Reveal.slide(new URLSearchParams(window.location.search).get("slide") || 0)
-
 			Reveal.on("slidechanged", (event) => {
 				history.replaceState({}, "", `?slide=${event.indexh}`)
+				Reveal.nextFragment()
 			})
+
+			Reveal.on("fragmenthidden", function (event) {
+				if (
+					event.fragment.hasAttribute("data-fragment-index") &&
+					parseInt(event.fragment.dataset.fragmentIndex) === 0
+				) {
+					Reveal.prev()
+				}
+			})
+
+			Reveal.slide(new URLSearchParams(window.location.search).get("slide") || 0)
 		}
 	}
 </script>

package/.compiiile/src/components/layout/ThemeSwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="theme-switcher" @click="toggleTheme" aria-label="Theme switcher">
+	<button class="theme-switcher" aria-label="Theme switcher" @click="toggleTheme">
 		<!-- sun-dim -->
 		<svg
 			class="theme-icon theme-icon--light"

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

@@ -56,10 +56,23 @@
 		font-size: 6vmin;
 	}
 
+	h4 {
+		font-size: 3vmin;
+	}
+
+	h5 {
+		font-size: 2.75vmin;
+	}
+
+	h6 {
+		font-size: 2.5vmin;
+	}
+
 	font-family: "DM Sans Variable", sans-serif !important;
 
 	p,
-	li {
+	li,
+	a {
 		font-size: max(3.25vmin, 18px) !important;
 	}
 
@@ -113,7 +126,7 @@
 		font-size: 2vmin;
 		display: block;
 		max-width: 100%;
-		overflow-x: scroll;
+		overflow-x: auto;
 	}
 
 	table tr {

package/3-pro-installation.md

@@ -5,7 +5,7 @@ description: "Compiiile with some spice ! With the pro version, enhance your Mar
 
 # Compiiile-pro
 
-Compiiile with some spice :cherries:! With the ***pro*** version, enhance your Markdown files, add diagrams, mindmaps, admonitions, and ready-made components and get your knowledge-base or course ready to be served in one simple command :sparkles:.
+Compiiile with some spice :cherries:! With the **_pro_** version, enhance your Markdown files, add diagrams, mindmaps, admonitions, and ready-made components and get your knowledge-base or course ready to be served in one simple command :sparkles:.
 
 ## Installation
 
@@ -34,6 +34,7 @@ npm install @compiiile/compiiile-pro # install as a project dependency with npm
 ## Usage
 
 Once installed, 3 commands are available that act the same as the usual `compiiile` command:
+
 -   `compiiile-pro dev`
 -   `compiiile-pro build`
 -   `compiiile-pro preview`
@@ -62,13 +63,13 @@ COMPIIILE_PRO_LICENSE="XXXX-XXXX-XXXX-XXXX" COMPIIILE_PRO_EMAIL="john.doe@mail.c
 
 Similarly, you have 2 parameters that you can pass to the build command to use your licence: `--pro.license="<YOUR-LICENCE>"` and `--pro.email="<YOUR-EMAIL-USED-FOR-PURCHASE>"`.
 
-Here is the complete command as example: 
+Here is the complete command as example:
 
 ```bash
 compiiile-pro build --pro.license="XXXX-XXXX-XXXX-XXXX" --pro.email="john.doe@mail.com"
 ```
 
-### Set it globally 
+### Set it globally
 
 To use the same license on multiple projects, you can create a `.compiiilerc` file at the root of your user folder (`~/.compiiilerc`).
 
@@ -89,20 +90,20 @@ pro.email=<your-email>
 
 ## Affiliate
 
-
-You can become an affiliate and earn 20% on each sale by referring new customers (or should we say... *compiiilers ?*):
+You can become an affiliate and earn 20% on each sale by referring new customers (or should we say... _compiiilers ?_):
 
 <a style="background-color:var(--highlight-color);color:#f7fafc;display:block;text-align:center;border-radius:4px;text-decoration:none;padding:10px;" href="https://compiiile.lemonsqueezy.com/affiliates" target="_blank">Become an affiliate</a>
 
 ## Added features
 
 Here is a list of features that the pro version adds:
-- add a button to copy code blocks and be able to specify the code block file name
-- add admonitions (or alerts) with different semantic colors
-- use any [Phosphor Icon](https://phosphoricons.com/) in your Markdown files or Vue components
-- add [MermaidJs](https://mermaid.js.org/#/) integration to write diagrams in Markdown, without compromising on style
-- add [Markmap](https://markmap.js.org/) integration to write mindmaps in Markdown from bullet-points lists
-- add [d2](https://d2lang.com/) integration to write diagrams
-- use ready-to-use components (for slides layouts, etc) in `mdx` files
+
+-   add a button to copy code blocks and be able to specify the code block file name
+-   add admonitions (or alerts) with different semantic colors
+-   use any [Phosphor Icon](https://phosphoricons.com/) in your Markdown files or Vue components
+-   add [MermaidJs](https://mermaid.js.org/#/) integration to write diagrams in Markdown, without compromising on style
+-   add [Markmap](https://markmap.js.org/) integration to write mindmaps in Markdown from bullet-points lists
+-   add [d2](https://d2lang.com/) integration to write diagrams
+-   use ready-to-use components (for slides layouts, etc) in `mdx` files
 
 See an overview of these features in the next page.

package/4-pro-features.mdx

@@ -57,6 +57,7 @@ description: "Use icons, admonitions, mermaid diagrams, markmap mindmaps in Mark
     > [!CAUTION]
     > `Negative` potential consequences of an action.
     ```
+
 </details>
 
 ## Diagrams
@@ -81,8 +82,8 @@ graph TD
         C --> F[ Use a collection of components ]
         ```
     ````
+
 </details>
----
 
 ```markmap
 ---
@@ -116,6 +117,7 @@ markmap:
             - layout
     ```
     ````
+
 </details>
 
 ---
@@ -154,6 +156,7 @@ gitGraph
     merge components tag: "1.0.0"
     ```
     ````
+
 </details>
 
 ---
@@ -174,6 +177,7 @@ sequenceDiagram
     Server-->>Client: Return product list
     ```
     ````
+
 </details>
 
 ---
@@ -200,6 +204,7 @@ classDiagram
     BankAccount : +withdrawal(amount)
     ```
     ````
+
 </details>
 
 ---
@@ -230,6 +235,7 @@ stateDiagram-v2
     Crash --> [*]
     ```
     ````
+
 </details>
 
 ---
@@ -252,6 +258,7 @@ erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
     ```
     ````
+
 </details>
 
 ---
@@ -272,60 +279,62 @@ gantt
     <summary>Source</summary>
 
     ````md
-   ```mermaid
-    gantt
-        title A Gantt Diagram
-        dateFormat YYYY-MM-DD
-        section Section
-            A task          :a1, 2014-01-01, 30d
-            Another task    :after a1, 20d
-        section Another
-            Task in Another :2014-01-12, 12d
-            another task    :24d
-    ```
-    ````
+
+`````mermaid
+ gantt
+     title A Gantt Diagram
+     dateFormat YYYY-MM-DD
+     section Section
+         A task          :a1, 2014-01-01, 30d
+         Another task    :after a1, 20d
+     section Another
+         Task in Another :2014-01-12, 12d
+         another task    :24d
+ ```
+ ````
 </details>
 
 ---
 
 ```mermaid
 pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-```
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+`````
 
 <details>
     <summary>Source</summary>
 
     ````md
-   ```mermaid
-    pie title Pets adopted by volunteers
-        "Dogs" : 386
-        "Cats" : 85
-        "Rats" : 15
-    ```
-    ````
+
+`````mermaid
+ pie title Pets adopted by volunteers
+     "Dogs" : 386
+     "Cats" : 85
+     "Rats" : 15
+ ```
+ ````
 </details>
 
 ---
 
 ```mermaid
 quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
+ title Reach and engagement of campaigns
+ x-axis Low Reach --> High Reach
+ y-axis Low Engagement --> High Engagement
+ quadrant-1 We should expand
+ quadrant-2 Need to promote
+ quadrant-3 Re-evaluate
+ quadrant-4 May be improved
+ Campaign A: [0.3, 0.6]
+ Campaign B: [0.45, 0.23]
+ Campaign C: [0.57, 0.69]
+ Campaign D: [0.78, 0.34]
+ Campaign E: [0.40, 0.34]
+ Campaign F: [0.35, 0.78]
+`````
 
 <details>
     <summary>Source</summary>
@@ -348,6 +357,7 @@ quadrantChart
         Campaign F: [0.35, 0.78]
     ```
     ````
+
 </details>
 
 ---
@@ -374,6 +384,7 @@ xychart-beta
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
     ```
     ````
+
 </details>
 
 ---
@@ -402,6 +413,7 @@ timeline
         2006 : Twitter
     ```
     ````
+
 </details>
 
 ---
@@ -466,6 +478,7 @@ style: {
     }
     ```
     ````
+
 </details>
 
 ## Code blocks
@@ -525,18 +538,18 @@ The `CGrid` component allows you to use a grid layout (very useful for slides):
 </CGrid>
 ```
 
-- The `template` prop works just like the `grid-template-columns` CSS property, you can omit the `fr` unit, it will be processed automatically.
-    - `template="1 1"` will make 2 columns of equal width
-    - `template="2 1"` will make 2 columns with the first one using 2/3 width
-- You can vertically align items with the `align` prop, working like the `align-items` CSS property.
-- You can specify the gap between components with the `gap` prop (defaults to `40px`)
-
+-   The `template` prop works just like the `grid-template-columns` CSS property, you can omit the `fr` unit, it will be processed automatically.
+    -   `template="1 1"` will make 2 columns of equal width
+    -   `template="2 1"` will make 2 columns with the first one using 2/3 width
+-   You can vertically align items with the `align` prop, working like the `align-items` CSS property.
+-   You can specify the gap between components with the `gap` prop (defaults to `40px`)
 
 ### CCard
 
 The `CCard` component can be used as a traditional card or a link.
-- The `title` and `description` slots can be used for traditional cards
-- To get it to work as a link, just provide a Markdown link as default slot, and specify a hint text if needed with the `hintText` prop
+
+-   The `title` and `description` slots can be used for traditional cards
+-   To get it to work as a link, just provide a Markdown link as default slot, and specify a hint text if needed with the `hintText` prop
 
 <CGrid gap="20px" template="1 1">
     <CCard hintText="Go to the specific page">
@@ -551,6 +564,7 @@ The `CCard` component can be used as a traditional card or a link.
         <span slot="title">Title</span>
         <span slot="description">Some description</span>
     </CCard>
+
 </CGrid>
 
 &nbsp;
@@ -574,5 +588,5 @@ The `CCard` component can be used as a traditional card or a link.
         </CCard>
     </CGrid>
     ````
-</details>
 
+</details>

package/README.md

@@ -81,6 +81,18 @@ docker run -p 8080:80 <custom-image-name>
 
 > Replace `<custom-image-name>` with the tag you want. You should get Compiiile running on http://localhost:8080.
 
+### Using docker compose (with dev server)
+
+First, copy the `./docker-compose.yaml` from this repo to your root folder.
+
+Then just run the following command:
+
+```bash
+docker compose up
+```
+
+> You should get Compiiile running on http://localhost:4321.
+
 ## Quick start
 
 To make yourself an idea and quickly get started using Compiiile, here are some commands that you can run in your
@@ -155,6 +167,12 @@ To separate your slides, just separate the content of your markdown with:
 
 > There must be an empty line before and after the `---`
 
+You can also make fragments within slides by using 2 hyphens:
+
+```md
+--
+```
+
 :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`.
 

package/bin/config.js

@@ -43,6 +43,53 @@ const argv = yargs(hideBin(process.argv))
 	.command("dev", "launch development server")
 	.command("build", "build")
 	.command("preview", "preview")
+	.option("port", {
+		describe: "Port to use",
+		default: 4321
+	})
+	.option("host", {
+		describe: "Host to use",
+		default: "127.0.0.1"
+	})
+	.option("title", {
+		describe: "The title to display on the top-left of the User Interface"
+	})
+	.option("description", {
+		describe: "The description that is rendered by default for the SEO"
+	})
+	.option("logo", {
+		describe: "The relative path of the logo to display in the TopBar and as favicon"
+	})
+	.option("logoUrl", {
+		describe: "The url to go to when clicking on the logo, defaults to the home page if not set"
+	})
+	.option("dest", {
+		describe: "The folder in which to build files, defaults to `./.compiiile/dist`"
+	})
+	.option("siteUrl", {
+		describe: "The url of the website in production (without trailing slash), used for the SEO tag `og:image`"
+	})
+	.option("astroConfig", {
+		describe: "Override default Astro config (https://docs.astro.build/en/reference/configuration-reference/)"
+	})
+	.option("data", {
+		describe: "An object with data to use in MDX files"
+	})
+	.option("theme", {
+		describe:
+			"The website theme, value can be : `auto` (default value: adapts to system preferences) | `light` | `dark`"
+	})
+	.option("useAutoTitles", {
+		describe:
+			"If set to `true`, use the first file heading as title to be displayed in the navbar and for SEO. Defaults to `false`"
+	})
+	.option("noIndex", {
+		describe:
+			"If set to `true`, the `robots.txt` file will disallow all routes, preventing indexation. Defaults to `false`"
+	})
+	.option("vite.server.fs.allow", {
+		describe: "Add local paths to vite's server fs allow list"
+	})
 	.help()
 	.version(packageJSON.version).argv
 
@@ -94,6 +141,10 @@ const resolve = (mod) => {
 }
 
 const astroConfig = {
+	server: {
+		host: argv.host,
+		port: argv.port
+	},
 	root: new URL("../.compiiile", import.meta.url).pathname,
 	srcDir: new URL("../.compiiile/src", import.meta.url).pathname,
 	outDir: path.join(source, argv.dest || ".compiiile/dist"),

package/docker-compose.yaml

@@ -0,0 +1,9 @@
+services:
+    compiiile-dev:
+        image: node:lts
+        entrypoint: bash -c "yarn && yarn dev --host 0.0.0.0 --port 4321"
+        working_dir: /app
+        volumes:
+            - .:/app
+        ports:
+            - 4321:4321

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@compiiile/compiiile",
 	"private": false,
-	"version": "2.8.4",
+	"version": "2.9.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",
@@ -27,7 +27,7 @@
 		"@astrojs/vue": "^4.0.9",
 		"@babel/core": "^7.0.0-0",
 		"@babel/eslint-parser": "^7.22.15",
-		"@compiiile/compiiile-pro": "^1.0.5",
+		"@compiiile/compiiile-pro": "^1.0.6",
 		"@fontsource-variable/archivo": "^5.0.16",
 		"@fontsource-variable/dm-sans": "^5.0.3",
 		"@fontsource-variable/jetbrains-mono": "^5.0.18",