feat: Links, controls

TODO.md

@@ -6,8 +6,7 @@
   - IMG!
 
 - Hydra[id]: Render own source
-- ParVagues: Generic landing with master player, a code sample, and subpages
-  - Details page per item: fetch source-code, fetch song
+- Details page per item: fetch source-code, fetch song
 
 # Customization
 - Image de profil: neural or bust!

next/content/hydras/dusty-halley0.md → next/content/hydras/ariane13.md

 ---
 title: Ariane13
 source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/Ariane13.js
+link: https://nech.pl/ariane13
 ---

next/content/hydras/dusty-halley.md

 ---
 title: Dusty Halley
 source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/DustyHalley.js
+link: https://nech.pl/halley
 ---

next/content/hydras/galactic.md

 ---
 title: GaLactic
 source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/GaLactic.js
+link: https://nech.pl/nights-galactic
 ---

next/pages/hydra/[id].js

@@ -41,6 +41,7 @@ export default function Hydra({ hydraData, sourceCode }) {
       </Head>
       <article>
         <h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
+        <a href={hydraData.link}>See it live</a>
         <SyntaxHighlighter
           width="64em"
           language="javascript"

next/pages/index.js

@@ -46,37 +46,45 @@ export default function Home({ posts, talks }) {
             </a>
             .
           </p>
-
-          <h3>
-            …code into <em>music</em>
-          </h3>
+        </section>
+        <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
+          <Link href="/parvagues/">
+            <h3>
+              …code into <em>music</em>
+            </h3>
+          </Link>
           <p className="description">
             As <Link href="/parvagues/">ParVagues</Link>, I write patterns that
             shape soundwaves.
           </p>
-
-          <h3>
-            …code into <em>animated pixelscapes</em>
-          </h3>
+        </section>
+        <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
+          <Link href="/hydra/">
+            <h3>
+              …code into <em>animated pixelscapes</em>
+            </h3>
+          </Link>
           <p className="description">
             Using <Link href="/hydra/">Hydra</Link>, I create animations that
             offer windows into other words.
           </p>
         </section>
         <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
-          <h3>
-            …ideas into <em>talks</em>
-          </h3>
+          <Link href="/talks/">
+            <h3>
+              …ideas into <em>talks</em>
+            </h3>
+          </Link>
           <p className="description">
             I <Link href="/talks/">speak</Link> about topics I care about: from
             sharing my passions and teaching useful patterns, to questioning our
             current mental models.
           </p>
-          <h2 className={utilStyles.headingLg}>Most recent talks</h2>
+          <h5 className={utilStyles.headingLg}>Most recent talks</h5>
           <ul className={utilStyles.list}>
             {talks.map(({ id, title, description }) => (
               <li className={utilStyles.listItem} key={id}>
-                <Link href={`/talk/${id}`} key={id}>
+                <Link href={`/talks#${id}`}>
                   <h4>{title}</h4>
                 </Link>
                 {description && (

next/pages/parvagues.js

@@ -10,11 +10,12 @@ import React from "react";
 import ReactPlayer from "react-player";
 
 export async function getStaticProps(context) {
-  const tidalSampleUrl = "https://git.plnech.fr/pln/Tidal/raw/f5bfbc74e68dcaac0f6afa93f2b47d35321274c8/live/dnb/automne_electrique.tidal"
+  const tidalSampleUrl =
+    "https://git.plnech.fr/pln/Tidal/raw/f5bfbc74e68dcaac0f6afa93f2b47d35321274c8/live/dnb/automne_electrique.tidal";
   const response = await fetch(tidalSampleUrl);
   const source = await response.text();
   // Remove working title
-  const sourceClean = source.split("\n").slice(1).join("\n")
+  const sourceClean = source.split("\n").slice(1).join("\n");
 
   return {
     props: {
@@ -22,7 +23,7 @@ export async function getStaticProps(context) {
       urlTwitch: "https://twitch.tv/parvagues/",
       urlTwitchExample: "https://www.twitch.tv/videos/965233250",
       urlAutomne: "https://soundcloud.com/parvagues/automne-electrique",
-      tidalSample: sourceClean
+      tidalSample: sourceClean,
     },
   };
 }
@@ -68,7 +69,6 @@ export default function ParVagues({
           >
             {tidalSample}
           </SyntaxHighlighter>
-
         </section>
         <section className={utilStyles.headingMd}>
           <h4>
@@ -80,6 +80,14 @@ export default function ParVagues({
               url={urlSC}
               width="100%"
               height="32em"
+              controls={true}
+              config={{
+                soundcloud: {
+                  options: {
+                    auto_play: false,
+                  },
+                },
+              }}
             />
           </div>
         </section>
@@ -93,6 +101,7 @@ export default function ParVagues({
               url={urlTwitchExample}
               width="100%"
               height="32em"
+              controls={true}
             />
           </div>
         </section>

next/pages/talks.js

@@ -52,44 +52,46 @@ export default function Talks({ talks, selection }) {
               slides,
               event,
             }) => (
-              <li className={utilStyles.listItem} key={id}>
-                <h3>{title}</h3>
-                {description && (
-                  <>
-                    <small>{description}</small>
-                    <br />
-                  </>
-                )}
-                <small className={utilStyles.lightText}>
-                  <Date dateString={date} />
-                  {context && (
-                    <p>
-                      {" "}
-                      <i>
-                        at <a href={event}>{context}</a>{" "}
-                        {org && <>organised by {org}</>}
-                      </i>
-                    </p>
+              <Link href={`/talks#${id}`} key={id}>
+                <li className={utilStyles.listItem}>
+                  <h3 id={id}>{title}</h3>
+                  {description && (
+                    <>
+                      <small>{description}</small>
+                      <br />
+                    </>
                   )}
-                </small>{" "}
-                <ul class="links">
-                  {video && (
-                    <li>
-                      <a href={video}>Video</a>
-                    </li>
-                  )}
-                  {slides && (
-                    <li>
-                      <a href={slides}>Slides</a>
-                    </li>
-                  )}
-                  {event && (
-                    <li>
-                      <a href={event}>Event</a>
-                    </li>
-                  )}
-                </ul>
-              </li>
+                  <small className={utilStyles.lightText}>
+                    <Date dateString={date} />
+                    {context && (
+                      <p>
+                        {" "}
+                        <i>
+                          at <a href={event}>{context}</a>{" "}
+                          {org && <>organised by {org}</>}
+                        </i>
+                      </p>
+                    )}
+                  </small>{" "}
+                  <ul className="links">
+                    {video && (
+                      <li>
+                        <a href={video}>Video</a>
+                      </li>
+                    )}
+                    {slides && (
+                      <li>
+                        <a href={slides}>Slides</a>
+                      </li>
+                    )}
+                    {event && (
+                      <li>
+                        <a href={event}>Event</a>
+                      </li>
+                    )}
+                  </ul>
+                </li>
+              </Link>
             )
           )}
         </ul>

next/styles/main.css

@@ -51,7 +51,7 @@ p.code {
 }
 
 section {
-  margin-bottom: 4em;
+  margin-bottom: 3em;
 }
 
 small {