diff --git a/source/scss/_reset.scss b/source/scss/_reset.scss
index c7e921b..a362ed5 100644
--- a/source/scss/_reset.scss
+++ b/source/scss/_reset.scss
@@ -1,4 +1,5 @@
h1,
+h2,
p {
margin: 0;
}
diff --git a/source/scss/pages/_home.scss b/source/scss/pages/_home.scss
index 4dfae2a..42e1ee0 100644
--- a/source/scss/pages/_home.scss
+++ b/source/scss/pages/_home.scss
@@ -6,4 +6,29 @@
font-size: 1rem;
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%;
+ }
+ }
}
diff --git a/source/ts/pages/home.ts b/source/ts/pages/home.ts
index 3d258ca..228e4b4 100644
--- a/source/ts/pages/home.ts
+++ b/source/ts/pages/home.ts
@@ -1,4 +1,5 @@
import {Component, html} from 'htm/preact';
+import ExternalAnchor from '../components/external-anchor.js';
import SearchBar from '../components/search-bar.js';
import SharedFooter from '../components/shared-footer.js';
@@ -7,6 +8,27 @@ export default class HomePage extends Component {
render() {
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`
@@ -15,6 +37,26 @@ export default class HomePage extends Component {
<${SearchBar} />
+
+
+
What is this all about?
+
+
+ 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}.
+
+
+
+ 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${' '}
+ ${location.host}/release/${''}
directly.
+
+
<${SharedFooter} />