Merge branch 'programmes'

11 files changed, 186 insertions, 255 deletions

diff --git a/Makefile b/Makefile
index e296e2c..d6485f1 100644
--- a/Makefile
+++ b/Makefile
@@ -44,6 +44,7 @@ $(members_pages): $(OUTDIR)/%.html: %.in template.html | $(OUTDIR)
 	./build-member.sh $< $@
 
 $(OUTDIR)/quatuor.html: quatuor.md
+$(OUTDIR)/programmes.html: $(wildcard programs/*)
 
 clean:
 	-rm -r $(OUTDIR)
diff --git a/build-programs.py b/build-programs.py
new file mode 100755
index 0000000..513abbe
--- /dev/null
+++ b/build-programs.py
@@ -0,0 +1,69 @@
+#!/usr/bin/env python3
+
+import html
+from pathlib import Path
+import re
+from subprocess import run
+
+
+def read_programs(plist):
+    with open(plist) as l:
+        return tuple(Path('programs', p.strip()) for p in l)
+
+
+PROGRAM_RE = re.compile('\n'.join((
+    'NOM : (?P<name>.+)',
+    'COMPOSITEURS : (?P<composers>.+)',
+    'DESCRIPTION :',
+    '(?P<description>.+)',
+    'MORCEAUX :',
+    '(?P<pieces>.+)'
+)), flags=re.DOTALL)
+
+def parse(filename):
+    with open(filename) as program:
+        return PROGRAM_RE.match(program.read()).groupdict()
+
+
+BLOCK_TEMPLATE = '''\
+<details class="program">
+  <summary>
+    <div class="name">{name}</div>
+    <div class="composers">{composers}</div>
+    <img class="button open" src="images/chevron-down.svg">
+    <img class="button close" src="images/chevron-up.svg">
+  </summary>
+{description}
+<ol class="pieces">
+{pieces}
+</ol>
+</details>
+'''
+
+def piece(p):
+    if p == 'entracte':
+        return '<li class="intermission">entracte</li>'
+    return f'<li>{html.escape(p)}</li>'
+
+def print_program(filename):
+    info = parse(filename)
+
+    info['description'] = run(
+        ('pandoc',),
+        input=info['description'], capture_output=True, text=True, check=True
+    ).stdout
+
+    info['pieces'] = '\n'.join(
+        piece(p) for p in info['pieces'].splitlines()
+    )
+
+    print(BLOCK_TEMPLATE.format_map(info))
+
+
+def main():
+    for p in read_programs('programs/programs.list'):
+        print_program(p)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/images/chevron-down.svg b/images/chevron-down.svg
new file mode 100644
index 0000000..5f10285
--- /dev/null
+++ b/images/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e05a00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
\ No newline at end of file
diff --git a/images/chevron-up.svg b/images/chevron-up.svg
new file mode 100644
index 0000000..121efdd
--- /dev/null
+++ b/images/chevron-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e4b63a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
\ No newline at end of file
diff --git a/programmes.html b/programmes.html
index bce6afe..d8ac1f5 100644
--- a/programmes.html
+++ b/programmes.html
@@ -1,203 +1,3 @@
 <main>
-  <div id="program-list">
-    <h1>Nos programmes</h1>
-    <div class="programs">
-      <div class="program">
-        <a href="#program-a">
-          <p class="summary">Programme A</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-b">
-          <p class="summary">Programme B</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-c">
-          <p class="summary">Programme C</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-d">
-          <p class="summary">Programme D</p>
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <div id="program-details">
-    <div class="details" id="program-a">
-      <h1>Programme A</h1>
-      <p>
-        Un programme qui est sacrément bien nommé, parce que son
-        contenu correspond tout à fait à ce qui vient en tête
-        quand on lit son nom. Composé des œuvres suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">6min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La seconde
-              <span class="duration">6min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">6min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-b">
-      <h1>Programme B</h1>
-      <p>
-        Un programme qui comme son nom l'indique, rend hommage
-        à ce à quoi il fait référence. Composé des œuvres
-        suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">7min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La seconde
-              <span class="duration">7min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">7min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-c">
-      <h1>Programme C</h1>
-      <p>
-        Les morceaux de ce programme font référence à ceux à quoi
-        on peut s'attendre en lisant son nom. En voici la liste :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              Le premier
-              <span class="duration">8min 11s 101ms</span>
-            </summary>
-            Composé par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              Le second
-              <span class="duration">8min 22s 202ms</span>
-            </summary>
-            Composé par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              Le troisième
-              <span class="duration">8min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-d">
-      <h1>Programme D</h1>
-      <p>
-        Un programme dont les morceaux ont été choisis pour des
-        raisons en lien avec sa dénomination. Composé des œuvres
-        suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">9min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">9min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">9min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-  </div>
-
-  <script>
-    // When JS is enabled, hide concert details by default, and
-    // allow the user to display concerts selectively.
-    var detailsStyle = document.createElement('style');
-    document.head.appendChild(detailsStyle);
-    detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
-
-    var anchor = document.location.hash;
-    if (anchor.match(/#program-/))
-        document.querySelector(anchor).classList.add('active');
-
-    document.querySelectorAll('.program a').forEach((link) => {
-        link.addEventListener('click', function(click) {
-            if (click.ctrlKey || click.shiftKey)
-                return;
-
-            var prev = document.querySelector('.details.active');
-            if (prev)
-                prev.classList.remove('active');
-            var id = link.attributes['href'].value;
-            document.querySelector(id).classList.add('active');
-        });
-    });
-  </script>
-
+{PROGRAMS}
 </main>
diff --git a/programmes.sh b/programmes.sh
index 9c8d9e7..f03a636 100644
--- a/programmes.sh
+++ b/programmes.sh
@@ -1,3 +1,12 @@
+add-programs ()
+{
+    sed -i                                              \
+        -e /'{PROGRAMS}'/'r '<(./build-programs.py)     \
+        -e /'{PROGRAMS}'/'c\'                           \
+        $1
+}
+
 title=Programmes
 stylesheets=programmes
 transforms=("$(transform-li-current-a programmes)")
+postprocess=add-programs
diff --git a/programs/beethoven.in b/programs/beethoven.in
new file mode 100644
index 0000000..d2b2538
--- /dev/null
+++ b/programs/beethoven.in
@@ -0,0 +1,13 @@
+NOM : Beethoven
+COMPOSITEURS : Beethoven, Beethoven, Beethoven
+DESCRIPTION :
+1h50 avec entracte
+
+> Croyez-vous que je pense à vos misérables cordes quand l'esprit me parle ?
+
+Voilà ce qu’aurait répondu Beethoven au quatuor Schuppanzigh qui se serait plaint de la difficulté technique de ses quatuors à cordes. Du trio au quatuor, explorez l’univers d’un Beethoven sans concession et sans limite. De l’infiniment petit à l’immensité de l’univers, de l’introspection la plus intime à la transcendance la plus totale, (re-)découvrez son écriture contrastée et éternellement moderne.
+MORCEAUX :
+Trio op.9 n°3 (1798)
+Quatuor op.18 n°4 (1799)
+entracte
+Quatuor op.59 n°1 (1806)
diff --git a/programs/champagne.in b/programs/champagne.in
new file mode 100644
index 0000000..47a0fee
--- /dev/null
+++ b/programs/champagne.in
@@ -0,0 +1,13 @@
+NOM : Champagne
+COMPOSITEURS : Mozart, Mendelssohn, Ravel
+DESCRIPTION :
+1h50 avec entracte
+
+Partez à la découverte d’un répertoire pétillant, effervescent et lumineux.
+
+Ces quatuors écrits par trois compositeurs de trois siècles différents nous évoquent tous les caractères du champagne : la noblesse et la majesté chez Mozart, la fête et l’ivresse avec Mendelssohn tandis que Ravel y contemple les jeux de bulles et de lumière.
+MORCEAUX :
+Mozart — quatuor op.10 n°3 KV. 458 « La chasse » (1785)
+Mendelssohn — quatuor op.44 n°1 (1839)
+entracte
+Ravel — quatuor à cordes (1903)
diff --git a/programs/conspirito.in b/programs/conspirito.in
new file mode 100644
index 0000000..f8c8cc9
--- /dev/null
+++ b/programs/conspirito.in
@@ -0,0 +1,13 @@
+NOM : Con Spirito
+COMPOSITEURS : Haydn, Beethoven, Mendelssohn
+DESCRIPTION :
+2h00 avec entracte
+
+Ce programme plein d’esprit, énergique et espiègle réunit trois compositeurs germaniques. On y retrouve des caractères communs à la musique ultra-rhénane : la structure, la puissance, l’explosivité et la virtuosité.
+
+L’écoute des trois mouvements lents nous fait mesurer l’évolution du style classique au style romantique. La pureté et l’équilibre d’une écriture chorale dans l’Adagio sostenuto de Haydn, l’intériorité du sentiment dans la triste complainte de l’Adagio molto e mesto de Beethoven et la mélancolie douce et rêveuse de l’Andante espressivo ma con moto de Mendelssohn.
+MORCEAUX :
+Haydn — quatuor op.76 n°1 (1797)
+Beethoven — quatuor op.59 n°1 (1806)
+entracte
+Mendelssohn — quatuor op.44 n°1 (1839)
diff --git a/programs/programs.list b/programs/programs.list
new file mode 100644
index 0000000..af8d5c7
--- /dev/null
+++ b/programs/programs.list
@@ -0,0 +1,3 @@
+beethoven.in
+conspirito.in
+champagne.in
diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
index 88591c6..2da1e2c 100644
--- a/stylesheets/programmes.css
+++ b/stylesheets/programmes.css
@@ -1,78 +1,86 @@
-#program-list {
-    max-height: 60vh;
-    overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: darkblue #8ad;
-}
-
-#program-list::-webkit-scrollbar {
-    width: 0.25em;
-    height: 0.25em;
+@media (min-width: 40em) {
+    main {
+        margin: 2em 4em 0 4em;
+    }
 }
 
-#program-list::-webkit-scrollbar-track {
-    background: #8ad;
+details.program:first-child {
+    border-top: 1px solid black;
 }
 
-#program-list::-webkit-scrollbar-thumb {
-    background: darkblue;
+details.program {
+    position: relative;
+    width: 100%;
+    border-bottom: 1px solid black;
 }
 
-.programs {
+details.program > summary {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
-    grid-auto-rows: var(--cell-height);
+    grid-template-columns: 4fr 5fr 4em;
     grid-gap: 0.8em;
+    line-height: 2em;
+    list-style: none;
+    cursor: pointer;
 }
-
-.program {
-    background-color: #099;
+details.program > summary::-webkit-details-marker {
+    display: none;
+}
+/* Disable Chrome's outline; we already highlight this block
+   prominently enough IMO. */
+details.program > summary:focus {
+    outline: none;
 }
 
-.program a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    color: inherit;
-    text-decoration: none;
+details.program > summary > .name {
+    margin-left: 2em;
+    font-weight: bold;
+    color: #1f4e79;
 }
 
-.program .summary {
+details.program[open] > summary > .name,
+details.program[open] > summary > .composers {
+    color: #e05a00;
     font-weight: bold;
 }
 
-details summary .duration {
-    font-family: monospace;
+details.program > summary > img.button {
+    display: block;
+    width: 2em;
+    margin: auto 1em;
+}
+details.program > summary > img.button.close,
+details.program[open] > summary > img.button.open {
+    display: none;
+}
+details.program[open] > summary > img.button.close {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }
 
-@media (min-width: 40em) {
-    main {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
+details.program > summary ~ * {
+    margin-left: 2em;
+}
 
-    .programs {
-        --cell-width: 10em;
-        --cell-height: 10em;
-    }
+details.program > *:nth-child(3) {
+    color: var(--gold);
+    font-weight: bold;
+}
 
-    .program a {
-        transition: color 0.5s;
-    }
-    .program:hover a {
-        color: white;
-    }
+details.program blockquote p::before {
+    content: open-quote;
+}
+details.program blockquote p::after {
+    content: close-quote;
+}
 
-    .details.active > *:first-child {
-        margin-top: 0;
-    }
+ol.pieces {
+    list-style: none;
+    padding-left: 0;
 }
 
-@media (max-width: 40em) {
-    .programs {
-        --cell-width: 8em;
-        --cell-height: 4em;
-    }
+ol.pieces > li.intermission {
+    margin-left: 4em;
+    font-style: italic;
 }