Sunu LogoSunu

Sunu Help Center

A comprehensive help center system for the Sunu health app, providing documentation accessible via web and native iOS app.

🎯 Overview

This help center mirrors the structure used by UltraLocked, with:

  • Web interface at sunu.health/help (Next.js)
  • iOS native interface in the Sunu app (SwiftUI)
  • RESTful API for fetching articles
  • Markdown-based content for easy authoring

📁 Structure

sunu/                           # Next.js web app
├── lib/
│   └── help-articles.ts        # Article management & category config
├── content/
│   └── help/                   # Markdown articles (*.md)
│       ├── your-first-five-minutes.md
│       ├── creating-secure-account.md
│       └── ...
├── app/
│   ├── help/
│   │   ├── page.tsx           # Main help center page
│   │   ├── layout.tsx         # Shared layout
│   │   └── [slug]/
│   │       └── page.tsx       # Article detail page
│   └── api/
│       └── help/
│           ├── route.ts       # GET /api/help (all articles)
│           └── [slug]/
│               └── route.ts   # GET /api/help/:slug (single article)

Sunu/                        # iOS app
├── Models/
│   └── HelpModels.swift        # Data models
├── Services/
│   └── HelpArticleService.swift # API client
└── Views/
    └── Help/
        ├── HelpView.swift      # Main help center
        └── HelpArticleDetailView.swift # Article detail

📝 Content Organization

Categories (11 total)

  1. 🚀 Getting Started - Onboarding and basics
  2. 🤖 Using the AI Health Assistant - Chat and AI features
  3. 🍎 Logging Meals & Nutrition - Food tracking
  4. 🏠 Your Health Dashboard - Home tab features
  5. 🔬 Advanced Health Tests - Blink test, voice biomarkers
  6. 📈 Viewing History & Trends - Data visualization
  7. 😊 Using the Check-in Feature - Mood and symptom tracking
  8. 👤 Managing Your Health Profile - Profile and settings
  9. ⌚️ Using the Apple Watch App - Watch companion
  10. ⚙️ Account, Privacy & Subscription - Account management
  11. ❓ Troubleshooting & FAQ - Common issues

Current Articles (10 written)

  • ✅ Your First Five Minutes: A Quick Tour
  • ✅ Creating Your Secure Account
  • ✅ Connecting to Apple Health: A Step-by-Step Guide
  • ✅ Understanding Your Health Disclaimer
  • ✅ Starting a Conversation with Your AI Assistant
  • ✅ How to Log a Meal (All Methods)
  • ✅ Understanding Your Health Scores
  • ✅ Taking the Blink Test (MBI Analysis)
  • ✅ How We Protect Your Health Data & Privacy
  • ✅ FAQ: Why isn't my Apple Health data showing up?

🚀 Getting Started

Prerequisites

# In sunu directory
npm install gray-matter remark remark-html

Run Locally

cd /Users/adeel/projects/sunu
npm run dev
# Visit http://localhost:3000/help

iOS Setup

  1. Ensure HelpModels.swift and HelpArticleService.swift are in Xcode project
  2. Build and run
  3. Navigate to Help Center from Profile

✍️ Creating New Articles

1. Create Markdown File

touch content/help/my-new-article.md

2. Add Frontmatter

---
title: "Your Article Title"
summary: "Brief one-sentence description under 150 characters"
category: "Category Name"
displayOrder: 10
---

3. Write Content

Use markdown formatting. See HELP_ARTICLE_TEMPLATE.md for detailed guidance.

4. Test

  • Web: npm run dev → visit /help/my-new-article
  • API: curl http://localhost:3000/api/help/my-new-article
  • iOS: Build and run app

5. Deploy

Articles are automatically included when the site is built.

🔧 Configuration

Update Categories

Edit lib/help-articles.ts:

export const helpCategories = [
  {
    key: "Category Name",
    title: "🎯 Display Title",
    description: "Brief description of this category",
    displayOrder: 1,
  },
  // ... more categories
];

Change URLs

Update these files for production:

  1. iOS Service (Sunu/Services/HelpArticleService.swift):
#if DEBUG
self.baseURL = "http://localhost:3000/api/help"
#else
self.baseURL = "https://sunu.health/api/help"  // ← Update this
#endif
  1. API Routes (app/api/help/route.ts and app/api/help/[slug]/route.ts):
url: `https://sunu.health/help/${article.slug}`,  // ← Update this

📡 API Endpoints

GET /api/help

Returns all articles grouped by category.

Response:

{
  "categories": [
    {
      "key": "Getting Started",
      "title": "🚀 Getting Started",
      "description": "Essential first steps...",
      "displayOrder": 1,
      "articles": [
        {
          "slug": "your-first-five-minutes",
          "title": "Your First Five Minutes: A Quick Tour",
          "summary": "A welcome guide...",
          "category": "Getting Started",
          "displayOrder": 1,
          "url": "https://sunu.health/help/your-first-five-minutes",
          "contentHtml": null
        }
      ]
    }
  ],
  "totalArticles": 10,
  "lastUpdated": "2025-10-06T12:00:00Z",
  "links": {
    "terms": "https://sunu.health/terms",
    "privacy": "https://sunu.health/privacy",
    "support": "https://sunu.health/help"
  }
}

GET /api/help/:slug

Returns single article with HTML content.

Response:

{
  "article": {
    "slug": "your-first-five-minutes",
    "title": "Your First Five Minutes: A Quick Tour",
    "summary": "A welcome guide...",
    "category": "Getting Started",
    "displayOrder": 1,
    "url": "https://sunu.health/help/your-first-five-minutes",
    "contentHtml": "<h2>Meet Your Main Tabs</h2><p>Sunu is organized...</p>"
  }
}

🎨 Styling

Web Styling

Articles use Tailwind's prose classes with custom styling in app/help/[slug]/page.tsx.

iOS Styling

HTML rendered in WKWebView with custom CSS in HelpArticleDetailView.swift:

  • Responsive design
  • Dark mode support
  • Native font stack
  • iOS-appropriate spacing

🔍 Search

Web Search

Client-side search on title and summary (component in app/help/page.tsx)

iOS Search

Full-text search on title and summary (in HelpView.swift)

📊 Features

Web Features

  • ✅ Responsive design
  • ✅ Dark mode
  • ✅ SEO optimized
  • ✅ Static site generation
  • ✅ Fast page loads
  • ✅ Article search
  • ✅ Category browsing
  • ✅ Related articles

iOS Features

  • ✅ Native SwiftUI
  • ✅ Dark mode
  • ✅ Pull to refresh
  • ✅ Search functionality
  • ✅ Share articles
  • ✅ HTML rendering
  • ✅ 1-hour caching
  • ✅ Offline support

🧪 Testing

Test Web Interface

npm run dev
# Check these pages:
# - http://localhost:3000/help
# - http://localhost:3000/help/your-first-five-minutes

Test API

# All articles
curl http://localhost:3000/api/help | jq

# Single article
curl http://localhost:3000/api/help/your-first-five-minutes | jq

Test iOS App

  1. Open Sunu.xcodeproj
  2. Build and run (⌘R)
  3. Navigate to Help Center
  4. Test search, browsing, article detail

📦 Deployment

Deploy Web

# Build for production
npm run build

# Deploy to hosting
# (Vercel, Netlify, etc.)

Deploy iOS

  1. Update production URL in HelpArticleService.swift
  2. Build for release
  3. Submit to App Store

🐛 Troubleshooting

Articles not showing on web

  • Check file is in content/help/
  • Verify frontmatter is valid YAML
  • Check category key matches exactly
  • Restart dev server

Articles not loading in iOS

  • Check API endpoints are accessible
  • Verify base URL is correct
  • Check network permissions
  • Review Xcode console for errors

Search not working

  • Web: Check search text state binding
  • iOS: Verify search predicate logic

HTML not rendering properly

  • Check markdown syntax
  • Review CSS in WKWebView
  • Test in both light and dark mode

📚 Documentation

  • Creating Articles: See HELP_ARTICLE_TEMPLATE.md
  • Migration Guide: See HELP_MIGRATION_GUIDE.md
  • Implementation Details: See HELP_CENTER_IMPLEMENTATION.md

🤝 Contributing

Adding New Articles

  1. Follow template in HELP_ARTICLE_TEMPLATE.md
  2. Test locally before committing
  3. Ensure proper category assignment
  4. Write clear, concise summaries
  5. Include relevant screenshots (if applicable)

Improving Existing Articles

  1. Update markdown file
  2. Keep frontmatter intact
  3. Maintain consistent style
  4. Test changes on web and iOS

Fixing Issues

  1. Check existing articles for patterns
  2. Verify changes work in both environments
  3. Update related documentation

📝 Content Guidelines

  • Tone: Friendly, clear, professional
  • Length: 600-1500 words per article
  • Structure: Use headers, lists, examples
  • Links: Include related articles
  • Format: Use markdown best practices

🔒 Security

  • All API calls use HTTPS in production
  • No sensitive data in articles
  • User data privacy respected
  • Links validated before publishing

📞 Support

For questions about:

  • Content: Review existing articles or ask team
  • Technical: Check documentation files
  • Bugs: Create issue with reproduction steps

🗺️ Roadmap

  • [ ] Add remaining 40+ articles from plan
  • [ ] Add article analytics
  • [ ] Implement version history
  • [ ] Add article feedback system
  • [ ] Create admin interface for editing
  • [ ] Add video embeds support
  • [ ] Implement related articles suggestions
  • [ ] Add print-friendly styling

📄 License

Proprietary - Sunu Health, Inc.

Last Updated: October 2025
Status: ✅ Core system complete, content in progress