changelog

changelog copied to clipboard

Hey folks!

We're using Storybook combined with MDX to host documentation of our design system. We'd like to embed changelogs in our public documentation, but are running into an issue:

release-notes-generator doesn't have a template we can use for the "page header" (the header partial is per release best I can tell). changelog feels like it would be the appropriate place to inject a couple of lines of MDX code on top of the entire page:

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Core/Changelog />

I don't think currently this is possible, since the changelogTitle property gets prefixed with # and postfixed with an empty line. Would you be willing to discuss allowing a document-wide, multi-line header?

Perhaps something along the lines of:

{
  ['changelog', {
    changelogTitle: 'Cool Package',
    changelogHeaderTemplate: './headerTemplate.hbs',
  }]
}

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Core/Changelog />

# {{changelogTitle}}

I agree with this, even though my use case would be satisfied by just allowing expansion of environment variables into the changelogTitle field.

@StevenLangbroek We are also using mdx and importing Meta. I've noticed that the Meta component creates an element with an anchor id which used in the URL, hence the browser scroll into this element.

That means that when changelog append new lines on top of it, it will push it down thus the browser will scroll to bottom of the page on load.

I'm trying to figure out a way to keep these lines on top

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="MY TITLE />

Any idea how can this be achieved?

we are using a CHANGELOG.md in our root folder and importing the file in a changelog.stories.mdx

import { Meta } from "@storybook/addon-docs/blocks";
import Changelog from "../../CHANGELOG.md";

<Meta title="DesignSystem/Changelog" />

# Changelog

<Changelog />

Config for the docs addon:

    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
        babelOptions: {},
        transcludeMarkdown: true,
      },
    },