-
Notifications
You must be signed in to change notification settings - Fork 7
Document changelog timeline redesign, per-entry tags, and search #5932
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
fern-api
wants to merge
5
commits into
main
Choose a base branch
from
devin/1782247122-changelog-docs
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
5aba4c5
docs: document changelog timeline redesign, per-entry tags, and search
devin-ai-integration[bot] 130162f
style: address Vale lint suggestions (remove adverb and hedge word)
devin-ai-integration[bot] ee6903f
changelog: add entry for changelog timeline redesign and per-entry tags
devin-ai-integration[bot] b2fed4b
clarify text
devalog d362ac9
add image
devalog File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| ## Changelog timeline redesign | ||
|
|
||
| <ChangelogTags>navigation, search</ChangelogTags> | ||
|
|
||
| Changelog pages now render as a compact, date-grouped timeline of entry cards, replacing the previous layout that stacked full-height entries inline. | ||
|
|
||
| A search bar at the top lets readers find entries across the entire changelog by keyword. The query syncs to the `?q=` URL parameter, so filtered views are shareable. | ||
|
|
||
| <Frame> | ||
| <img src="../navigation/changelog.png" /> | ||
| </Frame> | ||
|
|
||
| <Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/configuration/changelogs">Read the docs</Button> | ||
|
|
||
| ## Per-entry changelog tags | ||
|
|
||
| <ChangelogTags>navigation, components</ChangelogTags> | ||
|
|
||
| Changelog entries with multiple releases under separate headings can tag each heading independently using the `<ChangelogTags>` component: | ||
|
|
||
| ```mdx | ||
| ## New dashboard analytics | ||
| <ChangelogTags>analytics, dashboard</ChangelogTags> | ||
| ``` | ||
|
|
||
| Tags on individual entry pages are clickable and link back to the timeline with that tag pre-selected as a filter. | ||
|
|
||
| <Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/configuration/changelogs#per-entry-tags">Read the docs</Button> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,32 @@ | ||
| --- | ||
| title: Changelog pages | ||
| subtitle: Keep a chronological record of project changes with tagging and RSS | ||
| subtitle: Keep a chronological record of project changes with tagging, search, and RSS | ||
| --- | ||
|
|
||
|
|
||
| Keep a record of how your project has changed by writing changelog entries that users can sort by tag. The changelog will automatically populate with the files contained within the `changelog` folder. | ||
| Keep a record of how your project has changed by writing changelog entries. The changelog renders as a scannable timeline of entry cards grouped by date, automatically populated from the files in your `changelog` folder. Search and tag filtering are built into the timeline, with no configuration required. | ||
|
|
||
| <Frame | ||
| caption="Keep your users updated as your project evolves" | ||
| background="subtle" | ||
| > | ||
| <img src="changelog-humanloop.png" /> | ||
| <img src="changelog.png" /> | ||
| </Frame> | ||
|
|
||
| ## Configure your changelog | ||
|
|
||
| <Steps> | ||
| <Step title="Add a `changelog` folder"> | ||
|
|
||
| Add a `changelog` folder to your project. This folder must be named `changelog` exactly — Fern won't recognize it under any other name. | ||
|
|
||
| <Files> | ||
| <Folder name="fern" defaultOpen> | ||
| <File name="fern.config.json" /> | ||
| <File name="docs.yml" /> | ||
| <Folder name="changelog" defaultOpen highlighted> | ||
| <File name="07-08-24.md" /> | ||
| <File name="08-21-24.mdx" /> | ||
| <File name="2024-07-08.md" /> | ||
| <File name="2024-07-31.mdx" /> | ||
| </Folder> | ||
| </Folder> | ||
| </Files> | ||
|
|
@@ -32,7 +35,10 @@ Add a `changelog` folder to your project. This folder must be named `changelog` | |
| Subdirectories within the `changelog` folder aren't supported. All changelog entry files must be placed directly in the root of the `changelog` folder. | ||
| </Note> | ||
|
|
||
| Then, reference it in your `docs.yml`. You can place the changelog as its own tab or as a section within your navigation. | ||
| </Step> | ||
| <Step title="Reference it in `docs.yml`"> | ||
|
|
||
| Reference the folder in your `docs.yml`. You can place the changelog as its own tab or as a section within your navigation. | ||
|
|
||
| <Tabs> | ||
| <Tab title="As a tab"> | ||
|
|
@@ -58,7 +64,7 @@ navigation: | |
| ``` | ||
| </CodeBlock> | ||
|
|
||
| [View an example](https://elevenlabs.io/docs/changelog) of how this renders in the ElevenLabs Changelog. | ||
| [View an example](https://elevenlabs.io/docs/changelog) of how this renders in the ElevenLabs changelog. | ||
| </Tab> | ||
| <Tab title="As a section"> | ||
| <CodeBlock title="docs.yml"> | ||
|
|
@@ -83,46 +89,101 @@ Section-level changelogs **can't** be nested within an `api` entry. | |
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## Write a changelog entry | ||
| </Step> | ||
| </Steps> | ||
|
|
||
| Create a new changelog entry by writing a Markdown file. You can use `.md` or `.mdx` files. The benefit of using `.mdx` is that you can leverage Fern's built-in [component library](/learn/docs/content/components/overview) within an entry. | ||
| ## Write a changelog entry | ||
|
|
||
| <Markdown src="/products/docs/snippets/changelog-example.mdx" /> | ||
| Each entry is a single Markdown file in your `changelog` folder. | ||
|
|
||
| ### Entry date | ||
| <Steps> | ||
| <Step title="Create a dated file"> | ||
|
|
||
| Changelog entries are automatically sorted chronologically by the date specific in the file name. Specify the date of your entry using one of the following formats: | ||
| Name the file with the entry's date using one of the following formats. Fern sorts entries chronologically by this date: | ||
|
|
||
| - MM-DD-YYYY (e.g., 10-06-2024) | ||
| - MM-DD-YY (e.g., 10-06-24) | ||
| - YYYY-MM-DD (e.g., 2024-04-21) | ||
|
|
||
| ### Tags | ||
| Both `.md` and `.mdx` are supported. Use `.mdx` to leverage Fern's built-in [component library](/learn/docs/writing-content/components/overview) within an entry. | ||
|
|
||
| </Step> | ||
| <Step title="Write the entry content"> | ||
|
|
||
| Write the entry in Markdown. Each top-level `##` heading becomes its own card on the timeline, so a single dated file can document several updates from the same day. | ||
|
|
||
| <Markdown src="/products/docs/snippets/changelog-example.mdx" /> | ||
|
|
||
| Add tags to changelog entries to help users filter and find relevant updates. Tags are defined in the frontmatter of your changelog entry as an array of strings: | ||
| </Step> | ||
| <Step title="Add tags"> | ||
|
|
||
| Tags let readers filter the timeline to specific topics. They appear as badges on each entry card and in the filter bar, and link back to a filtered timeline when clicked. | ||
|
|
||
| Use specific, descriptive tags that readers would search for — by feature type, product area, release stage, affected platform, or user impact. Apply them per file in the frontmatter or per entry under a heading; per-entry tags replace the frontmatter tags for that entry's card, while entries without their own tags inherit them. | ||
|
|
||
| <AccordionGroup> | ||
| <Accordion title="Per-file tags (frontmatter)"> | ||
|
|
||
| Add a `tags` array in the file's YAML frontmatter to tag all of the entries for that date: | ||
|
|
||
| <CodeBlock> | ||
| ```mdx | ||
| ```mdx fern/changelog/2024-07-31.mdx | ||
| --- | ||
| tags: ["plants-api", "breaking-change", "inventory-management"] | ||
| --- | ||
|
|
||
| ## New plant endpoints | ||
|
|
||
| Added `POST /plant` to add a plant to your inventory. | ||
|
|
||
| ## Bug fixes | ||
|
|
||
| Resolved an issue with inventory counts. | ||
| ``` | ||
| </CodeBlock> | ||
|
|
||
| When you have multiple changelog entries, users can filter the changelog page by selecting specific tags. Use specific, descriptive tags that your users would naturally search for. Consider tagging by feature type, product area, release stage, affected platform, or user impact. | ||
| </Accordion> | ||
| <Accordion title="Per-entry tags"> | ||
|
|
||
| Tag individual entries by placing a `<ChangelogTags>` component directly under each `##` heading: | ||
|
|
||
| <CodeBlock> | ||
| ```mdx fern/changelog/2024-07-31.mdx | ||
| ## New plant endpoints | ||
| <ChangelogTags>plants-api, inventory-management</ChangelogTags> | ||
|
|
||
| Added `POST /plant` to add a plant to your inventory. | ||
|
|
||
| ## Bug fixes | ||
| <ChangelogTags>bug-fix</ChangelogTags> | ||
|
|
||
| Resolved an issue with inventory counts. | ||
| ``` | ||
| </CodeBlock> | ||
|
|
||
| `<ChangelogTags>` accepts comma-separated children or a `tags` prop (`<ChangelogTags tags={["plants-api", "inventory-management"]} />`). | ||
|
|
||
| </Accordion> | ||
| </AccordionGroup> | ||
|
|
||
| <Note> | ||
| Customize the filter UI using [changelog filter CSS selectors](/learn/docs/customization/css-selectors-reference#changelog-filter-components). These selectors only apply when tags are configured. | ||
| </Note> | ||
|
|
||
| ### Linking to an entry | ||
| </Step> | ||
| <Step title="Add an overview page (optional)"> | ||
|
|
||
| Each changelog entry has a unique URL you can direct users to. For example, `https://elevenlabs.io/docs/changelog/2025/3/31` | ||
| Add an `overview.mdx` file to your `changelog` folder to include a high-level overview at the top of your changelog. This is useful for summarizing major themes, linking to external release notes, or giving users context before diving into specific entries. If present, it will automatically appear above the list of changelog entries. | ||
|
|
||
| ### Overview page | ||
| </Step> | ||
| </Steps> | ||
|
|
||
| Add an `overview.mdx` file to your `changelog` folder to include a high-level overview at the top of your changelog. This is useful for summarizing major themes, linking to external release notes, or giving users context before diving into specific entries. If present, it will automatically appear above the list of changelog entries. | ||
| ## Linking and sharing | ||
|
|
||
| Each changelog entry has a unique URL you can direct users to. For example, `https://elevenlabs.io/docs/changelog/2025/3/31` | ||
|
|
||
| Search queries sync to the `?q=` URL parameter, so a search result is shareable as a link. | ||
|
|
||
| ### RSS feed | ||
| ## RSS feed | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 |
||
|
|
||
| Changelogs automatically come with an RSS feed so users can subscribe to updates. Navigate to the RSS feed by appending `.rss` to the changelog path. For example, `https://elevenlabs.io/docs/changelog.rss` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [vale] reported by reviewdog 🐶
[Microsoft.Wordiness] Consider using 'all' instead of 'all of'.