fix: S3 static deployment readiness (forms, error page, script loading)#3
Open
borice1984 wants to merge 1 commit into
Open
fix: S3 static deployment readiness (forms, error page, script loading)#3borice1984 wants to merge 1 commit into
borice1984 wants to merge 1 commit into
Conversation
- forms.js: add Formspree fetch support as primary submit path; mailto: remains as fallback. Set data-formspree-endpoint on the form to enable. Also fixes a UX bug where success state was shown after location.href redirect in the fetch path. - contact.html: add data-formspree-endpoint placeholder to form element - All pages: add defer to non-module script tags to prevent render-blocking - Add error.html for S3 error document routing (S3 requires a separate error document distinct from 404.html for access-denied / server errors)
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
What
Three improvements that make the static template production-ready on S3 (or any static host):
deferon non-module scripts — eliminates render-blockingWhy
Form submission
The previous implementation submitted the contact form by navigating
window.location.hrefto amailto:URL. On most desktop browsers this opens the local mail client rather than submitting over the network — it doesn't work for users without a mail client configured, and it provides no reliable delivery or tracking.The updated
forms.jschecks for adata-formspree-endpointattribute on the form element. If present, it POSTs viafetch()to that endpoint (Formspree or any compatible service). If absent, it falls back to the existingmailto:behavior so nothing breaks for setups that don't configure an endpoint.To enable: sign up at https://formspree.io, create a form, and set the endpoint on your form:
The
data-formspree-endpoint=""placeholder is already added tocontact.html.error.html
S3 static website hosting has two distinct error document settings: one for 404 and one for all other errors (access denied, server errors, etc.). Without a separate
error.html, S3 serves a bare XML error response for non-404 errors. The new file matches the style of404.html.Script defer
bleeding-edge.jsandheroImages.jsare loaded with plain<script src>tags, which block HTML parsing until the scripts download and execute. Addingdefermakes them execute after the document is parsed, consistent with how<script type="module">already behaves.Files changed
templates/static/base/js/forms.js— Formspree fetch support + UX fixtemplates/static/base/contact.html— data-formspree-endpoint placeholder + defertemplates/static/base/index.html— defer on scriptstemplates/static/base/page-2.html— defer on scriptstemplates/static/base/page-3.html— defer on scriptstemplates/static/base/page-4.html— defer on scriptstemplates/static/base/404.html— defer on scriptstemplates/static/base/error.html— new file