Skip to content

W
www
Commit 5627b9eb by PLN (Algolia)
Options

feat(ParVagues): Headers+Twitch

parent 7ebed87b
Showing with 34 additions and 6 deletions
TODO.md
......@@ -12,3 +12,5 @@
# Customization
- General style
- Favicon
- Hydras: Highlight with https://www.npmjs.com/package/react-syntax-highlighter
next/pages/parvagues.js
......@@ -9,11 +9,15 @@ import ReactPlayer from "react-player";
export async function getStaticProps(context) {
return {
props: {},
props: {
urlSC: "https://soundcloud.com/parvagues/",
urlTwitch: "https://twitch.tv/parvagues/",
urlTwitchExample: "https://www.twitch.tv/videos/965233250"
},
};
}
export default function ParVagues() {
export default function ParVagues({urlSC, urlTwitch, urlTwitchExample}) {
return (
<Layout>
<Head>
......@@ -24,8 +28,8 @@ export default function ParVagues() {
<section className={utilStyles.headingMd}>
<h1>I create music with patterns</h1>
<h4>
ParVagues, c'est des ondes sonores qui naissent dans un océan
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>
{/*<Image
alt="ParVagues performing"
......@@ -35,15 +39,28 @@ export default function ParVagues() {
height={475}
/>*/}
</section>
<br />
<section className={utilStyles.headingMd}>
<h4>I sometimes post recordings on <a href={urlSC}>SoundCloud</a></h4>
<div className='player-wrapper'>
<ReactPlayer
className='react-player'
url="https://soundcloud.com/parvagues/"
url={urlSC}
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'>
<ReactPlayer
className='react-player'
url={urlTwitchExample}
width='100%'
height='32em'
/>
</div>
</section>
</div>
</Layout>
);
......
next/styles/main.css
......@@ -50,6 +50,10 @@ p.code {
font-family: monospace;
}
section {
margin-bottom: 4em;
}
small {
font-size: 1rem;
}
......@@ -60,7 +64,12 @@ footer {
color: #228;
}
h1 a, h2 a, h3 a, h4 a, h5 a {
text-decoration: underline;
}
.player-wrapper {
padding: 12em 0;
position: relative;
padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}
......
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