Inline code examples at build time instead of fetching via JavaScript #3717
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)
Deploying www-ruby-lang-org with
|
| Latest commit: |
4843bb7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://123c9c32.www-ruby-lang-org.pages.dev |
| Branch Preview URL: | https://3715-sometimes-syntax-not-lo.www-ruby-lang-org.pages.dev |
Member
|
Should we also remove |
Member
Author
How about we ship this CSS fix PR first, verified we dont need these examples, then another PR to remove all examples? What do you think? :) |
Member
|
Ah, make sensed. We may use that examples from other place. |
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.
JuanitoFatas
force-pushed
the
3715/sometimes-syntax-not-loaded
branch
from
add422d to
4843bb7
Compare
Member
Author
|
cc @taea would love your review on this 🙇🏻♂️ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR improves loading examples to not depend on needing JavaScript. Mostly done by Claude. Fixes #3715.
Problem
Code examples were loaded via
fetch()requests at runtime, which could fail due to:Fix
Inline the syntax-highlighted code directly in the HTML during Jekyll build, eliminating the need for runtime fetch requests.
Changes
_includes/home/code_examples/*.htmlwith the three Ruby examples_includes/home/try_ruby.htmlto use Jekyll includes instead of empty placeholdersjavascripts/try-ruby-examples.js- removed fetch logic, now only generates TryRuby button URLs from existing DOM contentjavascripts/hero-animation.js- removed async loading dependency<noscript>fallback in_layouts/homepage.htmlfor graceful degradation when JavaScript is disabled/unavailableResult
/examples/endpointsVerifications
No need to
fetchWhen JavaScript is disabled