Use "Javascript include" for filters.

diff --git a/2019-fosdem/4300-about-nbdkit-filters.html b/2019-fosdem/4300-about-nbdkit-filters.html
index 5c95c1c..359c8e1 100644 (file)
--- a/2019-fosdem/4300-about-nbdkit-filters.html
+++ b/2019-fosdem/4300-about-nbdkit-filters.html
@@ -4,24 +4,9 @@
 
 <h1>nbdkit &mdash; filters</h1>
 
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
-
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+<script>
+filters("1")
+</script>
 
 <p></p>
 

diff --git a/2019-fosdem/4400-about-nbdkit-filters-today.html b/2019-fosdem/4400-about-nbdkit-filters-today.html
index a71f23e..d9bb1cd 100644 (file)
--- a/2019-fosdem/4400-about-nbdkit-filters-today.html
+++ b/2019-fosdem/4400-about-nbdkit-filters-today.html
@@ -4,33 +4,13 @@
 
 <h1>nbdkit &mdash; filters</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
-
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;"><b>cow</b></code>
-  <code style="position: absolute; top: 140px; left: 10px;"><b>delay</b></code>
-  <code style="position: absolute; top: 180px; left: 100px;"><b>error</b></code>
+<script>
+filters("1")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;"><b>log</b></code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter1-delay").classList.add("highlighted")
+document.getElementById("filter1-error").classList.add("highlighted")
+document.getElementById("filter1-log").classList.add("highlighted")
+</script>
 
 <p></p>
 

diff --git a/2019-fosdem/4500-about-nbdkit-layers.html b/2019-fosdem/4500-about-nbdkit-layers.html
index f977e3a..8ba4783 100644 (file)
--- a/2019-fosdem/4500-about-nbdkit-layers.html
+++ b/2019-fosdem/4500-about-nbdkit-layers.html
@@ -4,69 +4,20 @@
 
 <h1>nbdkit &mdash; layers</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
-
-<div style="background: #cfc; border: 2px solid rgb(204,0,0);
-            position: absolute; top: 80px; left: 32px;
-            width: 800px; height: 220px;
-            transform: translate(-100px,-25px) scale(0.75,0.75);">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;"><b>cow</b></code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+<script>
+filters("1")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter1-cow").classList.add("highlighted")
 
-<div style="background: #cfc; border: 2px solid rgb(204,0,0);
-            position: absolute; top: 250px; left: 32px;
-            width: 800px; height: 220px;
-            transform: translate(-100px,-25px) scale(0.75,0.75);">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;"><b>delay</b></code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+filters("2")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter2-delay").classList.add("highlighted")
 
-<div style="background: #cfc; border: 2px solid rgb(204,0,0);
-            position: absolute; top: 420px; left: 32px;
-            width: 800px; height: 220px;
-            transform: translate(-100px,-25px) scale(0.75,0.75);">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+filters("3")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;"><b>partition</b></code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter3-partition").classList.add("highlighted")
 
-<script>
 plugins()
+
+document.getElementById("plugin-file").classList.add("highlighted")
 </script>

diff --git a/2019-fosdem/4600-about-nbdkit-layers-command.html b/2019-fosdem/4600-about-nbdkit-layers-command.html
index c780251..b62ef6d 100644 (file)
--- a/2019-fosdem/4600-about-nbdkit-layers-command.html
+++ b/2019-fosdem/4600-about-nbdkit-layers-command.html
@@ -4,70 +4,19 @@
 
 <h1>nbdkit &mdash; layers</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
-
-<div style="background: #cfc; border: 2px solid rgb(204,0,0);
-            position: absolute; top: 80px; left: 32px;
-            width: 800px; height: 220px;
-            transform: translate(-100px,-25px) scale(0.75,0.75);">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;"><b>cow</b></code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+<script>
+filters("1")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter1-cow").classList.add("highlighted")
 
-<div style="background: #cfc; border: 2px solid rgb(204,0,0);
-            position: absolute; top: 250px; left: 32px;
-            width: 800px; height: 220px;
-            transform: translate(-100px,-25px) scale(0.75,0.75);">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;"><b>delay</b></code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+filters("2")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter2-delay").classList.add("highlighted")
 
-<div style="background: #cfc; border: 2px solid rgb(204,0,0);
-            position: absolute; top: 420px; left: 32px;
-            width: 800px; height: 220px;
-            transform: translate(-100px,-25px) scale(0.75,0.75);">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+filters("3")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;"><b>partition</b></code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter3-partition").classList.add("highlighted")
 
-<script>
 plugins()
 
 document.getElementById("plugin-file").classList.add("highlighted")
@@ -76,22 +25,22 @@ document.getElementById("plugin-file").classList.add("highlighted")
 <pre
 style="position: absolute;
        top: 80px;
-       left: 650px;"
+       left: 850px;"
 >nbdkit --filter=cow \</pre>
 <pre
 style="position: absolute;
-       top: 250px;
-       left: 650px;"
+       top: 280px;
+       left: 850px;"
 >       --filter=delay \</pre>
 <pre
 style="position: absolute;
-       top: 420px;
-       left: 650px;"
+       top: 480px;
+       left: 850px;"
 >       --filter=partition \</pre>
 <pre
 style="position: absolute;
-       top: 595px;
-       left: 650px;"
->       xz file.xz \<br/>
+       top: 680px;
+       left: 850px;"
+>       file disk.img \<br/>
        partition=1 \<br/>
        rdelay=20ms</pre>

diff --git a/2019-fosdem/7000-visualization.html b/2019-fosdem/7000-visualization.html
index 5fee4da..62100f2 100644 (file)
--- a/2019-fosdem/7000-visualization.html
+++ b/2019-fosdem/7000-visualization.html
@@ -4,14 +4,15 @@
 
 <h1>Useful nbdkit plugins and filters for testing filesystems</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
+<script>
+filters("1")
+
+document.getElementById("filter1-delay").classList.add("highlighted")
+document.getElementById("filter1-error").classList.add("highlighted")
+document.getElementById("filter1-log").classList.add("highlighted")
+</script>
+
+<p></p>
 
 <script>
 plugins()
@@ -23,24 +24,3 @@ document.getElementById("plugin-iso").classList.add("highlighted")
 document.getElementById("plugin-memory").classList.add("highlighted")
 document.getElementById("plugin-sh").classList.add("highlighted")
 </script>
-
-<p></p>
-
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;"><b>delay</b></code>
-  <code style="position: absolute; top: 180px; left: 100px;"><b>error</b></code>
-
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;"><b>log</b></code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>

diff --git a/2019-fosdem/7100-delay-filter.html b/2019-fosdem/7100-delay-filter.html
index e0ba6c5..4ce3a3a 100644 (file)
--- a/2019-fosdem/7100-delay-filter.html
+++ b/2019-fosdem/7100-delay-filter.html
@@ -4,15 +4,6 @@
 
 <h1>Useful nbdkit filters: the delay filter</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
-
 <pre>
 nbdkit --filter=delay <i>[...]</i> rdelay=1
 
@@ -27,21 +18,8 @@ nbdkit --filter=delay <i>[...]</i> rdelay=100ms wdelay=50ms
 <li> Requests handled in parallel are delayed in parallel, as expected.
 </ul>
 
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;"><b>delay</b></code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+<script>
+filters("1")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter1-delay").classList.add("highlighted")
+</script>

diff --git a/2019-fosdem/7200-error-filter.html b/2019-fosdem/7200-error-filter.html
index 36e90f1..38d7c2f 100644 (file)
--- a/2019-fosdem/7200-error-filter.html
+++ b/2019-fosdem/7200-error-filter.html
@@ -4,15 +4,6 @@
 
 <h1>Useful nbdkit filters: the error filter</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
-
 <pre>
 nbdkit --filter=error <i>[...]</i> error=EIO error-rate=10%
 
@@ -28,21 +19,8 @@ an error file.
 <code>ESHUTDOWN</code>.
 </ul>
 
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;"><b>error</b></code>
+<script>
+filters("1")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;">log</code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter1-error").classList.add("highlighted")
+</script>

diff --git a/2019-fosdem/7300-log-filter.html b/2019-fosdem/7300-log-filter.html
index 13f3f1a..5a9c4c3 100644 (file)
--- a/2019-fosdem/7300-log-filter.html
+++ b/2019-fosdem/7300-log-filter.html
@@ -4,15 +4,6 @@
 
 <h1>Useful nbdkit filters: the log filter</h1>
 
-<style>
-b {
-    border: 1px solid rgb(204,0,0);
-    background: #eef;
-    padding: 5px;
-    border-radius: 15px;
-}
-</style>
-
 <pre>
 nbdkit --filter=log <i>[...]</i> logfile=/tmp/log
 </pre>
@@ -31,21 +22,8 @@ nbdkit --filter=log <i>[...]</i> logfile=/tmp/log
 2018-11-16 10:55:21.447197 connection=2 ...Read id=5 return=0 (Success)
 </pre>
 
-<!-- note: div must have position: relative so child elements position
-     is correct -->
-<div style="background: #cfc; border: 1px solid rgb(204,0,0);
-            position:relative;
-            width: 800px; height: 220px;">
-  <code style="position: absolute; top: 1px; left: 50px;">blocksize</code>
-  <code style="position: absolute; top: 50px; left: 100px;">cache</code>
-  <code style="position: absolute; top: 80px; left: 115px;">cow</code>
-  <code style="position: absolute; top: 140px; left: 10px;">delay</code>
-  <code style="position: absolute; top: 180px; left: 100px;">error</code>
+<script>
+filters("1")
 
-  <code style="position: absolute; top: 10px; left: 400px;">fua</code>
-  <code style="position: absolute; top: 60px; left: 600px;"><b>log</b></code>
-  <code style="position: absolute; top: 90px; left: 250px;">nozero</code>
-  <code style="position: absolute; top: 130px; left: 530px;">offset</code>
-  <code style="position: absolute; top: 150px; left: 280px;">partition</code>
-  <code style="position: absolute; top: 180px; left: 480px;">truncate</code>
-</div>
+document.getElementById("filter1-log").classList.add("highlighted")
+</script>

diff --git a/2019-fosdem/code.js b/2019-fosdem/code.js
index 749558c..261fc85 100644 (file)
--- a/2019-fosdem/code.js
+++ b/2019-fosdem/code.js
@@ -36,3 +36,26 @@ function plugins ()
 </div> \
 ");
 }
+
+function filters (layer)
+{
+    document.write ("\
+<div class=\"filters\"> \
+<p class=\"filtercaption\">filters available in nbdkit 1.10</p> \
+<ul> \
+<li id=\"filter" + layer + "-blocksize\"> blocksize \
+<li id=\"filter" + layer + "-cache\"> cache \
+<li id=\"filter" + layer + "-cow\"> cow \
+<li id=\"filter" + layer + "-delay\"> delay \
+<li id=\"filter" + layer + "-error\"> error \
+<li id=\"filter" + layer + "-fua\"> fua \
+<li id=\"filter" + layer + "-log\"> log \
+<li id=\"filter" + layer + "-nozero\"> nozero \
+<li id=\"filter" + layer + "-offset\"> offset \
+<li id=\"filter" + layer + "-partition\"> partition \
+<li id=\"filter" + layer + "-truncate\"> truncate \
+<li id=\"filter" + layer + "-xz\"> xz \
+</ul> \
+</div> \
+");
+}

diff --git a/2019-fosdem/style.css b/2019-fosdem/style.css
index 64a66b5..7235b7c 100644 (file)
--- a/2019-fosdem/style.css
+++ b/2019-fosdem/style.css
@@ -115,3 +115,46 @@ div.plugins ul li.highlighted {
     border-radius: 20px;
     font-weight: bold;
 }
+
+/* Filters box. */
+div.filters {
+    background: #f8fff8;
+    border: 1px solid rgb(204,0,0);
+    border-radius: 15px;
+    width: 800px;
+    height: 200px;
+    /* Position relative is needed so that items may be
+       positioned inside. */
+    position: relative;
+    column-count: 4;
+}
+
+div.filters p.filtercaption {
+    position: absolute;
+    bottom: -5px; right: 5px;
+    color: rgb(204,0,0);
+    text-align: right;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+div.filters ul {
+    list-style-type: none;
+    top: 50%;
+    transform: translateY(15%);
+    margin: 0;
+}
+
+div.filters ul li {
+    padding: 4px;
+    margin: 5px;
+}
+
+div.filters ul li.highlighted {
+    border: 1px solid rgb(204,0,0);
+    background: #fff;
+    padding-left: 10px;
+    color: rgb(204,0,0);
+    border-radius: 20px;
+    font-weight: bold;
+}