From e92a5fbd1a67b41930fc96f74a38f9bbba0a7b62 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Wed, 5 Jan 2022 21:27:30 +0100
Subject: [PATCH] Add some basic info to the home page.

---
 source/scss/_reset.scss      |  1 +
 source/scss/pages/_home.scss | 25 +++++++++++++++++++++
 source/ts/pages/home.ts      | 42 ++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+)

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`
       <div class="home-page">
         <header>
@@ -15,6 +37,26 @@ export default class HomePage extends Component {
 
         <main>
           <${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>
 
         <${SharedFooter} />