@compiiile/compiiile 2.2.0

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

@@ -0,0 +1,48 @@
+<template>
+	<nav class="no-print">
+		<files-tree :current-path="currentPath" />
+	</nav>
+</template>
+
+<script>
+	import FilesTree from "./FilesTree.vue"
+
+	export default {
+		name: "NavBar",
+		components: { FilesTree },
+		props: {
+			currentPath: {
+				type: String,
+				required: true
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	nav {
+		width: var(--nav-bar-width);
+		background-color: var(--darker-background-color);
+		padding: 30px 8px 30px var(--layout-padding);
+		flex: 0 0 auto;
+		position: fixed;
+		top: calc(var(--top-bar-height) + 1px);
+		left: 0;
+		height: calc(100vh - var(--top-bar-height) + 1px);
+		overflow: auto;
+		z-index: 1;
+		transition:
+			width 0.3s var(--ease-in-out-quart),
+			transform 0.1s ease;
+
+		@media screen and (max-width: 900px) {
+			width: 0;
+			transform: translateX(-100%);
+
+			&.navbar--opened {
+				width: 100vw;
+				transform: translateX(0);
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,216 @@
+<template>
+	<li class="nav-list-item no-wrap">
+		<template v-if="item.isDirectory">
+			<svg
+				class="directory-icon"
+				xmlns="http://www.w3.org/2000/svg"
+				width="15"
+				height="15"
+				fill="none"
+				viewBox="0 0 256 256"
+			>
+				<path
+					d="M216.9,208H39.4a7.4,7.4,0,0,1-7.4-7.4V80H216a8,8,0,0,1,8,8V200.9A7.1,7.1,0,0,1,216.9,208Z"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></path>
+				<path
+					d="M32,80V56a8,8,0,0,1,8-8H92.7a7.9,7.9,0,0,1,5.6,2.3L128,80"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></path>
+			</svg>
+
+			<span class="directory-name">{{ item.name }}</span>
+			<ul v-if="item.children.length > 0" class="nav-list-item-children">
+				<nav-list-item
+					v-for="child in item.children"
+					:key="child.uuid"
+					:item="child"
+					:current-path="currentPath"
+				/>
+			</ul>
+		</template>
+
+		<template v-else>
+			<a :href="route.path" class="link" :class="[{ 'link-active': route.path === currentPath }]">
+				<svg
+					v-if="!route.meta.asSlides"
+					class="file-icon"
+					xmlns="http://www.w3.org/2000/svg"
+					width="13"
+					height="13"
+					fill="none"
+					viewBox="0 0 256 256"
+				>
+					<path
+						d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></path>
+					<polyline
+						points="152 32 152 88 208 88"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></polyline>
+				</svg>
+
+				<svg
+					v-else
+					class="file-icon"
+					xmlns="http://www.w3.org/2000/svg"
+					width="13"
+					height="13"
+					fill="none"
+					viewBox="0 0 256 256"
+				>
+					<rect width="256" height="256" fill="none"></rect>
+					<line
+						x1="48"
+						y1="184"
+						x2="48"
+						y2="72"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></line>
+					<line
+						x1="208"
+						y1="72"
+						x2="208"
+						y2="184"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></line>
+					<rect
+						x="32"
+						y="40"
+						width="192"
+						height="32"
+						rx="8"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></rect>
+					<line
+						x1="128"
+						y1="184"
+						x2="128"
+						y2="216"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></line>
+					<circle
+						cx="128"
+						cy="232"
+						r="16"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></circle>
+					<line
+						x1="32"
+						y1="184"
+						x2="224"
+						y2="184"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="16"
+					></line>
+				</svg>
+
+				<span class="link-name">{{ route.meta?.title || item.name }}</span>
+			</a>
+		</template>
+	</li>
+</template>
+
+<script>
+	export default {
+		name: "NavListItem",
+		props: {
+			item: {
+				type: Object,
+				required: true
+			},
+			currentPath: {
+				type: String,
+				required: true
+			}
+		},
+		computed: {
+			route() {
+				return this.$context.routeList.find((route) => route.name === this.item.uuid)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.nav-list-item-children {
+		list-style-type: none;
+		padding-left: 20px;
+		margin-top: 3px;
+	}
+
+	.nav-list-item {
+		padding: 5px 0;
+		color: var(--dimmed-text-color);
+		line-height: 1rem;
+	}
+
+	.directory-icon {
+		margin-left: 2px;
+	}
+
+	.directory-icon path {
+		stroke: var(--dimmed-text-color);
+		fill: var(--dimmed-text-color);
+		display: inline-block;
+	}
+
+	.directory-name {
+		display: inline;
+		margin-left: 3px;
+		position: relative;
+		top: -2px;
+	}
+
+	.file-icon {
+		stroke: var(--dimmed-text-color);
+	}
+
+	.link-name {
+		position: relative;
+		top: -2px;
+		margin-left: 2px;
+	}
+
+	.link {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.link-active {
+		font-weight: bold;
+		color: var(--text-color-base);
+
+		path {
+			stroke: var(--text-color-base);
+		}
+	}
+</style>

package/.compiiile/src/components/searchBar/SearchBar.vue

@@ -0,0 +1,371 @@
+<template>
+	<button class="fake-input" @click="openSearchModal">
+		<svg
+			class="ph-icon search-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>
+			<circle
+				cx="116"
+				cy="116"
+				r="84"
+				fill="none"
+				stroke="#000000"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="16"
+			></circle>
+			<line
+				x1="175.4"
+				y1="175.4"
+				x2="224"
+				y2="224"
+				fill="none"
+				stroke="#000000"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="16"
+			></line>
+		</svg>
+		<span class="search-shortcut">
+			<svg
+				class="command-icon 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>
+				<path
+					d="M180,48h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H152a0,0,0,0,1,0,0V76a28,28,0,0,1,28-28Z"
+					fill="none"
+					stroke="#000000"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></path>
+				<path
+					d="M48,48H76a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0A28,28,0,0,1,48,76V48A0,0,0,0,1,48,48Z"
+					transform="translate(152 152) rotate(180)"
+					fill="none"
+					stroke="#000000"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></path>
+				<path
+					d="M152,152h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0a28,28,0,0,1-28-28V152A0,0,0,0,1,152,152Z"
+					fill="none"
+					stroke="#000000"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></path>
+				<path
+					d="M76,152h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H48a0,0,0,0,1,0,0V180A28,28,0,0,1,76,152Z"
+					transform="translate(152 360) rotate(-180)"
+					fill="none"
+					stroke="#000000"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></path>
+				<rect
+					x="104"
+					y="104"
+					width="48"
+					height="48"
+					fill="none"
+					stroke="#000000"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="16"
+				></rect></svg
+			>k
+		</span>
+	</button>
+
+	<div v-if="searchModalOpened" class="search-bar-wrapper">
+		<div class="search-overlay" @click="searchModalOpened = false"></div>
+
+		<div class="search-bar">
+			<div class="search-input-wrapper">
+				<label for="search-input" class="search-label">
+					<svg
+						class="ph-icon search-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>
+						<circle
+							cx="116"
+							cy="116"
+							r="84"
+							fill="none"
+							stroke="#000000"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="16"
+						></circle>
+						<line
+							x1="175.4"
+							y1="175.4"
+							x2="224"
+							y2="224"
+							fill="none"
+							stroke="#000000"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="16"
+						></line>
+					</svg>
+				</label>
+				<input
+					id="search-input"
+					v-model="searchValue"
+					class="search-input"
+					@input="search"
+					@keyup.down="focusFirstSearchResult"
+					@keyup.up="focusLastSearchResult"
+					@keyup.esc="searchModalOpened = false"
+				/>
+			</div>
+
+			<ul class="search-results">
+				<search-result
+					v-for="searchResult in searchResults"
+					:key="searchResult.fullPath"
+					:search-result="searchResult"
+					@keyup.down.prevent="onSearchResultDownKeyPress"
+					@keyup.up.prevent="onSearchResultUpKeyPress"
+				/>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+	import SearchResult from "./SearchResult.vue"
+	import { searchIndex } from "../../utils/searchIndex"
+
+	const RESULT_PREVIEW_CHARACTER_OFFSET = 120
+
+	export default {
+		name: "SearchBar",
+		components: { SearchResult },
+		data() {
+			return {
+				searchValue: "",
+				searchResults: [],
+				searchModalOpened: false
+			}
+		},
+		mounted() {
+			document.onkeydown = (e) => {
+				const key = e.which || e.keyCode
+
+				if ((e.ctrlKey || e.metaKey) && key === 75) {
+					this.openSearchModal()
+				}
+			}
+		},
+		methods: {
+			search() {
+				if (this.searchValue.trim().length > 1) {
+					const results = searchIndex.find(this.searchValue.trim())
+
+					const formattedResults = {}
+
+					for (const result of results) {
+						const uuid = result.item.uuid
+
+						if (!formattedResults[uuid]) {
+							const file = this.$context.fileList.find((file) => file.uuid === uuid)
+							formattedResults[uuid] = {
+								...file,
+								contentMatches: []
+							}
+						}
+
+						let { textContent } = formattedResults[uuid]
+
+						const matchEndIndex = result.item.startIndex + result.end
+
+						let contentSlice = textContent.slice(
+							Math.max(result.item.startIndex + result.start - RESULT_PREVIEW_CHARACTER_OFFSET, 0),
+							result.item.startIndex + result.start
+						)
+
+						contentSlice += `<mark>`
+
+						contentSlice += textContent.slice(result.item.startIndex + result.start, matchEndIndex)
+
+						contentSlice += `</mark>`
+
+						contentSlice += textContent.slice(
+							matchEndIndex,
+							Math.min(textContent.length, matchEndIndex + RESULT_PREVIEW_CHARACTER_OFFSET)
+						)
+
+						formattedResults[uuid].contentMatches.push(contentSlice)
+					}
+
+					this.searchResults = Object.values(formattedResults)
+				} else {
+					this.searchResults = []
+				}
+			},
+			async openSearchModal() {
+				this.searchValue = ""
+				this.searchResults = []
+
+				this.searchModalOpened = true
+
+				await this.$nextTick()
+
+				const searchInput = document.querySelector("#search-input")
+				searchInput.focus()
+			},
+			focusFirstSearchResult() {
+				const firstSearchResult = document.querySelector(".search-results .search-result")
+				firstSearchResult.focus()
+			},
+			focusLastSearchResult() {
+				const lastSearchResult = document.querySelector(".search-results .search-result:last-child")
+				lastSearchResult.focus()
+			},
+			onSearchResultDownKeyPress(e) {
+				let nextSearchResult = e.target.nextElementSibling
+				if (nextSearchResult) {
+					nextSearchResult.focus()
+				} else {
+					this.focusFirstSearchResult()
+				}
+			},
+			onSearchResultUpKeyPress(e) {
+				let nextSearchResult = e.target.previousElementSibling
+				if (nextSearchResult) {
+					nextSearchResult.focus()
+				} else {
+					this.focusLastSearchResult()
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.search-bar-wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.search-overlay {
+		background-color: rgba(0, 0, 0, 0.3);
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+	}
+
+	.search-label {
+		position: absolute;
+		left: 10px;
+		top: 10px;
+	}
+
+	.search-bar {
+		position: relative;
+		width: min(95%, 600px);
+		padding: 10px;
+		background-color: var(--search-background-color);
+		border-radius: 4px;
+
+		--shadow-color: 255deg 11% 7%;
+		box-shadow:
+			0px 0.2px 0.3px hsl(var(--shadow-color) / 0.05),
+			0px 8.3px 11.9px -0.2px hsl(var(--shadow-color) / 0.22),
+			0px 27.5px 39.4px -0.4px hsl(var(--shadow-color) / 0.38);
+	}
+
+	.search-input-wrapper {
+		position: relative;
+	}
+
+	.fake-input {
+		width: 100px;
+		border: solid 1px var(--search-input-border-color);
+		border-radius: 8px;
+		background-color: var(--darker-background-color);
+		height: 35px;
+		cursor: pointer;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 10px;
+		margin-left: auto;
+		flex: 0 0 auto;
+	}
+
+	.search-icon {
+		color: var(--dimmed-text-color);
+		width: 18px;
+		height: 18px;
+	}
+
+	.search-input {
+		width: 100%;
+		box-sizing: border-box;
+		height: 40px;
+		border-radius: 8px;
+		background-color: var(--darker-background-color);
+		padding: 10px 20px 10px 40px;
+		font-size: var(--text-md);
+		color: var(--text-color-light);
+		border: none;
+		display: block;
+		outline: none;
+
+		&:focus {
+			box-shadow: inset 0 0 2px 2px rgb(153 133 254 / 80%);
+		}
+	}
+
+	.search-results {
+		padding: 0;
+		margin: 10px 0 0;
+		list-style-type: none;
+		box-sizing: border-box;
+		height: min(60vh, 500px);
+		overflow: auto;
+	}
+
+	.search-shortcut {
+		color: var(--dimmed-text-color);
+		font-size: var(--text-sm);
+		display: flex;
+		align-items: center;
+		border: solid 1px var(--dimmed-text-color);
+		border-radius: 4px;
+		padding: 0 4px;
+	}
+
+	.command-icon {
+		margin-right: 3px;
+	}
+</style>