Skip to main content

DevoteMe User Documentation Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Add user-facing documentation for DevoteMe under docs/products/devoteme/, correct the stale products.ts listing entry, and add a marketing landing page — all following the existing Zander pattern.

Architecture: Docusaurus content-only docs (no code to test) plus one new React page (src/pages/products/devoteme.tsx) modeled on zander.tsx. Verification is: the Docusaurus production build succeeds (onBrokenLinks: 'throw' in docusaurus.config.ts makes broken doc links a hard build failure) and tsc typechecks the new page.

Tech Stack: Docusaurus 3 (MDX docs, autogenerated sidebar), React 18 + TypeScript (.tsx pages), CSS Modules.

Global Constraints​

  • Docs cover the end-user app only — no backend/admin/API content (spec: "Out of scope").
  • Every feature page includes a screenshot placeholder callout in the exact form :::note / 📸 *Screenshot: ...* / ::: (spec: "Screenshots").
  • Feature pages describe behavior in plain language only — no implementation details (ElevenLabs, IndexedDB, Prisma model names, API routes) (spec: "Structure").
  • products.ts's devoteme entry must be rewritten to match the real app, with status: 'available', noindex: false, docsUrl: '/docs/products/devoteme' (spec: "Product listing changes").
  • The landing page uses DevoteMe's existing brand color #7C3AED (spec: "Landing page").
  • docusaurus.config.ts's sitemap.ignorePatterns currently lists /products/devoteme — this must be removed once the product goes live/indexable, or the new page will silently stay out of the sitemap despite noindex: false.

Task 1: Docs content — overview and features index​

Files:

  • Create: docs/products/devoteme/index.md
  • Create: docs/products/devoteme/features/_category_.json
  • Create: docs/products/devoteme/features/index.md

Interfaces:

  • Produces: doc IDs products/devoteme/index and products/devoteme/features/index, referenced by Task 2 (feature pages, via the features index's link table) and Task 5 (sidebars.ts and the landing page's docsUrl link).

  • Step 1: Write docs/products/devoteme/index.md

---
title: DevoteMe
sidebar_label: Overview
sidebar_position: 1
description: Overview of DevoteMe, a daily devotional app for prayer, scripture, and reflection.
---

# DevoteMe

**Your daily companion for prayer, scripture, and devotional reading.**

DevoteMe is a devotional app for building a consistent daily habit around three simple things: prayer, a verse of the day, and a devotional reading. Each one is designed to take a few minutes, so it fits into a morning routine or a quiet moment anywhere in the day.

:::note
📸 *Screenshot: The DevoteMe dashboard showing today's greeting, streak counter, and the three daily items*
:::

---

## What You Can Do

- **Pray** through categorized prayers, or write and save your own — read them yourself or listen to a voice-guided narration
- **Read the Verse of the Day** — one scripture passage, presented fresh each day
- **Read the Daily Devotion** — a short devotional reflection to go alongside it
- **Track your progress** — a dashboard shows what you've completed today and keeps a running streak of consecutive days
- **Install it like an app** — DevoteMe works as an installable app on your phone or desktop, and keeps working when you're offline

See [Features](./features) for a full walkthrough of each part of the app.

## Getting Started

Create an account, and you'll land on your dashboard — a short greeting, your current streak, and today's prayer, verse, and devotion, each one tap away. There's nothing to configure before you start; the first prayer, verse, and devotion are ready the moment you sign up.
  • Step 2: Write docs/products/devoteme/features/_category_.json
{
  "label": "Features",
  "position": 2,
  "link": {
    "type": "doc",
    "id": "products/devoteme/features/index"
  }
}
  • Step 3: Write docs/products/devoteme/features/index.md
---
title: Features
sidebar_label: Overview
sidebar_position: 1
description: Overview of all DevoteMe features.
---

# Features

DevoteMe centers on a simple daily rhythm — prayer, a verse, and a devotion — plus the account and offline tools that support it.

## Feature Areas

| Feature | Description |
|---|---|
| [Prayers](./prayers) | Browse categorized prayers, write your own, favorite the ones you return to, and listen to voice-guided narration |
| [Verse of the Day](./verse-of-the-day) | A fresh scripture passage every day, available offline |
| [Daily Devotion](./daily-devotion) | A daily devotional reading to accompany your prayer and verse |
| [Progress & Streaks](./progress-streaks) | A dashboard tracking what you've completed today and your day-streak |
| [Account Settings](./account-settings) | Manage your display name, comment nickname, email, and password |
| [Installing the App](./installing-the-app) | Install DevoteMe on your phone or desktop and use it offline |
  • Step 4: Verify the files parse as valid JSON/Markdown

Run: node -e "JSON.parse(require('fs').readFileSync('docs/products/devoteme/features/_category_.json','utf8')); console.log('ok')" Expected: ok

  • Step 5: Commit
git add docs/products/devoteme/index.md docs/products/devoteme/features/_category_.json docs/products/devoteme/features/index.md
git commit -m "docs(devoteme): add overview and features index"

Task 2: Docs content — feature pages​

Files:

  • Create: docs/products/devoteme/features/prayers.md
  • Create: docs/products/devoteme/features/verse-of-the-day.md
  • Create: docs/products/devoteme/features/daily-devotion.md
  • Create: docs/products/devoteme/features/progress-streaks.md
  • Create: docs/products/devoteme/features/account-settings.md
  • Create: docs/products/devoteme/features/installing-the-app.md

Interfaces:

  • Consumes: doc ID products/devoteme/features/index (Task 1), linked back to via each page's breadcrumb context (Docusaurus handles this automatically from the category — no manual link needed).

  • Produces: doc IDs products/devoteme/features/{prayers,verse-of-the-day,daily-devotion,progress-streaks,account-settings,installing-the-app}, referenced by Task 1's features index table (already written) and Task 5 (landing page highlights may link here).

  • Step 1: Write docs/products/devoteme/features/prayers.md

---
title: Prayers
sidebar_label: Prayers
sidebar_position: 2
description: Browse categorized prayers, write your own, favorite them, and listen to voice-guided narration.
---

# Prayers

The Prayers section is where you browse and pray through DevoteMe's library of prayers, organized by category — things like gratitude, healing, guidance, and more.

:::note
📸 *Screenshot: The Prayers page showing category filters and a list of prayer cards*
:::

## Browsing by Category

Pick a category from the filter bar to narrow the list, or leave it on all categories to browse everything. Each prayer shows its title and an estimated reading time, so you can pick something that fits the time you have.

## Writing Your Own Prayers

Alongside the built-in library, you can write and save personal prayers of your own. These are private to you — switch on the **Mine** filter to see only the prayers you've written.

## Favoriting Prayers

Tap the heart icon on any prayer to favorite it. Switch on the **Favorites** filter to quickly get back to the prayers you return to most.

:::note
📸 *Screenshot: An open prayer with the favorite heart icon and voice narration controls visible*
:::

## Listening to a Prayer

Open any prayer to read it, or press play to hear it read aloud with voice-guided narration — useful for hands-free moments, like driving or getting ready in the morning.
  • Step 2: Write docs/products/devoteme/features/verse-of-the-day.md
---
title: Verse of the Day
sidebar_label: Verse of the Day
sidebar_position: 3
description: A fresh scripture passage every day, available offline.
---

# Verse of the Day

Each day, DevoteMe presents one scripture passage for you to sit with. It's greeted with your name, so it feels like it was picked out for you.

:::note
📸 *Screenshot: The Verse of the Day page showing the day's passage and reference*
:::

## Reading Today's Verse

Open the Verse tab from your dashboard to read today's passage. A new one appears each day, so it's worth checking back daily rather than all at once.

## Reading Offline

Once you've loaded the Verse of the Day, it's cached on your device — so you can still read it later even without a signal or Wi-Fi.
  • Step 3: Write docs/products/devoteme/features/daily-devotion.md
---
title: Daily Devotion
sidebar_label: Daily Devotion
sidebar_position: 4
description: A daily devotional reading to accompany your prayer and verse.
---

# Daily Devotion

The Daily Devotion is a short devotional reading meant to go alongside your prayer and verse of the day — a bit of reflection to round out your daily time.

:::note
📸 *Screenshot: The Daily Devotion page showing the day's reading*
:::

## Reading Today's Devotion

Open the Devotion tab from your dashboard to read the day's entry. Like the Verse of the Day, it's greeted with your name and refreshes daily.

## Reading Offline

Once loaded, a devotion is cached on your device, so you can come back to it later even without a connection.
  • Step 4: Write docs/products/devoteme/features/progress-streaks.md
---
title: Progress & Streaks
sidebar_label: Progress & Streaks
sidebar_position: 5
description: Track what you've completed today and keep your daily streak going.
---

# Progress & Streaks

Your dashboard is the home base for tracking your daily habit — a greeting, today's progress, and your current streak.

:::note
📸 *Screenshot: The dashboard showing a personalized greeting, streak counter, and three completion badges for prayer, verse, and devotion*
:::

## Today's Progress

The dashboard shows three items — Prayer, Verse of the Day, and Devotion — each marked as complete once you've opened and gone through it that day. You don't need to finish all three in one sitting; each one tracks independently.

## Your Streak

Your streak counts the number of consecutive days you've completed at least one of prayer, verse, or devotion. Complete something every day to keep it going — miss a day, and the streak resets.
  • Step 5: Write docs/products/devoteme/features/account-settings.md
---
title: Account Settings
sidebar_label: Account Settings
sidebar_position: 6
description: Manage your display name, comment nickname, email, and password.
---

# Account Settings

Your account settings page is where you manage the basics of your DevoteMe profile.

:::note
📸 *Screenshot: The account settings page showing display name, nickname, and account fields*
:::

## Display Name and Nickname

- **Display Name** is your main name shown across the app.
- **Comment Nickname** is a separate, optional name used specifically when you post — handy if you'd rather keep your comments under a different name than your display name.

## Email and Password

Your account email and password can be updated from the same page. If you forget your password, use the **Forgot Password** link on the sign-in page to reset it by email.
  • Step 6: Write docs/products/devoteme/features/installing-the-app.md
---
title: Installing the App
sidebar_label: Installing the App
sidebar_position: 7
description: Install DevoteMe on your phone or desktop and use it offline.
---

# Installing the App

DevoteMe can be installed like a native app on your phone or computer, so it opens straight to your dashboard from a home screen icon instead of a browser tab.

:::note
📸 *Screenshot: The DevoteMe install prompt on a phone home screen next to the app icon*
:::

## Installing on Android

Open DevoteMe in Chrome, then use the browser menu's **Install app** (or **Add to Home Screen**) option. It'll appear on your home screen and app drawer like any other app.

## Installing on iPhone

Open DevoteMe in Safari, tap the **Share** icon, then choose **Add to Home Screen**.

## Installing on Desktop

Open DevoteMe in Chrome or Edge, and click the install icon in the address bar (or use the browser menu's **Install DevoteMe...** option).

## Using It Offline

Once you've opened the Verse of the Day and Daily Devotion at least once, they're cached on your device, so you can still read them without an internet connection. Installing the app also gives you quick shortcuts straight to Prayers, Verse of the Day, and Devotion from your home screen icon.
  • Step 7: Commit
git add docs/products/devoteme/features/prayers.md docs/products/devoteme/features/verse-of-the-day.md docs/products/devoteme/features/daily-devotion.md docs/products/devoteme/features/progress-streaks.md docs/products/devoteme/features/account-settings.md docs/products/devoteme/features/installing-the-app.md
git commit -m "docs(devoteme): add feature pages"

Task 3: Wire up the sidebar​

Files:

  • Modify: sidebars.ts

Interfaces:

  • Consumes: doc IDs from Tasks 1–2 (products/devoteme/index, products/devoteme/features/index, and the six feature doc IDs via autogeneration).

  • Step 1: Add a devoteme sidebar entry, mirroring the zander entry's shape

In sidebars.ts, add a new top-level key after consentpvp and before zander:

  devoteme: [
    'products/devoteme/index',
    {
      type: 'category',
      label: 'Features',
      link: {type: 'doc', id: 'products/devoteme/features/index'},
      items: [{type: 'autogenerated', dirName: 'products/devoteme/features'}],
    },
  ],

The full sidebars object should now read (only the new block shown in context):

const sidebars: SidebarsConfig = {
  docs: [
    {
      type: 'autogenerated',
      dirName: '.',
    },
  ],
  ascendra: [
    {
      type: 'autogenerated',
      dirName: 'products/ascendra',
    },
  ],
  consentpvp: [
    {
      type: 'autogenerated',
      dirName: 'products/consentpvp',
    },
  ],
  devoteme: [
    'products/devoteme/index',
    {
      type: 'category',
      label: 'Features',
      link: {type: 'doc', id: 'products/devoteme/features/index'},
      items: [{type: 'autogenerated', dirName: 'products/devoteme/features'}],
    },
  ],
  zander: [
    // ...unchanged
  ],
};
  • Step 2: Commit
git add sidebars.ts
git commit -m "docs(devoteme): register devoteme sidebar"

Task 4: Correct the products.ts listing and sitemap​

Files:

  • Modify: src/data/products.ts:97-113
  • Modify: docusaurus.config.ts:90-97

Interfaces:

  • Produces: getProduct('devoteme') returning status: 'available', docsUrl: '/docs/products/devoteme' — consumed by Task 5's landing page.

  • Step 1: Replace the devoteme entry in src/data/products.ts

Replace lines 97–113 (the existing devoteme object) with:

  {
    slug: 'devoteme',
    name: 'DevoteMe',
    tagline: 'Your daily companion for prayer, scripture, and devotional reading.',
    description:
      'DevoteMe is a devotional app for building a consistent daily habit around prayer, a verse of the day, and a devotional reading. Browse categorized prayers or write your own, listen to voice-guided narration, track a daily streak, and keep going even offline as an installable app.',
    category: 'Faith & Devotion',
    status: 'available',
    color: '#7C3AED',
    features: [
      'Daily prayer with voice-guided narration',
      'Verse of the Day with offline caching',
      'In-depth daily devotional readings',
      'Streak tracking and daily progress',
      'Installable PWA with offline mode',
    ],
    docsUrl: '/docs/products/devoteme',
    showInNav: true,
  },
  • Step 2: Remove /products/devoteme from the sitemap's ignore list

In docusaurus.config.ts, find:

        sitemap: {
          ignorePatterns: [
            '/products/craftify',
            '/products/devoteme',
            '/products/minemonitor',
            '/products/rallypoint',
            '/products/tutorialbuddy',
          ],
        },

Replace with:

        sitemap: {
          ignorePatterns: [
            '/products/craftify',
            '/products/minemonitor',
            '/products/rallypoint',
            '/products/tutorialbuddy',
          ],
        },
  • Step 3: Typecheck

Run: npm run typecheck Expected: exits 0, no type errors

  • Step 4: Commit
git add src/data/products.ts docusaurus.config.ts
git commit -m "fix(devoteme): correct product listing to match the real app, mark available"

Task 5: Landing page​

Files:

  • Create: src/pages/products/devoteme.tsx
  • Create: src/pages/products/devoteme.module.css

Interfaces:

  • Consumes: getProduct('devoteme'), STATUS_LABEL, STATUS_COLOR_VAR from @site/src/data/products (Task 4); Breadcrumbs from @site/src/components/Breadcrumbs; OffsetSplit from @site/src/components/layout/OffsetSplit (props: leftWidth: number, left: ReactNode, right: ReactNode); StaggeredGrid from @site/src/components/layout/StaggeredGrid (props: columns: number, children: ReactNode).

  • Produces: the /products/devoteme route.

  • Step 1: Copy zander.module.css to devoteme.module.css unchanged

cp src/pages/products/zander.module.css src/pages/products/devoteme.module.css

The stylesheet is fully parametrized by the --product-color CSS variable set inline per-page, so no edits are needed — this mirrors how ascendra.module.css and consentpvp.module.css were each created from the same base.

  • Step 2: Write src/pages/products/devoteme.tsx
import type {ReactNode, CSSProperties} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
import styles from './devoteme.module.css';
import {getProduct, STATUS_LABEL, STATUS_COLOR_VAR} from '@site/src/data/products';
import Breadcrumbs from '@site/src/components/Breadcrumbs';
import OffsetSplit from '@site/src/components/layout/OffsetSplit';
import StaggeredGrid from '@site/src/components/layout/StaggeredGrid';

const product = getProduct('devoteme')!;

type Highlight = {icon: string; title: string; description: string};

const highlights: Highlight[] = [
  {
    icon: '🙏',
    title: 'Prayers, Read or Spoken',
    description:
      'Browse categorized prayers or write your own, favorite the ones you return to, and listen to voice-guided narration when your hands are busy.',
  },
  {
    icon: '📖',
    title: 'A Fresh Verse Every Day',
    description:
      'One scripture passage, presented daily and greeted with your name — cached so you can still read it offline.',
  },
  {
    icon: '✨',
    title: 'A Daily Devotion',
    description:
      'A short devotional reading to round out your prayer and verse, refreshed each day and available offline once loaded.',
  },
  {
    icon: '🔥',
    title: 'Streaks That Keep You Going',
    description:
      'Your dashboard tracks what you\'ve completed today and keeps a running streak across consecutive days.',
  },
  {
    icon: '📱',
    title: 'Install It Like an App',
    description:
      'Add DevoteMe to your home screen on Android, iPhone, or desktop, with shortcuts straight to Prayers, Verse, and Devotion.',
  },
  {
    icon: '🔌',
    title: 'Works Offline',
    description:
      'Once you\'ve opened the verse and devotion, they stay cached on your device — no signal needed to keep your streak alive.',
  },
];

type Step = {number: string; title: string; description: string};

const steps: Step[] = [
  {
    number: '1',
    title: 'Sign up and land on your dashboard',
    description:
      'No setup required — your first prayer, verse, and devotion are ready the moment you create an account.',
  },
  {
    number: '2',
    title: 'Spend a few minutes with prayer, verse, and devotion',
    description:
      'Each one is quick enough to fit into a morning routine or a quiet moment anywhere in the day.',
  },
  {
    number: '3',
    title: 'Your dashboard tracks what you\'ve done today',
    description:
      'Prayer, verse, and devotion each mark themselves complete independently as you go through them.',
  },
  {
    number: '4',
    title: 'Come back tomorrow to keep your streak going',
    description:
      'A fresh verse and devotion appear daily, and your streak keeps counting as long as you show up.',
  },
];

type Spec = {label: string; value: string};

const specs: Spec[] = [
  {label: 'Works on', value: 'Android, iPhone & Desktop'},
  {label: 'Offline', value: 'Verse and devotion cached locally'},
  {label: 'Install', value: 'Installable as a standalone app'},
  {label: 'Voice', value: 'Voice-guided prayer narration'},
];

export default function DevoteMe(): ReactNode {
  const colorVars = {'--product-color': product.color} as CSSProperties;

  return (
    <Layout
      title="DevoteMe"
      description="DevoteMe is a devotional app for building a consistent daily habit around prayer, a verse of the day, and a devotional reading.">
      <div className={styles.breadcrumbBar}>
        <div className="container">
          <Breadcrumbs
            items={[
              {label: 'Home', href: '/'},
              {label: 'Products', href: '/products'},
              {label: 'DevoteMe', href: '/products/devoteme'},
            ]}
          />
        </div>
      </div>

      {/* ── Hero ───────────────────────────────────────────────────────── */}
      <header className={styles.hero} style={colorVars}>
        <div className="container">
          <div className={styles.badges}>
            <span className={styles.categoryBadge}>{product.category}</span>
            <span
              className={styles.statusBadge}
              style={{background: STATUS_COLOR_VAR[product.status]}}>
              {STATUS_LABEL[product.status]}
            </span>
          </div>
          <Heading as="h1" className={styles.heroTitle}>
            DevoteMe
          </Heading>
          <p className={styles.heroTagline}>{product.tagline}</p>
          <p className={styles.heroLede}>{product.description}</p>
          <div className={styles.heroActions}>
            <Link
              className="button button--secondary button--lg"
              to={product.docsUrl}>
              View Documentation
            </Link>
            <Link
              className="button button--outline button--secondary button--lg"
              to="/products">
              ← All Products
            </Link>
          </div>
        </div>
      </header>

      <main>
        {/* ── Value proposition ────────────────────────────────────────── */}
        <section className={styles.valueSection}>
          <div className="container text--center">
            <span className={styles.eyebrow}>Why DevoteMe</span>
            <Heading as="h2" className={styles.sectionTitle}>
              A daily habit that actually fits into your day
            </Heading>
            <p className={styles.sectionSubtitle}>
              Prayer, scripture, and reflection shouldn't require a
              complicated routine. DevoteMe keeps the three parts of your
              daily time — prayer, verse, and devotion — quick, focused, and
              in one place, with a streak to keep you coming back.
            </p>
          </div>
        </section>

        {/* ── Feature grid ─────────────────────────────────────────────── */}
        <section className={styles.featureSection} style={colorVars}>
          <div className="container">
            <StaggeredGrid columns={3}>
              {highlights.map((h) => (
                <div key={h.title} className={styles.featureCard}>
                  <div className={styles.featureIcon}>{h.icon}</div>
                  <Heading as="h3" className={styles.featureTitle}>
                    {h.title}
                  </Heading>
                  <p className={styles.featureDesc}>{h.description}</p>
                </div>
              ))}
            </StaggeredGrid>
          </div>
        </section>

        {/* ── How it works ─────────────────────────────────────────────── */}
        <section className={styles.stepsSection}>
          <div className="container">
            <div className="text--center">
              <span className={styles.eyebrow}>How it works</span>
              <Heading as="h2" className={styles.sectionTitle}>
                A few minutes a day, tracked automatically
              </Heading>
            </div>
            <div className={styles.stepsGrid}>
              {steps.map((s) => (
                <div key={s.number} className={styles.stepCard} style={colorVars}>
                  <span className={styles.stepNumber}>{s.number}</span>
                  <Heading as="h3" className={styles.stepTitle}>
                    {s.title}
                  </Heading>
                  <p className={styles.stepDesc}>{s.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── Details + specs ──────────────────────────────────────────── */}
        <section className={styles.detailSection}>
          <div className="container">
            <OffsetSplit
              leftWidth={7}
              left={
                <>
                  <span className={styles.eyebrow}>Built for daily use</span>
                  <Heading as="h2" className={styles.sectionTitle}>
                    Designed to fit real life, not add to it
                  </Heading>
                  <p className={styles.detailText}>
                    DevoteMe doesn't ask for a big time commitment or a
                    complicated setup. Sign up, and your dashboard is ready
                    with today's prayer, verse, and devotion — install it on
                    your phone, and it works even without a connection.
                  </p>
                  <ul className={styles.integrationList}>
                    <li>
                      <strong>Voice narration</strong> — listen to any
                      prayer read aloud, hands-free.
                    </li>
                    <li>
                      <strong>Your own prayers</strong> — write and save
                      personal prayers alongside the built-in library.
                    </li>
                    <li>
                      <strong>Offline reading</strong> — the verse and
                      devotion stay available even without a signal.
                    </li>
                    <li>
                      <strong>One-tap install</strong> — add DevoteMe to
                      your home screen on Android, iPhone, or desktop.
                    </li>
                  </ul>
                </>
              }
              right={
                <div className={styles.specCard} style={colorVars}>
                  <Heading as="h3" className={styles.specTitle}>
                    At a glance
                  </Heading>
                  <dl className={styles.specList}>
                    {specs.map((s) => (
                      <div key={s.label} className={styles.specRow}>
                        <dt>{s.label}</dt>
                        <dd>{s.value}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              }
            />
          </div>
        </section>

        {/* ── CTA ──────────────────────────────────────────────────────── */}
        <section className={clsx(styles.ctaSection, 'al-angled-top')}>
          <div className="container text--center">
            <Heading as="h2">Ready to start your daily habit?</Heading>
            <p>
              Read the docs to see how prayers, the verse of the day, and
              your streak all fit together.
            </p>
            <div className={styles.ctaActions}>
              <Link
                className="button button--accent button--lg"
                to={product.docsUrl}>
                Read the Docs
              </Link>
              <Link
                className="button button--outline button--secondary button--lg"
                to="/products">
                Explore More Products
              </Link>
            </div>
          </div>
        </section>
      </main>
    </Layout>
  );
}
  • Step 3: Typecheck

Run: npm run typecheck Expected: exits 0, no type errors

  • Step 4: Commit
git add src/pages/products/devoteme.tsx src/pages/products/devoteme.module.css
git commit -m "feat(devoteme): add product landing page"

Task 6: Full build verification​

Files: none (verification only)

Interfaces:

  • Consumes: all files from Tasks 1–5.

  • Step 1: Run the production build

Run: npm run build Expected: exits 0. Because onBrokenLinks: 'throw' is set in docusaurus.config.ts, this will fail the build if any doc link (e.g. the features index table, the sidebar entries) points at a missing page — treat any such failure as a bug in Tasks 1–3 and fix the offending link before proceeding.

  • Step 2: Spot-check the built pages

Run: node -e "const fs=require('fs'); ['build/docs/products/devoteme/index.html','build/docs/products/devoteme/features/prayers.html','build/products/devoteme/index.html'].forEach(p => console.log(p, fs.existsSync(p)))" Expected: all three print true

  • Step 3: Commit (only if build verification required a fix)

If Step 1 required any fix, stage and commit it with a message like fix(devoteme): resolve broken doc link. If no fix was needed, skip this step — there is nothing to commit.

Self-Review Notes​

  • Spec coverage: index.md (Task 1), features/*.md for all 6 features (Task 2), sidebar registration (Task 3), products.ts + sitemap fix (Task 4), landing page (Task 5) — all spec sections covered.
  • Placeholders: none — every doc page has full prose, every code block is complete.
  • Type/ID consistency: doc IDs used in sidebars.ts (products/devoteme/index, products/devoteme/features/index) match the title/file paths created in Task 1; docsUrl: '/docs/products/devoteme' in Task 4 matches the route Docusaurus derives from that same file tree.