matteo/youtube-maze
matteo
/
youtube-maze
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add a real front page

This commit is contained in:
Mattéo Delabre 2020-11-29 02:06:35 +01:00
parent 615ddb8a84
commit 8b5221f8bf
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
7 changed files with 533 additions and 492 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules
build
public/fonts

4
README.md
View File

@ -1,8 +1,8 @@
# YouTube Maze
Some YouTube creators have made video “gamebooks” by creating videos in which viewers can make choices that influence the course of the narration.
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration.
This is generally implemented by breaking up the video into short interlinked segments.
This project aims at automatically exploring those video mazes and creating a visual representation of the underlying network.
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video.
[See it live →](https://youtube-maze.cloud.delab.re)

27
public/index.html
View File

@ -8,7 +8,30 @@
<body>
<h1>YouTube Maze</h1>
<p><a href="/mazes/EZGra6O8ClQ">e-penser</a></p>
<p><a href="/mazes/XM1ssJ8yxdg">Defakator</a></p>
<p>
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration.
This is generally implemented by breaking up the video into short interlinked segments.
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video.
</p>
<p>
<a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
</p>
<h2>Generate a graph</h2>
<form action="/mazes" method="POST">
<p>
<input type="text" name="url" placeholder="Enter the URL of a YouTube video to generate the graph…">
<input type="submit" value="Generate">
</p>
</form>
<h2>Some examples</h2>
<ul>
<li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
<li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
</ul>
</body>
</html>

465
public/index2.html
View File

@ -1,465 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exploration du labyrinthe du 1er avril d’e-penser</title>
<link href="/style2.css" rel="stylesheet" />
</head>
<body>
<h1>Exploration du labyrinthe du 1<sup>er</sup> avril d’e-penser</h1>
<p>
À l’occasion du 1<sup>er</sup> avril 2017, le vulgarisateur français <a href="https://www.youtube.com/user/epenser1">e-penser</a> a posté sur YouTube un réseau de vidéos interconnectées à la manière d’un labyrinthe. À chaque vidéo, le vidéaste nous laisse le choix d’en visionner deux autres, et nous met au défi de toutes les regarder pour parvenir à trouver une vidéo mystérieuse.
</p>
<p>
Ce qui suit est le graphe issu de l’exploration automatisée du labyrinthe de vidéos. Chaque vidéo est cliquable. La première vidéo du graphe vous permettra de comprendre les règles établies par Bruce, la dernière est la « vidéo mystère ».
</p>
<p>
<a href="https://forge.delab.re/matteo/epenser-maze">
Plus d’infos sur l’exploration »
</a>
</p>
<hr />
<svg width="1304pt" height="1628pt"
viewBox="0.00 0.00 1303.75 1628.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1624)">
<title>epenser</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-1624 1299.75,-1624 1299.75,4 -4,4"/>
<!-- EZGra6O8ClQ -->
<g id="node1" class="node"><title>EZGra6O8ClQ</title>
<g id="a_node1"><a xlink:href="https://youtu.be/EZGra6O8ClQ" xlink:title="1 avril 2017 : présentation des règles">
<ellipse fill="none" stroke="black" cx="432.727" cy="-1602" rx="141.875" ry="18"/>
<text text-anchor="middle" x="432.727" y="-1598.3" font-family="Times,serif" font-size="14.00" fill="blue">1 avril 2017 : présentation des règles</text>
</a>
</g>
</g>
<!-- Ao990NQwn1Y -->
<g id="node2" class="node"><title>Ao990NQwn1Y</title>
<g id="a_node2"><a xlink:href="https://youtu.be/Ao990NQwn1Y" xlink:title="Vidéo sérieuse">
<ellipse fill="none" stroke="black" cx="432.727" cy="-1386" rx="63.0888" ry="18"/>
<text text-anchor="middle" x="432.727" y="-1382.3" font-family="Times,serif" font-size="14.00" fill="blue">Vidéo sérieuse</text>
</a>
</g>
</g>
<!-- EZGra6O8ClQ&#45;&gt;Ao990NQwn1Y -->
<g id="edge1" class="edge"><title>EZGra6O8ClQ&#45;&gt;Ao990NQwn1Y</title>
<path fill="none" stroke="black" d="M432.727,-1583.85C432.727,-1546.83 432.727,-1459.18 432.727,-1414.39"/>
<polygon fill="black" stroke="black" points="436.227,-1414.23 432.727,-1404.23 429.227,-1414.23 436.227,-1414.23"/>
</g>
<!-- OQloldjDS6w -->
<g id="node3" class="node"><title>OQloldjDS6w</title>
<g id="a_node3"><a xlink:href="https://youtu.be/OQloldjDS6w" xlink:title="TOP 14 DES FILMS AVEC UN TWIST DE FIN (SANS SPOIL) 🤐">
<ellipse fill="none" stroke="black" cx="256.727" cy="-1170" rx="256.955" ry="18"/>
<text text-anchor="middle" x="256.727" y="-1166.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 14 DES FILMS AVEC UN TWIST DE FIN (SANS SPOIL) 🤐</text>
</a>
</g>
</g>
<!-- EZGra6O8ClQ&#45;&gt;OQloldjDS6w -->
<g id="edge2" class="edge"><title>EZGra6O8ClQ&#45;&gt;OQloldjDS6w</title>
<path fill="none" stroke="black" d="M383.233,-1585.04C331.177,-1564.77 256.727,-1524.37 256.727,-1459 256.727,-1459 256.727,-1459 256.727,-1313 256.727,-1273 256.727,-1226.65 256.727,-1198.08"/>
<polygon fill="black" stroke="black" points="260.227,-1198.05 256.727,-1188.05 253.227,-1198.05 260.227,-1198.05"/>
</g>
<!-- TabnloyIsz8 -->
<g id="node4" class="node"><title>TabnloyIsz8</title>
<g id="a_node4"><a xlink:href="https://youtu.be/TabnloyIsz8" xlink:title="Lien exemple, ne pas cliquer">
<ellipse fill="none" stroke="black" cx="600.727" cy="-1530" rx="113.98" ry="18"/>
<text text-anchor="middle" x="600.727" y="-1526.3" font-family="Times,serif" font-size="14.00" fill="blue">Lien exemple, ne pas cliquer</text>
</a>
</g>
</g>
<!-- EZGra6O8ClQ&#45;&gt;TabnloyIsz8 -->
<g id="edge3" class="edge"><title>EZGra6O8ClQ&#45;&gt;TabnloyIsz8</title>
<path fill="none" stroke="black" d="M472.116,-1584.59C496.195,-1574.56 527.164,-1561.65 552.679,-1551.02"/>
<polygon fill="black" stroke="black" points="554.28,-1554.14 562.165,-1547.07 551.588,-1547.68 554.28,-1554.14"/>
</g>
<!-- t2sBrJB0dCY -->
<g id="node5" class="node"><title>t2sBrJB0dCY</title>
<g id="a_node5"><a xlink:href="https://youtu.be/t2sBrJB0dCY" xlink:title="LE MENSONGE APOLLO XI 🌕 🌔 🌓 🌒 🌑">
<ellipse fill="none" stroke="black" cx="555.727" cy="-1242" rx="182.768" ry="18"/>
<text text-anchor="middle" x="555.727" y="-1238.3" font-family="Times,serif" font-size="14.00" fill="blue">LE MENSONGE APOLLO XI 🌕 🌔 🌓 🌒 🌑</text>
</a>
</g>
</g>
<!-- Ao990NQwn1Y&#45;&gt;t2sBrJB0dCY -->
<g id="edge4" class="edge"><title>Ao990NQwn1Y&#45;&gt;t2sBrJB0dCY</title>
<path fill="none" stroke="black" d="M476.233,-1372.82C509.632,-1362.48 551.684,-1346.98 561.727,-1332 573.877,-1313.87 570.834,-1288.74 565.642,-1269.8"/>
<polygon fill="black" stroke="black" points="568.912,-1268.53 562.62,-1260 562.223,-1270.59 568.912,-1268.53"/>
</g>
<!-- EZjqL8kSkCE -->
<g id="node6" class="node"><title>EZjqL8kSkCE</title>
<g id="a_node6"><a xlink:href="https://youtu.be/EZjqL8kSkCE" xlink:title="Plus d&#39;arguments sur la Terre plate">
<ellipse fill="none" stroke="black" cx="418.727" cy="-1314" rx="133.776" ry="18"/>
<text text-anchor="middle" x="418.727" y="-1310.3" font-family="Times,serif" font-size="14.00" fill="blue">Plus d&#39;arguments sur la Terre plate</text>
</a>
</g>
</g>
<!-- Ao990NQwn1Y&#45;&gt;EZjqL8kSkCE -->
<g id="edge5" class="edge"><title>Ao990NQwn1Y&#45;&gt;EZjqL8kSkCE</title>
<path fill="none" stroke="black" d="M429.267,-1367.7C427.724,-1359.98 425.87,-1350.71 424.15,-1342.11"/>
<polygon fill="black" stroke="black" points="427.541,-1341.22 422.148,-1332.1 420.677,-1342.6 427.541,-1341.22"/>
</g>
<!-- Hxho4NmIUi8 -->
<g id="node7" class="node"><title>Hxho4NmIUi8</title>
<g id="a_node7"><a xlink:href="https://youtu.be/Hxho4NmIUi8" xlink:title="TOP 6 DES SERIES MECONNUES 🤓">
<ellipse fill="none" stroke="black" cx="182.727" cy="-1098" rx="153.273" ry="18"/>
<text text-anchor="middle" x="182.727" y="-1094.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 6 DES SERIES MECONNUES 🤓</text>
</a>
</g>
</g>
<!-- OQloldjDS6w&#45;&gt;Hxho4NmIUi8 -->
<g id="edge6" class="edge"><title>OQloldjDS6w&#45;&gt;Hxho4NmIUi8</title>
<path fill="none" stroke="black" d="M238.435,-1151.7C229.295,-1143.05 218.087,-1132.45 208.127,-1123.03"/>
<polygon fill="black" stroke="black" points="210.479,-1120.43 200.809,-1116.1 205.668,-1125.52 210.479,-1120.43"/>
</g>
<!-- MgxGVSxIQbY -->
<g id="node8" class="node"><title>MgxGVSxIQbY</title>
<g id="a_node8"><a xlink:href="https://youtu.be/MgxGVSxIQbY" xlink:title="La liste de tous mes 📀 DVD 📀">
<ellipse fill="none" stroke="black" cx="363.727" cy="-1026" rx="126.978" ry="18"/>
<text text-anchor="middle" x="363.727" y="-1022.3" font-family="Times,serif" font-size="14.00" fill="blue">La liste de tous mes 📀 DVD 📀</text>
</a>
</g>
</g>
<!-- OQloldjDS6w&#45;&gt;MgxGVSxIQbY -->
<g id="edge7" class="edge"><title>OQloldjDS6w&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M299.742,-1152.06C316.134,-1143.57 333.543,-1131.68 344.727,-1116 357.594,-1097.96 362.065,-1072.97 363.478,-1054.07"/>
<polygon fill="black" stroke="black" points="366.977,-1054.17 363.99,-1044 359.986,-1053.81 366.977,-1054.17"/>
</g>
<!-- cUAPNwbZNzg -->
<g id="node9" class="node"><title>cUAPNwbZNzg</title>
<g id="a_node9"><a xlink:href="https://youtu.be/cUAPNwbZNzg" xlink:title="1 avril 2017 : présentation des règles">
<ellipse fill="none" stroke="black" cx="627.727" cy="-1458" rx="141.875" ry="18"/>
<text text-anchor="middle" x="627.727" y="-1454.3" font-family="Times,serif" font-size="14.00" fill="blue">1 avril 2017 : présentation des règles</text>
</a>
</g>
</g>
<!-- TabnloyIsz8&#45;&gt;cUAPNwbZNzg -->
<g id="edge8" class="edge"><title>TabnloyIsz8&#45;&gt;cUAPNwbZNzg</title>
<path fill="none" stroke="black" d="M607.401,-1511.7C610.442,-1503.81 614.11,-1494.3 617.488,-1485.55"/>
<polygon fill="black" stroke="black" points="620.797,-1486.69 621.13,-1476.1 614.266,-1484.17 620.797,-1486.69"/>
</g>
<!-- t2sBrJB0dCY&#45;&gt;OQloldjDS6w -->
<g id="edge9" class="edge"><title>t2sBrJB0dCY&#45;&gt;OQloldjDS6w</title>
<path fill="none" stroke="black" d="M488.253,-1225.2C443.228,-1214.66 383.827,-1200.76 336.466,-1189.67"/>
<polygon fill="black" stroke="black" points="337.087,-1186.22 326.552,-1187.35 335.491,-1193.03 337.087,-1186.22"/>
</g>
<!-- gNO13ad_KpY -->
<g id="node13" class="node"><title>gNO13ad_KpY</title>
<g id="a_node13"><a xlink:href="https://youtu.be/gNO13ad_KpY" xlink:title="Une vidéo satisfaisante... 😌">
<ellipse fill="none" stroke="black" cx="643.727" cy="-1170" rx="112.38" ry="18"/>
<text text-anchor="middle" x="643.727" y="-1166.3" font-family="Times,serif" font-size="14.00" fill="blue">Une vidéo satisfaisante... 😌</text>
</a>
</g>
</g>
<!-- t2sBrJB0dCY&#45;&gt;gNO13ad_KpY -->
<g id="edge10" class="edge"><title>t2sBrJB0dCY&#45;&gt;gNO13ad_KpY</title>
<path fill="none" stroke="black" d="M577.03,-1224.05C588.271,-1215.11 602.235,-1204.01 614.476,-1194.27"/>
<polygon fill="black" stroke="black" points="616.974,-1196.75 622.621,-1187.79 612.616,-1191.28 616.974,-1196.75"/>
</g>
<!-- EZjqL8kSkCE&#45;&gt;OQloldjDS6w -->
<g id="edge12" class="edge"><title>EZjqL8kSkCE&#45;&gt;OQloldjDS6w</title>
<path fill="none" stroke="black" d="M399.508,-1296.15C370.842,-1271.03 316.762,-1223.62 284.012,-1194.92"/>
<polygon fill="black" stroke="black" points="286.001,-1192.01 276.174,-1188.05 281.387,-1197.27 286.001,-1192.01"/>
</g>
<!-- EZjqL8kSkCE&#45;&gt;t2sBrJB0dCY -->
<g id="edge11" class="edge"><title>EZjqL8kSkCE&#45;&gt;t2sBrJB0dCY</title>
<path fill="none" stroke="black" d="M451.194,-1296.41C469.996,-1286.8 493.86,-1274.61 514.038,-1264.3"/>
<polygon fill="black" stroke="black" points="515.706,-1267.38 523.018,-1259.71 512.521,-1261.15 515.706,-1267.38"/>
</g>
<!-- Hxho4NmIUi8&#45;&gt;MgxGVSxIQbY -->
<g id="edge14" class="edge"><title>Hxho4NmIUi8&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M225.164,-1080.59C251.335,-1070.47 285.06,-1057.42 312.686,-1046.74"/>
<polygon fill="black" stroke="black" points="314.117,-1049.94 322.181,-1043.07 311.592,-1043.41 314.117,-1049.94"/>
</g>
<!-- Sw_iXCxB3Aw -->
<g id="node10" class="node"><title>Sw_iXCxB3Aw</title>
<g id="a_node10"><a xlink:href="https://youtu.be/Sw_iXCxB3Aw" xlink:title="TOP 4 DES FILMS LES PLUS SURÉVALUÉS 😤">
<ellipse fill="none" stroke="black" cx="497.727" cy="-666" rx="194.166" ry="18"/>
<text text-anchor="middle" x="497.727" y="-662.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 4 DES FILMS LES PLUS SURÉVALUÉS 😤</text>
</a>
</g>
</g>
<!-- Hxho4NmIUi8&#45;&gt;Sw_iXCxB3Aw -->
<g id="edge13" class="edge"><title>Hxho4NmIUi8&#45;&gt;Sw_iXCxB3Aw</title>
<path fill="none" stroke="black" d="M185.709,-1079.96C191.35,-1049.91 205.088,-985.963 227.727,-936 279.134,-822.546 400.928,-730.495 461.799,-689.715"/>
<polygon fill="black" stroke="black" points="463.915,-692.511 470.323,-684.074 460.052,-686.674 463.915,-692.511"/>
</g>
<!-- vX1CVTDopo0 -->
<g id="node11" class="node"><title>vX1CVTDopo0</title>
<g id="a_node11"><a xlink:href="https://youtu.be/vX1CVTDopo0" xlink:title="La liste de tous mes 📀 DVD 📀">
<ellipse fill="none" stroke="black" cx="363.727" cy="-954" rx="126.978" ry="18"/>
<text text-anchor="middle" x="363.727" y="-950.3" font-family="Times,serif" font-size="14.00" fill="blue">La liste de tous mes 📀 DVD 📀</text>
</a>
</g>
</g>
<!-- MgxGVSxIQbY&#45;&gt;vX1CVTDopo0 -->
<g id="edge15" class="edge"><title>MgxGVSxIQbY&#45;&gt;vX1CVTDopo0</title>
<path fill="none" stroke="black" d="M357.811,-1007.7C357.016,-999.983 356.789,-990.712 357.132,-982.112"/>
<polygon fill="black" stroke="black" points="360.626,-982.324 357.832,-972.104 353.643,-981.836 360.626,-982.324"/>
</g>
<!-- 54aErO8O6g0 -->
<g id="node12" class="node"><title>54aErO8O6g0</title>
<g id="a_node12"><a xlink:href="https://youtu.be/54aErO8O6g0" xlink:title="TOP 10 DES FILMS DE SCIENCE FICTION 👾">
<ellipse fill="none" stroke="black" cx="491.727" cy="-882" rx="188.467" ry="18"/>
<text text-anchor="middle" x="491.727" y="-878.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 10 DES FILMS DE SCIENCE FICTION 👾</text>
</a>
</g>
</g>
<!-- MgxGVSxIQbY&#45;&gt;54aErO8O6g0 -->
<g id="edge16" class="edge"><title>MgxGVSxIQbY&#45;&gt;54aErO8O6g0</title>
<path fill="none" stroke="black" d="M435.577,-1011.06C456.768,-1003.24 477.714,-991.037 490.727,-972 503.063,-953.953 499.395,-928.81 495.105,-909.849"/>
<polygon fill="black" stroke="black" points="498.488,-908.946 492.755,-900.036 491.68,-910.576 498.488,-908.946"/>
</g>
<!-- cUAPNwbZNzg&#45;&gt;Ao990NQwn1Y -->
<g id="edge17" class="edge"><title>cUAPNwbZNzg&#45;&gt;Ao990NQwn1Y</title>
<path fill="none" stroke="black" d="M582.5,-1440.76C551.84,-1429.76 511.39,-1415.24 480.255,-1404.06"/>
<polygon fill="black" stroke="black" points="481.093,-1400.64 470.499,-1400.56 478.728,-1407.23 481.093,-1400.64"/>
</g>
<!-- cUAPNwbZNzg&#45;&gt;54aErO8O6g0 -->
<g id="edge18" class="edge"><title>cUAPNwbZNzg&#45;&gt;54aErO8O6g0</title>
<path fill="none" stroke="black" d="M688.711,-1441.68C710.654,-1433.57 734.076,-1421.54 750.727,-1404 779.776,-1373.41 783.727,-1357.19 783.727,-1315 783.727,-1315 783.727,-1315 783.727,-1025 783.727,-949.472 703.742,-914.106 627.496,-897.551"/>
<polygon fill="black" stroke="black" points="627.758,-894.031 617.256,-895.433 626.34,-900.886 627.758,-894.031"/>
</g>
<!-- U5swVaaiDI0 -->
<g id="node14" class="node"><title>U5swVaaiDI0</title>
<g id="a_node14"><a xlink:href="https://youtu.be/U5swVaaiDI0" xlink:title="Lien exemple, ne pas cliquer">
<ellipse fill="none" stroke="black" cx="627.727" cy="-1386" rx="113.98" ry="18"/>
<text text-anchor="middle" x="627.727" y="-1382.3" font-family="Times,serif" font-size="14.00" fill="blue">Lien exemple, ne pas cliquer</text>
</a>
</g>
</g>
<!-- cUAPNwbZNzg&#45;&gt;U5swVaaiDI0 -->
<g id="edge19" class="edge"><title>cUAPNwbZNzg&#45;&gt;U5swVaaiDI0</title>
<path fill="none" stroke="black" d="M621.811,-1439.7C621.016,-1431.98 620.789,-1422.71 621.132,-1414.11"/>
<polygon fill="black" stroke="black" points="624.626,-1414.32 621.832,-1404.1 617.643,-1413.84 624.626,-1414.32"/>
</g>
<!-- Sw_iXCxB3Aw&#45;&gt;54aErO8O6g0 -->
<g id="edge20" class="edge"><title>Sw_iXCxB3Aw&#45;&gt;54aErO8O6g0</title>
<path fill="none" stroke="black" d="M497.244,-684.232C496.204,-721.324 493.746,-808.981 492.492,-853.712"/>
<polygon fill="black" stroke="black" points="488.99,-853.755 492.208,-863.849 495.987,-853.951 488.99,-853.755"/>
</g>
<!-- gGaqlwG1jOU -->
<g id="node15" class="node"><title>gGaqlwG1jOU</title>
<g id="a_node15"><a xlink:href="https://youtu.be/gGaqlwG1jOU" xlink:title="Unboxing n°2 &#160;✂📦">
<ellipse fill="none" stroke="black" cx="388.727" cy="-594" rx="83.3857" ry="18"/>
<text text-anchor="middle" x="388.727" y="-590.3" font-family="Times,serif" font-size="14.00" fill="blue">Unboxing n°2 &#160;✂📦</text>
</a>
</g>
</g>
<!-- Sw_iXCxB3Aw&#45;&gt;gGaqlwG1jOU -->
<g id="edge21" class="edge"><title>Sw_iXCxB3Aw&#45;&gt;gGaqlwG1jOU</title>
<path fill="none" stroke="black" d="M471.341,-648.055C456.669,-638.632 438.253,-626.805 422.534,-616.711"/>
<polygon fill="black" stroke="black" points="424.425,-613.766 414.12,-611.307 420.643,-619.656 424.425,-613.766"/>
</g>
<!-- vX1CVTDopo0&#45;&gt;MgxGVSxIQbY -->
<g id="edge22" class="edge"><title>vX1CVTDopo0&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M369.622,-972.104C370.428,-979.791 370.664,-989.054 370.331,-997.665"/>
<polygon fill="black" stroke="black" points="366.836,-997.48 369.643,-1007.7 373.819,-997.96 366.836,-997.48"/>
</g>
<!-- vX1CVTDopo0&#45;&gt;54aErO8O6g0 -->
<g id="edge23" class="edge"><title>vX1CVTDopo0&#45;&gt;54aErO8O6g0</title>
<path fill="none" stroke="black" d="M394.061,-936.411C411.342,-926.961 433.201,-915.007 451.855,-904.805"/>
<polygon fill="black" stroke="black" points="453.627,-907.825 460.722,-899.956 450.268,-901.684 453.627,-907.825"/>
</g>
<!-- 54aErO8O6g0&#45;&gt;MgxGVSxIQbY -->
<g id="edge25" class="edge"><title>54aErO8O6g0&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M505.758,-900.036C515.488,-919.254 523.347,-950.611 508.727,-972 496.753,-989.518 478.06,-1001.25 458.012,-1009.1"/>
<polygon fill="black" stroke="black" points="456.636,-1005.87 448.405,-1012.55 459,-1012.46 456.636,-1005.87"/>
</g>
<!-- DIdfsbSHc5k -->
<g id="node16" class="node"><title>DIdfsbSHc5k</title>
<g id="a_node16"><a xlink:href="https://youtu.be/DIdfsbSHc5k" xlink:title="TOPCEPTION DES 5 FILMS DE MES 6 RÉALISATEURS PRÉFÉRÉS 🤒">
<ellipse fill="none" stroke="black" cx="1011.73" cy="-810" rx="284.05" ry="18"/>
<text text-anchor="middle" x="1011.73" y="-806.3" font-family="Times,serif" font-size="14.00" fill="blue">TOPCEPTION DES 5 FILMS DE MES 6 RÉALISATEURS PRÉFÉRÉS 🤒</text>
</a>
</g>
</g>
<!-- 54aErO8O6g0&#45;&gt;DIdfsbSHc5k -->
<g id="edge24" class="edge"><title>54aErO8O6g0&#45;&gt;DIdfsbSHc5k</title>
<path fill="none" stroke="black" d="M596.019,-866.961C679.808,-855.681 797.753,-839.804 886.62,-827.841"/>
<polygon fill="black" stroke="black" points="887.318,-831.279 896.761,-826.476 886.384,-824.342 887.318,-831.279"/>
</g>
<!-- U5swVaaiDI0&#45;&gt;cUAPNwbZNzg -->
<g id="edge26" class="edge"><title>U5swVaaiDI0&#45;&gt;cUAPNwbZNzg</title>
<path fill="none" stroke="black" d="M633.622,-1404.1C634.428,-1411.79 634.664,-1421.05 634.331,-1429.67"/>
<polygon fill="black" stroke="black" points="630.836,-1429.48 633.643,-1439.7 637.819,-1429.96 630.836,-1429.48"/>
</g>
<!-- gGaqlwG1jOU&#45;&gt;vX1CVTDopo0 -->
<g id="edge27" class="edge"><title>gGaqlwG1jOU&#45;&gt;vX1CVTDopo0</title>
<path fill="none" stroke="black" d="M346.204,-609.724C327.752,-618.182 307.487,-630.64 294.727,-648 270.772,-680.59 275.727,-696.553 275.727,-737 275.727,-811 275.727,-811 275.727,-811 275.727,-851.447 273.138,-865.797 294.727,-900 302.245,-911.909 313.438,-922.174 324.634,-930.412"/>
<polygon fill="black" stroke="black" points="322.923,-933.485 333.134,-936.31 326.914,-927.734 322.923,-933.485"/>
</g>
<!-- 3p8UjydB3uo -->
<g id="node17" class="node"><title>3p8UjydB3uo</title>
<g id="a_node17"><a xlink:href="https://youtu.be/3p8UjydB3uo" xlink:title="TOP 5 DES FILMS MÉCONNUS 😯">
<ellipse fill="none" stroke="black" cx="306.727" cy="-522" rx="146.474" ry="18"/>
<text text-anchor="middle" x="306.727" y="-518.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 5 DES FILMS MÉCONNUS 😯</text>
</a>
</g>
</g>
<!-- gGaqlwG1jOU&#45;&gt;3p8UjydB3uo -->
<g id="edge28" class="edge"><title>gGaqlwG1jOU&#45;&gt;3p8UjydB3uo</title>
<path fill="none" stroke="black" d="M369.294,-576.411C358.828,-567.476 345.74,-556.303 334.243,-546.489"/>
<polygon fill="black" stroke="black" points="336.468,-543.787 326.59,-539.956 331.923,-549.111 336.468,-543.787"/>
</g>
<!-- DIdfsbSHc5k&#45;&gt;MgxGVSxIQbY -->
<g id="edge30" class="edge"><title>DIdfsbSHc5k&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M987.924,-828.184C940.093,-861.784 827.8,-936.035 721.727,-972 646.865,-997.382 559.119,-1010.62 489.233,-1017.51"/>
<polygon fill="black" stroke="black" points="488.677,-1014.05 479.056,-1018.49 489.343,-1021.02 488.677,-1014.05"/>
</g>
<!-- &#45;kSgJdYLaUg -->
<g id="node18" class="node"><title>&#45;kSgJdYLaUg</title>
<g id="a_node18"><a xlink:href="https://youtu.be/-kSgJdYLaUg" xlink:title="TOP 9 DES FILMS D&#39;ARTS MARTIAUX 👊">
<ellipse fill="none" stroke="black" cx="699.727" cy="-738" rx="175.469" ry="18"/>
<text text-anchor="middle" x="699.727" y="-734.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 9 DES FILMS D&#39;ARTS MARTIAUX 👊</text>
</a>
</g>
</g>
<!-- DIdfsbSHc5k&#45;&gt;&#45;kSgJdYLaUg -->
<g id="edge29" class="edge"><title>DIdfsbSHc5k&#45;&gt;&#45;kSgJdYLaUg</title>
<path fill="none" stroke="black" d="M938.577,-792.588C890.722,-781.851 828.213,-767.827 779.147,-756.818"/>
<polygon fill="black" stroke="black" points="779.73,-753.362 769.206,-754.588 778.197,-760.193 779.73,-753.362"/>
</g>
<!-- 3p8UjydB3uo&#45;&gt;MgxGVSxIQbY -->
<g id="edge32" class="edge"><title>3p8UjydB3uo&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M282.179,-539.815C250.589,-563.662 199.727,-610.518 199.727,-665 199.727,-811 199.727,-811 199.727,-811 199.727,-883.63 181.737,-915.786 227.727,-972 241.302,-988.593 260.758,-1000.01 280.725,-1007.85"/>
<polygon fill="black" stroke="black" points="279.635,-1011.18 290.229,-1011.32 282.033,-1004.6 279.635,-1011.18"/>
</g>
<!-- puHJLuBGsXU -->
<g id="node19" class="node"><title>puHJLuBGsXU</title>
<g id="a_node19"><a xlink:href="https://youtu.be/puHJLuBGsXU" xlink:title="TOP 5 DES COMEDIES MUSICALES 🎼">
<ellipse fill="none" stroke="black" cx="286.727" cy="-450" rx="164.371" ry="18"/>
<text text-anchor="middle" x="286.727" y="-446.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 5 DES COMEDIES MUSICALES 🎼</text>
</a>
</g>
</g>
<!-- 3p8UjydB3uo&#45;&gt;puHJLuBGsXU -->
<g id="edge31" class="edge"><title>3p8UjydB3uo&#45;&gt;puHJLuBGsXU</title>
<path fill="none" stroke="black" d="M301.783,-503.697C299.555,-495.898 296.873,-486.509 294.393,-477.829"/>
<polygon fill="black" stroke="black" points="297.727,-476.758 291.614,-468.104 290.996,-478.681 297.727,-476.758"/>
</g>
<!-- &#45;kSgJdYLaUg&#45;&gt;MgxGVSxIQbY -->
<g id="edge34" class="edge"><title>&#45;kSgJdYLaUg&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M703.831,-756.132C710.353,-787.737 719.429,-856.001 688.727,-900 640.902,-968.538 549.95,-999.505 476.399,-1013.49"/>
<polygon fill="black" stroke="black" points="475.356,-1010.12 466.142,-1015.36 476.607,-1017.01 475.356,-1010.12"/>
</g>
<!-- &#45;kSgJdYLaUg&#45;&gt;Sw_iXCxB3Aw -->
<g id="edge33" class="edge"><title>&#45;kSgJdYLaUg&#45;&gt;Sw_iXCxB3Aw</title>
<path fill="none" stroke="black" d="M652.367,-720.588C623.325,-710.524 585.948,-697.572 555.216,-686.922"/>
<polygon fill="black" stroke="black" points="556.085,-683.519 545.49,-683.552 553.793,-690.133 556.085,-683.519"/>
</g>
<!-- puHJLuBGsXU&#45;&gt;MgxGVSxIQbY -->
<g id="edge36" class="edge"><title>puHJLuBGsXU&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M211.359,-466.127C189.307,-474.011 167.038,-485.951 151.727,-504 125.562,-534.844 132.727,-552.553 132.727,-593 132.727,-883 132.727,-883 132.727,-883 132.727,-954.083 213.094,-990.714 279.021,-1008.81"/>
<polygon fill="black" stroke="black" points="278.485,-1012.28 289.047,-1011.45 280.269,-1005.51 278.485,-1012.28"/>
</g>
<!-- MgemnP19JQA -->
<g id="node20" class="node"><title>MgemnP19JQA</title>
<g id="a_node20"><a xlink:href="https://youtu.be/MgemnP19JQA" xlink:title="TOP 10 DES PAGES WIKIPEDIA LES + VISITÉES 🌍">
<ellipse fill="none" stroke="black" cx="255.727" cy="-378" rx="215.262" ry="18"/>
<text text-anchor="middle" x="255.727" y="-374.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 10 DES PAGES WIKIPEDIA LES + VISITÉES 🌍</text>
</a>
</g>
</g>
<!-- puHJLuBGsXU&#45;&gt;MgemnP19JQA -->
<g id="edge35" class="edge"><title>puHJLuBGsXU&#45;&gt;MgemnP19JQA</title>
<path fill="none" stroke="black" d="M279.064,-431.697C275.536,-423.728 271.271,-414.1 267.358,-405.264"/>
<polygon fill="black" stroke="black" points="270.552,-403.831 263.302,-396.104 264.151,-406.665 270.552,-403.831"/>
</g>
<!-- MgemnP19JQA&#45;&gt;MgxGVSxIQbY -->
<g id="edge37" class="edge"><title>MgemnP19JQA&#45;&gt;MgxGVSxIQbY</title>
<path fill="none" stroke="black" d="M172.445,-394.733C150.607,-402.594 128.941,-414.369 113.727,-432 87.3029,-462.622 94.7272,-480.553 94.7272,-521 94.7272,-883 94.7272,-883 94.7272,-883 94.7272,-929.267 111.44,-944.609 148.727,-972 177.631,-993.233 214.021,-1006.03 248.602,-1013.72"/>
<polygon fill="black" stroke="black" points="248.276,-1017.22 258.781,-1015.85 249.711,-1010.37 248.276,-1017.22"/>
</g>
<!-- 9TEoWhqHgC8 -->
<g id="node21" class="node"><title>9TEoWhqHgC8</title>
<g id="a_node21"><a xlink:href="https://youtu.be/9TEoWhqHgC8" xlink:title="TOP 10 DES BONS GROS FILMS D&#39;ACTIONS 👉⚔🔫🎥">
<ellipse fill="none" stroke="black" cx="750.727" cy="-306" rx="223.66" ry="18"/>
<text text-anchor="middle" x="750.727" y="-302.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 10 DES BONS GROS FILMS D&#39;ACTIONS 👉⚔🔫🎥</text>
</a>
</g>
</g>
<!-- MgemnP19JQA&#45;&gt;9TEoWhqHgC8 -->
<g id="edge38" class="edge"><title>MgemnP19JQA&#45;&gt;9TEoWhqHgC8</title>
<path fill="none" stroke="black" d="M360.099,-362.24C440.643,-350.85 551.998,-335.103 635.215,-323.335"/>
<polygon fill="black" stroke="black" points="635.808,-326.786 645.22,-321.92 634.828,-319.855 635.808,-326.786"/>
</g>
<!-- 9TEoWhqHgC8&#45;&gt;DIdfsbSHc5k -->
<g id="edge39" class="edge"><title>9TEoWhqHgC8&#45;&gt;DIdfsbSHc5k</title>
<path fill="none" stroke="black" d="M807.899,-323.482C863.21,-343.353 938.727,-382.635 938.727,-449 938.727,-667 938.727,-667 938.727,-667 938.727,-711.966 968.039,-756.963 989.515,-783.896"/>
<polygon fill="black" stroke="black" points="986.836,-786.149 995.887,-791.655 992.245,-781.706 986.836,-786.149"/>
</g>
<!-- lDbkj6uMH00 -->
<g id="node22" class="node"><title>lDbkj6uMH00</title>
<g id="a_node22"><a xlink:href="https://youtu.be/lDbkj6uMH00" xlink:title="Unboxing n°1 &#160;✂📦">
<ellipse fill="none" stroke="black" cx="724.727" cy="-234" rx="83.3857" ry="18"/>
<text text-anchor="middle" x="724.727" y="-230.3" font-family="Times,serif" font-size="14.00" fill="blue">Unboxing n°1 &#160;✂📦</text>
</a>
</g>
</g>
<!-- 9TEoWhqHgC8&#45;&gt;lDbkj6uMH00 -->
<g id="edge40" class="edge"><title>9TEoWhqHgC8&#45;&gt;lDbkj6uMH00</title>
<path fill="none" stroke="black" d="M744.3,-287.697C741.372,-279.813 737.84,-270.304 734.587,-261.546"/>
<polygon fill="black" stroke="black" points="737.843,-260.26 731.08,-252.104 731.281,-262.697 737.843,-260.26"/>
</g>
<!-- lDbkj6uMH00&#45;&gt;gGaqlwG1jOU -->
<g id="edge41" class="edge"><title>lDbkj6uMH00&#45;&gt;gGaqlwG1jOU</title>
<path fill="none" stroke="black" d="M657.032,-244.502C604.304,-253.285 536.936,-268.001 517.727,-288 489.709,-317.171 498.727,-336.553 498.727,-377 498.727,-451 498.727,-451 498.727,-451 498.727,-493.838 488.275,-506.381 461.727,-540 452.106,-552.184 438.991,-562.879 426.53,-571.411"/>
<polygon fill="black" stroke="black" points="424.503,-568.554 418.059,-576.964 428.341,-574.409 424.503,-568.554"/>
</g>
<!-- AbfsEn_Ai2M -->
<g id="node23" class="node"><title>AbfsEn_Ai2M</title>
<g id="a_node23"><a xlink:href="https://youtu.be/AbfsEn_Ai2M" xlink:title="TOP 8 DES FILMS SUR LE VOYAGE DANS LE TEMPS 🕝🕒🕜🕖">
<ellipse fill="none" stroke="black" cx="724.727" cy="-162" rx="258.854" ry="18"/>
<text text-anchor="middle" x="724.727" y="-158.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 8 DES FILMS SUR LE VOYAGE DANS LE TEMPS 🕝🕒🕜🕖</text>
</a>
</g>
</g>
<!-- lDbkj6uMH00&#45;&gt;AbfsEn_Ai2M -->
<g id="edge42" class="edge"><title>lDbkj6uMH00&#45;&gt;AbfsEn_Ai2M</title>
<path fill="none" stroke="black" d="M718.811,-215.697C718.016,-207.983 717.789,-198.712 718.132,-190.112"/>
<polygon fill="black" stroke="black" points="721.626,-190.324 718.832,-180.104 714.643,-189.836 721.626,-190.324"/>
</g>
<!-- AbfsEn_Ai2M&#45;&gt;lDbkj6uMH00 -->
<g id="edge43" class="edge"><title>AbfsEn_Ai2M&#45;&gt;lDbkj6uMH00</title>
<path fill="none" stroke="black" d="M730.622,-180.104C731.428,-187.791 731.664,-197.054 731.331,-205.665"/>
<polygon fill="black" stroke="black" points="727.836,-205.48 730.643,-215.697 734.819,-205.96 727.836,-205.48"/>
</g>
<!-- 3OAdSASoYu0 -->
<g id="node24" class="node"><title>3OAdSASoYu0</title>
<g id="a_node24"><a xlink:href="https://youtu.be/3OAdSASoYu0" xlink:title="TOP 10 DES BONS GROS FILMS D&#39;ACTIONS 👉⚔🔫🎥">
<ellipse fill="none" stroke="black" cx="867.727" cy="-90" rx="223.66" ry="18"/>
<text text-anchor="middle" x="867.727" y="-86.3" font-family="Times,serif" font-size="14.00" fill="blue">TOP 10 DES BONS GROS FILMS D&#39;ACTIONS 👉⚔🔫🎥</text>
</a>
</g>
</g>
<!-- AbfsEn_Ai2M&#45;&gt;3OAdSASoYu0 -->
<g id="edge44" class="edge"><title>AbfsEn_Ai2M&#45;&gt;3OAdSASoYu0</title>
<path fill="none" stroke="black" d="M759.344,-144.055C778.841,-134.511 803.377,-122.5 824.171,-112.321"/>
<polygon fill="black" stroke="black" points="825.987,-115.329 833.43,-107.789 822.909,-109.042 825.987,-115.329"/>
</g>
<!-- 3OAdSASoYu0&#45;&gt;DIdfsbSHc5k -->
<g id="edge46" class="edge"><title>3OAdSASoYu0&#45;&gt;DIdfsbSHc5k</title>
<path fill="none" stroke="black" d="M937.273,-107.155C957.803,-115.103 978.547,-126.821 992.727,-144 1018.47,-175.193 1011.73,-192.553 1011.73,-233 1011.73,-667 1011.73,-667 1011.73,-667 1011.73,-707.004 1011.73,-753.347 1011.73,-781.92"/>
<polygon fill="black" stroke="black" points="1008.23,-781.951 1011.73,-791.951 1015.23,-781.951 1008.23,-781.951"/>
</g>
<!-- x6kjUMLpZaE -->
<g id="node25" class="node"><title>x6kjUMLpZaE</title>
<g id="a_node25"><a xlink:href="https://youtu.be/x6kjUMLpZaE" xlink:title="Unboxing n°1 ✂📦">
<ellipse fill="none" stroke="black" cx="867.727" cy="-18" rx="80.6858" ry="18"/>
<text text-anchor="middle" x="867.727" y="-14.3" font-family="Times,serif" font-size="14.00" fill="blue">Unboxing n°1 ✂📦</text>
</a>
</g>
</g>
<!-- 3OAdSASoYu0&#45;&gt;x6kjUMLpZaE -->
<g id="edge45" class="edge"><title>3OAdSASoYu0&#45;&gt;x6kjUMLpZaE</title>
<path fill="none" stroke="black" d="M867.727,-71.6966C867.727,-63.9827 867.727,-54.7125 867.727,-46.1124"/>
<polygon fill="black" stroke="black" points="871.227,-46.1043 867.727,-36.1043 864.227,-46.1044 871.227,-46.1043"/>
</g>
</g>
</svg>
</body>
</html>

479
public/style.css
View File

@ -1,8 +1,477 @@
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
/**
* Font loading
*/
@font-face
{
font-family: 'Equity';
src: url('fonts/equity/equity_text_b_regular.woff2') format('woff2'),
url('fonts/equity/equity_text_b_regular.woff') format('woff');
}
a {
color: #00B7FF;
@font-face
{
font-family: 'Equity';
font-style: italic;
src: url('fonts/equity/equity_text_b_italic.woff2') format('woff2'),
url('fonts/equity/equity_text_b_italic.woff') format('woff');
}
@font-face
{
font-family: 'Concourse';
src: url('fonts/concourse/concourse_c3_regular.woff2') format('woff2'),
url('fonts/concourse/concourse_c3_regular.woff') format('woff');
}
/**
* Common values
*/
:root
{
/* text and element colors */
--text-color: #333;
--text-accent-color: #675148;
--background-color: #f0f0f0;
--background-lighter-color: #fafafa;
/* grid base */
--base-unit: 30px;
/* fonts */
--size-m1: .8rem;
--size-0: 21px;
--size-1: 1.666rem;
--size-2: 3rem;
--font-display: 'Concourse';
--font-main: 'Equity';
}
/**
* Common elements
*/
body
{
font-family: var(--font-main);
font-size: var(--size-0);
line-height: var(--base-unit);
color: var(--text-color);
width: 15cm;
margin: calc(4 * var(--base-unit)) auto;
background: var(--background-color);
text-align: justify;
hyphens: auto;
}
@media screen and (max-width: 900px)
{
body
{
width: 100%;
padding: 0 calc(4 * var(--base-unit));
}
br.flexible
{
display: none;
}
}
@media screen and (max-width: 500px)
{
body
{
padding: 0 calc(2 * var(--base-unit));
}
}
h1, h2
{
font-family: var(--font-display);
text-transform: lowercase;
}
h3, h4, h5, h6
{
font-family: var(--font-main);
}
h1, h2, h3, h4, h5, h6
{
text-align: left;
hyphens: none;
font-weight: normal;
color: var(--text-accent-color);
}
h1
{
font-size: var(--size-2);
line-height: calc(2 * var(--base-unit));
margin: calc(2 * var(--base-unit)) 0 var(--base-unit) 0;
}
h2
{
font-size: var(--size-1);
line-height: calc(1.5 * var(--base-unit));
margin: calc(2 * var(--base-unit)) 0 var(--base-unit) 0;
}
h3
{
font-size: var(--size-0);
line-height: var(--base-unit);
margin: var(--base-unit) 0 calc(.5 * var(--base-unit)) 0;
}
h4, h5, h6
{
margin: var(--base-unit) 0 0 0;
}
a
{
color: inherit;
text-underline-offset: 4px;
}
a:hover
{
color: var(--text-accent-color);
}
p, ul, ol
{
margin: 0 0 var(--base-unit) 0;
}
.note
{
font-size: var(--size-m1);
line-height: calc(var(--base-unit) * 0.7);
}
ul, ol
{
padding: 0;
list-style-position: outside;
}
ul
{
list-style: none;
}
input, textarea
{
display: block;
width: 100%;
font-family: var(--font-main);
font-size: var(--size-0);
line-height: var(--base-unit);
background: var(--background-lighter-color);
color: var(--text-color);
border: 1px solid currentColor;
padding:
calc(.25 * var(--base-unit))
calc(.5 * var(--base-unit));
margin:
calc(.25 * var(--base-unit))
0 0 0;
}
textarea
{
resize: vertical;
height: 8em;
}
input:focus, textarea:focus
{
outline: 1px solid currentColor;
}
input[type="submit"], button
{
cursor: pointer;
}
blockquote, .blockstrong
{
margin: calc(2 * var(--base-unit)) 0
calc(2 * var(--base-unit)) 0;
padding: var(--base-unit);
border-radius: 2px;
background: white;
position: relative;
}
@media screen and (min-width: 501px)
{
blockquote::before
{
content: "“";
display: inline-block;
position: absolute;
top: var(--base-unit);
left: calc(-2.5 * var(--base-unit));
font-size: var(--size-2);
}
blockquote:lang(fr)::before
{
content: "«";
}
blockquote::after
{
content: "”";
display: inline-block;
position: absolute;
bottom: var(--base-unit);
right: calc(-2.5 * var(--base-unit));
font-size: var(--size-2);
}
blockquote:lang(fr)::after
{
content: "»";
}
}
@media screen and (max-width: 500px)
{
blockquote p:first-of-type::before
{
content: "“";
}
blockquote:lang(fr) p:first-of-type::before
{
content: "« ";
}
blockquote p:last-of-type::after
{
content: "”";
}
blockquote:lang(fr) p:last-of-type::after
{
content: " »";
}
}
blockquote footer
{
margin-top: var(--base-unit);
}
.blockstrong :last-child
{
margin-bottom: 0;
}
*, *::before, *::after
{
box-sizing: border-box;
}
/**
* Language switcher
*/
.language-switcher
{
float: right;
padding-left: calc(2 * var(--base-unit));
margin-top: .8rem;
}
.language-switcher .active
{
color: var(--text-accent-color);
}
/**
* Name and avatar
*/
.avatar
{
width: calc(4 * var(--base-unit));
border-radius: 100%;
float: left;
margin:
.3rem /* to improve alignment with neighboring title */
0 0
calc(-6 * var(--base-unit));
}
@media screen and (max-width: 900px)
{
.avatar
{
display: block;
float: none;
margin: 0 0 var(--base-unit) 0;
}
}
/**
* Columns
*/
.columns
{
display: flex;
justify-content: space-between;
}
.column
{
width: 45%;
}
@media screen and (max-width: 500px)
{
.columns
{
display: block;
}
.column
{
width: 100%;
}
}
/* Workaround no margin collapsing for flex items */
@media screen and (min-width: 501px)
{
.column :first-child
{
margin-top: 0;
}
.column :last-child
{
margin-bottom: 0;
}
}
/**
* Boids
*/
#boids-canvas
{
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/**
* Books
*/
.book
{
display: flex;
text-align: left;
align-items: top;
}
.book-cover
{
line-height: 0px;
margin: 0 var(--base-unit) 0 0;
flex: 0 0 calc(4 * var(--base-unit));
}
.book-cover img
{
width: 100%;
}
.book-details dt
{
font-family: "Concourse";
text-transform: lowercase;
}
.book-details dt, .book-details dd
{
display: block;
margin: 0;
float: left;
}
.book-details dt
{
width: 7ch;
clear: both;
}
.book-details dt:lang(en)::after
{
content: ":";
}
.book-details dt:lang(fr)::after
{
content: " :";
}
.book-details::after
{
content: "";
display: block;
clear: both;
}
.book-description h3
{
margin: 0;
}
.book-description address
{
margin-bottom: var(--base-unit);
}
@media screen and (max-width: 500px)
{
.book
{
flex-direction: column;
align-items: stretch;
}
.book-cover
{
margin: 0 0 var(--base-unit) 0;
}
}

18
public/style2.css
View File

@ -1,18 +0,0 @@
html
{
margin: 0;
padding: 0;
}
body
{
padding: 4em 6em;
font-family: sans-serif;
}
hr
{
border: 0;
border-bottom: 1px solid black;
margin-bottom: 2em;
}

31
routes/mazes.mjs
View File

@ -9,6 +9,37 @@ const statusPending = Symbol('PENDING');
const statusError = Symbol('ERROR');
const cache = Object.create(null);
// Extract the video ID from a YouTube URL
const YOUTUBE_URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^?&]+)/;
const YOUTUBE_SHORT_URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtu\.be\/([^?&]+)/;
router.post('/', (req, res) => {
if (req.body.url === '')
{
res.redirect('/');
return;
}
const url = req.body.url.match(YOUTUBE_URL_REGEX);
if (url !== null)
{
res.redirect(`/mazes/${url[1]}`);
return;
}
const shortURL = req.body.url.match(YOUTUBE_SHORT_URL_REGEX);
if (shortURL !== null)
{
res.redirect(`/mazes/${shortURL[1]}`);
return;
}
res.redirect(`/mazes/${req.body.url}`);
});
// Generate the graph for a given video ID
router.get('/:videoId', async (req, res) => {
const {videoId} = req.params;