perf: remove highlight.js plugin

jsulpis · May 28, 2024 · bcfc8f5 · bcfc8f5
1 parent a6a3307
commit bcfc8f5
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 43 deletions.
diff --git a/.prettierignore b/.prettierignore
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -18,7 +18,6 @@ const { title } = Astro.props;
 
 		<script>
 			import Reveal from "reveal.js";
-			import highlightPlugin from "reveal.js/plugin/highlight/highlight";
 
 			Reveal.initialize({
 				transition: "none",
@@ -31,7 +30,6 @@ const { title } = Astro.props;
 				width: "100%",
 				height: "100%",
 				margin: 0,
-				plugins: [highlightPlugin],
 			});
 
 			// Display a hand cursor when pressing AltLeft

diff --git a/src/slides/1-what-is-color/WhatIsColor.astro b/src/slides/1-what-is-color/WhatIsColor.astro
@@ -13,6 +13,7 @@ import CodeBlock from "../../components/CodeBlock.astro";
 import PartTitle from "../../components/PartTitle.astro";
 import SectionTitle from "../../components/SectionTitle.astro";
 import questionBackground from "../0-intro/assets/question-background.jpg";
+import cssBackground from "./assets/cssBackground.jpg";
 import CellsBrain from "./CellsBrain.astro";
 ---
 
@@ -69,11 +70,15 @@ import CellsBrain from "./CellsBrain.astro";
 </SectionTitle>
 
 <Slide>
-	<CodeBlock lang="css">
+	<img data-src={cssBackground.src} alt="" style="height: 40dvmin" />
+	<!--
+		I use an image instead of the highlight.js plugin because it's super heavy
+		see https://x.com/jsulpis/status/1795536457819431408
+	-->
+	<!-- <CodeBlock lang="css">
 		{
 			`body {
 	background-color: ???;
 }`
-		}
-	</CodeBlock>
+		} -->
 </Slide>
diff --git a/src/slides/1-what-is-color/assets/cssBackground.jpg b/src/slides/1-what-is-color/assets/cssBackground.jpg
diff --git a/src/slides/2-representation-of-colors/assets/cssP3.jpg b/src/slides/2-representation-of-colors/assets/cssP3.jpg
diff --git a/src/slides/2-representation-of-colors/cie-rgb/CIERGB.astro b/src/slides/2-representation-of-colors/cie-rgb/CIERGB.astro
@@ -1,34 +1,40 @@
 ---
 import Slide from "../../../components/Slide.astro";
 import RGBExperiment from "../rgb-experiment/RGBExperiment.svelte";
-import chaplin from "../assets/charlie-chaplin.jpg"
-import movieColor from "../assets/movie-color.jpg"
-import movieSound from "../assets/movie-sound.jpg"
-import wright from "../assets/wright.jpg"
-import guild from "../assets/guild.jpg"
+import chaplin from "../assets/charlie-chaplin.jpg";
+import movieColor from "../assets/movie-color.jpg";
+import movieSound from "../assets/movie-sound.jpg";
+import wright from "../assets/wright.jpg";
+import guild from "../assets/guild.jpg";
 import CIERGBCurves from "./CIERGBCurves.svelte";
 import CIERGBNotations from "./CIERGBNotations.astro";
 ---
 
 <Slide title="1920's">
 	<div class="fragment">
 		<p>Charlie Chaplin</p>
-		<figure >
-			<img data-src={chaplin.src} aria-hidden/>
-			<a href="https://commons.wikimedia.org/wiki/File:Chaplin_the_gold_rush_boot.jpg">
-				<img data-src={chaplin.src} alt="Charlie Chaplin"/>
+		<figure>
+			<img data-src={chaplin.src} aria-hidden />
+			<a
+				href="https://commons.wikimedia.org/wiki/File:Chaplin_the_gold_rush_boot.jpg"
+			>
+				<img data-src={chaplin.src} alt="Charlie Chaplin" />
 			</a>
-			<figcaption>Charlot mangeant sa chaussure dans La Ruée vers l'or (1925)</figcaption>
+			<figcaption>
+				Charlot mangeant sa chaussure dans La Ruée vers l'or (1925)
+			</figcaption>
 		</figure>
 	</div>
 </Slide>
 
 <Slide title="1920's">
 	<p>Cinéma sonore</p>
 	<figure>
-		<img data-src={movieSound.src} aria-hidden/>
-		<a href="https://commons.wikimedia.org/wiki/File:Ray_Vaughan_filming_at_a_Movietone_event_in_Circular_Quay,_Sydney_(8618628686).jpg">
-			<img data-src={movieSound.src}/>
+		<img data-src={movieSound.src} aria-hidden />
+		<a
+			href="https://commons.wikimedia.org/wiki/File:Ray_Vaughan_filming_at_a_Movietone_event_in_Circular_Quay,_Sydney_(8618628686).jpg"
+		>
+			<img data-src={movieSound.src} />
 		</a>
 		<figcaption>Un cadreur et un preneur de son</figcaption>
 	</figure>
@@ -39,7 +45,7 @@ import CIERGBNotations from "./CIERGBNotations.astro";
 	<figure>
 		<img data-src={movieColor.src} aria-hidden />
 		<a href="https://www.cineclubdecaen.com/analyse/couleur.htm">
-			<img data-src={movieColor.src}/>
+			<img data-src={movieColor.src} />
 		</a>
 		<figcaption>Couleurs par le procédé Keller-Dorian Berthon</figcaption>
 	</figure>
@@ -55,7 +61,7 @@ import CIERGBNotations from "./CIERGBNotations.astro";
 		<figure>
 			<figcaption>John Guild</figcaption>
 			<img data-src={guild.src} aria-hidden />
-			<img data-src={guild.src}/>
+			<img data-src={guild.src} />
 		</figure>
 	</div>
 </Slide>
@@ -72,7 +78,6 @@ import CIERGBNotations from "./CIERGBNotations.astro";
 	<CIERGBNotations />
 </Slide>
 
-
 <style lang="scss">
 	.wright-guild {
 		display: flex;
@@ -82,7 +87,7 @@ import CIERGBNotations from "./CIERGBNotations.astro";
 
 		figcaption {
 			font-size: var(--r-main-font-size);
-			margin-bottom: .5em;
+			margin-bottom: 0.5em;
 		}
 	}
 	figure {
@@ -97,8 +102,8 @@ import CIERGBNotations from "./CIERGBNotations.astro";
 			&[aria-hidden] {
 				position: absolute;
 				z-index: -1;
-				transform: scale(1, .9);
-				opacity: .7;
+				transform: scale(1, 0.9);
+				opacity: 0.7;
 				filter: blur(100px);
 			}
 		}

diff --git a/src/slides/2-representation-of-colors/cie-xyz/CIEXYZ.astro b/src/slides/2-representation-of-colors/cie-xyz/CIEXYZ.astro
@@ -25,7 +25,10 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 </Slide>
 
 <Slide title="CIE 1931 XYZ">
-	<img data-src={xyz.src} alt="">
+	<img
+		data-src={xyz.src}
+		alt="Math to convert a color from CIE RGB to CIE XYZ"
+	/>
 	<!--
 		I use an image instead of the math plugin because it destroys performance
 		see https://x.com/jsulpis/status/1795349399746338962
@@ -63,10 +66,11 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 	title="CIE 1931 XYZ"
 	src={xyzVisible}
 	link="https://commons.wikimedia.org/wiki/File:Visible_gamut_within_CIEXYZ_color_space_D65_whitepoint_mesh.webm"
-	authors="Michael Horvath, Christoph Lipka" />
+	authors="Michael Horvath, Christoph Lipka"
+/>
 
 <Slide title="CIE 1931 XYZ">
-	<img data-src={xy.src} alt="">
+	<img data-src={xy.src} alt="" />
 	<!-- <div is:raw>
 		\[\begin{aligned}\\
 			Y &= Y \\
@@ -80,17 +84,22 @@ import CIEXYZCurves from "./CIEXYZCurves.svelte";
 	title="CIE 1931 XYZ"
 	src={xyVisible}
 	link="https://commons.wikimedia.org/w/index.php?title=File:Visible_gamut_within_CIExyY_color_space_D65_whitepoint_mesh.webm"
-	authors="Michael Horvath, Christoph Lipka" />
+	authors="Michael Horvath, Christoph Lipka"
+/>
 
 <Slide title="Diagramme de chromaticité CIE 1931 xy">
 	<div class="r-stack">
-		{[
-			xyDiagram.src,
-			xyDiagramLambda.src,
-			xyColorMix.src,
-			xyCieRgb.src,
-			xyCieRgbWithLabel.src,
-		].map((src, i) => <img class={`diagram${i > 0 ? ' fragment' : ''}`} data-src={src} />)}
+		{
+			[
+				xyDiagram.src,
+				xyDiagramLambda.src,
+				xyColorMix.src,
+				xyCieRgb.src,
+				xyCieRgbWithLabel.src,
+			].map((src, i) => (
+				<img class={`diagram${i > 0 ? " fragment" : ""}`} data-src={src} />
+			))
+		}
 	</div>
 </Slide>
 

diff --git a/src/slides/2-representation-of-colors/p3/P3.astro b/src/slides/2-representation-of-colors/p3/P3.astro
@@ -5,6 +5,7 @@ import xyp3 from "../assets/xyp3.jpg";
 import srgbP3Mismatch from "../assets/srgb-p3-mismatch.png";
 import figmaPreferences from "../assets/figma-preferences.jpg";
 import srgbIssue from "../assets/srgb-issue.png";
+import cssP3 from "../assets/cssP3.jpg";
 import Slide from "../../../components/Slide.astro";
 import CodeBlock from "../../../components/CodeBlock.astro";
 import Luminosity from "./Luminosity.svelte";
@@ -21,7 +22,16 @@ import Luminance from "./Luminance.svelte";
 </Slide>
 
 <Slide title="P3">
-	<CodeBlock lang="css">
+	<img
+		data-src={cssP3.src}
+		alt="CSS code to display a color in P3 space"
+		style="height: 60dvmin"
+	/>
+	<!--
+		I use an image instead of the highlight.js plugin because it's super heavy
+		see https://x.com/jsulpis/status/1795536457819431408
+	-->
+	<!-- <CodeBlock lang="css">
 		{
 			`body {
 	/* sRGB */
@@ -35,7 +45,7 @@ import Luminance from "./Luminance.svelte";
   }
 }`
 		}
-	</CodeBlock>
+	</CodeBlock> -->
 </Slide>
 
 <Slide data-background-image={srgbP3Mismatch.src} />

diff --git a/src/slides/3-color-space-for-humans/ColorSpaceForHumans.astro b/src/slides/3-color-space-for-humans/ColorSpaceForHumans.astro
@@ -10,6 +10,7 @@ import palette from "./assets/palette.jpg";
 import gradients from "./assets/gradient.avif";
 import lab from "./assets/lab.jpg";
 import lch from "./assets/lch.jpg";
+import cssGradient from "./assets/cssGradient.jpg";
 import Gradients from "./gradients/Gradients.astro";
 import HSLPalette from "./palette/HSLPalette.astro";
 import OKLCHPalette from "./palette/OKLCHPalette.astro";
@@ -98,11 +99,13 @@ import SectionTitle from "../../components/SectionTitle.astro";
 
 <Slide title="Palette HSL">
 	<div class="container hsl">
+			<!-- prettier-ignore -->
 		<article class="success">
 			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 12l2 2l4-4m6 2a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
 			<span>Lorem ipsum</span>
 			<svg viewBox="0 0 24 24" focusable="false" height="32" width="32" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
 		</article>
+			<!-- prettier-ignore -->
 		<article class="info">
 			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
 			<span>Lorem ipsum</span>
@@ -117,11 +120,13 @@ import SectionTitle from "../../components/SectionTitle.astro";
 
 <Slide title="Palette OKLCH">
 	<div class="container oklch">
+			<!-- prettier-ignore -->
 		<article class="success">
 			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 12l2 2l4-4m6 2a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
 			<span>Lorem ipsum</span>
 			<svg viewBox="0 0 24 24" focusable="false" height="32" width="32" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
 		</article>
+			<!-- prettier-ignore -->
 		<article class="info">
 			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"></path></svg>
 			<span>Lorem ipsum</span>
@@ -137,13 +142,22 @@ import SectionTitle from "../../components/SectionTitle.astro";
 <Gradients />
 
 <Slide>
-	<CodeBlock lang="css">
+	<img
+		data-src={cssGradient.src}
+		alt="CSS code to choose the interpolation color space in linear gradients"
+		style="height: 30dvmin"
+	/>
+	<!--
+		I use an image instead of the highlight.js plugin because it's super heavy
+		see https://x.com/jsulpis/status/1795536457819431408
+	-->
+	<!-- <CodeBlock lang="css">
 		{
 			`.gradient {
 	background-image: linear-gradient(in oklab, blue, yellow);
 }`
 		}
-	</CodeBlock>
+	</CodeBlock> -->
 	<p class="fragment">Ou librairies : <a href="https://colorjs.io/">Color.js</a>, <a href="https://culorijs.org/">Culori</a>...</p>
 </Slide>
 

diff --git a/src/slides/3-color-space-for-humans/assets/cssGradient.jpg b/src/slides/3-color-space-for-humans/assets/cssGradient.jpg