Skip to content

W
www
Commit b1428e8d by PLN (Algolia)
Options

feat(Parvagues): Sample code

parent fb605f2e
Showing with 64 additions and 18 deletions
next/content/hydras/dusty-halley0.md 0 → 100644
---
title: Ariane13
source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/Ariane13.js
---
next/pages/hydra.js
...@@ -34,8 +34,9 @@ export default function Hydra({hydras}) { ...@@ -34,8 +34,9 @@ export default function Hydra({hydras}) {
/> />
<p> <p>
<i> <i>
Intermediary steps of{" "} Successive layers within the work{" "}
<a href="https://nech.pl/nights-galactic">GaLactic</a> <a href="https://nech.pl/nights-galactic">GaLactic</a>,
part of the serie <b>Nuits étoilées</b><br />in which I turn pictures of the night sky into animated windows on the universe.
</i> </i>
</p> </p>
......
next/pages/hydra/[id].js
...@@ -14,7 +14,6 @@ export async function getStaticProps({ params }) { ...@@ -14,7 +14,6 @@ export async function getStaticProps({ params }) {
const response = await fetch(hydraData.source); const response = await fetch(hydraData.source);
const source = await response.text(); const source = await response.text();
const sourceCode = source.replace(/(?:\r\n|\r|\n)/g, "<br>"); const sourceCode = source.replace(/(?:\r\n|\r|\n)/g, "<br>");
console.log(sourceCode);
hydraData.source = source; hydraData.source = source;
...@@ -42,7 +41,10 @@ export default function Hydra({ hydraData, sourceCode }) { ...@@ -42,7 +41,10 @@ export default function Hydra({ hydraData, sourceCode }) {
</Head> </Head>
<article> <article>
<h1 className={utilStyles.headingXl}>{hydraData.title}</h1> <h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
<SyntaxHighlighter width="64em" language="javascript" wrapLongLines={true} <SyntaxHighlighter
width="64em"
language="javascript"
wrapLongLines={true}
> >
{hydraData.source} {hydraData.source}
</SyntaxHighlighter> </SyntaxHighlighter>
......
next/pages/parvagues.js
...@@ -4,20 +4,35 @@ import Head from "next/head"; ...@@ -4,20 +4,35 @@ import Head from "next/head";
import Layout from "../components/layout"; import Layout from "../components/layout";
import utilStyles from "../styles/utils.module.css"; import utilStyles from "../styles/utils.module.css";
import SyntaxHighlighter from "react-syntax-highlighter";
import React from "react"; import React from "react";
import ReactPlayer from "react-player"; import ReactPlayer from "react-player";
export async function getStaticProps(context) { export async function getStaticProps(context) {
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")
return { return {
props: { props: {
urlSC: "https://soundcloud.com/parvagues/", urlSC: "https://soundcloud.com/parvagues/",
urlTwitch: "https://twitch.tv/parvagues/", urlTwitch: "https://twitch.tv/parvagues/",
urlTwitchExample: "https://www.twitch.tv/videos/965233250" urlTwitchExample: "https://www.twitch.tv/videos/965233250",
urlAutomne: "https://soundcloud.com/parvagues/automne-electrique",
tidalSample: sourceClean
}, },
}; };
} }
export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) { export default function ParVagues({
urlSC,
urlTwitch,
urlTwitchExample,
tidalSample,
}) {
return ( return (
<Layout> <Layout>
<Head> <Head>
...@@ -28,8 +43,10 @@ export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) { ...@@ -28,8 +43,10 @@ export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) {
<section className={utilStyles.headingMd}> <section className={utilStyles.headingMd}>
<h1>I create music with patterns</h1> <h1>I create music with patterns</h1>
<h4> <h4>
<i>ParVagues, c'est des ondes sonores qui naissent dans un océan <i>
binaire pour parfois s'échouer sur vos plages sonores.</i> ParVagues, c'est des ondes sonores qui naissent dans un océan
binaire pour parfois s'échouer sur vos plages sonores.
</i>
</h4> </h4>
{/*<Image {/*<Image
alt="ParVagues performing" alt="ParVagues performing"
...@@ -40,24 +57,42 @@ export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) { ...@@ -40,24 +57,42 @@ export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) {
/>*/} />*/}
</section> </section>
<section className={utilStyles.headingMd}> <section className={utilStyles.headingMd}>
<h4>I sometimes post recordings on <a href={urlSC}>SoundCloud</a></h4> <h5>
<div className='player-wrapper'> A source sample: the code behind <a href="">Automne Électrique</a>:
</h5>
<SyntaxHighlighter
className="source-code"
width="64em"
language="haskell"
wrapLines={true}
>
{tidalSample}
</SyntaxHighlighter>
</section>
<section className={utilStyles.headingMd}>
<h4>
I sometimes post recordings on <a href={urlSC}>SoundCloud</a>
</h4>
<div className="player-wrapper">
<ReactPlayer <ReactPlayer
className='react-player' className="react-player"
url={urlSC} url={urlSC}
width='100%' width="100%"
height='32em' height="32em"
/> />
</div> </div>
</section> </section>
<section className={utilStyles.headingMd}> <section className={utilStyles.headingMd}>
<h4>I sometimes do live performances on <a href={urlTwitch}>Twitch</a></h4> <h4>
<div className='player-wrapper'> I sometimes do live performances on <a href={urlTwitch}>Twitch</a>
</h4>
<div className="player-wrapper">
<ReactPlayer <ReactPlayer
className='react-player' className="react-player"
url={urlTwitchExample} url={urlTwitchExample}
width='100%' width="100%"
height='32em' height="32em"
/> />
</div> </div>
</section> </section>
......
next/styles/main.css
...@@ -68,6 +68,10 @@ h1 a, h2 a, h3 a, h4 a, h5 a { ...@@ -68,6 +68,10 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
text-decoration: underline; text-decoration: underline;
} }
.source-code {
max-height: 36em;
}
.player-wrapper { .player-wrapper {
padding: 12em 0; padding: 12em 0;
......
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