From 50ccd998c3af2294598df5fbdc2e8fff803651cf Mon Sep 17 00:00:00 2001
From: Juanito Fatas <me@juanitofatas.com>
Date: Mon, 22 Dec 2025 15:29:08 +0900
Subject: [PATCH 1/2] Inline code examples at build time instead of fetching
 via JavaScript

 Problem: Code examples were loaded via fetch() requests at runtime, which could fail due to:
  - Browser extensions (1Password, ad blockers) interfering with JavaScript
  - Network issues or timing problems
  - JavaScript execution failures

  Solution: Inline the syntax-highlighted code directly in the HTML during Jekyll build, eliminating the need for runtime fetch requests.

  Changes:
  - Created _includes/home/code_examples/*.html with the three Ruby examples
  - Modified _includes/home/try_ruby.html to use Jekyll includes instead of empty placeholders
  - Simplified javascripts/try-ruby-examples.js - removed fetch logic, now only generates TryRuby button URLs from existing DOM content
  - Simplified javascripts/hero-animation.js - removed async loading dependency
  - Added <noscript> fallback in _layouts/homepage.html for graceful degradation

  Result:
  - No more fetch requests to /examples/ endpoints
  - Syntax highlighting displays immediately (no JS dependency for content)
  - Works even with JavaScript disabled
  - Faster page load (3 fewer HTTP requests)
---
 _includes/home/code_examples/cities.html      | 17 ++++
 _includes/home/code_examples/greeter.html     | 18 ++++
 _includes/home/code_examples/i_love_ruby.html | 13 +++
 _includes/home/try_ruby.html                  |  8 +-
 _layouts/homepage.html                        | 15 +++
 javascripts/hero-animation.js                 | 30 ++----
 javascripts/try-ruby-examples.js              | 97 ++++---------------
 7 files changed, 96 insertions(+), 102 deletions(-)
 create mode 100644 _includes/home/code_examples/cities.html
 create mode 100644 _includes/home/code_examples/greeter.html
 create mode 100644 _includes/home/code_examples/i_love_ruby.html

diff --git a/_includes/home/code_examples/cities.html b/_includes/home/code_examples/cities.html
new file mode 100644
index 0000000000..0daec7f6e2
--- /dev/null
+++ b/_includes/home/code_examples/cities.html
@@ -0,0 +1,17 @@
+{% highlight ruby %}
+# Ruby knows what you
+# mean, even if you
+# want to do math on
+# an entire Array
+cities  = %w[ London
+              Oslo
+              Paris
+              Amsterdam
+              Berlin ]
+visited = %w[Berlin Oslo]
+
+puts "I still need " +
+     "to visit the " +
+     "following cities:",
+     cities - visited
+{% endhighlight %}
diff --git a/_includes/home/code_examples/greeter.html b/_includes/home/code_examples/greeter.html
new file mode 100644
index 0000000000..134636b108
--- /dev/null
+++ b/_includes/home/code_examples/greeter.html
@@ -0,0 +1,18 @@
+{% highlight ruby %}
+# The Greeter class
+class Greeter
+  def initialize(name)
+    @name = name.capitalize
+  end
+
+  def salute
+    puts "Hello #{@name}!"
+  end
+end
+
+# Create a new object
+g = Greeter.new("world")
+
+# Output "Hello World!"
+g.salute
+{% endhighlight %}
diff --git a/_includes/home/code_examples/i_love_ruby.html b/_includes/home/code_examples/i_love_ruby.html
new file mode 100644
index 0000000000..69d7222877
--- /dev/null
+++ b/_includes/home/code_examples/i_love_ruby.html
@@ -0,0 +1,13 @@
+{% highlight ruby %}
+# Output "I love Ruby"
+say = "I love Ruby"
+puts say
+
+# Output "I *LOVE* RUBY"
+say = say.sub("love", "*love*")
+puts say.upcase
+
+# Output "I *love* Ruby"
+# five times
+5.times { puts say }
+{% endhighlight %}
diff --git a/_includes/home/try_ruby.html b/_includes/home/try_ruby.html
index 1c3e52101a..fbf5c06418 100644
--- a/_includes/home/try_ruby.html
+++ b/_includes/home/try_ruby.html
@@ -1,17 +1,19 @@
 {% assign home = site.data.locales.home[page.lang] %}
+{% assign examples = "i_love_ruby,cities,greeter" | split: "," %}
 
 <!-- Try Ruby Section -->
 <section id="try-ruby-section" class="try-ruby-section pb-0 relative opacity-0 max-h-0 overflow-hidden transition-all duration-700 ease-out">
   <div class="container mx-auto px-6 lg:px-8">
     <!-- Code Examples Grid -->
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 2xl:gap-16 mb-16">
-      {% for i in (1..3) %}
+      {% for example in examples %}
+      {% assign i = forloop.index %}
       <div class="try-ruby-card group bg-white dark:bg-stone-900 rounded-2xl overflow-hidden flex flex-col shadow-sm border border-gold-400 dark:border-gold-500 has-[a:hover]:border-ruby-600 dark:has-[a:hover]:border-ruby-600 transition-colors box-border">
         <!-- Code Area -->
         <div class="code-example-wrapper relative flex-grow min-h-[200px]">
-          <!-- Code Content (will fade in after frame animation) -->
+          <!-- Code Content (inlined at build time) -->
           <div id="try-ruby-example-{{ i }}" class="try-ruby-content code-example px-8 py-6 font-mono text-sm overflow-x-auto h-full opacity-0 transition-opacity duration-500">
-            <!-- Code will be loaded dynamically -->
+            {% include home/code_examples/{{ example }}.html %}
           </div>
         </div>
 
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
index 484f9caf06..4f553af89b 100644
--- a/_layouts/homepage.html
+++ b/_layouts/homepage.html
@@ -83,6 +83,21 @@
     <script type="text/javascript" src="/javascripts/theme-toggle.js" defer></script>
     <script type="text/javascript" src="/javascripts/try-ruby-examples.js"></script>
     <script type="text/javascript" src="/javascripts/hero-animation.js" defer></script>
+
+    <!-- Fallback styles when JavaScript is disabled -->
+    <noscript>
+      <style>
+        #hero-loader { display: none !important; }
+        [data-hero-layer="gem"],
+        [data-hero-layer="content"],
+        [data-hero-layer="sunburst"],
+        [data-hero-layer="illust-main"],
+        [data-hero-layer="illust-sub"],
+        [data-hero-layer="illust-main"] img { opacity: 1 !important; }
+        #try-ruby-section { opacity: 1 !important; max-height: none !important; overflow: visible !important; }
+        .try-ruby-content { opacity: 1 !important; }
+      </style>
+    </noscript>
   </head>
 
   <body id="home-page-layout">
diff --git a/javascripts/hero-animation.js b/javascripts/hero-animation.js
index 447db67776..5a1891479b 100644
--- a/javascripts/hero-animation.js
+++ b/javascripts/hero-animation.js
@@ -20,9 +20,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const totalImages = images.length;
   let loadedImages = 0;
 
-  // Track loading states for hero images and Try Ruby
+  // Track loading state for hero images
+  // Note: TryRuby examples are now inlined at build time, no async loading needed
   let heroImagesReady = false;
-  let tryRubyReady = false;
 
   const layers = {
     finalGem: document.querySelector('[data-hero-layer="gem"]'),
@@ -45,9 +45,9 @@ document.addEventListener('DOMContentLoaded', () => {
     return;
   }
 
-  // Check if both hero images and Try Ruby are ready
+  // Check if hero images are ready to start animation
   const checkAllReady = () => {
-    if (heroImagesReady && tryRubyReady) {
+    if (heroImagesReady) {
       // Update to 100% and start animation
       if (loaderNumber) {
         loaderNumber.textContent = '100';
@@ -58,8 +58,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const updateProgress = () => {
     loadedImages++;
-    // Show progress up to 80% for hero images, reserve 20% for Try Ruby
-    const percentage = Math.round((loadedImages / totalImages) * 80);
+    // Show progress up to 100% for hero images
+    const percentage = Math.round((loadedImages / totalImages) * 100);
     if (loaderNumber) {
         loaderNumber.textContent = `${percentage}`;
     }
@@ -82,23 +82,7 @@ document.addEventListener('DOMContentLoaded', () => {
     heroImagesReady = true;
   }
 
-  // Subscribe to Try Ruby examples loading
-  if (typeof TryRubyExamples !== 'undefined') {
-    TryRubyExamples.setOnReady(() => {
-      tryRubyReady = true;
-      // Update progress to show Try Ruby is loaded (80% -> 95%)
-      if (loaderNumber && !heroImagesReady) {
-        const currentPercent = parseInt(loaderNumber.textContent) || 0;
-        loaderNumber.textContent = `${Math.max(currentPercent, 95)}`;
-      }
-      checkAllReady();
-    });
-  } else {
-    // TryRubyExamples not available, skip waiting for it
-    tryRubyReady = true;
-  }
-
-  // Initial check in case both are already ready
+  // Initial check in case images are already loaded
   checkAllReady();
 
   function startAnimation() {
diff --git a/javascripts/try-ruby-examples.js b/javascripts/try-ruby-examples.js
index 1be0ba6e6e..44c2c170aa 100644
--- a/javascripts/try-ruby-examples.js
+++ b/javascripts/try-ruby-examples.js
@@ -1,18 +1,11 @@
 "use strict";
 
 var TryRubyExamples = {
-  loadedCount: 0,
-  totalExamples: 3,
-  isReady: false,
-  onReadyCallback: null,
-
-  extractCodeFromHtml: function(html) {
-    // Create a temporary element to parse the HTML
-    var temp = document.createElement('div');
-    temp.innerHTML = html;
+  isReady: true, // Examples are inlined at build time, always ready
 
+  extractCodeFromElement: function(element) {
     // Find the code element and extract its text content
-    var codeElement = temp.querySelector('code');
+    var codeElement = element.querySelector('code');
     if (!codeElement) {
       return '';
     }
@@ -26,25 +19,10 @@ var TryRubyExamples = {
     return 'https://try.ruby-lang.org/playground/#code=' + encodedCode;
   },
 
-  onExampleLoaded: function() {
-    TryRubyExamples.loadedCount++;
-
-    // When all examples are loaded, mark as ready and notify
-    if (TryRubyExamples.loadedCount >= TryRubyExamples.totalExamples) {
-      TryRubyExamples.isReady = true;
-      if (TryRubyExamples.onReadyCallback) {
-        TryRubyExamples.onReadyCallback();
-      }
-    }
-  },
-
   // Set callback to be called when all examples are ready
+  // Since examples are inlined, call immediately
   setOnReady: function(callback) {
-    TryRubyExamples.onReadyCallback = callback;
-    // If already ready, call immediately
-    if (TryRubyExamples.isReady) {
-      callback();
-    }
+    callback();
   },
 
   showAllExamples: function() {
@@ -88,59 +66,26 @@ var TryRubyExamples = {
     }
   },
 
-  loadExample: function(exampleName, targetId, buttonId) {
-    var lang = document.location.pathname.split('/')[1] || 'en';
-    var target = document.getElementById(targetId);
-    var button = document.getElementById(buttonId);
-
-    if (!target) {
-      console.error('Target element not found:', targetId);
-      return;
-    }
-
-    // Use fetch API to load the example
-    fetch('/' + lang + '/examples/' + exampleName + '/')
-      .then(function(response) {
-        if (!response.ok) {
-          throw new Error('Failed to load example: ' + exampleName);
-        }
-        return response.text();
-      })
-      .then(function(html) {
-        target.innerHTML = html;
-
-        // Update button URL if button exists
-        if (button) {
-          // Extract Ruby code from the loaded HTML
-          var rubyCode = TryRubyExamples.extractCodeFromHtml(html);
-          if (rubyCode) {
-            var tryRubyUrl = TryRubyExamples.generateTryRubyUrl(rubyCode);
-            button.href = tryRubyUrl;
-          }
+  // Set up TryRuby button URLs based on inlined code examples
+  setupButtons: function() {
+    for (var i = 1; i <= 3; i++) {
+      var exampleElement = document.getElementById('try-ruby-example-' + i);
+      var button = document.getElementById('try-ruby-button-' + i);
+
+      if (exampleElement && button) {
+        var rubyCode = TryRubyExamples.extractCodeFromElement(exampleElement);
+        if (rubyCode) {
+          var tryRubyUrl = TryRubyExamples.generateTryRubyUrl(rubyCode);
+          button.href = tryRubyUrl;
         }
-
-        // Notify that this example has loaded
-        TryRubyExamples.onExampleLoaded();
-      })
-      .catch(function(error) {
-        console.error('Error loading example:', error);
-        target.innerHTML = '<p class="text-stone-500">Failed to load example</p>';
-        // Still count as loaded to prevent infinite loading state
-        TryRubyExamples.onExampleLoaded();
-      });
-  },
-
-  loadAll: function() {
-    // Load each example into its corresponding container
-    TryRubyExamples.loadExample('i_love_ruby', 'try-ruby-example-1', 'try-ruby-button-1');
-    TryRubyExamples.loadExample('cities', 'try-ruby-example-2', 'try-ruby-button-2');
-    TryRubyExamples.loadExample('greeter', 'try-ruby-example-3', 'try-ruby-button-3');
+      }
+    }
   }
 };
 
-// Load examples when DOM is ready
+// Set up button URLs when DOM is ready
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', TryRubyExamples.loadAll);
+  document.addEventListener('DOMContentLoaded', TryRubyExamples.setupButtons);
 } else {
-  TryRubyExamples.loadAll();
+  TryRubyExamples.setupButtons();
 }

From 4843bb7f30cdd766f3f300eb072647bcfefe0734 Mon Sep 17 00:00:00 2001
From: Juanito Fatas <me@juanitofatas.com>
Date: Mon, 22 Dec 2025 15:54:14 +0900
Subject: [PATCH 2/2] Fix syntax highlighting colors being overridden by body
 text color

Add explicit color rules for .highlight pre/code elements in @layer base to
ensure Rouge syntax highlighting colors take precedence over Tailwind's body text color inheritance.
---
 stylesheets/compiled.css | 10 ++++++++++
 stylesheets/tailwind.css |  8 ++++++++
 2 files changed, 18 insertions(+)

diff --git a/stylesheets/compiled.css b/stylesheets/compiled.css
index 215f00763c..9f2633f2eb 100644
--- a/stylesheets/compiled.css
+++ b/stylesheets/compiled.css
@@ -1962,6 +1962,16 @@ body:is(.dark *){
   color: rgb(250 250 249 / var(--tw-text-opacity, 1));
 }
 
+/* Ensure syntax highlighting colors are not overridden by body color */
+
+.highlight code {
+  color: inherit;
+}
+
+.highlight pre {
+  color: var(--color-text-default);
+}
+
 .container{
   width: 100%;
   margin-right: auto;
diff --git a/stylesheets/tailwind.css b/stylesheets/tailwind.css
index 1affbfac51..c399cf123a 100644
--- a/stylesheets/tailwind.css
+++ b/stylesheets/tailwind.css
@@ -23,4 +23,12 @@
     @apply bg-white text-stone-900 text-base leading-5 font-default;
     @apply dark:bg-stone-900 dark:text-stone-50;
   }
+
+  /* Ensure syntax highlighting colors are not overridden by body color */
+  .highlight code {
+    color: inherit;
+  }
+  .highlight pre {
+    color: var(--color-text-default);
+  }
 }