-
Notifications
You must be signed in to change notification settings - Fork 0
/
{MarkdownRemark.fields__slug}.js
61 lines (55 loc) · 1.92 KB
/
{MarkdownRemark.fields__slug}.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { useState } from 'react'
import { graphql } from 'gatsby'
import ChordSheetJS from 'chordsheetjs'
import { createCP } from 'simplechordpro'
import Layout from '../components/layout'
import Scroller from '../components/scroller'
import Video from '../components/video'
import { AiFillPlusCircle, AiFillMinusCircle } from 'react-icons/ai'
export default function Song({ data }) {
const { frontmatter, rawMarkdownBody } = data.markdownRemark
const chordProSong = createCP(rawMarkdownBody)
const parser = new ChordSheetJS.ChordProParser()
const [song, setSong] = useState(parser.parse(chordProSong).setKey(frontmatter.key))
const formatter = new ChordSheetJS.HtmlDivFormatter()
const disp = formatter.format(song)
return (
<Layout title={frontmatter.title} subtitle={frontmatter.artist}>
<article className="song">
<header className="page-header">
<section className="container">
<span className="widget chunk">
<p>Key of {song.metadata.key}</p>
<nav className="transposer">
<button onClick={() => setSong(song.transposeDown())}>
<AiFillMinusCircle />
<span>Transponse down</span>
</button>
<button onClick={() => setSong(song.transposeUp())}>
<AiFillPlusCircle />
<span>Transponse up</span>
</button>
</nav>
</span>
<Scroller />
</section>
</header>
<section className="song-content reading" dangerouslySetInnerHTML={{ __html: disp }} />
<Video url={frontmatter.youtube} title={frontmatter.title} />
</article>
</Layout>
)
}
export const pageQuery = graphql`
query ($id: String!) {
markdownRemark(id: { eq: $id }) {
frontmatter {
title
key
artist
youtube
}
rawMarkdownBody
}
}
`