Skip to content

W
www
Commit 56a4415b by PLN (Algolia)
Options

feat: Links, controls

parent 1fd386d1
Showing with 79 additions and 57 deletions
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment