influxdata / influxdata/docs-v2
Make content/example.md the canonical shortcode reference and test fixture
- Dominant language
- JavaScript
- Stars
- 82
- Forks
- 326
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 82
Description
## Background
`content/example.md` already exists as a shortcode showcase and is referenced by `DOCS-SHORTCODES.md` as a "working examples" page, but it isn't actively maintained as the canonical fixture/smoke test surface for the docs site. During the investigation of #7079 I discovered that:
- The page had **zero** uses of `placeholders=` or `callout=` fence attributes — the very attributes that caused the regression.
- It's consumed by the `test:shortcode-examples` npm script, but that script points at `cypress/e2e/content/index.cy.js`, which tests the docs home page instead of `/example/` (pre-existing mismatch, unrelated to #7079).
- Nothing in the contributor instructions or `.claude/skills/` requires shortcode contributors or reviewers to update `content/example.md` when they add or modify a shortcode.
#7085 partially addressed this by adding a "Render-regression fixtures" section to `content/example.md` for every render-hook code path implicated in #7079, and by making `content/example.md` the primary target of the new `cypress/e2e/content/render-regression.cy.js` spec. That was a targeted fix. This issue tracks the broader cleanup.
## Goal
Make `content/example.md` the **single canonical reference** for every shortcode the docs site supports. Contributors who add, modify, or remove a shortcode should be required to update `content/example.md` in the same PR, and reviewers should be able to rely on the page as a complete fixture for any layout or render-hook change.
## Acceptance criteria
### 1. Content parity audit
- [ ] Enumerate every shortcode under `layouts/shortcodes/` (currently ~80 files).
- [ ] For each shortcode, verify `content/example.md` contains at least one invocation that exercises the shortcode with representative arguments.
- [ ] For shortcodes that accept fence attributes or multiple parameter combinations, cover the common combinations (the #7079 lesson is that partial coverage hides real bugs).
- [ ] Add missing coverage. Land as one or more PRs, grouped by shortcode family (tabs, code, callouts, etc.) if it's too large for a single review.
### 2. Link from `DOCS-SHORTCODES.md` as the canonical examples page
- [ ] Add a prominent "Canonical examples" section to the top of `DOCS-SHORTCODES.md` explaining that `content/example.md` is the authoritative fixture and smoke-test surface.
- [ ] Under every individual shortcode section in `DOCS-SHORTCODES.md`, add a deep link to the matching anchor on `/example/` (once anchors are stable).
- [ ] Replace the two existing "For working examples" references (`DOCS-SHORTCODES.md:5` and `DOCS-SHORTCODES.md:1198`) with the same canonical phrasing so contributors see consistent guidance wherever they land.
- [ ] Add a short note explaining that the page is used as a live fixture by `cypress/e2e/content/render-regression.cy.js` and must not be deleted or renamed without also updating the spec.
### 3. Contributor guidance
- [ ] Add a section to `DOCS-CONTRIBUTING.md` explaining the shortcode contribution workflow: "If you add, modify, or remove a shortcode in `layouts/shortcodes/`, update `content/example.md` in the same PR to add or update a fixture."
- [ ] Add the same rule to `.github/instructions/layouts.instructions.md` (the pattern-specific instructions file Copilot auto-loads for `layouts/**/*.html`).
### 4. Update agent skills
The following Claude Code skills reference shortcodes and layouts and should be updated to require/recommend `content/example.md` updates as part of any shortcode work:
- [ ] `.claude/skills/hugo-template-dev/SKILL.md`
- Add a "Shortcode fixtures" section to the Mandatory Testing Protocol requiring that any new or modified shortcode comes with an `example.md` fixture and a local `yarn test:render-regression` run against `/example/`.
- Link to the `render-regression.cy.js` spec and explain that it depends on `example.md` fixtures for its "Shortcode examples page" test.
- [ ] `.claude/skills/content-editing/SKILL.md`
- Add `content/example.md` to the list of files a content-editing agent should check when shortcode behavior is in question.
- Recommend loading `content/example.md` as a reference for correct shortcode syntax before proposing edits to product pages.
- [ ] `.claude/skills/docs-cli-workflow/SKILL.md`
- If the docs CLI has a shortcode-generation path or scaffold, wire in an `example.md` update step.
### 5. Enforce via a pre-commit or CI check
- [ ] Add a lefthook pre-commit check that fires when `layouts/shortcodes/**/*.html` changes: warn (or fail) if the same commit doesn't also touch `content/example.md`. Scoped narrowly so it's easy to override for refactors that don't change the surface area.
- [ ] Alternatively, add a CI step to the existing `pr-render-check.yml` workflow that diffs the shortcode directory against `content/example.md` and reports uncovered shortcodes as a PR comment.
### 6. Fix pre-existing `test:shortcode-examples` mismatch
- [ ] Update the `test:shortcode-examples` npm script to run `cypress/e2e/content/render-regression.cy.js` (or a dedicated new spec) against `/example/` instead of running `index.cy.js` (which tests the docs home page). Confirmed in #7085 description.
### 7. Document the canonical-fixture commitment
- [ ] Add a short "About this page" banner to the top of `content/example.md` itself (behind a frontmatter flag or `test_only: true` conditional so it only appears in dev builds) explaining that the page is the canonical shortcode fixture and must not be edited to remove examples without also updating the corresponding `layouts/shortcodes/` files.
## Why now
#7079 shipped because `content/example.md` didn't exercise the attribute combinations that regressed in #7069. A single place to look for "does this shortcode render correctly" would have turned a 23-page site-wide regression into a single failing test on `/example/` during code review. Making the page canonical (and requiring contributors to keep it current) converts that one-time fix into an ongoing invariant.
## Related
- #7079 — the render regression that surfaced the gap
- #7085 — partial remediation; adds render-regression fixtures to `content/example.md` and the Cypress spec, but stops short of canonicalizing the page
- `DOCS-SHORTCODES.md` — current shortcode reference
- `content/example.md` — the page this issue is about
- `cypress/e2e/content/render-regression.cy.js` — the spec that consumes `content/example.md` as a fixture
- `.claude/skills/hugo-template-dev/SKILL.md` — agent skill that needs updating
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading content/example.md, DOCS-SHORTCODES.md, DOCS-CONTRIBUTING.md, .github/instructions/layouts.instructions.md, and cypress/e2e/content/render-regression.cy.js, then inspect layouts/shortcodes/ and the test:shortcode-examples script. Map shortcode coverage and the requested guidance, skill, CI, and script changes before splitting the work into focused pieces. Done means the canonical page, documentation, contributor instructions, agent skills, enforcement check, and /example/ regression test are consistent.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, hugo, javascript
- Domain
- ci-cd, documentation, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100