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

Author: remcostoeten

__tests__/features/miscellaneous/svg-converter/utilities/svg-converter.test.ts

@@ -81,6 +81,48 @@ describe('SVG sanitization', () => {
 	})
 })
 
+describe('SVG auto-fixes', () => {
+	it('keeps fixed-dimension SVGs valid and reports the fix as a notice', () => {
+		const item = normalizeSources(
+			extractSvgs(
+				'<svg width="24" height="24" viewBox="0 0 24 24"><path d="M0 0"/></svg>'
+			).sources
+		)[0]
+		expect(item.state).toBe('valid')
+		expect(item.warnings).toEqual([])
+		expect(item.notices.join(' ')).toContain('size prop')
+	})
+
+	it('derives a viewBox from width and height when missing', () => {
+		const item = normalizeSources(
+			extractSvgs('<svg width="16" height="32"><path d="M0 0"/></svg>')
+				.sources
+		)[0]
+		expect(item.state).toBe('valid')
+		expect(item.viewBox).toBe('0 0 16 32')
+		expect(generateComponent(item)).toContain('viewBox="0 0 16 32"')
+		expect(item.notices.join(' ')).toContain('added viewBox')
+	})
+
+	it('still warns when no viewBox can be derived', () => {
+		const item = normalizeSources(
+			extractSvgs('<svg><path d="M0 0"/></svg>').sources
+		)[0]
+		expect(item.state).toBe('warning')
+		expect(item.warnings.join(' ')).toContain('no viewBox')
+	})
+
+	it('treats auto-resolved duplicate names as valid with a notice', () => {
+		const items = normalizeSources(
+			extractSvgs(
+				'<svg viewBox="0 0 2 2" data-icon="a"/><svg viewBox="0 0 2 2" data-icon="a"/>'
+			).sources
+		)
+		expect(items[1].state).toBe('valid')
+		expect(items[1].notices.join(' ')).toContain('duplicate component name')
+	})
+})
+
 describe('React conversion', () => {
 	it('normalizes names and filenames', () => {
 		expect(componentName('arrow-left', '')).toBe('ArrowLeftIcon')

scripts/update-ytm-cookie.sh

@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+printf 'Paste the full YTM cookie header and press Enter:\n> '
+IFS= read -r COOKIE
+
+if [ -z "$COOKIE" ]; then
+	echo 'No cookie provided, aborting.' >&2
+	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
+
+vercel env rm YTM_COOKIE production --yes 2>/dev/null || true
+vercel env add YTM_COOKIE production --value "$COOKIE" --yes
+echo 'Pushed YTM_COOKIE to Vercel production.'
+
+read -r -p 'Redeploy production now? [y/N] ' REPLY
+if [ "$REPLY" = 'y' ] || [ "$REPLY" = 'Y' ]; then
+	vercel redeploy --yes 2>/dev/null || vercel --prod
+fi

src/app/(marketing)/packages/[slug]/page.tsx

@@ -190,33 +190,6 @@ async function PackagePageContent({ params }: Props) {
 					)}
 				</div>
 			</header>
-
-			<nav
-				aria-label="On this page"
-				className="border-b border-border/60 px-4 py-3 md:px-5"
-			>
-				<div className="flex gap-x-4 gap-y-2 overflow-x-auto whitespace-nowrap font-mono text-[11px] text-muted-foreground">
-					<a
-						href="#why"
-						className="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-					>
-						What it replaces
-					</a>
-					<a
-						href="#quick-start"
-						className="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-					>
-						Quick start
-					</a>
-					<a
-						href="#api"
-						className="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-					>
-						API examples
-					</a>
-				</div>
-			</nav>
-
 			<section
 				id="why"
 				aria-labelledby="why-heading"

src/features/miscellaneous/components/tool-renderer.tsx

@@ -3,39 +3,27 @@
 import nextDynamic from 'next/dynamic'
 import type { ComponentType } from 'react'
 import type { TToolSlug } from '../constants/tools'
-
-function ToolSkeleton() {
-	return (
-		<div
-			role="status"
-			aria-label="Loading tool"
-			className="flex min-h-[70vh] flex-col gap-3"
-		>
-			<div className="h-8 w-64 shrink-0 animate-pulse bg-muted/60" />
-			<div className="h-28 shrink-0 animate-pulse bg-muted/60" />
-			<div className="grow animate-pulse bg-muted/60" />
-		</div>
-	)
-}
+import { TOOL_SKELETONS } from './tool-skeletons'
 
 type TLoader = () => Promise<{ default: ComponentType }>
 
-function lazyTool(loader: TLoader, ssr = false) {
-	return nextDynamic(loader, { ssr, loading: ToolSkeleton })
+function lazyTool(slug: TToolSlug, loader: TLoader) {
+	const Fallback = TOOL_SKELETONS[slug]
+	return nextDynamic(loader, { ssr: true, loading: () => <Fallback /> })
 }
 
 const TOOL_COMPONENTS: Record<TToolSlug, ComponentType> = {
-	'find-replace': lazyTool(() => import('../find-replace')),
-	'diff-checker': lazyTool(() => import('../diff-checker'), true),
-	'link-extractor': lazyTool(() => import('../link-extractor'), true),
-	'json-tool': lazyTool(() => import('../json-tool'), true),
-	'svg-converter': lazyTool(() => import('../svg-converter'), true),
-	hemelsbreed: lazyTool(() => import('../hemelsbreed')),
-	'coordinate-marker': lazyTool(() => import('../coordinate-marker')),
-	'my-location': lazyTool(() => import('../my-location')),
-	'sendable-video': lazyTool(() => import('../sendable-video')),
-	'gif-to-video': lazyTool(() => import('../gif-to-video')),
-	'video-to-gif': lazyTool(() => import('../video-to-gif'))
+	'find-replace': lazyTool('find-replace', () => import('../find-replace')),
+	'diff-checker': lazyTool('diff-checker', () => import('../diff-checker')),
+	'link-extractor': lazyTool('link-extractor', () => import('../link-extractor')),
+	'json-tool': lazyTool('json-tool', () => import('../json-tool')),
+	'svg-converter': lazyTool('svg-converter', () => import('../svg-converter')),
+	hemelsbreed: lazyTool('hemelsbreed', () => import('../hemelsbreed')),
+	'coordinate-marker': lazyTool('coordinate-marker', () => import('../coordinate-marker')),
+	'my-location': lazyTool('my-location', () => import('../my-location')),
+	'sendable-video': lazyTool('sendable-video', () => import('../sendable-video')),
+	'gif-to-video': lazyTool('gif-to-video', () => import('../gif-to-video')),
+	'video-to-gif': lazyTool('video-to-gif', () => import('../video-to-gif'))
 }
 
 type Props = {