diff --git a/CONVENTIONS.md b/CONVENTIONS.md index cb75d71..bdfc3f6 100644 --- a/CONVENTIONS.md +++ b/CONVENTIONS.md @@ -64,7 +64,8 @@ as many agents as possible. `tests/repo/` checks the ones marked *(tested)*. [whimsical.com/skills](https://whimsical.com/skills) lists every skill in the latest release, built from this repository. Each skill's page shows: -- Its title, the guide's `# Title` line, which is the guide's first line *(tested)*. +- Its title, the guide's `# Title` line, which comes right after its cover: a guide starts + with `![](covers/.png)`, a blank line, then `# Title` *(tested)*. - Its card description, the `description` in its `marketplace.json` entry. - A summary, the guide's intro: everything before its first `##` heading. The intro starts with one paragraph saying what the skill does, then a ```` ```text ```` block with an diff --git a/docs/app-wireframe.md b/docs/app-wireframe.md index 43d4cd9..b94ca4a 100644 --- a/docs/app-wireframe.md +++ b/docs/app-wireframe.md @@ -1,3 +1,5 @@ +![Any app, as wireframes.](covers/app-wireframe.png) + # App Wireframe Turn any app into editable wireframes in [Whimsical](https://whimsical.com). Name an diff --git a/docs/covers/README.md b/docs/covers/README.md index abf68ec..5388667 100644 --- a/docs/covers/README.md +++ b/docs/covers/README.md @@ -1,7 +1,7 @@ # Skill covers -Every skill has a cover: a 1600x1000 image, saved at 2x, that whimsical.com shows on the -skill's card and at the top of its page. All covers share one layout, `template.html`; what +Every skill has a cover: a 1600x1000 image, saved at 2x, at the top of the skill's guide, +and on its card and page on whimsical.com. All covers share one layout, `template.html`; what changes per skill is a two-line text spec and one illustration. The page around the cover already says what the skill does and shows a prompt, so the cover only names the skill's promise and shows it. @@ -35,7 +35,9 @@ For a skill named ``: ``` `tests/repo/` checks that every skill has all three files and that the PNG is the right -size. Commit the PNG: the website reads it from the repository at the latest release. +size. Commit the PNG, and put it at the top of the skill's guide, above its title: +`![](covers/.png)`. The website reads it from the repository at the latest +release. ## Drawing the illustration diff --git a/docs/renewal-timeline.md b/docs/renewal-timeline.md index b694775..43362ee 100644 --- a/docs/renewal-timeline.md +++ b/docs/renewal-timeline.md @@ -1,3 +1,5 @@ +![Every renewal, on one timeline.](covers/renewal-timeline.png) + # Renewal Timeline Turn a customer's renewal emails into a timeline in [Whimsical](https://whimsical.com), and a diff --git a/tests/repo/test_repo.py b/tests/repo/test_repo.py index e33efcf..e7a7343 100644 --- a/tests/repo/test_repo.py +++ b/tests/repo/test_repo.py @@ -99,7 +99,11 @@ def test_has_guide_tests_and_gallery_row(skill): def test_guide_intro_is_what_the_website_shows(skill): # whimsical.com/skills reads the title and the intro, up to the first "##". See CONVENTIONS.md. guide = (ROOT / "docs" / f"{skill.name}.md").read_text() - assert re.match(r"# \S.*\n\n", guide), "the guide starts with a '# Title' line, then a blank line" + cover = f"(covers/{skill.name}.png)\n\n" + assert guide.startswith("![") and cover in guide.split("\n", 1)[0] + "\n\n", \ + f"the guide starts with its cover: ![]{cover.strip()}" + guide = guide.split("\n\n", 1)[1] + assert re.match(r"# \S.*\n\n", guide), "the cover is followed by a '# Title' line, then a blank line" intro = guide.split("\n## ", 1)[0].split("\n", 1)[1].strip() first = intro.split("\n\n", 1)[0] assert not first.startswith(("```", "!", "[!", "|", "-")), "the intro opens with a paragraph of prose"