Skip to content

[codex] improve plugin tutorial page actions#593

Merged
riderx merged 3 commits into
mainfrom
codex/plugin-tutorial-actions-stats
Apr 29, 2026
Merged

[codex] improve plugin tutorial page actions#593
riderx merged 3 commits into
mainfrom
codex/plugin-tutorial-actions-stats

Conversation

@riderx
Copy link
Copy Markdown
Member

@riderx riderx commented Apr 29, 2026

What changed

  • rebuilt the shared plugin tutorial page shell instead of relying on the old toggle layout
  • added reusable docs, GitHub, and npm actions in the page structure for every tutorial page
  • surfaced weekly npm downloads and GitHub stars in the hero using shared plugin metadata and docs slug resolution

Why

Tutorial pages needed consistent direct access to docs and repository links, plus plugin stats, without duplicating that UI in each markdown tutorial file.

Impact

  • every plugin tutorial page now gets the same header actions and stats automatically
  • plugins with internal docs link to the site docs, with fallback to npm or GitHub when no internal docs page exists
  • tutorial content reads as a structured article instead of a hidden section toggle

Validation

  • bun run check

Summary by CodeRabbit

  • New Features

    • Added quick links for docs, repository, and npm for easy access
    • Added GitHub stars and download statistics with formatted counts (k/M or n/a)
    • Reorganized plugin detail layout with a Guide card presenting normalized tutorial content
    • Per-plugin/per-locale docs resolution and locale-aware tutorial selection
  • Bug Fixes / Improvements

    • Removed version and star-based rating from published metadata payload

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 29, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7d0fa28a-bf87-48e2-832b-79245572dc22

📥 Commits

Reviewing files that changed from the base of the PR and between 5340155 and f52b208.

📒 Files selected for processing (1)
  • apps/web/src/pages/plugins/[slug].astro
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/web/src/pages/plugins/[slug].astro

📝 Walkthrough

Walkthrough

The plugin detail page now selects plugins from a stars-enriched list, resolves per-plugin/per-locale docs slugs, normalizes tutorial HTML, formats numeric metrics (k/M or n/a), removes initial zeroing of metrics, and restructures the UI into quick links, stat cards, and a Guide card; LD+JSON payload drops softwareVersion and aggregateRating.

Changes

Cohort / File(s) Summary
Plugin page (data, docs, UI)
apps/web/src/pages/plugins/[slug].astro
Switches plugin lookup to getPluginsWithStars(actions), computes locale/docsLocale, resolves docs destinations via getPluginDocsSlugs + resolvePluginDocsSlug, normalizes tutorial HTML (rewrite <h1><h2>), removes initial zeroing of githubStars/npmDownloads, adds formatCount() for k/M/n/a rendering, removes softwareVersion and aggregateRating from createSoftwareApplicationLdJson, and reorganizes UI into header grid (quick links + stat cards) with a Guide card injecting tutorial HTML.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐇 I hopped through slugs and stars tonight,
I nudged an H1 down to H2 light,
I counted stars in k and M delight,
Quick links and cards—what a sight! ✨

🚥 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 '[codex] improve plugin tutorial page actions' directly addresses the main change: improving the plugin tutorial page structure and adding action links to it.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/plugin-tutorial-actions-stats

Review rate limit: 0/5 reviews remaining, refill in 48 minutes and 52 seconds.

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

@riderx riderx marked this pull request as ready for review April 29, 2026 13:30
@riderx
Copy link
Copy Markdown
Member Author

riderx commented Apr 29, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 29, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
apps/web/src/pages/plugins/[slug].astro (1)

71-73: Avoid duplicate quick-link targets when docs falls back to npm or GitHub.

When docsSlug is missing, docsHref becomes npmHref ?? href, but the aside still renders separate npm/repo buttons. That can leave two CTAs pointing at the same destination with different labels.

♻️ One way to keep each CTA distinct
 const npmHref = name ? `https://www.npmjs.com/package/${name}` : undefined
 const docsHref = docsSlug ? getRelativeLocaleUrl(docsLocale, `docs/plugins/${docsSlug}/`) : (npmHref ?? href)
 const docsIsExternal = !docsSlug
+const showRepoLink = href !== docsHref
+const showNpmLink = !!npmHref && npmHref !== docsHref
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/[0.03] px-4 py-3 text-sm font-semibold text-white transition hover:border-white/25 hover:bg-white/[0.06] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
-              >
-                <span>{m.view_repo({}, { locale })}</span>
-                <AstroIcon name="heroicons:arrow-up-right-solid" class="size-4 text-gray-300" aria-hidden="true" />
-              </a>
+              {
+                showRepoLink && (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/[0.03] px-4 py-3 text-sm font-semibold text-white transition hover:border-white/25 hover:bg-white/[0.06] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
+                  >
+                    <span>{m.view_repo({}, { locale })}</span>
+                    <AstroIcon name="heroicons:arrow-up-right-solid" class="size-4 text-gray-300" aria-hidden="true" />
+                  </a>
+                )
+              }
-              {
-                npmHref && (
+              {
+                showNpmLink && (
                   <a
                     href={npmHref}

Also applies to: 174-204

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/pages/plugins/`[slug].astro around lines 71 - 73, The quick-link
logic can produce duplicate targets when docsSlug is missing because docsHref is
set to npmHref ?? href while npm/repo buttons are still rendered; update the
rendering logic to avoid duplicate CTAs by checking equality between docsHref
and npmHref/href: only render the docs CTA when docsSlug is present (or when
docsHref differs from npmHref and href), and/or skip rendering the npm or repo
button when their href equals docsHref. Modify the logic around npmHref,
docsHref, docsIsExternal and the component that renders the aside buttons so
links with identical destinations are deduplicated and only one labeled CTA is
shown.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/pages/plugins/`[slug].astro:
- Around line 82-96: The LD-JSON currently hardcodes softwareVersion and
repurposes plugin.githubStars as aggregateRating; remove the fabricated fields
by not setting softwareVersion and aggregateRating unless authoritative data
exists (e.g., only include softwareVersion when a verified plugin.version is
present and only build aggregateRating when a vetted rating object exists
instead of using plugin.githubStars). Update the createSoftwareApplicationLdJson
call (referencing content['ldJSON'] and createSoftwareApplicationLdJson) to
conditionally include softwareVersion and aggregateRating based on real-source
checks (e.g., plugin.version !== undefined and plugin.rating &&
plugin.rating.source === 'trusted'), otherwise omit those properties entirely.
- Around line 212-223: The injected tutorial HTML (set:html={tutorial}) can
contain leading <h1> elements which create a second page-level heading; sanitize
the tutorial before rendering by removing or converting any leading h1 to h2.
Implement a small sanitizer (e.g., removeLeadingH1 or normalizeTutorialHeadings)
and apply it to the tutorial variable used in the JSX where set:html={tutorial}
(or adjust the markdown renderer options at the source of tutorial) so the
first-level heading is either stripped or downgraded to h2 while preserving the
rest of the content.

---

Nitpick comments:
In `@apps/web/src/pages/plugins/`[slug].astro:
- Around line 71-73: The quick-link logic can produce duplicate targets when
docsSlug is missing because docsHref is set to npmHref ?? href while npm/repo
buttons are still rendered; update the rendering logic to avoid duplicate CTAs
by checking equality between docsHref and npmHref/href: only render the docs CTA
when docsSlug is present (or when docsHref differs from npmHref and href),
and/or skip rendering the npm or repo button when their href equals docsHref.
Modify the logic around npmHref, docsHref, docsIsExternal and the component that
renders the aside buttons so links with identical destinations are deduplicated
and only one labeled CTA is shown.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4ed8e105-0489-45a3-bd17-10c677257698

📥 Commits

Reviewing files that changed from the base of the PR and between 92d0d80 and 5340155.

📒 Files selected for processing (1)
  • apps/web/src/pages/plugins/[slug].astro

Comment thread apps/web/src/pages/plugins/[slug].astro
Comment thread apps/web/src/pages/plugins/[slug].astro
Copy link
Copy Markdown
Member Author

@riderx riderx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m addressing the CodeRabbit findings now and will push a follow-up fix shortly.

@chatgpt-codex-connector
Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@sonarqubecloud
Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant