1
Fork 0

Add some basic info to the home page.

This commit is contained in:
Bauke 2022-01-05 21:27:30 +01:00
parent 00e87167da
commit e92a5fbd1a
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
3 changed files with 68 additions and 0 deletions

View File

@ -1,4 +1,5 @@
h1, h1,
h2,
p { p {
margin: 0; margin: 0;
} }

View File

@ -6,4 +6,29 @@
font-size: 1rem; font-size: 1rem;
vertical-align: top; vertical-align: top;
} }
.explainer {
background-color: var(--background-2);
margin-top: 1rem;
max-width: 70rem;
padding: 1rem;
p {
line-height: 120%;
}
h2,
p {
margin-bottom: 1rem;
&:last-child {
margin: 0;
}
}
code {
background-color: var(--background-1);
font-size: 85%;
}
}
} }

View File

@ -1,4 +1,5 @@
import {Component, html} from 'htm/preact'; import {Component, html} from 'htm/preact';
import ExternalAnchor from '../components/external-anchor.js';
import SearchBar from '../components/search-bar.js'; import SearchBar from '../components/search-bar.js';
import SharedFooter from '../components/shared-footer.js'; import SharedFooter from '../components/shared-footer.js';
@ -7,6 +8,27 @@ export default class HomePage extends Component {
render() { render() {
document.title = 'Blink'; document.title = 'Blink';
const links = {
contribute: html`
<${ExternalAnchor}
text="anyone can do"
url="https://musicbrainz.org/doc/How_to_Contribute"
/>
`,
musicbrainz: html`
<${ExternalAnchor}
text="MusicBrainz database"
url="https://musicbrainz.org"
/>
`,
mbid: html`
<${ExternalAnchor}
text="MusicBrainz Identifier (mbid)"
url="https://musicbrainz.org/doc/MusicBrainz_Identifier"
/>
`,
};
return html` return html`
<div class="home-page"> <div class="home-page">
<header> <header>
@ -15,6 +37,26 @@ export default class HomePage extends Component {
<main> <main>
<${SearchBar} /> <${SearchBar} />
<div class="explainer">
<h2>What is this all about?</h2>
<p>
Blink is a website that hopes to make sharing links to music
easier. By using the data from the ${links.musicbrainz} (an open
encyclopedia for music metadata) we can provide an easy way to
share a single link to all the platforms a song or album is
available on, as long as someone has added those platforms to
MusicBrainz, which ${links.contribute}.
</p>
<p>
To share a link you can either use the search bar above and find
what you're looking for, or if you have a ${links.mbid} from
somewhere else already, head to${' '}
<code>${location.host}/release/${'<mbid>'}</code> directly.
</p>
</div>
</main> </main>
<${SharedFooter} /> <${SharedFooter} />