Site Build TODO

0) Preflight (do this first)

• Confirm the YAML files are readable by Jekyll (site.data.videos, site.data.experiments, site.data.printables).
  • videos.yml: 173 entries with categories (QuaranTime, Math, archive, Projects, Miscellaneous, Water, Songs, Nature)
  • experiments.yml: ~30 entries with categories (chemistry, physics, ecology)
  • printables.yml: ~20 entries with category field (foldable)
• Add a shared “card” include and a “tag/category pill” style so all pages match the homepage styling.
  • Created _includes/card.html with support for title, description, url, image, category, icon, meta
  • Created _includes/pills.html for category filter pills
  • Added CSS for .pill, .pill-active, .card-thumb, .card-title, .card-desc, .card-category, .card-meta
• Add a consistent page header pattern if it doesn’t yet exist: title, short intro, and optional filter UI (category pills).
  • Created _includes/page-header.html with title, intro, and optional pills integration
  • Added CSS for .page-header, .page-title, .page-intro

---

1) Video feeds (from videos.yml)

1.1 Videos landing page

• Create /videos/index.html (or .md) with:
  • Page intro (“Browse Science Mom videos by topic…”)
  • A grid/list of cards for all videos, newest first (if there is a date field; otherwise as listed).
  • Category filter UI at top (pills linking to each category page).
  • Each video card includes:
    • Title
    • Category
    • Short description (if present)
    • Thumbnail (if present) or placeholder — using YouTube thumbnail API
    • Link to YouTube (or wherever the URL points)
    • Optional: duration, grade band, tags if present — shows bonus materials

1.2 Separate feeds per category (auto-generated)

• Create a category index system:
  • Determine the set of unique categories from videos.yml.
  • Generate a page per category:
    • /videos/category/<slug>/index.html (recommended)
  • Each category page shows:
    • Header with category name + count
    • Cards for videos in that category
    • Links back to all videos + other categories
  • Created: quarantime, math, projects, water, nature, songs, miscellaneous, archive

---

2) Experiments page (from experiments.yml)

2.1 Experiments landing page with formatted cards

• Create /experiments/index.html with:
  • Grid of experiment cards styled to match the homepage
  • Card fields (use what exists in YAML; fall back gracefully):
    • Title
    • Time estimate / difficulty (if present)
    • Supplies preview (short list)
    • Concepts (short list)
    • Image thumbnail (if present; can use /images/... without moving files)
    • Link to worksheet/PDF/video if present

2.2 Filtering (if there are tags/categories)

• Added filter pills for chemistry, physics, ecology categories
• Created category pages at /experiments/category/<slug>/

2.3 Optional: individual experiment pages

• Skipped for now — experiments don’t have step-by-step instructions in YAML

---

3) Printables page (from printables.yml)

3.1 Printables landing page with formatted cards

• Create /printables/index.html with:
  • Grid of printable cards styled to match homepage
  • Each card includes:
    • Title
    • Type (foldable/booklet/worksheet)
    • Thumbnail preview (wideimage or image)
    • Link to Patreon

3.2 Filtering (if there are topics/types)

• Add filter pills for foldable, booklet, worksheet categories
• Created category pages at /printables/category/<slug>/

---

4) Free Resources hub page

4.1 Free Resources landing page

• Create /free/index.html that acts as a hub and links to the pages created above.
• Include a card grid with (at minimum):
  • Videos → /videos/ with icon and count
  • Experiments → /experiments/ with icon and count
  • Printables → /printables/ with icon and count

4.2 Optional: Featured sections

• Add “Featured” row (3 items) pulling first item from each YAML file
• Added CTA band linking to Teachable courses

---

5) Navigation + internal links

• Add nav links (if not already):
  • Free → /free/
  • Videos → /videos/
  • Experiments → /experiments/
  • Printables (in footer) → /printables/
• Updated footer with all resource links
• Add cross-links:
  • Each video card optionally links to related experiment/printable if IDs/tags overlap. (Skipped - no ID overlap in data)
  • Free Resources hub links to all sections

---

6) Consistent styling and components

• Create reusable includes:
  • _includes/card.html (generic card wrapper)
  • _includes/pills.html (category/tags pills)
  • _includes/page-header.html (title + intro)
  • _includes/empty-state.html (“No items found…”) — not needed yet
• Ensure cards look consistent across all pages (spacing, hover, buttons).
• Make responsive: 1-col mobile, 2-col tablet, 3-col desktop (via existing grid CSS).

---

7) QA checklist

• bundle exec jekyll serve runs cleanly.
• /images/... links still resolve; no renames/moves. (103 files intact)
• All new pages load:
  • /videos/
  • /videos/category/<slug>/ (8 categories)
  • /experiments/
  • /experiments/category/<slug>/ (3 categories)
  • /printables/
  • /printables/category/<slug>/ (3 categories)
  • /free/
• Category pages correctly filter.
• Cards render gracefully when optional fields are missing.

---

8) Nice-to-have later (not required now)

• Add search on /videos/, /experiments/, /printables/ (client-side, lightweight).
• Add an RSS feed for videos (optional).
• Add OpenGraph images + consistent metadata.