From 929a80013cd981bc300b6767e4bdd88ca4a5f87f Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Mon, 3 Aug 2026 17:08:19 +0200
Subject: [PATCH] refactor: rename InlineEditor to CodeSnippet

The component is a leftover from the React-era site, where it was a live
editor backed by the online compiler. It now renders a static highlighted
snippet, so name it for what it does. Also renames the matching
.inline-editor-* CSS classes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../{InlineEditor.astro => CodeSnippet.astro} |  4 +-
 src/pages/index.astro                         | 40 +++++++++----------
 src/styles/global.css                         | 10 ++---
 3 files changed, 27 insertions(+), 27 deletions(-)
 rename src/components/{InlineEditor.astro => CodeSnippet.astro} (90%)

diff --git a/src/components/InlineEditor.astro b/src/components/CodeSnippet.astro
similarity index 90%
rename from src/components/InlineEditor.astro
rename to src/components/CodeSnippet.astro
index 906072f..77d7791 100644
--- a/src/components/InlineEditor.astro
+++ b/src/components/CodeSnippet.astro
@@ -21,8 +21,8 @@ const theme = {
 };
 ---
 
-<div class="inline-editor-frame">
-  <div class="inline-editor-code">
+<div class="code-snippet-frame">
+  <div class="code-snippet-code">
     <Code code={code} theme={theme} lang={flixGrammar} />
   </div>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0bf19ca..9388a4f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import InlineEditor from "../components/InlineEditor.astro";
+import CodeSnippet from "../components/CodeSnippet.astro";
 import Carousel from "../components/Carousel.astro";
 import {
   httpExample,
@@ -80,7 +80,7 @@ const vscodeSlides = [
         </p>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={httpExample} />
+        <CodeSnippet code={httpExample} />
       </div>
     </div>
 
@@ -102,13 +102,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={adtExample} />
+        <CodeSnippet code={adtExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={recordExample} />
+        <CodeSnippet code={recordExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -138,13 +138,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={purityExample} />
+        <CodeSnippet code={purityExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={polyEffectsExample} />
+        <CodeSnippet code={polyEffectsExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -191,7 +191,7 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={effectsExample} />
+        <CodeSnippet code={effectsExample} />
       </div>
     </div>
 
@@ -220,13 +220,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={regionExample} />
+        <CodeSnippet code={regionExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={purityReflectionExample} />
+        <CodeSnippet code={purityReflectionExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -273,13 +273,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={parallelismExample} />
+        <CodeSnippet code={parallelismExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={concurrencyExample} />
+        <CodeSnippet code={concurrencyExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -323,13 +323,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={traitsExample} />
+        <CodeSnippet code={traitsExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={hktExample} />
+        <CodeSnippet code={hktExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -370,13 +370,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={associatedTypesExample} />
+        <CodeSnippet code={associatedTypesExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={associatedEffectsExample} />
+        <CodeSnippet code={associatedEffectsExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -417,13 +417,13 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={monadicForExample} />
+        <CodeSnippet code={monadicForExample} />
       </div>
     </div>
 
     <div class="row mb-4">
       <div class="col-md-6">
-        <InlineEditor code={applicativeForExample} />
+        <CodeSnippet code={applicativeForExample} />
       </div>
       <div class="col-md-6">
         <div class="card border-0">
@@ -461,7 +461,7 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={javaInteropExample} />
+        <CodeSnippet code={javaInteropExample} />
       </div>
     </div>
 
@@ -478,7 +478,7 @@ const vscodeSlides = [
               makes it simple and elegant to express many fixpoint problems
               (including various graph reachability problems):
             </p>
-            <InlineEditor code={datalogExample} />
+            <CodeSnippet code={datalogExample} />
             <p class="card-text mt-3">
               Datalog constraints are <i>first-class</i> which means that they may
               be passed to and returned from functions, stored in data structures,
@@ -523,7 +523,7 @@ const vscodeSlides = [
         </div>
       </div>
       <div class="col-md-6">
-        <InlineEditor code={latticeExample} />
+        <CodeSnippet code={latticeExample} />
       </div>
     </div>
 
diff --git a/src/styles/global.css b/src/styles/global.css
index a485bdd..7ff09de 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -57,19 +57,19 @@ p:last-child {
     font-size: 1.35rem;
 }
 
-.inline-editor-frame {
+.code-snippet-frame {
     margin-top: 1em;
     margin-bottom: 1.5em;
 }
 
-.inline-editor-code {
+.code-snippet-code {
     padding: 1em 1.75em;
     background-color: #f7f7f7;
     overflow-x: auto;
 }
 
-.inline-editor-code pre,
-.inline-editor-code code {
+.code-snippet-code pre,
+.code-snippet-code code {
     font-size: 12px;
     font-family:
         Monaco, Menlo, "Ubuntu Mono", Consolas, "Source Code Pro",
@@ -77,7 +77,7 @@ p:last-child {
     line-height: 14px;
 }
 
-.inline-editor-code pre {
+.code-snippet-code pre {
     margin: 0;
     background: transparent !important;
 }