commit ff93d12f6e5bce471a0daf7c0a575fdeb39c3070
parent 9eef07b4d64d46947d56ad6e2a83af0414e2845b
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Fri, 26 Feb 2021 17:30:29 +0100
Merge branch 'programmes'
Diffstat:
11 files changed, 188 insertions(+), 255 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+beethoven.in
+conspirito.in
+champagne.in
diff --git 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;
}
