@compiiile/compiiile 2.14.3 → 2.15.0

package/.compiiile/src/components/ClientScript.vue

@@ -14,6 +14,14 @@
 				console.log(this.$context)
 				console.groupEnd()
 			}
+
+			const activeLink = document.querySelector(".nav-list-item .link-active")
+			const nav = document.querySelector("body > .page > nav")
+
+			const activeLinkTop = activeLink?.getBoundingClientRect()?.y
+			if (activeLink && nav && activeLinkTop > window.innerHeight) {
+				nav.scrollTop = activeLinkTop - window.innerHeight + nav.offsetTop
+			}
 		},
 		methods: {
 			async onScroll() {

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

@@ -6,7 +6,7 @@ import SlidesLayout from "../layouts/SlidesLayout.astro"
 import path from "node:path"
 
 export async function getStaticPaths() {
-    const markdownFiles = await Astro.glob('@source/**/*.{md,mdx}')
+    const markdownFiles = Object.values(import.meta.glob('@source/**/*.{md,mdx}', { eager: true }))
 
     return routeList.map(route => {
         const md = markdownFiles.find(post => {

package/.compiiile/src/style/variables.css

@@ -22,6 +22,8 @@
 	--table-even-lines-background-color: #232329;
 	--pre-background-color: var(--darker-background-color);
 	--pre-color: #d2d7e0;
+	--astro-code-background: var(--darker-background-color);
+	--astro-code-foreground: var(--pre-color);
 	--highlight-color: #9985fe;
 	--slides-controls: #eeaa6f;
 	/* ----------------------- */

package/1-markdown-preview.md

@@ -72,11 +72,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
     To have a line break without a paragraph, you will need to use two trailing spaces.
     Note that this line is separate, but within the same paragraph.
 
--   Unordered list can use asterisks
+- Unordered list can use asterisks
 
-*   Or minuses
+* Or minuses
 
--   Or pluses
+- Or pluses
 ```
 
 1. First ordered list item
@@ -91,11 +91,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
     To have a line break without a paragraph, you will need to use two trailing spaces.
     Note that this line is separate, but within the same paragraph.
 
--   Unordered list can use asterisks
+- Unordered list can use asterisks
 
-*   Or minuses
+* Or minuses
 
--   Or pluses
+- Or pluses
 
 ## Links
 
@@ -211,12 +211,12 @@ Quote break.
 ## Checkboxes
 
 ```md
--   [ ] a todo item
--   [x] I've done this one
+- [ ] a todo item
+- [x] I've done this one
 ```
 
--   [ ] a todo item
--   [x] I've done this one
+- [ ] a todo item
+- [x] I've done this one
 
 ## Inline HTML
 

package/2-slides-preview.mdx

@@ -10,9 +10,9 @@ asSlides: true
 
 ## It can contain some lists
 
--   My first list item
--   A second list item
--   [Some link](https://github.com/AlbanCrepel/compiiile)
+- My first list item
+- A second list item
+- [Some link](https://github.com/AlbanCrepel/compiiile)
 
 ---
 

package/3-pro-installation.md

@@ -35,9 +35,9 @@ npm install @compiiile/compiiile-pro # install as a project dependency with npm
 
 Once installed, 3 commands are available that act the same as the usual `compiiile` command:
 
--   `compiiile-pro dev`
--   `compiiile-pro build`
--   `compiiile-pro preview`
+- `compiiile-pro dev`
+- `compiiile-pro build`
+- `compiiile-pro preview`
 
 ## License
 
@@ -98,12 +98,12 @@ You can become an affiliate and earn 20% on each sale by referring new customers
 
 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

@@ -538,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">

package/CHANGELOG.md

@@ -6,20 +6,20 @@ v2 now uses Astro under the hood !
 
 **:fire: New features**:
 
--   :tada: Added MDX support
--   :zap: Added Hot Reload support
+- :tada: Added MDX support
+- :zap: Added Hot Reload support
 
 **:wrench: Fix**:
 
--   No more Markdown markup on search results
+- No more Markdown markup on search results
 
 **:warning: Breaking changes**:
 
--   Config file should now use ESM syntax:
-    The file should use `export default {}` instead of `module.exports = {}`
--   No more route hash:
-    What was before `https://compiiile.me/#/c/markdown-preview` is now `https://compiiile.me/c/markdown-preview`
--   No more dynamic section hash on page scroll
--   Images size use a new syntax:
-    The new syntax must be in the image's `alt` attribute, preceded by a `pipe`: `![Alt text|100px](imageUrl)` (the value can be in `px` or `%` and represents the image's width).
-    If no margin must be applied, a special attribute can be added like so: `![Alt text|100px;no-margin](imageUrl)`
+- Config file should now use ESM syntax:
+  The file should use `export default {}` instead of `module.exports = {}`
+- No more route hash:
+  What was before `https://compiiile.me/#/c/markdown-preview` is now `https://compiiile.me/c/markdown-preview`
+- No more dynamic section hash on page scroll
+- Images size use a new syntax:
+  The new syntax must be in the image's `alt` attribute, preceded by a `pipe`: `![Alt text|100px](imageUrl)` (the value can be in `px` or `%` and represents the image's width).
+  If no margin must be applied, a special attribute can be added like so: `![Alt text|100px;no-margin](imageUrl)`

package/CONTRIBUTING.md

@@ -10,8 +10,8 @@ Whether, we will always aim to keep the code base and features simple.
 
 Here is the current roadmap and feature ideas for incoming releases:
 
--   [ ] being able to resize the navbar
--   [ ] tag files with frontmatter and search files having specific tags
+- [ ] being able to resize the navbar
+- [ ] tag files with frontmatter and search files having specific tags
 
 If a fix needs to be done or your contributing idea is part of this roadmap, it will most likely be taken into account.
 
@@ -21,8 +21,8 @@ People should also understand that I am not working full-time on this project an
 
 You can launch a local version of the project by cloning the repository, installing the dependencies (with `yarn install`, and use these 3 commands):
 
--   `yarn dev`
--   `yarn build`
--   `yarn preview`
+- `yarn dev`
+- `yarn build`
+- `yarn preview`
 
 Your code should also comply with the project's code style by running `yarn lint` and `yarn format`.

package/README.md

@@ -20,26 +20,26 @@ That's what Compiiile does. And it does it hassle-free !
 
 ## Features
 
--   [x] 📦 **No config required, everything just works out of the box, without changing your files** (resolves images and
-        relative links (cross-references), print-ready rendering, :sunny: light and :first_quarter_moon_with_face: dark themes)
--   [x] 🌱 Available everywhere with static files deployment: just host it somewhere and access it in any browser on your
-        computer, phone or whatever you are using
--   [x] :link: Quick access to your files via the navbar and links to the previous and next file (with table of content
-        generation)
--   [x] :tv: Display some files as slides
--   [x] :mag: **Full-text quick search with content preview**
--   [x] :zap: Hot-reload content preview as you edit it
--   [x] :tada: Supports MDX files: add your own components to your documentation
--   [x] :bulb: Can serve as knowledge base, and handles symlinks to reuse content
--   [x] :wrench: Customizable by env variables or config file, it's up to you
--   [x] :star2: You get it, it simply does the job, period.
+- [x] 📦 **No config required, everything just works out of the box, without changing your files** (resolves images and
+      relative links (cross-references), print-ready rendering, :sunny: light and :first_quarter_moon_with_face: dark themes)
+- [x] 🌱 Available everywhere with static files deployment: just host it somewhere and access it in any browser on your
+      computer, phone or whatever you are using
+- [x] :link: Quick access to your files via the navbar and links to the previous and next file (with table of content
+      generation)
+- [x] :tv: Display some files as slides
+- [x] :mag: **Full-text quick search with content preview**
+- [x] :zap: Hot-reload content preview as you edit it
+- [x] :tada: Supports MDX files: add your own components to your documentation
+- [x] :bulb: Can serve as knowledge base, and handles symlinks to reuse content
+- [x] :wrench: Customizable by env variables or config file, it's up to you
+- [x] :star2: You get it, it simply does the job, period.
 
 ### What Compiiile isn't
 
--   It's not a markdown editor, there are already plenty available, just choose the one that works best for you, even the
-    simplest text editor will do.
--   It's not like VuePress, VitePress, Docusaurus or Notion. Compiiile's goal is to stay simple and stupidly easy without
-    any configuration.
+- It's not a markdown editor, there are already plenty available, just choose the one that works best for you, even the
+  simplest text editor will do.
+- It's not like VuePress, VitePress, Docusaurus or Notion. Compiiile's goal is to stay simple and stupidly easy without
+  any configuration.
 
 > The goal is to help people rely purely on a **language** (_markdown_), not on _any_ platform.
 
@@ -112,9 +112,9 @@ Et voilà, you should be able to preview your files in your browser :tada:.
 
 Once installed, 3 commands are available to see your beautiful markdown files :eyes::
 
--   `compiiile dev`: creates a web server to check your markdown files (alias to only `compiiile`)
--   `compiiile build`: builds all the files for you to serve them production-ready
--   `compiiile preview`: preview your production-ready build
+- `compiiile dev`: creates a web server to check your markdown files (alias to only `compiiile`)
+- `compiiile build`: builds all the files for you to serve them production-ready
+- `compiiile preview`: preview your production-ready build
 
 You can run the command you want in your terminal while being in the desired folder.
 
@@ -178,13 +178,13 @@ like: `https://compiiile.me/s/slides-preview?print-pdf`.
 
 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`.
--   `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).
+- `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`.
+- `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.
 
@@ -338,15 +338,15 @@ you can simply put these 2 lines in your `.compiiileignore`:
 
 ## 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.
+- 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.
 
 ## Special thanks
 
--   [Astro](https://github.com/withastro/astro) for enabling us developers to make lightweight websites
--   [fzf-for-js](https://github.com/ajitid/fzf-for-js) for the search feature
--   [reveal.js](https://revealjs.com/) for displaying markdown files as slides
--   [Vite](https://vitejs.dev/) for helping modern frontend developers keep their mental health sane :heart:
+- [Astro](https://github.com/withastro/astro) for enabling us developers to make lightweight websites
+- [fzf-for-js](https://github.com/ajitid/fzf-for-js) for the search feature
+- [reveal.js](https://revealjs.com/) for displaying markdown files as slides
+- [Vite](https://vitejs.dev/) for helping modern frontend developers keep their mental health sane :heart:
 
 ## Contributing
 
@@ -359,12 +359,12 @@ You can read more about it and the roadmap in the [dedicated contributing guide]
 
 You can add features to Compiiile by using the following projects:
 
--   [compiiile-pro](https://compiiile.me/c/3-pro-installation): Enhance your Markdown files, add diagrams, mindmaps, admonitions, and ready-made components
--   [compiiile-print](https://github.com/compiiile/compiiile-print): Add a print ready page containing all your Markdown files
+- [compiiile-pro](https://compiiile.me/c/3-pro-installation): Enhance your Markdown files, add diagrams, mindmaps, admonitions, and ready-made components
+- [compiiile-print](https://github.com/compiiile/compiiile-print): Add a print ready page containing all your Markdown files
 
 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
+- [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
 

package/bin/config.js

@@ -7,17 +7,19 @@ import path from "node:path"
 import { copyFileSync, cpSync, existsSync } from "node:fs"
 import { fileURLToPath } from "node:url"
 import markdownConfig from "./vitePluginCompiiile/markdownConfig.js"
-import resolvePackagePath from "resolve-package-path"
-import requireg from "requireg"
 import sitemap from "@astrojs/sitemap"
 import { loadConfig } from "c12"
-const source = process.cwd()
-process.env.COMPIIILE_SOURCE = source
-
 import yargs from "yargs/yargs"
 import { hideBin } from "yargs/helpers"
 
-import { readFile } from "fs/promises"
+import { readFile } from "node:fs/promises"
+// Making sure fonts are accessible by vite's server
+import { createRequire } from "node:module"
+import { packageDirectory } from "pkg-dir"
+
+const source = process.cwd()
+process.env.COMPIIILE_SOURCE = source
+
 const packageJSON = JSON.parse(await readFile(fileURLToPath(new URL("../package.json", import.meta.url))))
 
 /*
@@ -150,27 +152,15 @@ if (argv.logo) {
 	}
 }
 
-// Making sure fonts are accessible by vite's server
-import { createRequire } from "node:module"
 const require = createRequire(import.meta.url)
 const pathName = require.resolve("@fontsource-variable/archivo")
-import { packageDirectory } from "pkg-dir"
+
 const viteServerFsAllowList = [source, fileURLToPath(new URL("../", import.meta.url)), path.resolve(pathName, "../../")]
 const packageDir = await packageDirectory()
 if (packageDir) {
 	viteServerFsAllowList.push(packageDir)
 }
 
-const resolve = (mod) => {
-	const resolvedModule = requireg.resolve("vue")
-	const packagePath = resolvePackagePath(mod, resolvedModule)
-	// Check to work on both Windows (using `\`) and UNIX systems (using `/`)
-	return packagePath.slice(
-		0,
-		packagePath.lastIndexOf("/") < 0 ? packagePath.lastIndexOf("\\") : packagePath.lastIndexOf("/")
-	)
-}
-
 const astroConfig = {
 	server: {
 		host: argv.host,
@@ -184,7 +174,36 @@ const astroConfig = {
 		vue({ appEntrypoint: "/src/app.js" }),
 		...(configFromFile.integrations ?? []),
 		mdx(),
-		...(process.env.VITE_COMPIIILE_SITE_URL ? [sitemap()] : [])
+		...(process.env.VITE_COMPIIILE_SITE_URL ? [sitemap()] : []),
+		{
+			name: "include-dependencies",
+			hooks: {
+				"astro:build:setup": ({ vite }) => {
+					vite.ssr.noExternal.push(
+						"kleur",
+						"clsx",
+						"vue",
+						"@vue/compiler-dom",
+						"@vue/compiler-core",
+						"@vue/shared",
+						"@babel/parser",
+						"estree-walker",
+						"source-map-js",
+						"@vue/runtime-dom",
+						"@vue/runtime-core",
+						"@vue/reactivity",
+						"@vue/server-renderer",
+						"@vue/compiler-ssr",
+						"html-escaper",
+						"@oslojs/encoding",
+						"cssesc",
+						"fzf",
+						"@astrojs/internal-helpers",
+						"mrmime"
+					)
+				}
+			}
+		}
 	],
 	...(process.env.VITE_COMPIIILE_SITE_URL ? { site: process.env.VITE_COMPIIILE_SITE_URL } : {}),
 	vite: {
@@ -192,22 +211,7 @@ const astroConfig = {
 		resolve: {
 			preserveSymlinks: true,
 			alias: {
-				"@source": source,
-				// Adding aliases for Compiiile's build command to work when installed globally
-				vue: resolve("vue"),
-				"@vue/server-renderer": resolve("@vue/server-renderer"),
-				"@vue/runtime-dom": resolve("@vue/runtime-dom"),
-				"@vue/runtime-core": resolve("@vue/runtime-core"),
-				kleur: resolve("kleur"),
-				clsx: resolve("clsx"),
-				"html-escaper": resolve("html-escaper"),
-				...(process.env.NODE_ENV === NODE_ENV_PRODUCTION ? { cssesc: resolve("cssesc") } : {}), // Not included in dev because of the 'module is not defined' error otherwise
-				mrmime: resolve("mrmime"),
-				"@vue/reactivity": resolve("@vue/reactivity"),
-				"@vue/shared": resolve("@vue/shared"),
-				fzf: resolve("fzf"),
-				"@oslojs/encoding": resolve("@oslojs/encoding"),
-				"@astrojs/internal-helpers": resolve("@astrojs/internal-helpers") + "/dist"
+				"@source": source
 			}
 		},
 		server: {

package/bin/vitePluginCompiiile/models/Context.js

@@ -99,7 +99,7 @@ export default class {
 					if (isFilePathInIgnoredPatterns) {
 						continue
 					}
-				} catch (e) {
+				} catch (_) {
 					// No .compiiileignore file found at the root
 				}
 

package/build.js

@@ -1,16 +1,16 @@
 import { build } from "vite"
 import { unlinkSync } from "node:fs"
 
-const jsFileName = "style.es.js"
+const fileName = "style"
 await build({
 	build: {
 		lib: {
 			entry: new URL("./.compiiile/src/utils/styles.js", import.meta.url).pathname,
 			name: "style",
 			formats: ["es"],
-			fileName: (_) => jsFileName
+			fileName
 		}
 	}
 })
 
-await unlinkSync(`./dist/${jsFileName}`)
+await unlinkSync(`./dist/${fileName}.js`)