Updated the landing page

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1731177782673
+		"lastUpdateCheck": 1730829808749
 	}
 }

package.json

@@ -12,11 +12,8 @@
   "dependencies": {
     "@astrojs/starlight": "^0.28.2",
     "@astrojs/tailwind": "^5.1.1",
-    "@preline/overlay": "^2.0.2",
     "astro": "^4.15.9",
     "astro-expressive-code": "^0.32.3",
-    "boxicons": "^2.1.4",
-    "preline": "^2.0.3",
     "tailwindcss": "^3.4.0"
   }
 }

public/index.css

@@ -2,19 +2,5 @@
 @tailwind components;
 @tailwind utilities;
 
-.projects {  
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  justify-content: center;
-}
 
-.card {
-  width: 30%
-}
 
-@media (max-width: 768px) {
-  .card {
-    width: 90%
-  }
-}

src/components/code_render.astro

@@ -0,0 +1,127 @@
+---
+
+const { name, mobile_code,  is_default, highlighter } = Astro.props;
+
+
+let mobile_code_html = highlighter.codeToHtml(
+    mobile_code,
+    { 
+        lang: 'c3', 
+        themes: { 
+            light: 'min-light',
+            // light: 'github-light-default',
+            dark: 'andromeeda',
+        }
+    }
+)
+
+
+
+// Post-process the code-formatter output to link it to standard Tailwind classes
+// This is so that darkmode works as expected
+function processHtml(input) {
+
+    // remove the background
+    input = input.replaceAll(
+        `class="shiki shiki-themes min-light andromeeda" style="background-color:#ffffff;--shiki-dark-bg:#23262E;color:#24292eff;--shiki-dark:#D5CED9"`, 
+        `class="text-gray-800 dark:text-white"`
+    )
+
+    input = input.replaceAll(
+        `style="color:#24292EFF;--shiki-dark:#D5CED9"`,
+        `class="text-gray-800 dark:text-white"`
+    )
+
+    // Question marks
+    input = input.replaceAll(
+        `style="color:#D32F2F;--shiki-dark:#EE5D43"`,
+        `class="text-red-800 dark:text-red-500"`
+    )
+
+    // Language keywords
+    input = input.replaceAll(
+        `style="color:#D32F2F;--shiki-dark:#C74DED"`,
+        `class="text-purple-700 dark:text-purple-400"`
+    )
+
+    // Function names
+    input = input.replaceAll(
+        `style="color:#6F42C1;--shiki-dark:#FFE66D"`,
+        `class="text-orange-700 dark:text-amber-400"`
+    )
+
+    // Strings
+    input = input.replaceAll(
+        `style="color:#22863A;--shiki-dark:#96E072"`,
+        `class="text-green-800 dark:text-lime-500"`
+    )
+
+    // Strings special chars
+    input = input.replaceAll(
+        `style="color:#22863A;--shiki-dark:#EE5D43"`,
+        `class="text-green-800 dark:text-lime-600"`
+    )
+
+
+    // Numbers
+    input = input.replaceAll(
+        `style="color:#1976D2;--shiki-dark:#F39C12"`,
+        `class="text-rose-700 dark:text-rose-400"`
+    )
+
+    // Comments
+    input = input.replaceAll(
+        `style="color:#C2C3C5;--shiki-dark:#A0A1A7CC"`,
+        `class="text-gray-600 dark:text-gray-300"`
+    )
+
+    // Variables
+    input = input.replaceAll(
+        `style="color:#24292eff;--shiki-dark:#D5CED9"`,
+        `class="text-gray-800 dark:text-green-400"`
+    )
+
+    input = input.replaceAll(
+        `style="color:#212121;--shiki-dark:#D5CED9"`,
+        `class="text-[#212121] dark:text-[#D5CED9]"`
+    )
+
+    // Enums 
+    input = input.replaceAll(
+        `style="color:#24292EFF;--shiki-dark:#00E8C6"`,
+        `class="text-blue-800 dark:text-cyan-400"`
+    )
+
+    // Library functions or errors
+    input = input.replaceAll(
+        `style="color:#1976D2;--shiki-dark:#00E8C6"`,
+        `class="text-blue-800 dark:text-cyan-400"`
+    )
+
+    // Floating point
+    input = input.replaceAll(
+        `style="color:#1976D2;--shiki-dark:#EE5D43"`,
+        `class="text-blue-800 dark:text-red-500"`
+    )
+
+    return input;
+}
+
+mobile_code_html = processHtml(mobile_code_html)
+
+---
+
+
+<div class=`
+    ${is_default && "block"}
+    ${!is_default && "hidden"}
+
+    `
+    id={name}
+    aria-label="C3 example code"
+>
+    <Fragment set:html={mobile_code_html} />
+</div>
+
+
+

src/components/demo_code.astro

@@ -0,0 +1,204 @@
+---
+
+import type { 
+    HighlighterGeneric, 
+    BundledLanguage, 
+    BundledTheme 
+} from 'shiki'
+
+interface Props {
+    selectID: string;
+    buttons: string[];
+    code: {
+            name: string;
+            mobile_code: string;
+        }[];
+    highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>
+}
+
+const {  selectID, buttons, code, highlighter } = Astro.props;
+
+import CodeRender from "./code_render.astro";
+
+---
+
+
+<script>
+
+    // make a click handler specific for one localStorageKey
+    function generateClickHandler(localStorageKey) {
+
+        return function buttonClickHandler(event) {
+
+
+            if (
+                localStorage[localStorageKey] != null &&
+                localStorage[localStorageKey] != undefined &&
+                localStorage[localStorageKey] != ""
+            ) {
+                // remove any style adjustments from previous tab was selected
+                if (event.target.value != localStorage[localStorageKey]) {
+
+                    let previousMobileCode = document.getElementById(localStorage[localStorageKey])
+
+                    previousMobileCode.classList.remove("flex");
+                    previousMobileCode.classList.add("hidden");
+
+                }
+            }            
+
+            // storing which button was clicked
+            localStorage[localStorageKey] = event.target.value;
+
+
+            let newMobileCode = document.getElementById(localStorage[localStorageKey]);
+
+            newMobileCode.classList.remove("hidden");
+            newMobileCode.classList.add("flex");
+        }
+    }
+
+    //========================================
+    // Setup for "Ergonomics & Safety"
+    const safetyLocalStorageKey ="safety_selected_tab_id";
+    const ergoButtons = [
+        "Optionals", 
+        "Defer", 
+        "Slices", 
+        "Contracts",
+    ]
+    const ergoHandler = generateClickHandler(safetyLocalStorageKey);
+
+
+    document.getElementById("safety_code_examples").addEventListener("change", ergoHandler);
+
+    // default select the first element
+    localStorage[safetyLocalStorageKey] = ergoButtons[0];
+
+    //========================================
+    // Performance By Default
+
+    const perfLocalStorageKey = "perf_selected_tab_id";
+
+    const perfButtons = [
+        "Temp Allocator",
+        "SIMD",
+        "Inline ASM",
+        "Threads"
+    ];
+
+    const perfByDefaultHandler = generateClickHandler(perfLocalStorageKey);
+
+
+    document.getElementById("perf_code_examples").addEventListener("change", perfByDefaultHandler);
+
+    // default select the first element
+    localStorage[perfLocalStorageKey] = perfButtons[0];
+
+
+</script>
+
+
+<div class="
+    bg-white
+    dark:bg-[hsl(224,32%,12%)]
+    rounded-2xl
+    overflow-x-auto
+
+    border-[3px]
+    border-[hsl(224,12%,90%)]
+    dark:border-gray-800
+    "
+>
+    <form>
+        <label 
+            class="
+                sr-only
+            "
+            for={selectID} 
+        >
+        Choose Code Example
+        </label>
+
+
+        <select class=`
+            mx-10
+            text-center
+            w-[calc(100%-5rem)]
+
+
+            mt-5
+            mb-5
+            md:mx-8
+            md:text-left
+            md:w-max
+            pr-6
+            pl-4
+
+            py-3
+
+            text-black
+            bg-white
+            dark:text-gray-100
+            dark:bg-[hsl(224,20%,6%)]
+            border-2
+            border-gray-300
+            dark:border-gray-700
+
+            rounded-2xl
+
+            ring-2
+            dark:ring-[hsl(224,12%,12%)]
+            ring-[hsl(224,12%,95%)]
+            dark:hover:border-gray-600
+            hover:border-gray-400
+            ` 
+
+            name={selectID} 
+            id={selectID}
+        >
+
+            {buttons.map((item, index) => (
+                <option class="
+
+                    "
+
+                    value={item}
+                    id=`${selectID}_${item}`
+
+                >
+                    {item}
+                </option>
+            ))}
+
+        </select>
+    </form>
+
+
+    <!-- Code container -->
+    <div class=`
+        overflow-x-auto
+
+        px-3
+        sm:px-4
+        pb-4
+        pt-8
+        sm:p-8
+        lg:p-8
+        `
+    >
+
+        {code.map((item, index) => (
+            <CodeRender 
+                is_default={index==0 ? true : false}
+                name={item.name}
+
+                mobile_code={item.mobile_code}
+                highlighter={highlighter}
+            />
+        ))}
+
+    </div>
+
+</div>
+