Static site for the Andersen family wishlists. Each person maintains their wishlist in Google Docs; this site embeds the public version of those documents so everyone can browse the latest requests in one place.
- The front page (
/index.html) lists links to each person’s wishlist and uses shared styling fromassets/css/main.css. - Each individual page (e.g.
/Conrad/index.html) points its<body data-doc="...">attribute at the published Google Doc URL. assets/js/doc-loader.jsruns on load, fetches the Google Doc HTML, strips inline styles/scripts, and injects the cleaned.doc-contentinto the page.- External links inside the wishlists automatically open in a new tab and have tracking URLs (e.g. Google redirect links) cleaned up.
Because the actual data lives in Google Docs, updating a wishlist is as easy as editing the doc—no deploy needed.
-
Publish the new Google Doc
- Create the wishlist in Google Docs.
- Choose File → Share → Publish to web and copy the link that ends with
pub?embedded=true. This is the URL the site will fetch.
-
Create the page directory
- Copy any existing person folder (e.g.
Conrad/) and rename it to the new person’s name. - Edit the new
index.html:- Update the
<title>and<h1>text. - Set
data-doc="PASTE_THE_PUBLISHED_URL_HERE"on the<body>element. - Keep the shared assets
<link rel="stylesheet" href="/assets/css/main.css" />and<script src="/assets/js/doc-loader.js" defer></script>.
- Update the
- Copy any existing person folder (e.g.
-
Add the card on the front page
- Open the root
index.html. - Inside the
.wishlist-gridsection, duplicate a card and point itshrefto the new folder (e.g./Alex). Update the label text accordingly.
- Open the root
-
Verify locally
- Serve the repo (e.g.
npx serve .or use your preferred static server). - Open the new page and confirm the Google Doc content loads and that external links open safely in a new tab.
- Serve the repo (e.g.
That’s it—each wishlist now updates automatically whenever the Google Doc changes.