1
Fork 0

Add links to the home and settings pages in the footer.

This commit is contained in:
Bauke 2022-01-16 13:30:41 +01:00
parent bc02927d8b
commit 71331a6ee0
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 21 additions and 4 deletions

View File

@ -2,14 +2,31 @@ import {Component, html} from 'htm/preact';
import ExternalAnchor from './external-anchor.js'; import ExternalAnchor from './external-anchor.js';
export default class SharedFooter extends Component { type Props = {
page: string;
};
export default class SharedFooter extends Component<Props> {
render() { render() {
const {page} = this.props;
const homeLink =
page === 'home' || page === 'not-found'
? undefined
: html`<a href="/">Home</a>${' '}`;
const settingsLink =
page === 'settings'
? undefined
: html`<a href="/settings">Settings</a>${' '}`;
const githubUrl = 'https://github.com/Bauke/href-plus'; const githubUrl = 'https://github.com/Bauke/href-plus';
const versionText = `v${hrefPlusVersion}/${hrefPlusCommitHash}`; const versionText = `v${hrefPlusVersion}/${hrefPlusCommitHash}`;
const versionUrl = `${githubUrl}/tree/${hrefPlusCommitHash}`; const versionUrl = `${githubUrl}/tree/${hrefPlusCommitHash}`;
return html` return html`
<footer class="shared-footer"> <footer class="shared-footer">
${homeLink}${settingsLink}
<${ExternalAnchor} text="GitHub" url=${githubUrl} /> <${ExternalAnchor} text="GitHub" url=${githubUrl} />
${' '} ${' '}
<${ExternalAnchor} text=${versionText} url=${versionUrl} /> <${ExternalAnchor} text=${versionText} url=${versionUrl} />

View File

@ -59,7 +59,7 @@ export default class HomePage extends Component {
</div> </div>
</main> </main>
<${SharedFooter} /> <${SharedFooter} page="home" />
</div> </div>
`; `;
} }

View File

@ -13,7 +13,7 @@ export default class NotFoundPage extends Component {
<a href="/"> Home</a> <a href="/"> Home</a>
</main> </main>
<${SharedFooter} /> <${SharedFooter} page="not-found" />
</div> </div>
`; `;
} }

View File

@ -59,7 +59,7 @@ export default class SettingsPage extends Component<Props, State> {
</p> </p>
</section> </section>
<${SharedFooter} /> <${SharedFooter} page="settings" />
</div> </div>
`; `;
} }