Skip to content

refactor(tools): svg-converter cleanup, shared tool skeletons, ytm cookie script - #85

Merged
remcostoeten merged 1 commit into
masterfrom
chore/svg-converter-cleanup
Aug 3, 2026
Merged

refactor(tools): svg-converter cleanup, shared tool skeletons, ytm cookie script#85
remcostoeten merged 1 commit into
masterfrom
chore/svg-converter-cleanup

Conversation

@remcostoeten

@remcostoeten remcostoeten commented Aug 3, 2026

Copy link
Copy Markdown
Owner

Summary

  • svg-converter: hardened SVG parsing/normalization utilities plus updated collection hook, list/detail/export components, and extra tests
  • Tool hub: extracted shared loading skeletons into tool-skeletons.tsx and simplified per-tool loading states (coordinate-marker, diff-checker, find-replace, hemelsbreed, tool-renderer)
  • Added scripts/update-ytm-cookie.sh to rotate YTM_COOKIE in .env and Vercel production (prompts interactively, no secrets committed)

Testing

  • vitest svg-converter suite: 15/15 pass
  • tsc --noEmit: clean

Summary by Sourcery

Improve SVG converter auto-fix behavior and UI feedback, standardize loading skeletons across miscellaneous tools, and add a script to manage the YTM_COOKIE in local and Vercel environments.

New Features:

  • Introduce SVG auto-fix notices for derived viewBox, normalized component names, and fixed-dimension handling.
  • Add dedicated loading skeleton components per tool and wire them through the shared tool renderer.
  • Add update-ytm-cookie.sh script to update the YTM_COOKIE in .env and Vercel production with optional redeploy.

Enhancements:

  • Refine SVG parsing and normalization to serialize auto-added viewBox attributes and distinguish warnings from informational notices.
  • Update SVG converter collection, detail, list, and export views to surface auto-fix status, counts, and notice messaging.
  • Modernize marketing package page layout by removing the in-page navigation bar in favor of a simpler header.
  • Unify dynamic tool loading to always use SSR with tool-specific skeleton fallbacks.

Deployment:

  • Integrate YTM_COOKIE rotation into the Vercel environment workflow via the new helper script.

Tests:

  • Extend SVG converter tests to cover auto-fix behavior for viewBox derivation and duplicate component names.

Summary by CodeRabbit

  • New Features

    • Added tailored loading placeholders across miscellaneous tools for smoother loading experiences.
    • SVG conversion now automatically derives missing viewBox values when possible and preserves applied fixes.
    • Added clearer SVG notices for auto-fixes, duplicate names, normalization, and validation details.
  • Bug Fixes

    • Improved SVG warning and notice displays, including accurate counts and singular/plural wording.
    • Corrected visual status indicators for valid, warning, and auto-fixed SVG items.
  • Style

    • Removed the “On this page” navigation from package pages.

@vercel

vercel Bot commented Aug 3, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
remcostoeten Building Building Preview Aug 3, 2026 3:29am

@remcostoeten
remcostoeten merged commit da8e168 into master Aug 3, 2026
1 of 2 checks passed
@sourcery-ai

sourcery-ai Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Refactors the SVG converter to distinguish warnings from auto-fix notices, auto-derive viewBox/size behavior, and surface these in UI; centralizes tool loading skeletons into a shared module and wires them into the tool renderer and individual tools; and adds an interactive script to safely update the YTM cookie in both .env and Vercel production.

Flow diagram for the YTM cookie update script

flowchart TD
  Developer[[Developer]] --> Script[update-ytm-cookie.sh]

  Script -->|prompt cookie header| Developer
  Developer -->|paste YTM_COOKIE| Script

  Script --> PythonHelper[Inline python3 helper]
  PythonHelper --> EnvFile[.env file]
  EnvFile -->|YTM_COOKIE updated| Script

  Script --> VercelEnv[vercel env commands]
  VercelEnv -->|remove existing YTM_COOKIE| VercelEnv
  VercelEnv -->|add new YTM_COOKIE| VercelProduction[Vercel production env]

  Script -->|prompt redeploy| Developer
  Developer -->|confirm redeploy| Redeploy[vercel redeploy / vercel --prod]
  Redeploy --> VercelProduction
Loading

File-Level Changes

Change Details Files
Hardened SVG parsing/normalization with support for auto-fixes and separate notices surfaced throughout the SVG converter UI and tests.
  • Extend SvgMetadata/SvgItem types to include a notices array alongside warnings/errors.
  • Update parseSvg to auto-derive viewBox from width/height when possible, serialize the updated markup, and record auto-fix notices instead of warnings.
  • Adjust normalization to propagate notices and treat duplicate component names as notices rather than warnings.
  • Update hooks and components (collection hook, detail view, list, export menu) to consume and display notices, tweak state labeling, and adjust warning counts.
  • Add and update tests to cover new auto-fix behaviors (viewBox derivation, fixed dimensions handling, duplicate name resolution).
src/features/miscellaneous/svg-converter/utilities/parse-svg.ts
src/features/miscellaneous/svg-converter/utilities/normalize-svg.ts
src/features/miscellaneous/svg-converter/hooks/use-svg-collection.ts
src/features/miscellaneous/svg-converter/components/svg-detail.tsx
src/features/miscellaneous/svg-converter/components/export-menu.tsx
src/features/miscellaneous/svg-converter/components/svg-list.tsx
src/features/miscellaneous/svg-converter/types/svg-converter.ts
__tests__/features/miscellaneous/svg-converter/utilities/svg-converter.test.ts
Introduce shared tool loading skeleton components and standardize loading states across miscellaneous tools and the tool renderer.
  • Create tool-skeletons module with tailored skeleton UIs for each tool and a TOOL_SKELETONS lookup keyed by tool slug.
  • Refactor tool-renderer lazy loading to always use SSR true and per-tool skeleton fallbacks via TOOL_SKELETONS.
  • Replace inline loading placeholders in individual tool modules (find-replace, diff-checker, coordinate-marker, hemelsbreed) with imports of the new shared skeletons.
src/features/miscellaneous/components/tool-skeletons.tsx
src/features/miscellaneous/components/tool-renderer.tsx
src/features/miscellaneous/find-replace/index.tsx
src/features/miscellaneous/diff-checker/index.tsx
src/features/miscellaneous/coordinate-marker/index.tsx
src/features/miscellaneous/hemelsbreed/index.tsx
Minor marketing page cleanup by removing the in-page navigation bar.
  • Delete the header navigation section from the package marketing page to simplify the layout.
src/app/(marketing)/packages/[slug]/page.tsx
Add a script to rotate the YTM_COOKIE environment variable locally and in Vercel production, with interactive prompts and safe updates.
  • Implement a Bash script that reads a pasted cookie header, updates/creates YTM_COOKIE in .env via an embedded Python helper, and then replaces the production YTM_COOKIE in Vercel.
  • Add optional interactive prompt to trigger a production redeploy using vercel CLI after updating the cookie.
scripts/update-ytm-cookie.sh

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@remcostoeten
remcostoeten deleted the chore/svg-converter-cleanup branch August 3, 2026 03:29
@coderabbitai

coderabbitai Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 76b46ddc-23a6-444a-92ac-302e94f793f4

📥 Commits

Reviewing files that changed from the base of the PR and between e3f2fd9 and 7426304.

📒 Files selected for processing (16)
  • __tests__/features/miscellaneous/svg-converter/utilities/svg-converter.test.ts
  • scripts/update-ytm-cookie.sh
  • src/app/(marketing)/packages/[slug]/page.tsx
  • src/features/miscellaneous/components/tool-renderer.tsx
  • src/features/miscellaneous/components/tool-skeletons.tsx
  • src/features/miscellaneous/coordinate-marker/index.tsx
  • src/features/miscellaneous/diff-checker/index.tsx
  • src/features/miscellaneous/find-replace/index.tsx
  • src/features/miscellaneous/hemelsbreed/index.tsx
  • src/features/miscellaneous/svg-converter/components/export-menu.tsx
  • src/features/miscellaneous/svg-converter/components/svg-detail.tsx
  • src/features/miscellaneous/svg-converter/components/svg-list.tsx
  • src/features/miscellaneous/svg-converter/hooks/use-svg-collection.ts
  • src/features/miscellaneous/svg-converter/types/svg-converter.ts
  • src/features/miscellaneous/svg-converter/utilities/normalize-svg.ts
  • src/features/miscellaneous/svg-converter/utilities/parse-svg.ts

📝 Walkthrough

Walkthrough

The SVG converter now distinguishes notices from warnings and reports auto-fixes. Miscellaneous tools use specific SSR loading skeletons. A YTM cookie synchronization script was added. Package-page in-page navigation was removed.

Changes

SVG converter notices

Layer / File(s) Summary
SVG notice contract and parsing
src/features/miscellaneous/svg-converter/types/svg-converter.ts, src/features/miscellaneous/svg-converter/utilities/*
SVG metadata and items now include notices. Parsing can derive and serialize a viewBox. Fixed dimensions and duplicate names produce notices.
Notice propagation and rendering
src/features/miscellaneous/svg-converter/hooks/use-svg-collection.ts, src/features/miscellaneous/svg-converter/components/*
Rename operations preserve notices. Detail, list, and export views display notices and updated warning states.
SVG auto-fix validation
__tests__/features/miscellaneous/svg-converter/utilities/svg-converter.test.ts
Tests cover fixed dimensions, viewBox derivation, missing dimensions, and duplicate-name notices.

Tool-specific loading skeletons

Layer / File(s) Summary
Skeleton layouts and registry
src/features/miscellaneous/components/tool-skeletons.tsx
Adds loading layouts for miscellaneous tools, shared loading helpers, and the TOOL_SKELETONS registry.
Dynamic tool loading
src/features/miscellaneous/components/tool-renderer.tsx
Dynamic tools now use slug-specific fallbacks and SSR.
Tool loading integration
src/features/miscellaneous/{coordinate-marker,diff-checker,find-replace,hemelsbreed}/index.tsx
Four tools now use shared skeleton components for hydration loading states.

YTM cookie synchronization

Layer / File(s) Summary
Cookie synchronization script
scripts/update-ytm-cookie.sh
Adds a fail-fast script that updates .env, synchronizes the Vercel production variable, and optionally redeploys production.

Package page navigation

Layer / File(s) Summary
In-page navigation removal
src/app/(marketing)/packages/[slug]/page.tsx
Removes the package page’s in-page navigation and three section links.

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

Possibly related PRs

✨ 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 chore/svg-converter-cleanup

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

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

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hey - I've found 1 issue, and left some high level feedback:

  • Switching all tools in tool-renderer to ssr: true changes the rendering behavior for previously client-only tools like coordinate-marker and hemelsbreed; double-check that these components (and their dependencies like Leaflet/geolocation) are safe to render on the server and won’t hit window/browser-only APIs during SSR.
  • The new scripts/update-ytm-cookie.sh assumes an existing .env file and will fail if it’s missing; consider creating the file if it doesn’t exist (or handling that error) before calling env.read_text() in the embedded Python.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Switching all tools in `tool-renderer` to `ssr: true` changes the rendering behavior for previously client-only tools like `coordinate-marker` and `hemelsbreed`; double-check that these components (and their dependencies like Leaflet/geolocation) are safe to render on the server and won’t hit `window`/browser-only APIs during SSR.
- The new `scripts/update-ytm-cookie.sh` assumes an existing `.env` file and will fail if it’s missing; consider creating the file if it doesn’t exist (or handling that error) before calling `env.read_text()` in the embedded Python.

## Individual Comments

### Comment 1
<location path="scripts/update-ytm-cookie.sh" line_range="14-23" />
<code_context>
+	exit 1
+fi
+
+python3 - "$COOKIE" <<'PY'
+import sys, re, pathlib
+cookie = sys.argv[1].strip()
+env = pathlib.Path('.env')
+text = env.read_text()
+pattern = re.compile(r'^YTM_COOKIE=.*$', re.M)
+if pattern.search(text):
+    text = pattern.sub(lambda _: f'YTM_COOKIE={cookie}', text)
+else:
+    text = text.rstrip('\n') + f'\nYTM_COOKIE={cookie}\n'
+env.write_text(text)
+print('Updated .env')
+PY
</code_context>
<issue_to_address>
**suggestion:** The script assumes `.env` exists and that `vercel env` flags behave as expected; consider hardening this flow.

Two fragilities to address: (1) `pathlib.Path('.env').read_text()` will raise if `.env` is missing, aborting the script without a clear explanation. Add an existence check and either create the file or emit a clear error. (2) The `vercel env add` call’s use of `--value` and `--yes` may not be supported across all Vercel CLI versions. Confirm the expected CLI behavior and, if needed, use a documented non-interactive pattern or fall back to interactive mode.

Suggested implementation:

```
python3 - "$COOKIE" <<'PY'
import sys, re, pathlib

cookie = sys.argv[1].strip()
env = pathlib.Path('.env')

try:
    text = env.read_text()
except FileNotFoundError:
    text = ''
except OSError as exc:
    print(f"Failed to read .env: {exc}", file=sys.stderr)
    sys.exit(1)

pattern = re.compile(r'^YTM_COOKIE=.*$', re.M)
if pattern.search(text):
    text = pattern.sub(lambda _: f'YTM_COOKIE={cookie}', text)
else:
    text = text.rstrip('\n') + f'\nYTM_COOKIE={cookie}\n'

try:
    env.write_text(text)
except OSError as exc:
    print(f"Failed to write .env: {exc}", file=sys.stderr)
    sys.exit(1)

print('Updated .env')
PY

```

```
vercel env rm YTM_COOKIE production --yes 2>/dev/null || true
if ! printf '%s\n' "$COOKIE" | vercel env add YTM_COOKIE production --yes; then
	echo 'Failed to push YTM_COOKIE to Vercel. You may need to run `vercel env add YTM_COOKIE production` manually.' >&2
else
	echo 'Pushed YTM_COOKIE to Vercel production.'
fi

```
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +14 to +23
python3 - "$COOKIE" <<'PY'
import sys, re, pathlib
cookie = sys.argv[1].strip()
env = pathlib.Path('.env')
text = env.read_text()
pattern = re.compile(r'^YTM_COOKIE=.*$', re.M)
if pattern.search(text):
text = pattern.sub(lambda _: f'YTM_COOKIE={cookie}', text)
else:
text = text.rstrip('\n') + f'\nYTM_COOKIE={cookie}\n'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

suggestion: The script assumes .env exists and that vercel env flags behave as expected; consider hardening this flow.

Two fragilities to address: (1) pathlib.Path('.env').read_text() will raise if .env is missing, aborting the script without a clear explanation. Add an existence check and either create the file or emit a clear error. (2) The vercel env add call’s use of --value and --yes may not be supported across all Vercel CLI versions. Confirm the expected CLI behavior and, if needed, use a documented non-interactive pattern or fall back to interactive mode.

Suggested implementation:

python3 - "$COOKIE" <<'PY'
import sys, re, pathlib

cookie = sys.argv[1].strip()
env = pathlib.Path('.env')

try:
    text = env.read_text()
except FileNotFoundError:
    text = ''
except OSError as exc:
    print(f"Failed to read .env: {exc}", file=sys.stderr)
    sys.exit(1)

pattern = re.compile(r'^YTM_COOKIE=.*$', re.M)
if pattern.search(text):
    text = pattern.sub(lambda _: f'YTM_COOKIE={cookie}', text)
else:
    text = text.rstrip('\n') + f'\nYTM_COOKIE={cookie}\n'

try:
    env.write_text(text)
except OSError as exc:
    print(f"Failed to write .env: {exc}", file=sys.stderr)
    sys.exit(1)

print('Updated .env')
PY

vercel env rm YTM_COOKIE production --yes 2>/dev/null || true
if ! printf '%s\n' "$COOKIE" | vercel env add YTM_COOKIE production --yes; then
	echo 'Failed to push YTM_COOKIE to Vercel. You may need to run `vercel env add YTM_COOKIE production` manually.' >&2
else
	echo 'Pushed YTM_COOKIE to Vercel production.'
fi

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