Work mostly completed; perhaps investigate rendering text link before mount

layouts/home.njk

@@ -3,19 +3,26 @@
 {% block body %}
 <div class="col col--1-3">
   <h2>Simple Vue Component (Why would you do this?)</h2>
+  <p><em>Being a SSR Vue component that does nothing but render from a prop</em></p>
   {% vue { component:"HelloWorld" } %}
   {% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
   {% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
 </div>
 <div class="col col--1-3">
   <h2>Todo List</h2>
+  <p><em>Being a pretty standard interactive component. Also SSR rendered.</em></p>
   {% vue { component:"ListComp"} %}
   {% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
 </div>
 <div class="col col--1-3">
+  <h2>Music Player</h2>
+  <p><em>Being a pretty standard interactive component.</em></p>
   {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %}
+  <p>Hearse Pileup: Last Time</p>
   {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %}
+  <p>Hearse Pileup: Generation Y</p>
   {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %}
+  <p>Hearse Pileup: Pretty Shiny Things</p>
 </div>
 <div class="col col--1">
   <section id="content" role="main" class="content-wrapper">

layouts/partials/footer.njk

@@ -1,3 +1,3 @@
 <p>
-  <a href="https://github.com/Gaffen/Kindling" target="_blank">Kindling</a> by <a href="https://gaffen.co.uk" target="_blank">Gaffen</a>
+  Music by <a href="https://hearsepileup.rip" target="_blank">Hearse Pileup</a>; Demo by <a href="https://gaffen.co.uk" target="_blank">Gaffen</a>
 </p>

src/content/index.md

@@ -3,7 +3,3 @@ layout: "home.njk"
 title: "Home"
 hideheader: true
 ---
-
-## This is your homepage!
-
-This is some _markdown formatted_ **content**.

src/js/components/RecordPlayer.vue

@@ -359,6 +359,7 @@ export default {
       });
     },
     togglePlay: function() {
+      console.log(this);
       if (!this.playing) {
         this.audioElement.play();
         this.playing = !this.playing;
@@ -421,6 +422,7 @@ export default {
   position: relative;
   width: 160px;
   height: 160px;
+  margin: auto;
 }
 
 .disc {

src/scss/base/_base.scss

@@ -16,6 +16,10 @@ h1 {
   color: $red;
 }
 
+a {
+  color: currentColor;
+}
+
 .site {
   display: flex;
   min-height: 100vh;