v1.1.0 — RSS feed, PWA, lesson comments, progress tracking + streaks

RSS Feed
- /feed.xml proxies the Anchor feed under the site's canonical domain
- Rewrites channel <link> and atom:link self-ref to the site URL
- Served with 30-min Cache-Control, reuses the existing episode cache

PWA
- vite-plugin-pwa installed; Workbox service worker auto-generated on build
- manifest.json inlined in vite.config.ts (name, icons, theme, standalone)
- pwa-192.png and pwa-512.png generated from existing book_icon.png
- StaleWhileRevalidate for /api/episodes and /api/questions; CacheFirst for images
- API, feed.xml, and uploads routes excluded from navigate fallback

Lesson Comments
- Import and wire StudySectionComments into ColossiansStudySectionPage
- Replaces the CommunityBoard in the Lesson Discussion section
- All routes and moderation already existed; only the render was missing

Progress Tracking + Streaks
- Mark-complete handler now records lastStudiedDate, currentStreak, longestStreak on the user record
- Streak increments on consecutive calendar days, resets on a gap
- /api/study-account/overview now returns streak fields
- Account page: 4-stat summary row (notes, streak 🔥, longest streak, member since)
- Per-study progress bars showing completedLessons/totalLessons with gold → green fill at 100%

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.0.14",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -50,6 +50,7 @@
     "globals": "^17.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
-    "vite": "^8.0.0"
+    "vite": "^8.0.0",
+    "vite-plugin-pwa": "^1.3.0"
   }
 }

server.js

@@ -54,6 +54,7 @@ import { register as registerQuestions } from './server/routes/questions.js'
 import { register as registerAnalytics } from './server/routes/analytics.js'
 import { register as registerDownloads } from './server/routes/downloads.js'
 import { register as registerEpisodes } from './server/routes/episodes.js'
+import { register as registerFeed } from './server/routes/feed.js'
 import { register as registerQrCodes } from './server/routes/qr-codes.js'
 import { register as registerPublic } from './server/routes/public.js'
 
@@ -99,6 +100,7 @@ registerQuestions(app)
 registerAnalytics(app)
 registerDownloads(app)
 registerEpisodes(app)
+registerFeed(app)
 registerQrCodes(app)
 
 // Hit-counting middleware (must come before public routes)

server/routes/episodes.js

@@ -3,6 +3,7 @@ import { sanitizeUrl } from '../study-helpers.js'
 const RSS_FEED_URL = 'https://anchor.fm/s/11068d290/podcast/rss'
 let episodesCache = null
 let episodesCacheAt = 0
+let rawXmlCache = null
 const EPISODES_CACHE_TTL = 30 * 60 * 1000
 
 function extractCdata(raw) {
@@ -40,7 +41,7 @@ function parseRssItems(xml, limit = Infinity) {
   return items
 }
 
-async function fetchAllEpisodes() {
+export async function fetchAllEpisodes() {
   const now = Date.now()
   if (episodesCache && (now - episodesCacheAt) < EPISODES_CACHE_TTL) {
     return episodesCache
@@ -51,12 +52,18 @@ async function fetchAllEpisodes() {
   clearTimeout(timeout)
   if (!response.ok) throw new Error(`RSS fetch failed: ${response.status}`)
   const xml = await response.text()
+  rawXmlCache = xml
   const episodes = parseRssItems(xml)
   episodesCache = episodes
   episodesCacheAt = now
   return episodes
 }
 
+export async function fetchRawFeedXml() {
+  await fetchAllEpisodes()
+  return rawXmlCache
+}
+
 function toSpotifyEpisodeEmbedUrl(urlValue) {
   if (!urlValue) return ''
   try {

server/routes/feed.js

@@ -0,0 +1,35 @@
+import { fetchRawFeedXml } from './episodes.js'
+import { getCanonicalBaseUrl } from '../email.js'
+
+export function register(app) {
+  app.get('/feed.xml', async (_req, res) => {
+    try {
+      const xml = await fetchRawFeedXml()
+      if (!xml) {
+        res.status(503).send('Feed temporarily unavailable')
+        return
+      }
+
+      const baseUrl = getCanonicalBaseUrl().replace(/\/$/, '')
+      const feedUrl = `${baseUrl}/feed.xml`
+
+      // Rewrite channel <link> and <atom:link href> to our canonical domain
+      const rewritten = xml
+        .replace(
+          /<atom:link[^>]+rel="self"[^>]*\/>/,
+          `<atom:link href="${feedUrl}" rel="self" type="application/rss+xml"/>`
+        )
+        .replace(
+          /(<channel>[\s\S]*?<link>)[^<]*(\/link>)/,
+          `$1${baseUrl}$2`
+        )
+
+      res.set('Content-Type', 'application/rss+xml; charset=utf-8')
+      res.set('Cache-Control', 'public, max-age=1800')
+      res.send(rewritten)
+    } catch (err) {
+      console.error('[feed.xml]', err?.message ?? err)
+      res.status(502).send('Failed to fetch feed')
+    }
+  })
+}

server/routes/study-account.js

@@ -224,6 +224,9 @@ export function register(app) {
         noteCount: Object.keys(notes).length,
         memberSince: user.createdAt,
         lastLoginAt: user.lastLoginAt,
+        currentStreak: user.currentStreak ?? 0,
+        longestStreak: user.longestStreak ?? 0,
+        lastStudiedDate: user.lastStudiedDate ?? null,
       },
       studies,
     })

server/routes/study-data.js

@@ -205,11 +205,21 @@ export function register(app) {
     state.studyProgressCache.set(user.id, progress)
     queueUserProgressWrite(user.id)
 
+    // Streak tracking
+    const todayStr = new Date().toISOString().slice(0, 10)
+    const lastDate = user.lastStudiedDate ?? null
+    if (lastDate !== todayStr) {
+      const yesterday = new Date(Date.now() - 864e5).toISOString().slice(0, 10)
+      user.currentStreak = lastDate === yesterday ? (user.currentStreak ?? 0) + 1 : 1
+      user.longestStreak = Math.max(user.currentStreak, user.longestStreak ?? 0)
+      user.lastStudiedDate = todayStr
+    }
+
     // Record first completion timestamp on the user record (additive, never overwrite)
     if (!user.firstCompletionAt) {
       user.firstCompletionAt = new Date().toISOString()
-      queueStudyUsersWrite()
     }
+    queueStudyUsersWrite()
 
     res.json({ ok: true, studySlug, completedSectionIds: studyProgress.completedSectionIds })
   })

src/colossiansStudy.tsx

@@ -7,6 +7,7 @@ import { Breadcrumbs } from './components/Breadcrumbs'
 import { StudyCertificate } from './components/StudyCertificate'
 import { EpisodeAudioPlayer } from './components/EpisodeAudioPlayer'
 import { NoteCard } from './components/NoteCard'
+import { StudySectionComments } from './components/StudySectionComments'
 
 type Props = { content: SiteContent }
 
@@ -49,6 +50,9 @@ type StudyAccountOverview = {
     noteCount: number
     memberSince: string
     lastLoginAt: string | null
+    currentStreak: number
+    longestStreak: number
+    lastStudiedDate: string | null
   }
   studies: Array<{
     slug: string
@@ -2064,7 +2068,7 @@ export function ColossiansStudySectionPage({ content }: Props) {
                 Share a thought or reaction with other students in this lesson.{' '}
                 <Link to={`/study/${study.slug}/community`} style={{ color: '#e0b840' }}>See all community posts →</Link>
               </p>
-              <CommunityBoard study={study} auth={auth} isEnrolled={isEnrolled} sectionFilter={section.id} />
+              <StudySectionComments studySlug={currentStudySlug} sectionId={section.id} isEnrolled={isEnrolled} />
             </article>
           </div>
 
@@ -2766,16 +2770,43 @@ export function StudyAccountPage() {
 
         {overview?.stats && (
           <>
-            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
-              <div style={{ flex: '1 1 150px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
                 <p style={{ fontSize: '1.6rem', fontWeight: 700, margin: 0 }}>{overview.stats.noteCount}</p>
-                <p style={{ margin: 0, fontSize: '0.85rem' }}>Total notes saved</p>
+                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Notes saved</p>
               </div>
-              <div style={{ flex: '1 1 150px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+                <p style={{ fontSize: '1.6rem', fontWeight: 700, margin: 0 }}>{overview.stats.currentStreak ?? 0} 🔥</p>
+                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Day streak</p>
+              </div>
+              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+                <p style={{ fontSize: '1.6rem', fontWeight: 700, margin: 0 }}>{overview.stats.longestStreak ?? 0}</p>
+                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Longest streak</p>
+              </div>
+              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
                 <p style={{ fontSize: '1rem', fontWeight: 600, margin: 0 }}>{overview.stats.memberSince && !isNaN(new Date(overview.stats.memberSince).getTime()) ? new Date(overview.stats.memberSince).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</p>
-                <p style={{ margin: 0, fontSize: '0.85rem' }}>Member since</p>
+                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Member since</p>
               </div>
             </div>
+            {overview.studies.filter(s => s.enrolled && s.totalLessons > 0).length > 0 && (
+              <div style={{ marginBottom: '1.5rem' }}>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#7a7060' }}>Study Progress</p>
+                {overview.studies.filter(s => s.enrolled && s.totalLessons > 0).map(s => {
+                  const pct = Math.round((s.completedLessons / s.totalLessons) * 100)
+                  return (
+                    <div key={s.slug} style={{ marginBottom: '0.85rem' }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.88rem', marginBottom: '0.3rem' }}>
+                        <span>{s.title}</span>
+                        <span style={{ color: '#7a7060' }}>{s.completedLessons}/{s.totalLessons} lessons · {pct}%</span>
+                      </div>
+                      <div style={{ height: '6px', background: '#2a2518', borderRadius: '3px', overflow: 'hidden' }}>
+                        <div style={{ height: '100%', width: `${pct}%`, background: pct === 100 ? '#4a9a4a' : '#c9a84c', borderRadius: '3px', transition: 'width 0.4s ease' }} />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
             {divider}
           </>
         )}

vite.config.ts

@@ -1,9 +1,44 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'book_icon.png', 'icons.svg'],
+      manifest: {
+        name: 'Verse by Verse with Nate',
+        short_name: 'VBVN',
+        description: 'A journey through Scripture — episodes, Q&A, and Bible study.',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#13120e',
+        theme_color: '#13120e',
+        icons: [
+          { src: '/pwa-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/pwa-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
+        ],
+      },
+      workbox: {
+        navigateFallback: '/index.html',
+        navigateFallbackDenylist: [/^\/api\//, /^\/feed\.xml/, /^\/uploads\//],
+        runtimeCaching: [
+          {
+            urlPattern: /^\/api\/(episodes|questions)/,
+            handler: 'StaleWhileRevalidate',
+            options: { cacheName: 'api-content', expiration: { maxAgeSeconds: 3600 } },
+          },
+          {
+            urlPattern: /\/images\//,
+            handler: 'CacheFirst',
+            options: { cacheName: 'images', expiration: { maxEntries: 60, maxAgeSeconds: 86400 * 30 } },
+          },
+        ],
+      },
+    }),
+  ],
   resolve: {
     alias: {
       'react-simple-maps': 'react-simple-maps/dist/index.es.js',