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}) {
/>
<p>
<i>
Intermediary steps of{" "}
<a href="https://nech.pl/nights-galactic">GaLactic</a>
Successive layers within the work{" "}
<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>
</p>
......
next/pages/hydra/[id].js
......@@ -14,7 +14,6 @@ export async function getStaticProps({ params }) {
const response = await fetch(hydraData.source);
const source = await response.text();
const sourceCode = source.replace(/(?:\r\n|\r|\n)/g, "<br>");
console.log(sourceCode);
hydraData.source = source;
......@@ -42,7 +41,10 @@ export default function Hydra({ hydraData, sourceCode }) {
</Head>
<article>
<h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
<SyntaxHighlighter width="64em" language="javascript" wrapLongLines={true}
<SyntaxHighlighter
width="64em"
language="javascript"
wrapLongLines={true}
>
{hydraData.source}
</SyntaxHighlighter>
......
next/pages/parvagues.js
......@@ -4,20 +4,35 @@ import Head from "next/head";
import Layout from "../components/layout";
import utilStyles from "../styles/utils.module.css";
import SyntaxHighlighter from "react-syntax-highlighter";
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 response = await fetch(tidalSampleUrl);
const source = await response.text();
// Remove working title
const sourceClean = source.split("\n").slice(1).join("\n")
return {
props: {
urlSC: "https://soundcloud.com/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 (
<Layout>
<Head>
......@@ -28,8 +43,10 @@ export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) {
<section className={utilStyles.headingMd}>
<h1>I create music with patterns</h1>
<h4>
<i>ParVagues, c'est des ondes sonores qui naissent dans un océan
binaire pour parfois s'échouer sur vos plages sonores.</i>
<i>
ParVagues, c'est des ondes sonores qui naissent dans un océan
binaire pour parfois s'échouer sur vos plages sonores.
</i>
</h4>
{/*<Image
alt="ParVagues performing"
......@@ -40,24 +57,42 @@ export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) {
/>*/}
</section>
<section className={utilStyles.headingMd}>
<h4>I sometimes post recordings on <a href={urlSC}>SoundCloud</a></h4>
<div className='player-wrapper'>
<h5>
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
className='react-player'
className="react-player"
url={urlSC}
width='100%'
height='32em'
width="100%"
height="32em"
/>
</div>
</section>
<section className={utilStyles.headingMd}>
<h4>I sometimes do live performances on <a href={urlTwitch}>Twitch</a></h4>
<div className='player-wrapper'>
<h4>
I sometimes do live performances on <a href={urlTwitch}>Twitch</a>
</h4>
<div className="player-wrapper">
<ReactPlayer
className='react-player'
className="react-player"
url={urlTwitchExample}
width='100%'
height='32em'
width="100%"
height="32em"
/>
</div>
</section>
......
next/styles/main.css
......@@ -68,6 +68,10 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
text-decoration: underline;
}
.source-code {
max-height: 36em;
}
.player-wrapper {
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