Wishlist

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.

How it works

• The front page (/index.html) lists links to each person’s wishlist and uses shared styling from assets/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.js runs on load, fetches the Google Doc HTML, strips inline styles/scripts, and injects the cleaned .doc-content into 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.

Adding a new wishlist

1. 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.

2. 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>.

3. Add the card on the front page

   • Open the root index.html.
   • Inside the .wishlist-grid section, duplicate a card and point its href to the new folder (e.g. /Alex). Update the label text accordingly.

4. 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.

That’s it—each wishlist now updates automatically whenever the Google Doc changes.