@compiiile/compiiile 2.2.0

package/.compiiile/src/app.js

@@ -0,0 +1,5 @@
+import * as context from "virtual:compiiile"
+
+export default (app) => {
+	app.config.globalProperties.$context = context
+}

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

@@ -0,0 +1,48 @@
+<template><div></div></template>
+
+<script>
+	export default {
+		name: "ClientScript",
+		beforeRouteUpdate() {
+			window.removeEventListener("scroll", this.onScroll)
+		},
+		mounted() {
+			window.addEventListener("scroll", this.onScroll)
+
+			if (import.meta.env.MODE === "development") {
+				console.group("Compiiile context")
+				console.log(this.$context)
+				console.groupEnd()
+			}
+		},
+		methods: {
+			async onScroll() {
+				const tocItems = [...document.querySelectorAll(".toc a")]
+				const anchors = [...document.querySelectorAll(".header-anchor")]
+
+				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+				const cursor = document.querySelector(".cursor")
+
+				// Iterate backwards, on the first match highlight it and break
+				for (let i = tocItems.length - 1; i >= 0; i--) {
+					if (scrollTop > anchors[i].offsetTop) {
+						for (let j = 0; j < tocItems.length; j++) {
+							tocItems[j].classList.remove("active")
+						}
+
+						const activeTocItem = tocItems[i]
+						activeTocItem.classList.add("active")
+						if (activeTocItem && cursor) {
+							const activeTocItemBounds = activeTocItem.getBoundingClientRect()
+
+							const tocWrapperTop = document.querySelector(".toc")?.getBoundingClientRect()?.top
+							cursor.style.height = `${activeTocItemBounds.height}px`
+							cursor.style.transform = `translateY(${activeTocItemBounds.top - tocWrapperTop}px)`
+						}
+						break
+					}
+				}
+			}
+		}
+	}
+</script>

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

@@ -0,0 +1,288 @@
+<template>
+	<div>
+		<table-of-content :table-of-content="tableOfContent" class="no-print" />
+
+		<div class="markdown-content">
+			<slot></slot>
+		</div>
+
+		<div
+			v-if="fileSiblings.prev || fileSiblings.next"
+			class="siblings no-print"
+			:style="{
+				justifyContent: !fileSiblings.prev ? 'flex-end' : 'space-between'
+			}"
+		>
+			<a v-if="fileSiblings.prev" class="sibling-link" :href="fileSiblings.prev.routePath">
+				<svg
+					class="ph-icon"
+					xmlns="http://www.w3.org/2000/svg"
+					width="192"
+					height="192"
+					fill="#000000"
+					viewBox="0 0 256 256"
+				>
+					<rect width="256" height="256" fill="none"></rect>
+					<line
+						x1="216"
+						y1="128"
+						x2="40"
+						y2="128"
+						fill="none"
+						stroke="#000000"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></line>
+					<polyline
+						points="112 56 40 128 112 200"
+						fill="none"
+						stroke="#000000"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></polyline>
+				</svg>
+				{{ fileSiblings.prev.title }}
+			</a>
+			<a v-if="fileSiblings.next" class="sibling-link sibling-link--next" :href="fileSiblings.next.routePath">
+				{{ fileSiblings.next.title }}
+				<svg
+					class="ph-icon"
+					xmlns="http://www.w3.org/2000/svg"
+					width="192"
+					height="192"
+					fill="#000000"
+					viewBox="0 0 256 256"
+				>
+					<rect width="256" height="256" fill="none"></rect>
+					<line
+						x1="40"
+						y1="128"
+						x2="216"
+						y2="128"
+						fill="none"
+						stroke="#000000"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></line>
+					<polyline
+						points="144 56 216 128 144 200"
+						fill="none"
+						stroke="#000000"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></polyline>
+				</svg>
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+	import TableOfContent from "./TableOfContent.vue"
+
+	export default {
+		name: "ContentWrapper",
+		components: { TableOfContent },
+		props: {
+			name: {
+				type: String,
+				required: true
+			},
+			tableOfContent: {
+				type: Array,
+				required: true
+			}
+		},
+		computed: {
+			fileIndex() {
+				return this.$context.fileList.findIndex((file) => file.uuid === this.name)
+			},
+			file() {
+				return this.fileIndex > -1 ? this.$context.fileList[this.fileIndex] : null
+			},
+			fileSiblings() {
+				return {
+					prev: this.$context.fileList[this.fileIndex - 1] ?? null,
+					next: this.$context.fileList[this.fileIndex + 1] ?? null
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	:deep(.markdown-content) {
+		margin-right: calc(var(--toc-width) + 80px);
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5 {
+			&:before {
+				/* hack to offset scroll on route hash navigation */
+				padding-top: calc(var(--top-bar-height) - 1px);
+				margin-top: calc((var(--top-bar-height) - 1px) * -1);
+				content: " ";
+				display: block;
+			}
+		}
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 20px 0 10px;
+		}
+
+		h2 {
+			margin-top: 40px;
+		}
+
+		p code,
+		li code {
+			padding: 2px 4px;
+			border-radius: 3px;
+			background-color: var(--code-background-color);
+			border: solid 1px var(--code-background-color); /* same color, useful when printing without background graphics */
+			color: var(--code-color);
+			font-family: var(--monospace);
+			font-size: 0.85rem;
+		}
+
+		p,
+		ul {
+			line-height: 1.618rem;
+			margin-bottom: 1rem;
+		}
+
+		ul {
+			padding-left: 40px;
+		}
+
+		hr {
+			margin: 40px 0;
+			background-color: var(--separator-color);
+			height: 1px;
+			border: 0;
+		}
+
+		blockquote {
+			background-color: var(--blockquote-background-color);
+			border: solid 1px var(--blockquote-border-color);
+			border-radius: 8px;
+			padding: 0.5em 1em;
+			color: #babfc4;
+			margin: 20px 0;
+
+			p {
+				margin-bottom: 0;
+			}
+		}
+
+		img {
+			max-width: 100%;
+			margin: 0 auto;
+			display: block;
+			object-fit: contain;
+		}
+
+		a {
+			color: var(--link-color);
+		}
+
+		table {
+			padding: 0;
+			border-collapse: collapse;
+			margin-bottom: 20px;
+		}
+
+		table tr {
+			border-top: 1px solid var(--table-border-color);
+			background-color: var(--table-odd-lines-background-color);
+			margin: 0;
+			padding: 0;
+		}
+
+		table tr:nth-child(2n) {
+			background-color: var(--table-even-lines-background-color);
+		}
+
+		table tr th {
+			font-weight: bold;
+			border: 1px solid var(--table-border-color);
+			text-align: left;
+			margin: 0;
+			padding: 6px 13px;
+		}
+
+		table tr td {
+			border: 1px solid var(--table-border-color);
+			text-align: left;
+			margin: 0;
+			padding: 6px 13px;
+		}
+
+		table tr th :first-child,
+		table tr td :first-child {
+			margin-top: 0;
+		}
+
+		table tr th :last-child,
+		table tr td :last-child {
+			margin-bottom: 0;
+		}
+
+		pre code {
+			margin-bottom: 1rem;
+		}
+
+		pre.astro-code {
+			margin-bottom: 20px;
+			font-size: 0.85rem;
+		}
+
+		.header-anchor {
+			float: left;
+			margin-left: -0.87em;
+			padding-right: 0.23em;
+			font-weight: 500;
+			opacity: 0;
+			transition: opacity 0.25s;
+			text-decoration: none;
+		}
+
+		h1:hover .header-anchor,
+		h2:hover .header-anchor,
+		h3:hover .header-anchor,
+		h4:hover .header-anchor,
+		h5:hover .header-anchor,
+		h6:hover .header-anchor,
+		.header-anchor:focus {
+			opacity: 1;
+		}
+	}
+
+	.siblings {
+		display: flex;
+		margin-right: calc(var(--toc-width) + 80px);
+		color: var(--link-color);
+		margin-top: 80px;
+		gap: 20px;
+		flex-wrap: wrap;
+
+		.sibling-link {
+			text-decoration: none;
+		}
+
+		.sibling-link--next {
+			text-align: right;
+			margin-left: auto;
+		}
+	}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+	<div ref="slidesDeckWrapper" class="slides-deck-wrapper">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "SlidesContent",
+		data() {
+			return {
+				loaded: false
+			}
+		},
+		async mounted() {
+			const slidesContent = document.querySelector(".slides-content")
+			slidesContent.innerHTML = `<div class="reveal deck"><div class="slides"><section>${slidesContent.innerHTML
+				.split("<hr>")
+				.join("</section><section>")}</section></div></div>`
+
+			this.loaded = true
+
+			const deck = document.querySelector(".deck")
+
+			const Reveal = (await import("reveal.js")).default(deck, {
+				embedded: true
+			})
+
+			await Reveal.initialize({
+				slideNumber: "c/t"
+			})
+
+			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}`)
+			})
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "reveal.js/dist/reveal.css";
+	@import "reveal.js/dist/theme/black.css";
+	@import "../style/slides.scss";
+
+	:global(#app) {
+		height: 100%;
+	}
+
+	.slides-deck-wrapper {
+		opacity: 0;
+	}
+</style>

package/.compiiile/src/components/TableOfContent.vue

@@ -0,0 +1,65 @@
+<template>
+	<ul class="toc text-xs">
+		<div ref="cursor" class="cursor"></div>
+		<li
+			v-for="tocItem in tableOfContent"
+			:key="tocItem.slug"
+			:style="{ marginLeft: `${20 * (tocItem.depth - 1)}px` }"
+			class="toc-item"
+		>
+			<a :href="`#${tocItem.slug}`" class="toc-link">{{ tocItem.text.substring(1) }}</a>
+		</li>
+	</ul>
+</template>
+
+<script>
+	export default {
+		name: "TableOfContent",
+		props: {
+			tableOfContent: {
+				type: Array,
+				required: true
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.toc {
+		width: var(--toc-width);
+		position: sticky;
+		right: 0;
+		top: 100px;
+		float: right;
+		padding-left: 15px;
+		color: var(--dimmed-text-color);
+		list-style-type: none;
+		border-left: solid 1px var(--separator-color);
+		line-height: 1.3rem;
+	}
+
+	.toc-item {
+		padding: 2px 0;
+	}
+
+	.cursor {
+		height: 0px;
+		position: absolute;
+		left: -1px;
+		top: 0;
+		width: 2px;
+		background-color: var(--highlight-color);
+		transition:
+			height 0.2s var(--ease-in-out-quart),
+			transform 0.2s linear;
+	}
+
+	.toc-link {
+		text-decoration: none;
+		transition: color 0.2s linear;
+
+		&.active {
+			color: var(--text-color-base);
+		}
+	}
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+	<div class="hamburger" @click="toggleNavBar">
+		<span class="hamburger-line"></span>
+		<span class="hamburger-line"></span>
+		<span class="hamburger-line"></span>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "HamburgerButton",
+		data() {
+			return {
+				isOpened: false
+			}
+		},
+		methods: {
+			toggleNavBar() {
+				const navBar = document.querySelector("nav")
+				const hamburger = document.querySelector(".hamburger")
+
+				navBar.classList.toggle("navbar--opened")
+				hamburger.classList.toggle("hamburger--opened")
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.hamburger {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 13px;
+		width: 20px;
+		cursor: pointer;
+		margin-right: 10px;
+		flex: 0 0 auto;
+
+		.hamburger-line {
+			display: block;
+			height: 1px;
+			position: relative;
+			background-color: var(--dimmed-text-color);
+			transition:
+				transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
+				width 0.3s ease,
+				opacity 0.35s ease;
+
+			&:nth-child(1) {
+				transform-origin: top left;
+				width: 100%;
+			}
+
+			&:nth-child(2) {
+				width: 50%;
+			}
+
+			&:nth-child(3) {
+				transform-origin: bottom left;
+				width: 75%;
+			}
+		}
+
+		&.hamburger--opened {
+			.hamburger-line:nth-child(1),
+			.hamburger-line:nth-child(3) {
+				opacity: 1;
+				width: 87.5%;
+			}
+
+			.hamburger-line:nth-child(1) {
+				transform: translateX(4.5px) rotate(45deg);
+			}
+
+			.hamburger-line:nth-child(2) {
+				opacity: 0;
+				transform: scale(0, 1);
+			}
+
+			.hamburger-line:nth-child(3) {
+				transform: translateX(4.5px) rotate(-45deg);
+			}
+		}
+
+		@media screen and (min-width: 900px) {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+	<div class="top-bar no-print">
+		<div class="centered-layout">
+			<div class="top-bar-content">
+				<hamburger-button />
+				<span class="home-link-wrapper">
+					<a :href="logoUrl">
+						<img
+							v-if="isLogoDefined"
+							:src="`${base}favicon.png`"
+							:width="30"
+							:height="30"
+							class="logo"
+							alt="logo"
+						/>
+					</a>
+
+					<a :href="base" class="home-link">
+						<h1 class="title">{{ title }}</h1>
+					</a>
+				</span>
+				<search-bar />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import SearchBar from "../searchBar/SearchBar.vue"
+	import HamburgerButton from "./HamburgerButton.vue"
+	import { site } from "virtual:compiiile"
+
+	export default {
+		name: "TopBar",
+		components: { HamburgerButton, SearchBar },
+		computed: {
+			title() {
+				return site.title
+			},
+			isLogoDefined() {
+				return site.logo !== undefined
+			},
+			base() {
+				let base = import.meta.env.BASE_URL
+
+				if (!base.endsWith("/")) {
+					base += "/"
+				}
+
+				return base
+			},
+			logoUrl() {
+				return site.logoUrl ?? this.base
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.top-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		border-bottom: solid 1px var(--separator-color);
+		background-color: var(--layout-background-color);
+		z-index: 3;
+	}
+
+	.top-bar-content {
+		padding: 20px var(--layout-padding);
+		height: var(--top-bar-height);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.home-link-wrapper {
+		display: flex;
+		align-items: center;
+	}
+
+	.home-link {
+		color: var(--text-color-base) !important;
+		text-decoration: none;
+	}
+
+	.title {
+		margin: 0;
+		font-size: 1.5rem;
+		max-width: 100%;
+		display: inline-block;
+		-webkit-box-orient: vertical;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: normal;
+	}
+
+	.logo {
+		margin-right: 10px;
+		border-radius: 2px;
+		display: block;
+	}
+</style>

package/.compiiile/src/components/layout/navBar/FilesTree.vue

@@ -0,0 +1,35 @@
+<template>
+	<ul class="files-tree text-xs">
+		<nav-list-item
+			v-for="navItem in $context.filesTree"
+			:key="navItem.uuid"
+			:item="navItem"
+			:current-path="currentPath"
+		/>
+	</ul>
+</template>
+
+<script>
+	import NavListItem from "./NavListItem.vue"
+
+	export default {
+		name: "FilesTree",
+		components: { NavListItem },
+		props: {
+			currentPath: {
+				type: String,
+				required: true
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.files-tree {
+		list-style-type: none;
+	}
+
+	.files-tree {
+		padding-left: 0;
+	}
+</style>