Tutorial Data Schema

This directory stores the runtime code for /tutorial and /tutorial/<slug>. Tutorial content now comes from the remote Netvue resource bucket instead of checked-in local JSON files.

Files

• index.tsx Tutorial landing page. It fetches the remote manifest at runtime.
• src/components/tutorial/remoteTutorial.ts Shared runtime fetch helpers and TypeScript types for the remote manifest and remote detail payloads.
• tutorial-router.tsx Canonical slug route loader for /tutorial/<slug>. It fetches the remote manifest and remote detail payload at runtime.
• tutorial-video/index.tsx Legacy compatibility route that fetches the remote manifest and redirects old ?id= URLs to canonical slug URLs.

Remote Manifest Schema

The runtime manifest is fetched from https://resource.netvue.com/help-center/tutorial/tutorial.json.

Example:

{
  "id": 28,
  "slug": "birdfy-feeder",
  "routePath": "/tutorial/birdfy-feeder",
  "dataFile": "https://resource.netvue.com/help-center/tutorial/data/birdfy-feeder.json",
  "videoCount": 7
}

Field meanings:

• id Stable numeric ID used for old route compatibility. Do not reuse an existing ID.
• slug Canonical product slug used in the new route /tutorial/<slug>.
• routePath Canonical route path. Must match /tutorial/${slug}.
• dataFile URL of the matching remote detail JSON.
• videoCount Video total for the list card. The /tutorial page uses this value directly and no longer derives the count from the detail payload.

Remote Detail Schema

Each remote detail JSON contains the full tutorial payload for one product.

Example:

{
  "id": 28,
  "title": "Birdfy Feeder Tutorial",
  "img": "https://i.ytimg.com/vi/Dmzw47Qzngo/maxresdefault.jpg",
  "list": [
    {
      "url": "https://www.youtube.com/watch?v=Dmzw47Qzngo&list=...",
      "title": "How to Assemble Your Birdfy Feeder - Birdfy Feeder Tutorial",
      "time": "1:10",
      "img": "https://i.ytimg.com/vi/Dmzw47Qzngo/maxresdefault.jpg"
    }
  ],
  "slug": "birdfy-feeder",
  "routePath": "/tutorial/birdfy-feeder",
  "legacyRoutes": [
    "/youtube/tutorial-video?id=28",
    "/youtube/tutorial-video/?id=28"
  ]
}

Top-level fields:

• id Must match the corresponding manifest item.
• title Title shown on the detail page and used as the card title when the list page enriches manifest data.
• img Main cover image for the detail page.
• list Array of tutorial video items.
• slug Must match the corresponding manifest item.
• routePath Must match the corresponding manifest item.
• legacyRoutes Legacy aliases for the old ?id= route family.

Video item fields inside list:

• url Full YouTube video URL.
• title Video title shown on the detail page.
• time Video duration string, for example 1:10.
• img Thumbnail image shown on the detail page.

How To Add A New Tutorial Product

When adding a new product tutorial, update the remote manifest and the remote detail JSON.

1. Create the remote detail JSON under https://resource.netvue.com/help-center/tutorial/data/.
2. Add a new item to the remote manifest.
3. Verify /tutorial and /tutorial/{product-slug} locally.

Recommended sequence:

1. Pick a new unique id.
2. Choose the final slug.
3. Create the remote detail JSON with the full list array.
4. Add the manifest item with the same id, slug, routePath, dataFile, and videoCount.

Maintenance Rules

• Do not add checked-in {slug}.tsx files under this directory. Canonical tutorial routes are created by the local Docusaurus plugin.
• Keep the remote manifest lightweight. It is a manifest, not the full content store.
• Keep the remote detail JSON as the source of truth for title, img, and the video list.
• Keep videoCount in the remote manifest in sync with the remote detail payload.
• Do not remove old legacyRoutes unless you intentionally want to break old links.

Validation

After changing tutorial runtime code, run:

pnpm build

Check these routes manually:

• /tutorial
• /tutorial/{product-slug}
• /youtube/tutorial-video/?id={id}

If the old ?id= route does not redirect correctly, first confirm that id, slug, and routePath match between the remote manifest and the remote detail JSON.