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