Test and Bug Fix

🧪 Live Comments System Test

CO₂ Emissions

Gigatonnes of carbon dioxide per year

17.45

19.67

21.31

22.95

25.40

27.84

30.01

32.15

33.45

34.75

[{"id":"CO2","metric":"CO2","unit":"GtCO2/year","series":[{"decade":1975,"value":17.45},{"decade":1980,"value":19.67},{"decade":1985,"value":21.31},{"decade":1990,"value":22.95},{"decade":1995,"value":25.4},{"decade":2000,"value":27.84},{"decade":2005,"value":30.01},{"decade":2010,"value":32.15},{"decade":2015,"value":33.45},{"decade":2020,"value":34.75}],"slopePerDecade":0.3844444444444445},{"id":"CH4","metric":"CH4","unit":"MtCH4/year","series":[{"decade":1975,"value":1650},{"decade":1980,"value":1700},{"decade":1985,"value":1760},{"decade":1990,"value":1825},{"decade":1995,"value":1865},{"decade":2000,"value":1900},{"decade":2005,"value":1940},{"decade":2010,"value":1980},{"decade":2015,"value":2000},{"decade":2020,"value":2025}],"slopePerDecade":8.333333333333334},{"id":"GlacierIceLoss","metric":"GlacierIceLoss","unit":"m w.e.","series":[{"decade":1975,"value":-1.2},{"decade":1980,"value":-2.5},{"decade":1985,"value":-4.1},{"decade":1990,"value":-5.8},{"decade":1995,"value":-7.6},{"decade":2000,"value":-9.7},{"decade":2005,"value":-12.5},{"decade":2010,"value":-15.3},{"decade":2015,"value":-17.8},{"decade":2020,"value":-20.1}],"slopePerDecade":-0.42000000000000004},{"id":"TempAnomaly","metric":"TempAnomaly","unit":"°C","series":[{"decade":1975,"value":0.08},{"decade":1980,"value":0.18},{"decade":1985,"value":0.24},{"decade":1990,"value":0.33},{"decade":1995,"value":0.42},{"decade":2000,"value":0.51},{"decade":2005,"value":0.62},{"decade":2010,"value":0.74},{"decade":2015,"value":0.82},{"decade":2020,"value":0.89}],"slopePerDecade":0.018000000000000002},{"id":"SeaLevelRise","metric":"SeaLevelRise","unit":"mm/year","series":[{"decade":1975,"value":2},{"decade":1980,"value":2.1},{"decade":1985,"value":2.6},{"decade":1990,"value":3.2},{"decade":1995,"value":3.3},{"decade":2000,"value":3.4},{"decade":2005,"value":3.5},{"decade":2010,"value":3.6},{"decade":2015,"value":3.7},{"decade":2020,"value":3.8}],"slopePerDecade":0.039999999999999994},{"id":"ArcticSeaIceMin","metric":"ArcticSeaIceMin","unit":"million km²","series":[{"decade":1975,"value":7.5},{"decade":1980,"value":7.2},{"decade":1985,"value":6.8},{"decade":1990,"value":6.5},{"decade":1995,"value":6},{"decade":2000,"value":5.6},{"decade":2005,"value":5.1},{"decade":2010,"value":4.5},{"decade":2015,"value":4.2},{"decade":2020,"value":4}],"slopePerDecade":-0.07777777777777778}]

💬 Comments with User Info (15 items)

Guest ID: 15

Can't wait for more

📍 vj-day-2025 (blog) 🕒 8/16/2025, 9:21:01 AM

👤 User ID: 2
Dev team ID: 14

This was an AI driven project 😀

📍 nhs-trawler (project) 🕒 8/12/2025, 2:22:17 PM

👤 User ID: 1
Dev team ID: 13

This was an AI driven project 😀

📍 nhs-trawler (project) 🕒 8/12/2025, 2:22:16 PM

👤 User ID: 1
Dev team ID: 12

Confusing this when we have a static image of the dialog above and I tried to enter into it. Bah

📍 live-comments-system (project) 🕒 8/11/2025, 7:45:34 PM

👤 User ID: 1
Dev Team_1 ID: 11

So working out here how to add long comments and also from a user who has posted before

📍 updates (blog) 🕒 8/11/2025, 7:10:30 PM

👤 User ID: 5

🚀 Production Example: Filtered Comments

This shows how to use the LiveComments component in a real blog post:

For blog post: "amoc-the-nexus"

💬 Comments (1)

🧑 User: Family

7/17/2025 at 5:04:01 AM

For blog post: "ice-cores"

💬 Comments (2)

🔧 Debug Information

🔍 Loading comments for: ice-cores
✅ Loaded 2 comments for ice-cores
📝 Sample: "Sample comment..."

🧑 User: Dev team

9/29/2025 at 6:43:27 PM

Sample comment

🧑 User: Dev team

9/29/2025 at 6:43:27 PM

Sample after trigger

📝 Usage in your blog post pages:

---
// In your blog post page (e.g., src/pages/blog/[...slug].astro)
import LiveComments from "@components/LiveComments.astro";

const { slug } = Astro.params;
---

<article>
  <!-- Your blog content here -->
  <h1>My Blog Post</h1>
  <p>Content...</p>
  
  <!-- Comments section -->
  <LiveComments 
    postSlug={slug} 
    postType="blog" 
    maxComments={10}
    showDebug={false}
  />
</article>

🚀 Production Component Demo

This shows how the PostComments component works in a real blog post scenario:

📄 Blog Post: "AMOC The Nexus"

💬 Comments

0 comments

💭 No comments yet. Be the first to share your thoughts!

📄 Blog Post: "Ice Cores"

💬 Comments

0 comments

💭 No comments yet. Be the first to share your thoughts!

🏗️ Architecture Note:

Both components above use the same live collection containing ALL comments, but each filters and displays only the comments for its specific post. This ensures: