From 7ebed87bb875f03374b77d635ce7208657ae3847 Mon Sep 17 00:00:00 2001
From: Paul-Louis NECH <pln@algolia.com>
Date: Sun, 25 Apr 2021 23:19:11 +0200
Subject: [PATCH] wip: Hydras

---
 next/components/hydra.js            | 36 ++++++++++++++++++------------------
 next/components/layout.module.css   |  2 +-
 next/content/hydras/dusty-halley.md |  4 ++++
 next/content/hydras/galactic.md     |  4 ++++
 next/lib/hydras.js                  | 13 +++++++++++++
 next/pages/hydra.js                 | 45 ++++++++++++++++++++++++++++++++++-----------
 next/pages/hydra/[id].js            | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 next/pages/parvagues.js             | 10 +++++++++-
 next/styles/main.css                | 15 +++++++++++++++
 9 files changed, 150 insertions(+), 31 deletions(-)
 create mode 100644 next/content/hydras/dusty-halley.md
 create mode 100644 next/content/hydras/galactic.md
 create mode 100644 next/lib/hydras.js
 create mode 100644 next/pages/hydra/[id].js

diff --git a/next/components/hydra.js b/next/components/hydra.js
index 4dda940..a23e3e4 100644
--- a/next/components/hydra.js
+++ b/next/components/hydra.js
@@ -5,6 +5,7 @@ class HydraSynth extends React.Component {
     super(props);
     this.width = props.width;
     this.height = props.height;
+    this.source= props.source;
   }
 
   componentDidMount() {
@@ -20,25 +21,24 @@ class HydraSynth extends React.Component {
     });
     hydra.setResolution(this.width, this.height);
 
-    // This works! Now generate one for each :D
-    // TODO: One per page, with template and lib
+    //TODO: Use source
     // FIXME: Canvas position
-    // s0.initImage("https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/img/halley.png");
-    // src(s0).out(o0)
-    // src(o0)
-    //   .modulate(src(o0),() => Math.sin(time/100) / 10)
-    // .out(o1)
-    // src(o1)
-    //   .modulateScale(osc(1,0.4),0.05)
-    //   .blend(noise(100,0.92).colorama(),0.07)
-    // .out(o2)
-    // src(o2)
-    //   .blend(src(o2).thresh(), () => 0.5 + 0.125 * Math.sin(time / 100 % 180))
-    //   .scrollX(-0.05)
-    //   // .scrollY(-0.1)
-    //   .scale(1.08)
-    // .out(o3)
-    // render(o3)
+    s0.initImage("https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/img/halley.png");
+    src(s0).out(o0)
+    src(o0)
+      .modulate(src(o0),() => Math.sin(time/100) / 10)
+    .out(o1)
+    src(o1)
+      .modulateScale(osc(1,0.4),0.05)
+      .blend(noise(100,0.92).colorama(),0.07)
+    .out(o2)
+    src(o2)
+      .blend(src(o2).thresh(), () => 0.5 + 0.125 * Math.sin(time / 100 % 180))
+      .scrollX(-0.05)
+      // .scrollY(-0.1)
+      .scale(1.08)
+    .out(o3)
+    render(o3)
 
   }
   render() {
diff --git a/next/components/layout.module.css b/next/components/layout.module.css
index d2ea313..38a5946 100644
--- a/next/components/layout.module.css
+++ b/next/components/layout.module.css
@@ -1,5 +1,5 @@
 .container {
-  max-width: 36rem;
+  max-width: 42rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
 }
diff --git a/next/content/hydras/dusty-halley.md b/next/content/hydras/dusty-halley.md
new file mode 100644
index 0000000..57f15da
--- /dev/null
+++ b/next/content/hydras/dusty-halley.md
@@ -0,0 +1,4 @@
+---
+title: Dusty Halley
+source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/DustyHalley.js
+---
diff --git a/next/content/hydras/galactic.md b/next/content/hydras/galactic.md
new file mode 100644
index 0000000..5432e29
--- /dev/null
+++ b/next/content/hydras/galactic.md
@@ -0,0 +1,4 @@
+---
+title: GaLactic
+source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/GaLactic.js
+---
diff --git a/next/lib/hydras.js b/next/lib/hydras.js
new file mode 100644
index 0000000..6d56e67
--- /dev/null
+++ b/next/lib/hydras.js
@@ -0,0 +1,13 @@
+import {getAllContentData, getAllContentIds, getContentData} from './utils'
+
+export function getHydrasData() {
+  return getAllContentData('hydras', true)
+}
+
+export function getAllHydraIds() {
+  return getAllContentIds("hydras")
+}
+
+export async function getHydraData(id) {
+  return getContentData("hydras", id)
+}
diff --git a/next/pages/hydra.js b/next/pages/hydra.js
index f903a97..553f7b6 100644
--- a/next/pages/hydra.js
+++ b/next/pages/hydra.js
@@ -3,19 +3,25 @@ import Link from "next/link";
 import Head from "next/head";
 import Layout from "../components/layout";
 import HydraSynth from "../components/hydra";
+import utilStyles from "../styles/utils.module.css";
+import { getHydrasData } from "../lib/hydras";
+
+export async function getStaticProps() {
+  const hydras = getHydrasData();
 
-export async function getStaticProps(context) {
   return {
-    props: {},
+    props: {
+      hydras,
+    },
   };
 }
 
-export default function Hydra() {
+export default function Hydra({hydras}) {
   return (
-    <Layout>
+    <Layout className="hydra">
       <Head>
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <title>PLN's Hydra works</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>PLN's Hydra works</title>
       </Head>
       <div>
         <h1>I create visuals with patterns</h1>
@@ -26,11 +32,28 @@ export default function Hydra() {
           width={700}
           height={475}
         />
-        <p><i>Intermediary steps of <a href="https://nech.pl/nights-galactic">GaLactic</a></i></p>
-        <HydraSynth
-        width={700}
-        height={475} />
+        <p>
+          <i>
+            Intermediary steps of{" "}
+            <a href="https://nech.pl/nights-galactic">GaLactic</a>
+          </i>
+        </p>
+
+        <br />
+        <h2>Some works</h2>
+        <ul className={utilStyles.list}>
+          {hydras.map(
+            ({
+              id,
+              title,
+            }) => (
+              <li className={utilStyles.listItem} key={id}>
+                <Link href={`/hydra/${id}`}><h4> {title}</h4></Link>
+              </li>
+            )
+          )}
+        </ul>
       </div>
-      </Layout>
+    </Layout>
   );
 }
diff --git a/next/pages/hydra/[id].js b/next/pages/hydra/[id].js
new file mode 100644
index 0000000..4bc3a63
--- /dev/null
+++ b/next/pages/hydra/[id].js
@@ -0,0 +1,52 @@
+import Head from "next/head";
+import Layout from "../../components/layout";
+import HydraSynth from "../../components/hydra";
+import Date from "../../components/date";
+const https = require('https')
+
+import utilStyles from "../../styles/utils.module.css";
+import { getAllHydraIds, getHydraData } from "../../lib/hydras";
+
+export async function getStaticProps({ params }) {
+  const hydraData = await getHydraData(params.id);
+
+  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;
+
+  return {
+    props: {
+      hydraData,
+      sourceCode
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  const paths = getAllHydraIds();
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+export default function Hydra({ hydraData, sourceCode }) {
+  return (
+    <Layout>
+      <Head>
+        <title>{hydraData.title}</title>
+      </Head>
+      <article>
+        <h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
+        <p className="code" dangerouslySetInnerHTML={{ __html: sourceCode }} />
+      </article>
+      <HydraSynth
+      width={700}
+      height={475}
+      source={hydraData.source}/>
+    </Layout>
+  );
+}
diff --git a/next/pages/parvagues.js b/next/pages/parvagues.js
index b80200a..742c561 100644
--- a/next/pages/parvagues.js
+++ b/next/pages/parvagues.js
@@ -35,7 +35,15 @@ export default function ParVagues() {
           height={475}
         />*/}
         </section>
-        <ReactPlayer url="https://soundcloud.com/parvagues/" />
+        <br />
+        <div className='player-wrapper'>
+          <ReactPlayer
+            className='react-player'
+            url="https://soundcloud.com/parvagues/"
+            width='100%'
+            height='32em'
+          />
+        </div>
       </div>
     </Layout>
   );
diff --git a/next/styles/main.css b/next/styles/main.css
index 0cd6c45..9592934 100644
--- a/next/styles/main.css
+++ b/next/styles/main.css
@@ -46,6 +46,10 @@ ul.links {
   margin-bottom: 3em;
 }
 
+p.code {
+  font-family: monospace;
+}
+
 small {
   font-size: 1rem;
 }
@@ -55,3 +59,14 @@ footer {
   text-align: center;
   color: #228;
 }
+
+.player-wrapper {
+  position: relative;
+  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
+}
+
+.react-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
--
libgit2 0.27.0