docs: Add custom providers page & standardize readme titles

[stefashkaa]

Description

• What does this PR do?

  • Adds a /providers/custom guide covering typed provider implementation, registration, option precedence, source rules, server-side signing, and URL testing
  • Includes usage examples for Core, Angular, React, and Svelte with a framework selector
  • Links the guide from the homepage and provider navigation
  • Standardizes README titles and npm badges across packages

• Why is this change needed?

  • Gives developers a complete example for integrating an image service beyond the built-in providers

Type of Change

• Bug fix (non-breaking)
• New feature (non-breaking)
• Breaking change
• Documentation update
• Tests
• Other (describe below):

Testing

• pnpm build:all

Screenshots (if applicable)

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex code
• Documentation updated
• No new warnings generated
• Tests added/updated
• All tests passing

Manual Coverage (Optional)

Maintainers only (write/maintain/admin access): open the workflow, click Run workflow, and set pr_number to this PR number to post/update a coverage comment on this PR

Summary by CodeRabbit

• New Features

  • Added a custom image provider guide with setup instructions, framework-specific examples, configuration guidance, testing advice, and interactive framework selection.
  • Added navigation links to the custom provider guide from the provider pages.
  • Added a styled “Build a custom provider” card to the providers section.

• Documentation

  • Refreshed README headings and package badges with updated formatting, colors, and branding.
  • Added a line break after badge groups for improved readability.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
image-demo	Ready	Preview	Sep 7, 2026 9:16pm UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-07T21:21:04.354212Z	1f12b2a	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Team

Run ID: 7d4f948b-d43c-42af-93a2-be2f4b17b696

📥 Commits

Reviewing files that changed from the base of the PR and between 57e369e and 1f12b2a.

📒 Files selected for processing (9)

• README.md
• demo/src/lib/home/ProvidersSection.svelte
• demo/src/routes/providers/[provider]/+page.svelte
• demo/src/routes/providers/custom/+page.server.ts
• demo/src/routes/providers/custom/+page.svelte
• packages/angular/README.md
• packages/core/README.md
• packages/react/README.md
• packages/svelte/README.md

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The PR adds a custom provider demo and guide with Acme provider examples, framework integrations, validation tests, navigation, responsive styling, and documentation content. README badges and package headings also receive presentation updates.

Changes

Custom provider guide

Layer / File(s)	Summary
Acme provider implementation and validation demo/src/routes/providers/custom/+page.server.ts	Defines the Acme provider, image configuration, framework examples, and Vitest URL-generation checks.
Guide data loading and framework selection demo/src/routes/providers/custom/+page.server.ts, demo/src/routes/providers/custom/+page.svelte	Loads provider data and source snippets. The page switches installation commands and examples by framework.
Provider guide content and responsive layout demo/src/routes/providers/custom/+page.svelte	Adds provider contract guidance, validation rules, testing guidance, utilities, metadata, styling, and responsive layouts.
Provider guide navigation demo/src/lib/home/ProvidersSection.svelte, demo/src/routes/providers/[provider]/+page.svelte	Adds links to /providers/custom and styles the home-page guide card.

README presentation

Layer / File(s)	Summary
README badge and heading formatting README.md, packages/angular/README.md, packages/core/README.md, packages/react/README.md, packages/svelte/README.md	Updates badge colors and logos. Package headings use line breaks and revised wording.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to 1f12b

The new custom-provider guide remains mergeable; no confirmed runtime or documentation defect remains.

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant CustomPage as custom/+page.svelte
  participant CustomLoader as custom/+page.server.ts
  participant AcmeProvider
  Browser->>CustomPage: request custom provider guide
  CustomPage->>CustomLoader: load guide data
  CustomLoader->>AcmeProvider: assemble provider and configuration examples
  AcmeProvider-->>CustomLoader: return provider demo data
  CustomLoader-->>CustomPage: return origin and source snippets
  CustomPage-->>Browser: render selected framework content

Loading

Poem

A rabbit hops through provider code
Acme paths gleam along the road
Framework tabs bloom bright
Tests check URLs just right
Badges shine in blue mode

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the two main changes: adding the custom providers documentation page and standardizing README titles.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/improve-docs

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

🟢 Approval recommended

The changes are documentation/demo additions and formatting updates that appear consistent with existing demo patterns and do not introduce functional regressions in the reviewed code paths.

Pull request overview

This PR enhances the DeSource Image demo/docs experience by adding a dedicated “Custom provider” guide page to the provider documentation section, and by standardizing README headings/badges across the root and package READMEs.

Changes:

• Add a new /providers/custom documentation route with a framework selector and end-to-end guidance (implementation, registration, source rules, and testing).
• Link the new guide from the providers homepage section and the provider docs navigation.
• Standardize README titles and npm badge styling across packages.

File summaries

File	Description
README.md	Updates npm badge styling and layout in the root README.
packages/svelte/README.md	Standardizes title formatting and npm badge styling for the Svelte package.
packages/react/README.md	Standardizes title formatting and npm badge styling for the React package.
packages/core/README.md	Standardizes title formatting and npm badge styling for the core package.
packages/angular/README.md	Standardizes title formatting and npm badge styling for the Angular package.
demo/src/routes/providers/custom/+page.svelte	Adds the new custom provider guide page (UI, content sections, styling, framework selector).
demo/src/routes/providers/custom/+page.server.ts	Provides server-loaded code snippets/examples used by the custom provider guide page.
demo/src/routes/providers/[provider]/+page.svelte	Adds a navigation entry linking to the new custom provider guide.
demo/src/lib/home/ProvidersSection.svelte	Adds a prominent homepage link/card to the custom provider guide.

Review details

• Files reviewed: 9/9 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.