Skip to content

Commit 144a87d

Browse files
nick-csunick-csu
authored
Merge pull request #75 from cortex-docs/pre-release
docs: promote sharper window-only demo to main
2 parents dec9c63 + b5e165c commit 144a87d

6 files changed

Lines changed: 158 additions & 172 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
<p align="center">
4040
<a href="https://demo.cortexdocs.dev">
4141
<picture>
42-
<source media="(prefers-reduced-motion: reduce)" srcset="assets/cortex-overview.png">
43-
<img src="assets/cortex-overview.gif" width="1200" alt="Run cortex generate with a configured OpenAPI file, then explore Getting Started, API Reference, SDKs, and MCP in the live demo. Click to try it.">
42+
<source media="(prefers-reduced-motion: reduce)" srcset="assets/cortex-overview-poster.png">
43+
<img src="assets/cortex-overview.png" width="1200" alt="Run cortex generate with a configured OpenAPI file, then explore Getting Started, API Reference, SDKs, and MCP in the live demo. Click to try it.">
4444
</picture>
4545
</a>
4646
</p>

‎assets/cortex-overview-poster.png‎

442 KB
Loading

‎assets/cortex-overview.gif‎

-610 KB
Binary file not shown.

‎assets/cortex-overview.png‎

2.54 MB
Loading

‎scripts/overview/capture.mjs‎

Lines changed: 74 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -7,94 +7,87 @@ export async function captureOverview(
77
page,
88
{ outputDir = '.playwright-mcp/overview', baseUrl = 'https://demo.cortexdocs.dev' } = {},
99
) {
10-
await page.setViewportSize({ width: 1200, height: 700 });
11-
await page.emulateMedia({ colorScheme: 'dark', reducedMotion: 'reduce' });
12-
await page.goto(`${baseUrl}/?appearance=dark`);
13-
await page.evaluate(() => {
14-
localStorage.setItem('cortex.cookie-consent.v1', 'denied');
15-
window.dispatchEvent(new CustomEvent('cortex:consent-changed', { detail: 'denied' }));
16-
});
17-
const scenes = [];
18-
const nav = (name) => page.locator('header').getByRole('link', { name, exact: true });
10+
const context = await page
11+
.context()
12+
.browser()
13+
.newContext({
14+
viewport: { width: 1200, height: 700 },
15+
deviceScaleFactor: 2,
16+
colorScheme: 'dark',
17+
reducedMotion: 'reduce',
18+
});
19+
try {
20+
return await capturePages(await context.newPage(), outputDir, baseUrl);
21+
} finally {
22+
await context.close();
23+
}
1924

20-
async function capture(name, label, step, duration, next) {
21-
await page.evaluate(async () => {
22-
await document.fonts.ready;
23-
await Promise.all([...document.images].map((image) => image.decode().catch(() => {})));
25+
async function capturePages(page, outputDir, baseUrl) {
26+
await page.goto(`${baseUrl}/?appearance=dark`);
27+
await page.evaluate(() => {
28+
localStorage.setItem('cortex.cookie-consent.v1', 'denied');
29+
window.dispatchEvent(new CustomEvent('cortex:consent-changed', { detail: 'denied' }));
2430
});
25-
// Let navigation, syntax highlighting, and scroll positioning finish.
26-
await page.waitForTimeout(1400);
27-
if (name === 'endpoint') {
28-
// Keep the endpoint method visible below the sticky breadcrumb.
29-
await page.locator('main main').evaluate((element) => {
30-
element.scrollBy({ top: -48, behavior: 'instant' });
31+
const scenes = [];
32+
const nav = (name) => page.locator('header').getByRole('link', { name, exact: true });
33+
34+
async function capture(name, duration, next) {
35+
await page.evaluate(async () => {
36+
await document.fonts.ready;
37+
await Promise.all([...document.images].map((image) => image.decode().catch(() => {})));
38+
});
39+
// Let navigation, syntax highlighting, and scroll positioning finish.
40+
await page.waitForTimeout(1400);
41+
if (name === 'endpoint') {
42+
// Keep the endpoint method visible below the sticky breadcrumb.
43+
await page.locator('main main').evaluate((element) => {
44+
element.scrollBy({ top: -48, behavior: 'instant' });
45+
});
46+
}
47+
await page.mouse.move(1190, 690);
48+
const box = next ? await next.boundingBox() : null;
49+
if (next && !box) throw new Error(`Missing navigation target for ${name}`);
50+
await page.screenshot({
51+
path: `${outputDir}/${name}.png`,
52+
scale: 'device',
53+
animations: 'disabled',
54+
});
55+
scenes.push({
56+
name,
57+
duration,
58+
url: page.url(),
59+
target: box ? [box.x + box.width / 2, box.y + box.height / 2] : null,
3160
});
61+
if (next) await next.click();
3262
}
33-
await page.mouse.move(1190, 690);
34-
const box = next ? await next.boundingBox() : null;
35-
if (next && !box) throw new Error(`Missing navigation target for ${name}`);
36-
await page.screenshot({
37-
path: `${outputDir}/${name}.png`,
38-
scale: 'css',
39-
animations: 'disabled',
40-
});
41-
scenes.push({
42-
name,
43-
label,
44-
step,
45-
duration,
46-
url: page.url(),
47-
target: box ? [box.x + box.width / 2, box.y + box.height / 2] : null,
48-
});
49-
if (next) await next.click();
50-
}
5163

52-
await page.getByRole('heading', { name: 'Petstore Docs', exact: true }).waitFor();
53-
await capture(
54-
'home',
55-
'Explore the live demo',
56-
1,
57-
1500,
58-
page.getByRole('link', { name: 'Getting Started', exact: true }),
59-
);
60-
await page.getByRole('heading', { name: 'Quickstart', exact: true }).waitFor();
61-
await capture('quickstart', 'Help developers get started', 1, 2400, nav('API Reference'));
64+
await page.getByRole('heading', { name: 'Petstore Docs', exact: true }).waitFor();
65+
await capture('home', 1500, page.getByRole('link', { name: 'Getting Started', exact: true }));
66+
await page.getByRole('heading', { name: 'Quickstart', exact: true }).waitFor();
67+
await capture('quickstart', 2400, nav('API Reference'));
6268

63-
await page.getByRole('heading', { name: 'REST API V1', exact: true }).waitFor();
64-
await capture(
65-
'reference',
66-
'Browse your API reference',
67-
2,
68-
1200,
69-
page.getByRole('button', { name: 'GET List all pets', exact: true }),
70-
);
71-
await page.waitForURL('**/api-reference/rest-api-v1/listPets');
72-
await page.getByRole('button', { name: 'Try now', exact: true }).waitFor();
73-
await capture('endpoint', 'Inspect schemas and typed code samples', 2, 2800, nav('SDKs'));
69+
await page.getByRole('heading', { name: 'REST API V1', exact: true }).waitFor();
70+
await capture(
71+
'reference',
72+
1200,
73+
page.getByRole('button', { name: 'GET List all pets', exact: true }),
74+
);
75+
await page.waitForURL('**/api-reference/rest-api-v1/listPets');
76+
await page.getByRole('button', { name: 'Try now', exact: true }).waitFor();
77+
await capture('endpoint', 2800, nav('SDKs'));
7478

75-
await page.getByRole('heading', { name: 'TypeScript SDKs', exact: true }).waitFor();
76-
await capture(
77-
'sdks',
78-
'Choose from 11 SDK languages',
79-
3,
80-
1700,
81-
page.getByText('@petstore/typescript-client-sdk', { exact: true }),
82-
);
83-
await page.getByRole('heading', { name: 'Installation', exact: true }).waitFor();
84-
await capture('sdk-guide', 'Install a typed SDK and start building', 3, 2600, nav('MCP'));
79+
await page.getByRole('heading', { name: 'TypeScript SDKs', exact: true }).waitFor();
80+
await capture('sdks', 1700, page.getByText('@petstore/typescript-client-sdk', { exact: true }));
81+
await page.getByRole('heading', { name: 'Installation', exact: true }).waitFor();
82+
await capture('sdk-guide', 2600, nav('MCP'));
8583

86-
await page.getByRole('heading', { name: 'Client Setup Guide', exact: true }).waitFor();
87-
await capture(
88-
'mcp',
89-
'Connect your AI coding tools',
90-
4,
91-
2400,
92-
page.getByRole('button', { name: 'Tools', exact: true }),
93-
);
94-
await page.waitForURL('**/mcp/docs_quickstart');
95-
await capture('mcp-tools', 'Give agents API tools, SDK guides, and docs', 4, 2800, nav('Home'));
96-
await page.getByRole('heading', { name: 'Petstore Docs', exact: true }).waitFor();
97-
await capture('end', 'Try it yourself at demo.cortexdocs.dev', 4, 2000);
84+
await page.getByRole('heading', { name: 'Client Setup Guide', exact: true }).waitFor();
85+
await capture('mcp', 2400, page.getByRole('button', { name: 'Tools', exact: true }));
86+
await page.waitForURL('**/mcp/docs_quickstart');
87+
await capture('mcp-tools', 2800, nav('Home'));
88+
await page.getByRole('heading', { name: 'Petstore Docs', exact: true }).waitFor();
89+
await capture('end', 2000);
9890

99-
return { outputDir, scenes };
91+
return { outputDir, scenes };
92+
}
10093
}

0 commit comments

Comments
 (0)