From 54ca45c9bff22e1f2e0d33873cabc310315792ef Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 1 Apr 2025 18:22:58 +0200
Subject: [PATCH 1/3] Add archive easter egg

---
 src/Elastic.Markdown/Assets/archive.css       | 31 ++++++++++++++
 src/Elastic.Markdown/Assets/styles.css        |  2 +
 .../Slices/Layout/_Archive.cshtml             | 41 ++++++++++++++++++-
 src/Elastic.Markdown/Slices/_Layout.cshtml    |  7 +++-
 4 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 src/Elastic.Markdown/Assets/archive.css

diff --git a/src/Elastic.Markdown/Assets/archive.css b/src/Elastic.Markdown/Assets/archive.css
new file mode 100644
index 000000000..bdc0120bc
--- /dev/null
+++ b/src/Elastic.Markdown/Assets/archive.css
@@ -0,0 +1,31 @@
+#delorean {
+	transition: transform 1500ms linear; /* Use transform translate */
+}
+
+.screen-flash {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.2s ease-out;
+	z-index: 15;
+}
+
+.screen-flash.show {
+	opacity: 1;
+}
+
+@keyframes flash-colors {
+	0% {
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+	50% {
+		background-color: rgb(255, 255, 0, 0.9);
+	}
+	100% {
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+}
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 12b7a0c48..894cbf335 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -12,6 +12,7 @@
 @import './markdown/definition-list.css';
 @import './markdown/images.css';
 @import './modal.css';
+@import './archive.css';
 
 :root {
 	--outline-size: max(2px, 0.08em);
@@ -188,6 +189,7 @@
 }
 
 body {
+	min-height: 100vh;
 	display: grid;
 	grid-template-rows: auto auto 1fr auto;
 }
diff --git a/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml b/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
index 2978d25b2..ae4ae2bdb 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
@@ -1,5 +1,4 @@
 @inherits RazorSlice<LayoutViewModel>
-
 <div class="bg-[#F5F7FA] w-full px-8 py-16 text-center">
 	<div class="container mx-auto mt-20">
 		<h1 class="text-4xl md:text-6xl">Documentation archive</h1>
@@ -11,7 +10,7 @@
 </div>
 <div style="background-image: url(@(Model.Static("delorean-bg.png"))"
      class="delorean-background bg-center bg-repeat-x w-full h-30 bg-blue-developer py-6 flex items-center justify-center">
-	<img src="@Model.Static("delorean.png")" alt="" width="200" class="delorean">
+	<img id="delorean" src="@Model.Static("delorean.png")" alt="" width="200" class="delorean">
 </div>
 <div class="bg-blue-developer text-white size-full px-8 py-16">
 	<div class="container mx-auto">
@@ -329,3 +328,41 @@
 		</a>
 	</div>
 </div>
+<script type="module">
+	const delorean = document.getElementById('delorean');
+	let isTraveling = false;
+	delorean.addEventListener('click', () => {
+		if (!isTraveling) {
+			isTraveling = true;
+			delorean.style.transform = `translateX(calc(100vw - 50px))`;
+
+			// Creative flash timing with patterns
+			const flashPattern = [300, 150, 600, 200, 50, 50, 50, 50, 50]; // Milliseconds delays
+			let totalDelay = 0;
+
+			flashPattern.forEach(delay => {
+				totalDelay += delay;
+				setTimeout(() => {
+					createScreenFlash();
+				}, totalDelay);
+			});
+
+			setTimeout(() => {
+				window.location.assign('/')
+			}, 1500);
+		}
+	});
+
+	function createScreenFlash() {
+		const flash = document.createElement('div');
+		flash.className = 'screen-flash';
+		flash.style.animation = 'flash-colors 0.4s ease-in-out';
+		document.body.appendChild(flash);
+		setTimeout(() => {
+			flash.classList.add('show');
+			setTimeout(() => {
+				flash.remove();
+			}, 400);
+		});
+	}
+</script>
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index 0222f2fa7..32fcc64b5 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -3,6 +3,11 @@
 <!DOCTYPE html>
 <html lang="en" class="h-screen">
 @await RenderPartialAsync(_Head.Create(Model))
+
+@{
+	var layout = Model.CurrentDocument.YamlFrontMatter?.Layout;
+}
+
 <body
 	class="group/body text-ink has-[#primary-nav-hamburger:checked]:overflow-hidden"
 	hx-ext="preload, head-support"
@@ -39,7 +44,7 @@
 			</div>
 		}
 	}
-	@switch (Model.CurrentDocument.YamlFrontMatter?.Layout)
+	@switch (layout)
 	{
 		case LayoutName.NotFound:
 			await RenderPartialAsync(_NotFound.Create(Model));

From d779d7e01e4fb351fa45e0f574d0055e60c5d292 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 1 Apr 2025 18:27:14 +0200
Subject: [PATCH 2/3] Use correct link

---
 src/Elastic.Markdown/Slices/Layout/_Archive.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml b/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
index ae4ae2bdb..21ca8ae32 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
@@ -348,7 +348,7 @@
 			});
 
 			setTimeout(() => {
-				window.location.assign('/')
+				window.location.assign('@Model.Link("/")')
 			}, 1500);
 		}
 	});

From 6ce95b807dc0c68d2628d0a519b0b04d47b20d4c Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 1 Apr 2025 18:28:03 +0200
Subject: [PATCH 3/3] Fix link

---
 src/Elastic.Markdown/Slices/Layout/_Archive.cshtml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml b/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
index 21ca8ae32..d78b028d4 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Archive.cshtml
@@ -335,18 +335,14 @@
 		if (!isTraveling) {
 			isTraveling = true;
 			delorean.style.transform = `translateX(calc(100vw - 50px))`;
-
-			// Creative flash timing with patterns
 			const flashPattern = [300, 150, 600, 200, 50, 50, 50, 50, 50]; // Milliseconds delays
 			let totalDelay = 0;
-
 			flashPattern.forEach(delay => {
 				totalDelay += delay;
 				setTimeout(() => {
 					createScreenFlash();
 				}, totalDelay);
 			});
-
 			setTimeout(() => {
 				window.location.assign('@Model.Link("/")')
 			}, 1500);