playwright-director 0.2.0

package/templates/site/public/widget.js

@@ -0,0 +1,273 @@
+/**
+ * playwright-director — embeddable in-app tutorial widget.
+ *
+ * Hosted at the root of the generated gallery site. A consuming app loads it
+ * with a single script tag and marks any element with data-tutorial="<slug>":
+ *
+ *   <script src="https://tutorials.example.com/widget.js" defer></script>
+ *   <button data-tutorial="create-account">How does this work?</button>
+ *
+ * Clicking the element opens an overlay with the tutorial video and its
+ * step-by-step guide, fetched from <site>/embed/<slug>.json (generated by
+ * `playwright-director build-site` next to this file).
+ *
+ * Zero dependencies, styles isolated in a shadow root. Programmatic API:
+ * window.PlaywrightDirector.open(slug) / window.PlaywrightDirector.close().
+ *
+ * Theming: the site's primaryColor is the default accent; override it from
+ * the host page with `.playwright-director-widget { --playwright-director-accent: #16a34a }`.
+ */
+(function () {
+	'use strict';
+
+	if (window.PlaywrightDirector) return; // loaded twice — keep the first instance
+
+	// The site base is wherever this script is served from.
+	var script = document.currentScript || document.querySelector('script[src*="widget.js"]');
+	var BASE = script && script.src ? script.src.replace(/widget\.js(\?.*)?$/, '') : '/';
+
+	var RTL_LANGS = ['ar', 'he', 'fa', 'ur'];
+	var cache = {};
+	var host = null;
+	var root = null;
+	var accentStyle = null;
+	var lastFocus = null;
+	var seq = 0; // bumped on every open/close so a stale fetch can't reopen a dismissed dialog
+
+	function fetchTutorial(slug) {
+		if (cache[slug]) return cache[slug];
+		cache[slug] = fetch(BASE + 'embed/' + encodeURIComponent(slug) + '.json').then(function (res) {
+			if (!res.ok) throw new Error('HTTP ' + res.status);
+			return res.json();
+		});
+		cache[slug].catch(function () { delete cache[slug]; });
+		return cache[slug];
+	}
+
+	var CSS = [
+		':host { all: initial; --playwright-director-accent: #6366f1; }',
+		'* { box-sizing: border-box; margin: 0; padding: 0; }',
+		'.backdrop { position: fixed; inset: 0; z-index: 2147483000; background: rgba(15, 23, 42, 0.55);',
+		'  display: flex; align-items: center; justify-content: center; padding: 1.5rem;',
+		'  font-family: inherit; font-size: 16px; line-height: 1.5; color: #0f172a; }',
+		'.panel { background: #fff; border-radius: 12px; width: min(720px, 100%); max-height: 92vh;',
+		'  display: flex; flex-direction: column; overflow: hidden;',
+		'  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); }',
+		'.head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.25rem;',
+		'  border-bottom: 1px solid #e2e8f0; }',
+		'.head h2 { font-size: 1.05rem; font-weight: 700; flex: 1; min-width: 0; }',
+		'.duration { flex-shrink: 0; color: #64748b; font-size: 0.8rem; }',
+		'.close { flex-shrink: 0; border: 0; background: none; cursor: pointer; font-size: 1.4rem;',
+		'  line-height: 1; color: #64748b; padding: 0.25rem 0.4rem; border-radius: 6px; }',
+		'.close:hover { background: #f1f5f9; color: #0f172a; }',
+		'.body { overflow-y: auto; padding: 1.25rem; }',
+		'video { width: 100%; display: block; border-radius: 8px; background: #000; margin-bottom: 1rem; }',
+		'.desc { color: #475569; font-size: 0.92rem; margin-bottom: 1rem; }',
+		'.steps { display: flex; flex-direction: column; gap: 0.6rem; }',
+		'.step { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }',
+		'.step-head { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%;',
+		'  padding: 0.7rem 0.9rem; border: 0; background: none; text-align: inherit;',
+		'  font: inherit; color: inherit; }',
+		'.step.has-shot .step-head { cursor: pointer; }',
+		'.step.has-shot .step-head:hover { background: color-mix(in srgb, var(--playwright-director-accent) 6%, transparent); }',
+		'.num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: flex; align-items: center;',
+		'  justify-content: center; border-radius: 50%; background: var(--playwright-director-accent);',
+		'  color: #fff; font-weight: 700; font-size: 0.8rem; }',
+		'.copy { flex: 1; min-width: 0; }',
+		'.step-title { display: block; font-weight: 600; font-size: 0.95rem; }',
+		'.step-text { display: block; color: #64748b; font-size: 0.88rem; margin-top: 0.15rem; }',
+		'.chevron { flex-shrink: 0; align-self: center; color: #94a3b8; transition: transform 0.2s; }',
+		'.step.open .chevron { transform: rotate(180deg); }',
+		'.shot { display: none; padding: 0 0.9rem 0.9rem; }',
+		'.step.open .shot { display: block; }',
+		'.shot img { width: 100%; display: block; border-radius: 6px; border: 1px solid #e2e8f0; }',
+		'.context { color: #64748b; font-style: italic; font-size: 0.88rem;',
+		'  border-inline-start: 3px solid var(--playwright-director-accent); padding-inline-start: 0.75rem; }',
+		'.foot { padding: 0.8rem 1.25rem; border-top: 1px solid #e2e8f0; text-align: end; }',
+		'.foot a { color: var(--playwright-director-accent); font-size: 0.88rem; font-weight: 600;',
+		'  text-decoration: none; }',
+		'.foot a:hover { text-decoration: underline; }',
+		'.state { padding: 2.5rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; }'
+	].join('\n');
+
+	function el(tag, className, text) {
+		var node = document.createElement(tag);
+		if (className) node.className = className;
+		if (text) node.textContent = text;
+		return node;
+	}
+
+	function ensureHost() {
+		if (host) return;
+		host = el('div', 'playwright-director-widget');
+		root = host.attachShadow({ mode: 'open' });
+		var style = document.createElement('style');
+		style.textContent = CSS;
+		root.appendChild(style);
+		// The payload accent goes into its own :host rule (after the default,
+		// so it wins inside the shadow tree) — page rules targeting
+		// .playwright-director-widget still override any :host rule, which is what
+		// makes --playwright-director-accent themable from the host app.
+		accentStyle = document.createElement('style');
+		root.appendChild(accentStyle);
+		document.body.appendChild(host);
+	}
+
+	function close() {
+		seq++;
+		if (!host) return;
+		var backdrop = root.querySelector('.backdrop');
+		if (backdrop) backdrop.remove();
+		document.body.style.overflow = '';
+		document.removeEventListener('keydown', onKeydown);
+		if (lastFocus && lastFocus.focus) lastFocus.focus();
+		lastFocus = null;
+	}
+
+	function onKeydown(e) {
+		if (e.key === 'Escape') close();
+	}
+
+	function renderShell(title) {
+		ensureHost();
+		close(); // one dialog at a time
+
+		var backdrop = el('div', 'backdrop');
+		backdrop.addEventListener('click', function (e) {
+			if (e.target === backdrop) close();
+		});
+
+		var panel = el('div', 'panel');
+		panel.setAttribute('role', 'dialog');
+		panel.setAttribute('aria-modal', 'true');
+		panel.setAttribute('aria-label', title || 'Tutorial');
+
+		var head = el('div', 'head');
+		var h = el('h2', null, title || '');
+		h.setAttribute('dir', 'auto');
+		var closeBtn = el('button', 'close', '×');
+		closeBtn.setAttribute('aria-label', 'Close');
+		closeBtn.addEventListener('click', close);
+		head.appendChild(h);
+		head.appendChild(closeBtn);
+		panel.appendChild(head);
+		backdrop.appendChild(panel);
+		root.appendChild(backdrop);
+
+		lastFocus = document.activeElement;
+		document.body.style.overflow = 'hidden';
+		document.addEventListener('keydown', onKeydown);
+		closeBtn.focus();
+
+		return { panel: panel, head: head, closeBtn: closeBtn };
+	}
+
+	function renderTutorial(data) {
+		var shell = renderShell(data.title);
+		if (RTL_LANGS.indexOf(data.lang) !== -1) shell.panel.setAttribute('dir', 'rtl');
+		if (data.accent && /^[#a-zA-Z0-9(),.%\s-]+$/.test(data.accent)) {
+			accentStyle.textContent = ':host { --playwright-director-accent: ' + data.accent + '; }';
+		}
+
+		if (data.duration) {
+			shell.head.insertBefore(el('span', 'duration', '🕓 ' + data.duration), shell.closeBtn);
+		}
+
+		var body = el('div', 'body');
+
+		var video = document.createElement('video');
+		video.controls = true;
+		video.preload = 'metadata';
+		video.src = BASE + data.video;
+		if (data.poster) video.poster = BASE + data.poster;
+		body.appendChild(video);
+
+		if (data.description) {
+			var desc = el('p', 'desc', data.description);
+			desc.setAttribute('dir', 'auto');
+			body.appendChild(desc);
+		}
+
+		if (data.steps && data.steps.length) {
+			var steps = el('div', 'steps');
+			data.steps.forEach(function (s) {
+				if (s.context) {
+					var ctx = el('p', 'context', s.text || '');
+					ctx.setAttribute('dir', 'auto');
+					steps.appendChild(ctx);
+					return;
+				}
+				var step = el('div', 'step' + (s.image ? ' has-shot' : ''));
+				var headBtn = el('button', 'step-head');
+				headBtn.disabled = !s.image;
+				headBtn.setAttribute('aria-expanded', 'false');
+				if (s.num !== undefined) headBtn.appendChild(el('span', 'num', String(s.num)));
+				var copy = el('span', 'copy');
+				copy.setAttribute('dir', 'auto');
+				if (s.title) copy.appendChild(el('span', 'step-title', s.title));
+				if (s.text) copy.appendChild(el('span', 'step-text', s.text));
+				headBtn.appendChild(copy);
+				if (s.image) {
+					headBtn.appendChild(el('span', 'chevron', '▾'));
+					headBtn.addEventListener('click', function () {
+						var open = step.classList.toggle('open');
+						headBtn.setAttribute('aria-expanded', String(open));
+					});
+				}
+				step.appendChild(headBtn);
+				if (s.image) {
+					var shot = el('div', 'shot');
+					var img = document.createElement('img');
+					img.loading = 'lazy';
+					img.src = BASE + s.image;
+					img.alt = s.title || (s.num !== undefined ? 'Step ' + s.num : '');
+					shot.appendChild(img);
+					step.appendChild(shot);
+				}
+				steps.appendChild(step);
+			});
+			body.appendChild(steps);
+		}
+
+		shell.panel.appendChild(body);
+
+		var foot = el('div', 'foot');
+		var link = document.createElement('a');
+		link.href = BASE + data.page;
+		link.target = '_blank';
+		link.rel = 'noopener';
+		link.textContent = 'Open full tutorial ↗';
+		foot.appendChild(link);
+		shell.panel.appendChild(foot);
+	}
+
+	function open(slug) {
+		var shell = renderShell('');
+		var my = ++seq;
+		shell.panel.appendChild(el('div', 'state', 'Loading…'));
+		fetchTutorial(slug).then(
+			function (data) {
+				if (my !== seq) return;
+				renderTutorial(data);
+			},
+			function () {
+				if (my !== seq) return;
+				var failed = renderShell('Tutorial unavailable');
+				failed.panel.appendChild(
+					el('div', 'state', 'Could not load tutorial "' + slug + '". Check the slug against ' + BASE + 'embed/index.json')
+				);
+			}
+		);
+	}
+
+	// Event delegation: works for elements added after load, any framework.
+	document.addEventListener('click', function (e) {
+		if (!e.target || !e.target.closest) return;
+		var trigger = e.target.closest('[data-tutorial]');
+		if (!trigger) return;
+		e.preventDefault();
+		open(trigger.getAttribute('data-tutorial'));
+	});
+
+	window.PlaywrightDirector = { open: open, close: close, base: BASE };
+})();

package/templates/site/src/components/TutorialsHome.astro

@@ -0,0 +1,141 @@
+---
+import { readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+import Base from '../layouts/Base.astro';
+import VideoCard from './VideoCard.astro';
+import VideoModal from './VideoModal.astro';
+import tutorials from '../data/tutorials.json';
+
+const { categories, videos, ui } = tutorials as any;
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+
+// Scan for step screenshots at build time
+const videosDir = join(process.cwd(), 'public/videos');
+type StepEntry = { n: number; url: string };
+const stepsByVideo: Record<string, string[]> = {};
+if (existsSync(videosDir)) {
+	const staging: Record<string, StepEntry[]> = {};
+	for (const file of readdirSync(videosDir)) {
+		const m = file.match(/^(.+)-step-(\d+)\.(png|jpe?g|webp|avif)$/);
+		if (!m) continue;
+		const [, id, n] = m;
+		(staging[id] ??= []).push({ n: parseInt(n), url: `${base}/videos/${file}` });
+	}
+	for (const [id, entries] of Object.entries(staging)) {
+		stepsByVideo[id] = entries.sort((a, b) => a.n - b.n).map(s => s.url);
+	}
+}
+
+const getSteps = (file: string): string[] => {
+	const base = file.replace(/\.[^.]+$/, '');
+	return stepsByVideo[base] ?? [];
+};
+
+const videosByCategory = videos.reduce((acc: Record<string, any[]>, video: any) => {
+	if (!acc[video.category]) acc[video.category] = [];
+	acc[video.category].push(video);
+	return acc;
+}, {} as Record<string, any[]>);
+
+// Variant filter (desktop / mobile / …) — only shown when at least one video
+// was recorded in a variant.
+const variants: string[] = [...new Set(videos.map((v: any) => v.variant ?? ''))] as string[];
+const hasVariants = variants.some((v) => v !== '');
+const variantLabel = (v: string) => (v === '' ? 'Desktop' : v.charAt(0).toUpperCase() + v.slice(1));
+---
+
+<Base title={ui.heroTitle}>
+	<section class="hero">
+		<h1>{ui.heroTitle}</h1>
+		<p>{ui.heroSubtitle}</p>
+	</section>
+
+	{hasVariants && (
+		<nav class="variant-filter" aria-label="Filter by variant">
+			<button class="variant-btn active" data-variant="all">All</button>
+			{variants.sort().map((v) => (
+				<button class="variant-btn" data-variant={v}>{variantLabel(v)}</button>
+			))}
+		</nav>
+	)}
+
+	{Object.entries(categories).map(([catId, cat]: [string, any]) => {
+		const catVideos = videosByCategory[catId];
+		if (!catVideos?.length) return null;
+		return (
+			<section class="category">
+				<div class="category-header">
+					<span class="category-icon">{cat.icon}</span>
+					<h2>{cat.label}</h2>
+				</div>
+				<div class="video-grid">
+					{catVideos.map((video: any) => (
+						<VideoCard
+							id={video.id}
+							title={video.title}
+							duration={video.duration}
+							videoUrl={`${base}/videos/${video.file}`}
+							steps={getSteps(video.file)}
+							href={`${base}/${video.id}`}
+							variant={video.variant}
+						/>
+					))}
+				</div>
+			</section>
+		);
+	})}
+
+	<VideoModal />
+</Base>
+
+<style>
+	.variant-filter {
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+		margin: 0 0 1.5rem;
+	}
+
+	.variant-btn {
+		padding: 0.4rem 1rem;
+		border: 1px solid var(--color-border, #ddd);
+		border-radius: 999px;
+		background: transparent;
+		color: var(--color-text-muted, #666);
+		font-size: 0.9rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.variant-btn:hover {
+		border-color: var(--color-primary, #0066fd);
+		color: var(--color-primary, #0066fd);
+	}
+
+	.variant-btn.active {
+		background: var(--color-primary, #0066fd);
+		border-color: var(--color-primary, #0066fd);
+		color: white;
+	}
+</style>
+
+<script>
+	const bar = document.querySelector('.variant-filter');
+	bar?.addEventListener('click', (e) => {
+		const btn = (e.target as HTMLElement).closest<HTMLElement>('.variant-btn');
+		if (!btn) return;
+		const filter = btn.dataset.variant!;
+		bar.querySelectorAll('.variant-btn').forEach((b) => b.classList.toggle('active', b === btn));
+		document.querySelectorAll<HTMLElement>('.video-card').forEach((card) => {
+			const match = filter === 'all' || (card.dataset.variant ?? '') === filter;
+			card.style.display = match ? '' : 'none';
+		});
+		// Hide categories left with no visible card
+		document.querySelectorAll<HTMLElement>('section.category').forEach((section) => {
+			const anyVisible = [...section.querySelectorAll<HTMLElement>('.video-card')].some(
+				(card) => card.style.display !== 'none'
+			);
+			section.style.display = anyVisible ? '' : 'none';
+		});
+	});
+</script>

package/templates/site/src/components/VideoCard.astro

@@ -0,0 +1,192 @@
+---
+interface Props {
+	id: string;
+	title: string;
+	duration: string;
+	videoUrl: string;
+	steps?: string[];
+	href?: string;
+	/** Recording variant (e.g. 'mobile'); absent = regular/desktop */
+	variant?: string;
+}
+
+const { id, title, duration, videoUrl, steps = [], href, variant } = Astro.props;
+---
+
+<div class="video-card" data-video-url={videoUrl} data-video-id={id} data-variant={variant ?? ''}>
+	<div class="video-thumbnail">
+		{steps.length > 0 ? (
+			<div class="step-carousel">
+				{steps.map((src, i) => (
+					<img
+						src={src}
+						alt={`Step ${i + 1}`}
+						loading={i === 0 ? 'eager' : 'lazy'}
+						class:list={['step-img', { active: i === 0 }]}
+					/>
+				))}
+				{steps.length > 1 && (
+					<>
+						<button class="step-prev" aria-label="Previous step">‹</button>
+						<button class="step-next" aria-label="Next step">›</button>
+						<div class="step-dots">
+							{steps.map((_, i) => (
+								<span class:list={['step-dot', { active: i === 0 }]}></span>
+							))}
+						</div>
+					</>
+				)}
+			</div>
+		) : (
+			<div class="placeholder-thumb"></div>
+		)}
+		<div class="play-button">▶</div>
+	</div>
+	<div class="video-info">
+		<div class="video-title">{title}</div>
+		<div class="video-meta">
+			<span class="video-duration">&#x1F550; {duration}</span>
+			{variant && <span class="video-variant">{variant === 'mobile' ? '📱 ' : ''}{variant}</span>}
+			{href && (
+				<a href={href} class="card-page-link" onclick="event.stopPropagation()">→</a>
+			)}
+		</div>
+	</div>
+</div>
+
+<style>
+	.video-variant {
+		font-size: 0.75rem;
+		color: var(--color-text-muted, #666);
+		border: 1px solid var(--color-border, #ddd);
+		border-radius: 999px;
+		padding: 0.1rem 0.5rem;
+		text-transform: capitalize;
+	}
+
+	.card-page-link {
+		margin-left: auto;
+		font-size: 0.9rem;
+		color: var(--color-text-muted);
+		text-decoration: none;
+		transition: color 0.2s;
+		flex-shrink: 0;
+	}
+
+	.card-page-link:hover {
+		color: var(--color-primary);
+	}
+
+	.placeholder-thumb {
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	}
+
+	.step-carousel {
+		position: absolute;
+		inset: 0;
+	}
+
+	.step-img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.3s;
+	}
+
+	.step-img.active {
+		opacity: 1;
+	}
+
+	.step-prev,
+	.step-next {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: rgba(0, 0, 0, 0.5);
+		color: white;
+		border: none;
+		width: 28px;
+		height: 28px;
+		border-radius: 50%;
+		font-size: 1.2rem;
+		line-height: 1;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: opacity 0.2s;
+		z-index: 2;
+	}
+
+	.step-prev { left: 6px; }
+	.step-next { right: 6px; }
+
+	.video-card:hover .step-prev,
+	.video-card:hover .step-next {
+		opacity: 1;
+	}
+
+	.step-dots {
+		position: absolute;
+		bottom: 6px;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		gap: 4px;
+		z-index: 2;
+	}
+
+	.step-dot {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.4);
+		cursor: pointer;
+		transition: background 0.2s;
+	}
+
+	.step-dot.active {
+		background: white;
+	}
+</style>
+
+<script>
+	document.querySelectorAll<HTMLElement>('.step-carousel').forEach(carousel => {
+		const imgs = carousel.querySelectorAll<HTMLElement>('.step-img');
+		const dots = carousel.querySelectorAll<HTMLElement>('.step-dot');
+		const prev = carousel.querySelector('.step-prev');
+		const next = carousel.querySelector('.step-next');
+		const card = carousel.closest('.video-card') as HTMLElement;
+		let current = 0;
+		let autoMoved = false;
+		let timer: ReturnType<typeof setInterval> | null = null;
+
+		const show = (n: number) => {
+			imgs[current].classList.remove('active');
+			dots[current]?.classList.remove('active');
+			current = ((n % imgs.length) + imgs.length) % imgs.length;
+			imgs[current].classList.add('active');
+			dots[current]?.classList.add('active');
+		};
+
+		prev?.addEventListener('click', e => { e.stopPropagation(); show(current - 1); });
+		next?.addEventListener('click', e => { e.stopPropagation(); show(current + 1); });
+		dots.forEach((dot, i) => dot.addEventListener('click', e => { e.stopPropagation(); show(i); }));
+
+		card?.addEventListener('mouseenter', () => {
+			if (imgs.length < 2) return;
+			autoMoved = false;
+			timer = setInterval(() => { autoMoved = true; show(current + 1); }, 800);
+		});
+		card?.addEventListener('mouseleave', () => {
+			if (timer) { clearInterval(timer); timer = null; }
+			if (autoMoved) show(0);
+		});
+	});
+</script>