@compiiile/compiiile 2.4.1 → 2.5.0

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

@@ -145,7 +145,8 @@
 		}
 
 		p code,
-		li code {
+		li code,
+		table code {
 			padding: 2px 4px;
 			border-radius: 3px;
 			background-color: var(--code-background-color);
@@ -177,12 +178,16 @@
 			border: solid 1px var(--blockquote-border-color);
 			border-radius: 8px;
 			padding: 0.5em 1em;
-			color: #babfc4;
+			color: var(--blockquote-color);
 			margin: 20px 0;
 
 			p {
 				margin-bottom: 0;
 			}
+
+			code {
+				background-color: rgb(169 156 231 / 22%);
+			}
 		}
 
 		img {
@@ -278,6 +283,11 @@
 
 		.sibling-link {
 			text-decoration: none;
+			border-radius: 2px;
+
+			&:focus-visible {
+				outline: solid 1px var(--separator-color);
+			}
 		}
 
 		.sibling-link--next {

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

@@ -0,0 +1,95 @@
+<template>
+	<button class="theme-switcher" @click="toggleTheme">
+		<!-- sun-dim -->
+		<svg
+			class="theme-icon theme-icon--light"
+			xmlns="http://www.w3.org/2000/svg"
+			width="18"
+			height="18"
+			viewBox="0 0 256 256"
+		>
+			<path
+				d="M120,40V32a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-8-8A8,8,0,0,0,50.34,61.66Zm0,116.68-8,8a8,8,0,0,0,11.32,11.32l8-8a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l8-8a8,8,0,0,0-11.32-11.32l-8,8A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l8,8a8,8,0,0,0,11.32-11.32ZM40,120H32a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Zm88,88a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-8A8,8,0,0,0,128,208Zm96-88h-8a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Z"
+			></path>
+		</svg>
+		<!-- moon -->
+		<svg
+			class="theme-icon theme-icon--dark"
+			xmlns="http://www.w3.org/2000/svg"
+			width="18"
+			height="18"
+			viewBox="0 0 256 256"
+		>
+			<path
+				d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"
+			></path>
+		</svg>
+	</button>
+</template>
+
+<script>
+	const THEME_DARK = "dark"
+	const THEME_LIGHT = "light"
+	export default {
+		name: "ThemeSwitcher",
+		methods: {
+			toggleTheme() {
+				const isLight = document.documentElement.classList.contains(`theme--${THEME_LIGHT}`)
+
+				if (isLight) {
+					document.documentElement.classList.remove(`theme--${THEME_LIGHT}`)
+					document.documentElement.classList.add(`theme--${THEME_DARK}`)
+					localStorage.setItem("COMPIIILE_THEME", THEME_DARK)
+				} else {
+					document.documentElement.classList.remove(`theme--${THEME_DARK}`)
+					document.documentElement.classList.add(`theme--${THEME_LIGHT}`)
+					localStorage.setItem("COMPIIILE_THEME", THEME_LIGHT)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.theme-switcher {
+		position: relative;
+		margin-left: 6px;
+		padding: 16px;
+		appearance: none;
+		outline: none;
+		border: none;
+		cursor: pointer;
+		background-color: var(--layout-background-color);
+		z-index: 0;
+		border-radius: 2px;
+
+		&:focus-visible {
+			outline: solid 1px var(--separator-color);
+		}
+	}
+
+	.theme-icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		fill: var(--dimmed-text-color);
+		will-change: opacity, transform;
+		transform-origin: center;
+		transition:
+			0.2s opacity,
+			0.2s transform var(--ease-in-out-quart);
+	}
+
+	:global(html.theme--light .theme-icon--light),
+	:global(html.theme--dark .theme-icon--dark) {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	:global(html.theme--light .theme-icon--dark),
+	:global(html.theme--dark .theme-icon--light) {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.8);
+	}
+</style>

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

@@ -20,6 +20,7 @@
 					</a>
 				</span>
 				<search-bar />
+				<theme-switcher />
 			</div>
 		</div>
 	</div>
@@ -29,10 +30,11 @@
 	import SearchBar from "../searchBar/SearchBar.vue"
 	import HamburgerButton from "./HamburgerButton.vue"
 	import { site } from "virtual:compiiile"
+	import ThemeSwitcher from "./ThemeSwitcher.vue"
 
 	export default {
 		name: "TopBar",
-		components: { HamburgerButton, SearchBar },
+		components: { ThemeSwitcher, HamburgerButton, SearchBar },
 		computed: {
 			title() {
 				return site.title
@@ -86,7 +88,7 @@
 	}
 
 	.title {
-		margin: 0;
+		margin: 0 6px 0 0;
 		font-size: 1.5rem;
 		max-width: 100%;
 		display: inline-block;

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

@@ -272,6 +272,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		z-index: 1;
 	}
 
 	.search-overlay {
@@ -336,13 +337,13 @@
 		background-color: var(--darker-background-color);
 		padding: 10px 20px 10px 40px;
 		font-size: var(--text-md);
-		color: var(--text-color-light);
-		border: none;
+		color: var(--text-color-base);
+		border: solid 1px var(--search-input-border-color);
 		display: block;
 		outline: none;
 
 		&:focus {
-			box-shadow: inset 0 0 2px 2px rgb(153 133 254 / 80%);
+			box-shadow: inset 0 0 1px 1px rgba(153, 133, 254, 0.6);
 		}
 	}
 

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

@@ -48,7 +48,7 @@
 		}
 
 		&:focus {
-			box-shadow: inset 0 0 2px 2px rgb(153 133 254 / 80%);
+			box-shadow: inset 0 0 1px 1px rgba(153, 133, 254, 0.6);
 			outline: none;
 		}
 	}

package/.compiiile/src/layouts/BaseLayout.astro

@@ -1,4 +1,5 @@
 ---
+import ThemeLoader from "./ThemeLoader.astro";
 import '../utils/styles.js'
 import {SEO} from "astro-seo"
 const {title, description, isNotFoundPage} = Astro.props
@@ -13,6 +14,8 @@ const faviconBaseUrl = `${ siteBase }favicon.png`
 const faviconAbsoluteUrl = `${ siteUrl }/${ faviconBaseUrl }`
 
 const metaDescription = description || site.description
+
+const defaultTheme = site.theme
 ---
 
 <html lang="en">
@@ -33,6 +36,7 @@ const metaDescription = description || site.description
                      }
                  }}
             />}
+    <ThemeLoader defaultTheme={defaultTheme}/>
 </head>
 <body>
 <slot></slot>

package/.compiiile/src/layouts/ThemeLoader.astro

@@ -0,0 +1,26 @@
+---
+const { defaultTheme } = Astro.props
+---
+
+<script is:inline define:vars={{ defaultTheme }}>
+    const theme = (() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('COMPIIILE_THEME')) {
+            return localStorage.getItem('COMPIIILE_THEME');
+        }
+        if (["auto", "dark"].includes(defaultTheme) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    })();
+
+    if (theme === 'light') {
+        document.documentElement.classList.remove('theme--dark');
+        document.documentElement.classList.add('theme--light');
+    } else {
+        document.documentElement.classList.remove('theme--light');
+        document.documentElement.classList.add('theme--dark');
+    }
+
+    window.localStorage.setItem('COMPIIILE_THEME', theme);
+
+</script>

package/.compiiile/src/style/code-theme.scss

@@ -1,22 +1,32 @@
 :root {
 	--astro-code-color-text: #eeeeee;
-	--astro-code-color-background: var(--code-background-color);
+	--astro-code-color-background: var(--pre-background-color);
 	--astro-code-token-constant: #ec6875;
-	--astro-code-token-string: var(--code-color);
+	--astro-code-token-string: var(--pre-color);
 	--astro-code-token-comment: #8999a9;
-	--astro-code-token-keyword: var(--code-color);
+	--astro-code-token-keyword: var(--pre-color);
 	--astro-code-token-parameter: #ffb36f;
 	--astro-code-token-function: #ffb36f;
 	--astro-code-token-string-expression: #9bea93;
-	--astro-code-token-punctuation: var(--code-color);
+	--astro-code-token-punctuation: var(--pre-color);
 	--astro-code-token-link: #9a84ff;
 }
 
+.theme--light {
+	--astro-code-color-text: var(--pre-color);
+	--astro-code-token-constant: #b56959;
+	--astro-code-token-comment: #667566;
+	--astro-code-token-parameter: #b07d48;
+	--astro-code-token-function: #b07d48;
+	--astro-code-token-string-expression: #1e754f;
+	--astro-code-token-link: #481eff;
+}
+
 .astro-code {
 	display: block;
 	overflow-x: auto;
-	background: var(--code-background-color);
-	border: solid 1px var(--code-background-color); /* same color, useful when printing without background graphics */
+	background: var(--pre-background-color);
+	border: solid 1px var(--pre-background-color); /* same color, useful when printing without background graphics */
 	color: var(--code-color);
 	padding: 20px;
 	border-radius: 8px;

package/.compiiile/src/style/print.scss

@@ -67,7 +67,6 @@
 			li,
 			td,
 			th {
-				color: white !important;
 				-webkit-print-color-adjust: economy;
 			}
 

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

@@ -2,6 +2,8 @@
 	--r-code-font: "JetBrains Mono Variable", monospace;
 	--slide-padding-vertical: 40px;
 	--slide-padding-horizontal: 80px;
+	--r-main-color: var(--text-color-base);
+	--r-heading-color: var(--text-color-base);
 }
 
 .reveal {
@@ -26,6 +28,8 @@
 		width: 100%;
 		margin: 0 auto;
 		max-width: 1200px;
+		box-shadow: none;
+		background-color: var(--layout-background-color) !important;
 	}
 
 	h1,
@@ -63,16 +67,19 @@
 		font-size: 2vmin !important;
 	}
 
-	p code {
-		background-color: var(--layout-background-color);
+	p code,
+	li code,
+	table code {
+		background-color: var(--code-background-color);
 		padding: 2px 4px;
 		border-radius: 3px;
-		font-size: 2vmin;
+		color: var(--code-color);
 	}
 
 	blockquote {
 		background-color: var(--blockquote-background-color);
 		border: solid 1px var(--blockquote-border-color);
+		color: var(--blockquote-color);
 		border-radius: 8px;
 		padding: 0.5em 1em;
 		width: 100%;
@@ -81,6 +88,10 @@
 		margin: 0 auto;
 	}
 
+	blockquote code {
+		background-color: var(--blockquote-background-color) !important;
+	}
+
 	ul {
 		margin-left: 0;
 	}
@@ -97,16 +108,42 @@
 	img {
 		object-fit: contain;
 	}
+
+	table {
+		font-size: 2vmin;
+	}
+	table tr {
+		border: 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;
+	}
 }
 
 .reveal-viewport {
 	background-color: var(--darker-background-color) !important;
 }
 
-.reveal .controls {
-	color: var(--slides-controls) !important;
-}
-
+.reveal .controls,
 .reveal .progress {
 	color: var(--slides-controls) !important;
 }
@@ -126,6 +163,12 @@
 	}
 }
 
+html.theme--light p code,
+html.theme--light li code,
+html.theme--light td code {
+	background-color: #ececee;
+}
+
 html.reveal-print .reveal .slides section {
 	padding: var(--slide-padding-vertical) var(--slide-padding-horizontal) !important;
 }

package/.compiiile/src/style/variables.scss

@@ -10,38 +10,44 @@
 	--r-code-font: "JetBrains Mono Variable", monospace;
 
 	/* Dark theme by default */
+	--layout-background-color: #1b1b1f;
+	--darker-background-color: #161618;
+	--code-background-color: #2b2b31;
+	--blockquote-background-color: rgba(153, 133, 254, 0.1);
+	--blockquote-border-color: hsl(247, 26%, 25%);
+	--blockquote-color: hsl(236 60% 93% / 1);
 	--text-color-base: #f7fafc;
 	--text-color-light: #9ca6b3;
-	--layout-background-color: #1a1b25;
-	--darker-background-color: #16161d;
-	--search-background-color: #1a1b25;
-	--separator-color: #101014;
 	--dimmed-text-color: #8e989e;
-	--code-background-color: #2a2c3c;
-	--code-color: #d2d7e0;
+	--table-even-lines-background-color: #232329;
+	--pre-background-color: var(--darker-background-color);
+	--pre-color: #d2d7e0;
 	--highlight-color: #9985fe;
+	--slides-controls: #eeaa6f;
+	/* ----------------------- */
+
+	--search-background-color: var(--layout-background-color);
+	--search-input-border-color: #88888812;
 	--link-color: var(--highlight-color);
-	--blockquote-background-color: rgba(153, 133, 254, 0.1);
-	--blockquote-border-color: hsl(247, 26%, 30%);
+	--separator-color: #8883;
 	--table-border-color: var(--separator-color);
-	--table-odd-lines-background-color: var(--code-background-color);
-	--table-even-lines-background-color: #262a33;
-
-	--slides-controls: #eeaa6f;
+	--code-color: var(--blockquote-color);
+	--table-odd-lines-background-color: var(--layout-background-color);
 }
 
 .theme--light {
+	--layout-background-color: #ffffff;
+	--darker-background-color: #f9f9fa;
+	--code-background-color: #f6f6f7;
+	--blockquote-background-color: rgba(169, 156, 231, 0.12);
+	--blockquote-border-color: rgba(169, 156, 231, 0.05);
+	--blockquote-color: hsl(247 41% 50% / 1);
 	--text-color-base: #37342f;
 	--text-color-light: #a3a29f;
-	--navbar-background-color: #f8f8f8;
-	--layout-background-color: #ffffff;
-	--separator-color: #e2e2e2;
 	--dimmed-text-color: #625f57;
-	--code-background-color: #eeeeee;
-	--blockquote-background-color: #f7f6f6;
-	--blockquote-border-color: #dfe2e5;
+	--table-even-lines-background-color: #fafafa;
+	--pre-background-color: #f6f6f7;
+	--pre-color: #393a34;
 	--highlight-color: #564ce0;
-	--table-border-color: #cccccc;
-	--table-odd-lines-background-color: white;
-	--table-even-lines-background-color: #f8f8f8;
+	--slides-controls: #ea9448;
 }

package/CONTRIBUTING.md

@@ -12,9 +12,6 @@ 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
--   [ ] Make a theme switcher and make custom themes available to others (load external CSS)
--   [ ] rewrite the whole thing in TypeScript and use Tailwind if I am ever motivated
--   [ ] add some remark plugins (Mermaid ? Any ideas from you ?)
 
 If a fix needs to be done or your contributing idea is part of this roadmap, it will most likely be taken into account.