feat: YAML milestones, near-term scenarios, exponential chart, token-saving tips, reference links

.github/workflows/deploy.yml

@@ -23,6 +23,18 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Regenerate milestones-data.js from YAML
+        run: npm run build:milestones
+
       - name: Deploy to GitHub Pages (gh-pages branch)
         uses: peaceiris/actions-gh-pages@v4
         with:
@@ -31,4 +43,4 @@ jobs:
           # Preserve any existing PR preview directories across production deploys
           keep_files: true
           # Exclude non-site files from the deployment
-          exclude_assets: '.github,node_modules,tests,package-lock.json,package.json'
+          exclude_assets: '.github,node_modules,tests,scripts,package-lock.json,package.json,milestones.yaml'

.github/workflows/preview.yml

@@ -15,6 +15,18 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Regenerate milestones-data.js from YAML
+        run: npm run build:milestones
+
       - name: Deploy PR preview to gh-pages branch
         uses: peaceiris/actions-gh-pages@v4
         with:
@@ -24,7 +36,7 @@ jobs:
           # Preserve existing previews and production files
           keep_files: true
           # Exclude non-site files
-          exclude_assets: '.github,node_modules,tests,package-lock.json,package.json'
+          exclude_assets: '.github,node_modules,tests,scripts,package-lock.json,package.json,milestones.yaml'
 
       - name: Post or update preview URL comment
         uses: actions/github-script@v7

index.html

@@ -217,6 +217,25 @@ <h2>Milestone Prediction Dates</h2>
   </div>
 </section>
 
+<!-- ── Token-Saving Tips ──────────────────────────────────── -->
+<section id="tips-section">
+  <div class="container">
+    <p class="section-label">&#x25A0; Act Now</p>
+    <h2>🌱 How to Reduce Your AI Footprint</h2>
+    <p class="tips-intro">
+      Every prompt matters. Small changes in how you use AI add up to billions of tokens saved —
+      and real environmental resources. The projections above show the worst case.
+      Here's how we change the trajectory.
+    </p>
+    <div class="tips-grid" id="tipsGrid">
+      <!-- populated by script.js -->
+    </div>
+    <div class="tips-impact-wrap" id="tipsImpactWrap">
+      <!-- populated by script.js -->
+    </div>
+  </div>
+</section>
+
 
 <!-- ── Personal Footprint Calculator ─────────────────────── -->
 <section id="calculator-section">
@@ -320,6 +339,8 @@ <h2 id="receipt-heading" class="sr-only">Session Receipt</h2>
   <button id="toast-close" class="toast-close" aria-label="Close notification">✕</button>
 </div>
 
+<!-- Milestone data (auto-generated from milestones.yaml) -->
+<script src="milestones-data.js"></script>
 <!-- Core logic (no DOM deps — loaded first so script.js can use it) -->
 <script src="death-clock-core.js"></script>
 <!-- Minimal Chart.js date adapter (required for time-scale x-axis) -->