Add option to set the main document title

[shilman]

Issue by mnmtanish
Friday Oct 28, 2016 at 05:39 GMT
Originally opened as storybook-eol/storybook-addon-options#7

---

Related issue: #581

Add an option to set the storybook-ui page title.

[shilman]

Comment by afc163
Monday Dec 26, 2016 at 13:15 GMT

---

+1

[shilman]

Comment by TheSisb
Wednesday Jan 18, 2017 at 21:43 GMT

---

+1

[shilman]

Comment by bluetidepro
Wednesday Jan 25, 2017 at 19:35 GMT

---

+1

[shilman]

Comment by vgpena
Tuesday Jan 31, 2017 at 22:16 GMT

---

+1

[shilman]

Comment by ndelangen
Wednesday Apr 12, 2017 at 22:31 GMT

---

Should be fairly simple to implement, PR welcome!

[fraedom-jmcmonagle]

+1

[philcockfield]

+1

[ndelangen]

It feels like something simple to do right? Has anyone tried to implement this?

Would any of you be interested in giving this a try? @philcockfield @fraedom-jmcmonagle @vgpena @bluetidepro @TheSisb @afc163 ?

[janmichek]

This is a simple hack for changing page title, name of the app in heading and favicon.
I know you guys working on new api and I am sorry for hacking your awsome tool, but I didn't found this simple example.

Create 'manager-head.html' in .storybook/ folder with following content:

<script>
    document.title = 'My Title';
</script>
<style>
    h3{
        font-size: 0!important;
    }
    h3:after{
        content: "My Styleguide";
        font-size: 12px!important;
    }
</style>
<link rel="icon" type="image/png" href="./img/my-favicon.ico">

[ndelangen]

no worries, we added the manager-head.html as an escape-hatch also.

If you're changing the name storybook, you can do this via the addon-options

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[ndelangen]

#952
#866

[ndelangen]

Strictly speaking this is fixed, we will implement #866 which I think will be what 99% of users want.

[chvin]

'overwritten by Storybook' solution:

// .storybook/manager.js
import './titleAddon';

// .storybook/titleAddon.js
import addons from '@storybook/addons'
import { STORY_RENDERED } from '@storybook/core-events'

addons.register('TitleAddon', api => {
  const cunstomTitle = 'abc'; // Define your customTitle title
  let interval = null;
  const setTitle = () => {
    clearTimeout(interval);
    let storyData = null;
    try {
        storyData = api.getCurrentStoryData(); // Some time get error
    } catch(e) {}
    let title;
    if (!storyData) {
        title = cunstomTitle;
    } else {
        title = `${storyData.kind} - ${storyData.name} ⋅ ${cunstomTitle}`
    }
    if (document.title !== title) { // As few dom operations as possible
        document.title = title;
    }
    interval = setTimeout(setTitle, 100);
  };
  setTitle();
  api.on(STORY_RENDERED, story => {
    setTitle();
  })
});

[steffchep]

#866 isn't quite what this issue is about. Also, it's still open as well. :(
The workaround in here is sub-optimal, running something every 100ms really isn't a good option.
Someone else made it work without that, I think, but it still feels hacky to me to have to set arbitrary timeouts

[Flcwl]

why don't open title custom?

[juji]

'overwritten by Storybook' solution:

// .storybook/manager.js
import './titleAddon';

// .storybook/titleAddon.js
import addons from '@storybook/addons'
import { STORY_RENDERED } from '@storybook/core-events'

addons.register('TitleAddon', api => {
  const cunstomTitle = 'abc'; // Define your customTitle title
  let interval = null;
  const setTitle = () => {
    clearTimeout(interval);
    let storyData = null;
    try {
        storyData = api.getCurrentStoryData(); // Some time get error
    } catch(e) {}
    let title;
    if (!storyData) {
        title = cunstomTitle;
    } else {
        title = `${storyData.kind} - ${storyData.name} ⋅ ${cunstomTitle}`
    }
    if (document.title !== title) { // As few dom operations as possible
        document.title = title;
    }
    interval = setTimeout(setTitle, 100);
  };
  setTitle();
  api.on(STORY_RENDERED, story => {
    setTitle();
  })
});

This is one without seTimeout

import { STORY_RENDERED, STORY_CHANGED, STORY_SPECIFIED } from '@storybook/core-events'

// .storybook/titleAddon.js
addons.register('TitleAddon', api => {

  const customTitle = 'JujiDocs'; // Define your customTitle title
  
  const setTitle = () => {
  
    let storyData = null;
    
    try {
      // @ts-ignore
      storyData = api.getCurrentStoryData(); // Some time get error
    } catch(e) {}
    
    // @ts-ignore
    let title = storyData && storyData.title ? 
      // @ts-ignore
      `${storyData.title} ⋅ ${customTitle}` : 
      customTitle
    
    if (document.title !== title) { // As few dom operations as possible
      document.title = title;
    }

  };

  setTitle();
  api.on(STORY_RENDERED, story => { setTitle(); })
  api.on(STORY_CHANGED, story => { setTitle(); })
  api.on(STORY_SPECIFIED, story => { setTitle(); })

});

Thank you @chvin for the example