@compiiile/compiiile 2.6.0 → 2.7.1

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

@@ -205,6 +205,9 @@
 			padding: 0;
 			border-collapse: collapse;
 			margin-bottom: 20px;
+			display: block;
+			max-width: 100%;
+			overflow-x: scroll;
 		}
 
 		table tr {

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

@@ -111,7 +111,11 @@
 
 	table {
 		font-size: 2vmin;
+		display: block;
+		max-width: 100%;
+		overflow-x: scroll;
 	}
+
 	table tr {
 		border: 1px solid var(--table-border-color);
 		background-color: var(--table-odd-lines-background-color);
@@ -172,3 +176,17 @@ html.theme--light td code {
 html.reveal-print .reveal .slides section {
 	padding: var(--slide-padding-vertical) var(--slide-padding-horizontal) !important;
 }
+
+@media screen and (max-width: 1400px) {
+	:root {
+		--slide-padding-vertical: 20px;
+		--slide-padding-horizontal: 40px;
+	}
+}
+
+@media screen and (max-width: 800px) {
+	:root {
+		--slide-padding-vertical: 20px;
+		--slide-padding-horizontal: 10px;
+	}
+}

package/README.md

@@ -162,18 +162,19 @@ 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` |
-| `vite.server.fs.allow` | `string[]` | Add local paths to vite's server fs allow list                                                              |
+| 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` |
+| `vite.server.fs.allow` | `string[]` | Add local paths to vite's server fs allow list                                                                       |
 
 You can use these parameters in 2 ways:
 

package/bin/config.js

@@ -53,6 +53,7 @@ process.env.VITE_COMPIIILE_LOGO_URL = argv.logoUrl ?? ""
 process.env.VITE_COMPIIILE_THEME = argv.theme ?? "auto"
 
 process.env.VITE_COMPIIILE_DATA = JSON.stringify(argv.data ?? {})
+process.env.VITE_COMPIIILE_USE_AUTO_TITLES = /true/i.test(argv.useAutoTitles) // defaults to `false` if not set or not equal to `true`
 
 // Handling logo and favicon
 process.env.VITE_COMPIIILE_LOGO = null

package/bin/vitePluginCompiiile/models/Context.js

@@ -83,8 +83,9 @@ export default class {
 				const isDirectory = fs.statSync(filePath).isDirectory()
 				const uuid = uuidv4()
 				const fileName = path.parse(filePath).name
-				const isReadmeFile = !isDirectory
-					&& filePath.toLowerCase().match(new RegExp(/^/.source + entryFileMatcher.source + /\.mdx?$/.source))
+				const isReadmeFile =
+					!isDirectory &&
+					filePath.toLowerCase().match(new RegExp(/^/.source + entryFileMatcher.source + /\.mdx?$/.source))
 
 				let filesTreeItem = new FilesTreeItem(uuid, fileName)
 
@@ -119,12 +120,31 @@ export default class {
 
 						const meta = renderedMarkdown.metadata.frontmatter
 
-						fileListItem.title = meta.title || fileName
+						let firstHeading = null
+						if (
+							JSON.parse(process.env.VITE_COMPIIILE_USE_AUTO_TITLES) &&
+							renderedMarkdown.metadata.headings.length > 0
+						) {
+							let firstHeadingIndex = 0
+							if (Object.keys(renderedMarkdown.metadata.frontmatter).length > 0) {
+								// If a frontmatter is set, it is present as the first index in the `headings` array
+								firstHeadingIndex = 1
+							}
+							// Remove the starting '#' from the title
+							firstHeading = renderedMarkdown.metadata.headings[firstHeadingIndex]?.text?.slice(1)
+						}
+
+						fileListItem.title = meta.title || firstHeading || fileName
 						fileListItem.meta = meta
 						fileListItem.meta.title = fileListItem.meta.title || fileListItem.title
 						fileListItem.fullPath = filePath
 
-						const routePath = this.generateRoutePathFromFilePath(filePath, "", fileListItem.meta.asSlides, entryFileMatcher)
+						const routePath = this.generateRoutePathFromFilePath(
+							filePath,
+							"",
+							fileListItem.meta.asSlides,
+							entryFileMatcher
+						)
 
 						if (isReadmeFile) {
 							this.fileList.unshift(fileListItem)

package/package.json

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