Skip to content

docs: add installer walkthrough video#247

Merged
toddgeist merged 3 commits intomainfrom
docs/youtube-installer-video
May 6, 2026
Merged

docs: add installer walkthrough video#247
toddgeist merged 3 commits intomainfrom
docs/youtube-installer-video

Conversation

@toddgeist
Copy link
Copy Markdown
Contributor

@toddgeist toddgeist commented May 6, 2026

Summary

  • Add a reusable YouTube embed component for docs MDX pages.
  • Replace the installer TODO callout with the ProofKit installer walkthrough video.
  • Clarify the install flow by enabling the ProofKit plug-in before running Connect to MCP.

Test plan

  • pnpm run ci

Summary by CodeRabbit

  • New Features

    • Added support for embedding YouTube walkthroughs in documentation pages.
  • Documentation

    • Redesigned the Install & Connect guide into a steps-based layout with a YouTube walkthrough.
    • Added explicit steps to enable the ProofKit plugin and to run the Connect to MCP script.
    • Reorganized messaging and step order for clearer setup guidance.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 6, 2026

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

Project Deployment Actions Updated (UTC)
proofkit-docs Ready Ready Preview May 6, 2026 9:19pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 6, 2026

⚠️ No Changeset found

Latest commit: 8287db5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 6, 2026

Open in StackBlitz

@proofkit/better-auth

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/better-auth@247

@proofkit/cli

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/cli@247

create-proofkit

pnpm add https://pkg.pr.new/proofsh/proofkit/create-proofkit@247

@proofkit/fmdapi

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/fmdapi@247

@proofkit/fmodata

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/fmodata@247

@proofkit/typegen

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/typegen@247

@proofkit/webviewer

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/webviewer@247

commit: 8287db5

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 6, 2026

📝 Walkthrough

Walkthrough

Replaces a Callout intro with a Steps layout and embeds a new YouTube walkthrough in the AI install-and-connect docs; adds a YouTubeVideo React component (props: title, videoId or url) and exposes it via the MDX components mapping.

Changes

Documentation with YouTube embedding

Layer / File(s) Summary
Component Interface / Helper
apps/docs/src/components/YouTubeVideo.tsx
Adds YouTubeVideoProps (title, optional videoId or url) and getYouTubeVideoId helper handling youtu.be, /embed/, and ?v= URL forms; throws if neither provided.
Component Implementation / UI
apps/docs/src/components/YouTubeVideo.tsx
Exports YouTubeVideo component that derives the video ID, builds a youtube-nocookie.com embed URL, and renders a responsive iframe inside styled containers.
MDX Wiring
apps/docs/src/mdx-components.tsx
Imports YouTubeVideo and adds it to the MDX components mapping returned by getMDXComponents, making the component usable in MDX pages.
Content Update
apps/docs/content/docs/ai/install-and-connect.mdx
Replaces initial Callout intro with a Steps layout, embeds the YouTube walkthrough, and reorganizes steps—adds “Enable the ProofKit plug-in” and “Run the Connect to MCP” steps and updates descriptions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • proofsh/proofkit#246: Both PRs modify apps/docs/content/docs/ai/install-and-connect.mdx to restructure plug-in and MCP connector steps.
  • proofsh/proofkit#239: Overlapping edits to the same documentation page (apps/docs/content/docs/ai/install-and-connect.mdx).
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'docs: add installer walkthrough video' directly and clearly describes the main change: adding a video walkthrough to the documentation.
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/youtube-installer-video

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

Copy link
Copy Markdown

@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: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/docs/src/components/YouTubeVideo.tsx`:
- Around line 22-27: The code path that extracts the YouTube ID currently
returns an empty string when neither an /embed/ path nor a v query param exists;
change this to throw a descriptive Error instead so the component fails fast. In
the function inside YouTubeVideo.tsx that uses parsedUrl (the block checking
parsedUrl.pathname.startsWith("/embed/") and parsedUrl.searchParams.get("v")),
replace the empty-string return with throwing an Error that includes the
original input URL (or parsedUrl.href) and a clear message like "Unable to
extract YouTube video ID from URL: <url>". Ensure any callers (the YouTubeVideo
component render) are allowed to surface or catch this error appropriately so a
broken embed isn’t rendered silently.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 481522d9-f491-41e7-b01a-7d37e9345f03

📥 Commits

Reviewing files that changed from the base of the PR and between e5e5978 and 7c3a686.

📒 Files selected for processing (3)
  • apps/docs/content/docs/ai/install-and-connect.mdx
  • apps/docs/src/components/YouTubeVideo.tsx
  • apps/docs/src/mdx-components.tsx

Comment thread apps/docs/src/components/YouTubeVideo.tsx
Copy link
Copy Markdown

@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: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/docs/src/components/YouTubeVideo.tsx`:
- Around line 16-43: Update getYouTubeVideoId and its usage in YouTubeVideo to
strictly validate hostnames and sanitize the extracted ID: only accept known
YouTube hosts (e.g., youtube.com, www.youtube.com, m.youtube.com, youtu.be,
youtube-nocookie.com) before using the "v" query param, and validate the final
id matches YouTube ID pattern (11 chars of [A-Za-z0-9_-]); if it fails, throw an
error; then ensure YouTubeVideo uses that validated/sanitized id (videoId) when
building src so raw values are never interpolated without validation.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e83b81a4-08c9-4718-bcee-43b05d92d533

📥 Commits

Reviewing files that changed from the base of the PR and between 7c3a686 and 2a9af3c.

📒 Files selected for processing (1)
  • apps/docs/src/components/YouTubeVideo.tsx

Comment thread apps/docs/src/components/YouTubeVideo.tsx
Copy link
Copy Markdown

@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.

♻️ Duplicate comments (1)
apps/docs/src/components/YouTubeVideo.tsx (1)

34-34: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Wrap URL parsing to throw a component-specific error.

new URL(url) currently bubbles a generic TypeError. Catching it here gives a clearer failure for invalid MDX inputs and keeps error messaging consistent with the rest of this validator.

Proposed fix
-  const parsedUrl = new URL(url);
+  let parsedUrl: URL;
+  try {
+    parsedUrl = new URL(url);
+  } catch {
+    throw new Error(`Invalid YouTube URL: ${url}`);
+  }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/src/components/YouTubeVideo.tsx` at line 34, Replace the direct URL
constructor in the YouTubeVideo component (the line creating parsedUrl via new
URL(url)) with a try/catch that intercepts the thrown TypeError and rethrows a
component-specific error; e.g., catch the parse error and throw a new Error with
a clear message like "YouTubeVideo: invalid URL — <original url>" (include the
original error as cause if available) so invalid MDX inputs produce consistent,
readable validation errors from YouTubeVideo.
🧹 Nitpick comments (1)
apps/docs/src/components/YouTubeVideo.tsx (1)

17-25: ⚡ Quick win

Use arrow functions for these short functions to match repo convention.

This file currently uses function declarations for short helpers/component; converting to arrow functions would align with the project rule.

Proposed refactor
-function validateYouTubeVideoId(videoId: string, source: string): string {
+const validateYouTubeVideoId = (videoId: string, source: string): string => {
   if (YOUTUBE_VIDEO_ID_PATTERN.test(videoId)) {
     return videoId;
   }

   throw new Error(`Invalid YouTube video ID from ${source}: ${videoId}`);
-}
+};

-function getYouTubeVideoId({ url, videoId }: Pick<YouTubeVideoProps, "url" | "videoId">): string {
+const getYouTubeVideoId = ({
+  url,
+  videoId,
+}: Pick<YouTubeVideoProps, "url" | "videoId">): string => {
   if (videoId) {
     return validateYouTubeVideoId(videoId, "videoId");
   }
@@
-}
+};

-export function YouTubeVideo(props: YouTubeVideoProps) {
+export const YouTubeVideo = (props: YouTubeVideoProps) => {
@@
-}
+};

As per coding guidelines, **/*.{js,jsx,ts,tsx}: "Use arrow functions for callbacks and short functions".

Also applies to: 63-63

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/src/components/YouTubeVideo.tsx` around lines 17 - 25, Change the
two short helper function declarations to arrow-function expressions to match
repo convention: replace the function declaration
validateYouTubeVideoId(videoId: string, source: string): string and the
declaration getYouTubeVideoId({ url, videoId }: Pick<YouTubeVideoProps, "url" |
"videoId">): string with const validateYouTubeVideoId = (videoId: string,
source: string): string => { ... } and const getYouTubeVideoId = ({ url, videoId
}: Pick<YouTubeVideoProps, "url" | "videoId">): string => { ... } respectively,
keeping the original logic, signatures, and exported/used names unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In `@apps/docs/src/components/YouTubeVideo.tsx`:
- Line 34: Replace the direct URL constructor in the YouTubeVideo component (the
line creating parsedUrl via new URL(url)) with a try/catch that intercepts the
thrown TypeError and rethrows a component-specific error; e.g., catch the parse
error and throw a new Error with a clear message like "YouTubeVideo: invalid URL
— <original url>" (include the original error as cause if available) so invalid
MDX inputs produce consistent, readable validation errors from YouTubeVideo.

---

Nitpick comments:
In `@apps/docs/src/components/YouTubeVideo.tsx`:
- Around line 17-25: Change the two short helper function declarations to
arrow-function expressions to match repo convention: replace the function
declaration validateYouTubeVideoId(videoId: string, source: string): string and
the declaration getYouTubeVideoId({ url, videoId }: Pick<YouTubeVideoProps,
"url" | "videoId">): string with const validateYouTubeVideoId = (videoId:
string, source: string): string => { ... } and const getYouTubeVideoId = ({ url,
videoId }: Pick<YouTubeVideoProps, "url" | "videoId">): string => { ... }
respectively, keeping the original logic, signatures, and exported/used names
unchanged.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 85cb7b35-6b4e-41e3-ba8d-23aa8206f535

📥 Commits

Reviewing files that changed from the base of the PR and between 2a9af3c and 8287db5.

📒 Files selected for processing (1)
  • apps/docs/src/components/YouTubeVideo.tsx

@toddgeist toddgeist merged commit 3f63bf3 into main May 6, 2026
13 checks passed
@toddgeist toddgeist deleted the docs/youtube-installer-video branch May 6, 2026 21:21
@coderabbitai coderabbitai Bot mentioned this pull request May 6, 2026
1 task
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