mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2024-12-22 19:36:02 +08:00
5e50ffbc30
* wip * fix: update packages * wip * wip * feat: editor content generator * fix: add dimensions * feat: add renderer * feat: add progress modal renderer * Add API design roadmap * Update API roadmap rendering * fix: button click * fix: link item * feat: render pdf for editor roadmaps * Add API roadmap * Fix broken link of full-stack roadmap * Update content dir * Fix typos in api roadmap * Add assets for pdf and svg * Add content for api roadmap * Add todo * fix: close on editor roadmap select * Update link not working * Add api roadmap to get-started and roadmaps page --------- Co-authored-by: Arik Chakma <arikchangma@gmail.com>
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import playwright from 'playwright';
|
|
import fs from 'node:fs/promises';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import matter from 'gray-matter';
|
|
import type { RoadmapFrontmatter } from '../src/lib/roadmap';
|
|
|
|
// ERROR: `__dirname` is not defined in ES module scope
|
|
// https://iamwebwiz.medium.com/how-to-fix-dirname-is-not-defined-in-es-module-scope-34d94a86694d
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = path.dirname(__filename);
|
|
|
|
// Usage: tsx ./scripts/editor-roadmap-dirs.ts <roadmapId>
|
|
|
|
// Directory containing the roadmaps
|
|
const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');
|
|
const roadmapId = process.argv[2];
|
|
|
|
const allowedRoadmapIds = await fs.readdir(ROADMAP_CONTENT_DIR);
|
|
if (!roadmapId) {
|
|
console.error('Roadmap Id is required');
|
|
process.exit(1);
|
|
}
|
|
|
|
if (!allowedRoadmapIds.includes(roadmapId)) {
|
|
console.error(`Invalid roadmap key ${roadmapId}`);
|
|
console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);
|
|
process.exit(1);
|
|
}
|
|
|
|
const roadmapFrontmatterDir = path.join(
|
|
ROADMAP_CONTENT_DIR,
|
|
roadmapId,
|
|
`${roadmapId}.md`,
|
|
);
|
|
const roadmapFrontmatterRaw = await fs.readFile(roadmapFrontmatterDir, 'utf-8');
|
|
const { data } = matter(roadmapFrontmatterRaw);
|
|
|
|
const roadmapFrontmatter = data as RoadmapFrontmatter;
|
|
if (!roadmapFrontmatter) {
|
|
console.error('Invalid roadmap frontmatter');
|
|
process.exit(1);
|
|
}
|
|
|
|
if (roadmapFrontmatter.renderer !== 'editor') {
|
|
console.error('Only Editor Rendered Roadmaps are allowed');
|
|
process.exit(1);
|
|
}
|
|
|
|
console.log(`Launching chromium`);
|
|
const browser = await playwright.chromium.launch();
|
|
const context = await browser.newContext();
|
|
const page = await context.newPage();
|
|
|
|
const pageUrl = `http://localhost:3000/${roadmapId}/svg`;
|
|
console.log(`Opening page ${pageUrl}`);
|
|
await page.goto(pageUrl);
|
|
await page.waitForSelector('#resource-svg-wrap');
|
|
console.log(`Generating PDF ${pageUrl}`);
|
|
await page.pdf({
|
|
path: `./public/pdfs/roadmaps/${roadmapId}.pdf`,
|
|
margin: { top: 0, right: 0, bottom: 0, left: 0 },
|
|
height: roadmapFrontmatter?.dimensions?.height || 2000,
|
|
width: roadmapFrontmatter?.dimensions?.width || 968,
|
|
});
|
|
|
|
// @todo generate png from the pdf
|
|
console.log(`Generating png ${pageUrl}`);
|
|
await page.locator('#resource-svg-wrap>svg').screenshot({
|
|
path: `./public/roadmaps/${roadmapId}.png`,
|
|
type: 'png',
|
|
scale: 'device',
|
|
});
|
|
|
|
await browser.close();
|