Refactor content schemas, docs structure, and blog OG generation #1884

ComputelessComputer · 2025-11-25T11:17:25Z

Updated content collection schemas and slug generation
Added section metadata to documentation files
Enhanced blog Open Graph schema with author and date
Improved documentation routing and structure
Styled legal pages with enhanced layout
Implemented dynamic OG image generation for blog posts

netlify · 2025-11-25T11:17:30Z

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	`fe807dd`
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/692590473d059e0008f3a474
😎 Deploy Preview	https://deploy-preview-1884--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-25T11:17:31Z

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	`fe807dd`
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/69259047d2dbbd00081fdfb7
😎 Deploy Preview	https://deploy-preview-1884--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2025-11-25T11:17:48Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The changes reorganize the documentation structure by introducing a section metadata field to docs collection, updating content-collection transformation logic to compute slug without numeric prefixes and extract an order field, moving CLI documentation to a developers subsection, enhancing OG image generation with author/date for blogs and section for docs, and restructuring docs routing to group documents by section with auto-redirect support.

Changes

Cohort / File(s)	Summary
Collection Schema & Transformation `apps/web/content-collections.ts`	Updated articles collection schema: `author` field changed from `z.string()` to `z.enum(["Harshika", "John Jeong", "Yujong Lee"])`. Updated docs collection schema: added required `section: z.string()` field. Modified docs transformation: slug now strips leading numeric prefixes; added computed `order` field derived from numeric filename prefix (default 999).
Docs Structure Definition `apps/web/src/routes/_view/docs/-structure.tsx`	New file exporting `docsStructure` constant with sections array containing `["about", "developers", "pro"]`.
Documentation Content — About & Developers `apps/web/content/docs/about/{0.hello-world,1.what-is-hyprnote,2.why-local-first,3.why-self-hosted}.mdx`, `apps/web/content/docs/developers/{0.analytics,1.bug-report,3.deeplinks,4.hooks,5.run,6.storage,7.versioning}.mdx`	Added `section` front-matter field with respective section values ("About" or "Developers") to each MDX file. Front-matter formatting standardized (quoted strings).
Documentation Content — Developers New & Reorganized `apps/web/content/docs/developers/2.cli.mdx`	New file created under developers section with title "CLI", section "Developers", and description metadata.
Documentation Content — Pro `apps/web/content/docs/pro/{0.activation,1.better-transcription,2.cloud}.mdx`	Added `section` front-matter field set to "Pro" in each MDX file.
Documentation Content — Removed `apps/web/content/docs/cli.mdx`	File content removed (empty/deleted).
Docs Routing — Index & Structure `apps/web/src/routes/_view/docs/index.tsx`, `apps/web/src/routes/_view/docs/route.tsx`	Index route now redirects to `/docs/$` with splat parameter. Route component refactored to use `docsStructure.sections` and `doc.section` field for grouping instead of folder-based logic; docs now sorted by `order` field; section rendering simplified.
Docs Routing — Slug Resolution & Redirect `apps/web/src/routes/_view/docs/$.tsx`	Added import for `redirect`. Enhanced loader to resolve docs by slug with fallback to `slug/index`; if not found, derives section from first path segment and redirects to first doc in that section if section exists; otherwise returns 404. Added OG image URL generation using `/og?type=docs&...` URL with section and description parameters.
Blog OG Image Generation `apps/web/src/routes/_view/blog/$slug.tsx`	Computed `ogImage` value from `article.coverImage` or generated URL including type, title, optional author, and optional date. Replaced conditional og:image/twitter:image with explicit entries using `ogImage`.
OG Edge Function — Schema & Helpers `apps/web/netlify/edge-functions/og.tsx`	Added `author` and `date` fields to blog schema; added `section` field to docs schema. Implemented `getAuthorAvatar` helper mapping known authors to avatar URLs. Enhanced `parseSearchParams` to extract author/date for blog and section for docs.
OG Edge Function — Templates `apps/web/netlify/edge-functions/og.tsx`	Updated `renderBlogTemplate` to display author avatar and date alongside title. Updated `renderDocsTemplate` to render section header and updated layout prominence. Updated `renderChangelogTemplate` and generic `renderTemplate` with style/structure refinements. Extended fonts loading to fetch additional Lora variant.
Legal Pages — Styling `apps/web/src/routes/_view/legal/{index,\$slug}.tsx`	Updated container styling: outer wrapper changed to gradient background (`from-white via-stone-50/20 to-white`) with dotted pattern image; inner content max-width increased to `max-w-6xl` with added border (`border-x border-neutral-100`) and white background.

Sequence Diagram

sequenceDiagram
    participant User
    participant Router as Docs Router
    participant Loader as Slug Resolver
    participant Docs as Docs Collection
    participant Redirect as Redirect Handler

    User->>Router: Request /docs/something
    Router->>Loader: Load doc with slug "something"
    Loader->>Docs: Find doc by slug
    alt Doc found
        Docs-->>Loader: Return doc
        Loader-->>Router: Return doc data
        Router->>Router: Render doc content + OG image
        Router-->>User: Display doc
    else Doc not found (try slug/index)
        Loader->>Docs: Find doc by slug/index
        alt Doc/index found
            Docs-->>Loader: Return doc
            Loader-->>Router: Return doc data
            Router-->>User: Display doc
        else Neither found (check section)
            Loader->>Docs: Extract section from first path segment
            Loader->>Docs: Find first doc in section
            alt Docs exist in section
                Docs-->>Loader: Return first doc
                Loader->>Redirect: Issue redirect to /docs/{section}/{slug}
                Redirect-->>User: Redirect response
            else No docs in section
                Loader-->>Router: 404 Not Found
                Router-->>User: 404 page
            end
        end
    end

sequenceDiagram
    participant Blog as Blog Article
    participant Route as Blog Route
    participant OG as OG Edge Function
    participant Browser as Browser

    Blog->>Route: Article with title, author, date, coverImage
    Route->>Route: Compute ogImage from coverImage or generate URL
    Route->>Route: Build ogImage URL: /og?type=blog&title=...&author=...&date=...
    Route->>Browser: Render meta tags with og:image, twitter:image
    Browser->>OG: Request OG image via URL
    OG->>OG: parseSearchParams extracts author, date
    OG->>OG: getAuthorAvatar resolves author → avatar URL
    OG->>OG: renderBlogTemplate renders with author avatar + date
    OG-->>Browser: Return OG image PNG/SVG
    Browser->>Browser: Display shared link preview with author & date

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Slug generation & order extraction logic (apps/web/content-collections.ts): Verify numeric prefix removal regex correctly handles all edge cases and that order defaults to 999 as documented.
Section-based auto-redirect logic (apps/web/src/routes/_view/docs/$.tsx): Confirm fallback chain (slug → slug/index → section first doc → 404) works correctly and doesn't cause infinite redirects.
Docs grouping refactor (apps/web/src/routes/_view/docs/route.tsx): Validate that migration from folder-based to docsStructure.sections + doc.section grouping preserves all docs and correct sorting by order field.
Author enum constraint (apps/web/content-collections.ts): Ensure all existing and future article MDX files use only the three allowed author names.
OG generation enhancements (apps/web/netlify/edge-functions/og.tsx): Check that optional author/date parameters parse correctly, avatar mapping handles unknowns gracefully, and new fonts load without performance regression.
CLI documentation relocation: Verify that old apps/web/content/docs/cli.mdx removal and new placement under developers don't break any internal links or references.

Possibly related PRs

OG image with netlify function #1700: Adds OG image edge function that this PR extends with author/date and docs section fields.
cleanup #1618: Modifies apps/web/content-collections.ts schema and transform logic (coverImage handling, collection configuration).
Refactored About page #1753: Restructures apps/web/src/routes/_view/docs/route.tsx layout and behavior that overlaps with this PR's section-grouping refactor.

Suggested reviewers

yujonglee

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch jj-branch-24

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 54e1f76 and fe807dd.

📒 Files selected for processing (25)

apps/web/content-collections.ts (3 hunks)
apps/web/content/docs/about/0.hello-world.mdx (1 hunks)
apps/web/content/docs/about/1.what-is-hyprnote.mdx (1 hunks)
apps/web/content/docs/about/2.why-local-first.mdx (1 hunks)
apps/web/content/docs/about/3.why-self-hosted.mdx (1 hunks)
apps/web/content/docs/cli.mdx (0 hunks)
apps/web/content/docs/developers/0.analytics.mdx (1 hunks)
apps/web/content/docs/developers/1.bug-report.mdx (1 hunks)
apps/web/content/docs/developers/2.cli.mdx (1 hunks)
apps/web/content/docs/developers/3.deeplinks.mdx (1 hunks)
apps/web/content/docs/developers/4.hooks.mdx (1 hunks)
apps/web/content/docs/developers/5.run.mdx (1 hunks)
apps/web/content/docs/developers/6.storage.mdx (1 hunks)
apps/web/content/docs/developers/7.versioning.mdx (1 hunks)
apps/web/content/docs/pro/0.activation.mdx (1 hunks)
apps/web/content/docs/pro/1.better-transcription.mdx (1 hunks)
apps/web/content/docs/pro/2.cloud.mdx (1 hunks)
apps/web/netlify/edge-functions/og.tsx (4 hunks)
apps/web/src/routes/_view/blog/$slug.tsx (2 hunks)
apps/web/src/routes/_view/docs/$.tsx (3 hunks)
apps/web/src/routes/_view/docs/-structure.tsx (1 hunks)
apps/web/src/routes/_view/docs/index.tsx (1 hunks)
apps/web/src/routes/_view/docs/route.tsx (2 hunks)
apps/web/src/routes/_view/legal/$slug.tsx (1 hunks)
apps/web/src/routes/_view/legal/index.tsx (1 hunks)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using the high_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

📝 Description — Summarize the main change in 50–60 words, explaining what was done.

📓 References — List relevant issues, discussions, documentation, or related PRs.

📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.

📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |

✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

argos-ci · 2025-11-25T11:19:53Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
web (Inspect)	⚠️ Changes detected (Review)	3 changed	Nov 25, 2025, 11:19 AM

ComputelessComputer added 6 commits November 25, 2025 20:13

feat(content): update content collection schemas and slug generation

33195f0

docs(content): add section metadata to documentation files

937bd75

feat(og): add author and date to blog og schema

ebb1bbe

feat(docs): improve docs routing and structure handling

6c2dffd

style(legal): enhance legal pages layout and background

f6ac1ae

feat(blog): generate dynamic og image for blog posts

fe807dd

ComputelessComputer merged commit 5383c6b into main Nov 25, 2025
8 of 11 checks passed

ComputelessComputer deleted the jj-branch-24 branch November 25, 2025 11:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor content schemas, docs structure, and blog OG generation #1884

Refactor content schemas, docs structure, and blog OG generation #1884

Uh oh!

ComputelessComputer commented Nov 25, 2025

Uh oh!

netlify bot commented Nov 25, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai bot commented Nov 25, 2025 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

argos-ci bot commented Nov 25, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Refactor content schemas, docs structure, and blog OG generation #1884

Refactor content schemas, docs structure, and blog OG generation #1884

Uh oh!

Conversation

ComputelessComputer commented Nov 25, 2025

Uh oh!

netlify bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hyprnote-storybook ready!

Uh oh!

netlify bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hyprnote ready!

Uh oh!

Uh oh!

coderabbitai bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

argos-ci bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Nov 25, 2025 •

edited

Loading

netlify bot commented Nov 25, 2025 •

edited

Loading

coderabbitai bot commented Nov 25, 2025 •

edited

Loading

argos-ci bot commented Nov 25, 2025 •

edited

Loading