stencil-community / stencil-router

A simple router for Stencil apps and sites
https://stenciljs.com/
MIT License
188 stars 55 forks source link

Feature Request: pageTitle Prefix and Suffix #76

Open ladvoc opened 5 years ago

ladvoc commented 5 years ago

Resources: Before submitting an issue, please consult our docs.

Stencil version:

frontend@0.0.1 /Users/jacob/Developer/frontend
└── @stencil/core@0.15.0 

I'm submitting a ... [ ] bug report [x] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: As websites and web apps often do, I append the name of my app to the end of the page title. To accomplish this I manually append the app name:

// example-page.tsx
render() {
    return [
        <stencil-route-title pageTitle='Example Page - App Name'></stencil-route-title>,
        <h1>This is an example</h1>
    ];
}

Expected behavior:

However, this method is not ideal. It would be extremely useful if stencil-router has a pageTitlePrefix and pageTitleSuffix property.

Related code:

The pageTitleSuffix will be appended to the pageTitle string provided by stencil-route-title in each component.

// app-root.tsx
render() {
    return (
        <stencil-router pageTitleSuffix=" - App Name">
            <stencil-route-switch>
                <stencil-route url='/example' component='example-page' />
            </stencil-route-switch>
        </stencil-router>
    );
}

When visiting this route, the document title is still "Example Page - App Name."

// example-page.tsx
render() {
    return [
        <stencil-route-title pageTitle='Example Page'></stencil-route-title>,
        <h1>This is an example</h1>
    ];
}
DonoCorc commented 5 years ago

@jacobgelman you can currently set <stencil-router titleSuffix=' - Whatever'> but there isn't a prefix version.