Re: Patches: Trivial (add div), Progressive Enhancement, Externalise CSS/JS

[Alex Sassmannshausen <alex.sassmannshausen@gmail.com>]

[-- Attachment #1: Type: text/plain, Size: 602 bytes --]


Hello,

Working on the second patch series, I still run into the problem with
(cute) or (dump-port).

    >> The alternative, inlining the CSS and JS in the resulting HTML,
    >> which is I think what was proposed, has been implemented as
    >> suggested, but I'm running into an error

    Ludovic> Can you send the backtrace that you get, and/or the error
    Ludovic> message?

Please find attached the error I get during compilation, and the patch
to get the code to the state where I'm at (to be applied after the
previous 3 patches I sent tonight).

Any help appreciated.

Best wishes,

Alex


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-list-packages-Externalise-CSS-file.patch --]
[-- Type: text/x-patch, Size: 9892 bytes --]

From d7aaff23102a5ecfe1f6a579b13360385b8f004b Mon Sep 17 00:00:00 2001
From: Alex Sassmannshausen <alex.sassmannshausen@gmail.com>
Date: Tue, 20 Aug 2013 01:38:30 +0200
Subject: [PATCH] list-packages: Externalise CSS file.

* build-aux/list-packages.scm (%load-directory): New variable.
  (%css-file): New variable.
  (%js-file): New variable.
  (insert-css): Read CSS from external file, and return object for sxml->xml.
  (insert-js): Read JS from external file, and return object for sxml->xml.
* build-aux/package-list.css: New CSS file.
* build-aux/package-list.js: New JS file.
---
 build-aux/list-packages.scm |  156 +++++++------------------------------------
 build-aux/package-list.css  |   74 ++++++++++++++++++++
 build-aux/package-list.js   |   43 ++++++++++++
 3 files changed, 142 insertions(+), 131 deletions(-)
 create mode 100644 build-aux/package-list.css
 create mode 100644 build-aux/package-list.js

diff --git a/build-aux/list-packages.scm b/build-aux/list-packages.scm
index 6303066..6ad66d4 100755
--- a/build-aux/list-packages.scm
+++ b/build-aux/list-packages.scm
@@ -27,11 +27,13 @@ exec guile -l "$0"                              \
   #:use-module (guix packages)
   #:use-module (guix licenses)
   #:use-module (guix gnu-maintenance)
+  #:use-module (guix build utils)
   #:use-module (gnu packages)
   #:use-module (sxml simple)
   #:use-module (web uri)
   #:use-module (ice-9 match)
   #:use-module (srfi srfi-1)
+  #:use-module (srfi srfi-26)
   #:export (list-packages))
 
 ;;; Commentary:
@@ -185,134 +187,25 @@ prep_pkg_descs even when the number of IDs is smaller than GROUP-COUNTER."
        "^")))
 
 \f
+(define %load-directory
+  (string-append (dirname (current-filename))))
+
+(define %css-file
+  "/package-list.css")
+(define %js-file
+  "/package-list.js")
+
 (define (insert-css)
-  "Return the CSS for the list-packages page."
-  (format #t
-"<style>
-/* license: CC0 */
-a {
-    transition: all 0.3s;
-}
-div#intro {
-    margin-bottom: 2em;
-}
-div#intro div, div#intro p {
-    padding:0.5em;
-}
-div#intro div {
-    float:left;
-}
-div#intro img {
-    float:left;
-    padding:0.75em;
-}
-table#packages, table#packages tr, table#packages tbody, table#packages td, table#packages th {
-    border: 0px solid black;
-    clear: both;
-}
-table#packages tr:nth-child(even) {
-    background-color: #FFF;
-}
-table#packages tr:nth-child(odd) {
-    background-color: #EEE;
-}
-table#packages tr:hover, table#packages tr:focus, table#packages tr:active {
-    background-color: #DDD;
-}
-table#packages tr:first-child, table#packages tr:first-child:hover, table#packages tr:first-child:focus, table#packages tr:first-child:active {
-    background-color: #333;
-    color: #fff;
-}
-table#packages td {
-    margin:0px;
-    padding:0.2em 0.5em;
-}
-table#packages td:first-child {
-    width:10%;
-    text-align:center;
-}
-table#packages td:nth-child(2) {
-    width:30%;
-}
-table#packages td:last-child {
-    width:60%;
-}
-img.package-logo {
-    float: left;
-    padding: 0.75em;
-}
-table#packages span {
-    font-weight: 700;
-}
-table#packages span a {
-    float: right;
-    font-weight: 500;
-}
-a#top {
-    position:fixed;
-    right:10px;
-    bottom:10px;
-    font-size:150%;
-    background-color:#EEE;
-    padding:10px 7.5px 0 7.5px;
-    text-decoration:none;
-    color:#000;
-    border-radius:5px;
-}
-a#top:hover, a#top:focus {
-    background-color:#333;
-    color:#fff;
-}
-</style>"))
+  "Return inlined CSS, sourced from %css-file."
+  `(style (@ (type "text/css"))
+     ,(with-input-from-file (string-append %load-directory %css-file)
+        (cute dump-port <> (current-output-port)))))
 
 (define (insert-js)
-  "Return the JavaScript for the list-packages page."
-  (format #t
-"<script type=\"text/javascript\">
-// license: CC0
-function show_hide(idThing)
-{
-  if(document.getElementById && document.createTextNode) {
-    var thing = document.getElementById(idThing);
-    /* Used to change the link text, depending on whether description is
-       collapsed or expanded */
-    var thingLink = thing.previousSibling.lastChild.firstChild;
-    if (thing) {
-      if (thing.style.display == \"none\") {
-        thing.style.display = \"\";
-        thingLink.data = 'Collapse';
-      } else {
-        thing.style.display = \"none\";
-        thingLink.data = 'Expand';
-      }
-    }
-  }
-}
-/* Add controllers used for collapse/expansion of package descriptions */
-function prep(idThing)
-{
-  var tdThing = document.getElementById(idThing).parentNode;
-  if (tdThing) {
-    var aThing = tdThing.firstChild.appendChild(document.createElement('a'));
-    aThing.setAttribute('href', 'javascript:void(0)');
-    aThing.setAttribute('title', 'show/hide package description');
-    aThing.appendChild(document.createTextNode('Expand'));
-    aThing.onclick=function(){show_hide(idThing);};
-    /* aThing.onkeypress=function(){show_hide(idThing);}; */
-  }
-}
-/* Take n element IDs, prepare them for javascript enhanced
-   display and hide the IDs by default. */
-function prep_pkg_descs()
-{
-  if(document.getElementById && document.createTextNode) {
-    for(var i=0; i<arguments.length; i++) {
-      prep(arguments[i])
-      show_hide(arguments[i]);
-    }
-  }
-}
-</script>"))
+  "Return inlined JS, sourced from %js-file."
+  `(style (@ (type "text/javascript"))
+     ,(with-input-from-file (string-append %load-directory %js-file)
+        (cute dump-port <> (current-output-port)))))
 
 \f
 (define (list-packages . args)
@@ -328,16 +221,17 @@ with gnu.org server-side include and all that."
   (let ((packages (sort (fold-packages cons '())
                         (lambda (p1 p2)
                           (string<? (package-name p1) (package-name p2))))))
-   (format #t "<!--#include virtual=\"/server/html5-header.html\" -->
+    (format #t "<!--#include virtual=\"/server/html5-header.html\" -->
 <!-- Parent-Version: 1.70 $ -->
 <title>GNU Guix - GNU Distribution - GNU Project</title>
 ")
-   (insert-css)
-   (insert-js)
-   (format #t "<!--#include virtual=\"/server/banner.html\" -->")
+    ;; Inline CSS and JS into the header of the HTML document.
+    (sxml->xml (insert-css))
+    (sxml->xml (insert-js))
+    (format #t "<!--#include virtual=\"/server/banner.html\" -->")
 
-   (sxml->xml (packages->sxml packages))
-   (format #t "</div>
+    (sxml->xml (packages->sxml packages))
+    (format #t "</div>
 <!--#include virtual=\"/server/footer.html\" -->
 <div id=\"footer\">
 
diff --git a/build-aux/package-list.css b/build-aux/package-list.css
new file mode 100644
index 0000000..6596aa6
--- /dev/null
+++ b/build-aux/package-list.css
@@ -0,0 +1,74 @@
+/* license: CC0 */
+a {
+    transition: all 0.3s;
+}
+div#intro {
+    margin-bottom: 2em;
+}
+div#intro div, div#intro p {
+    padding:0.5em;
+}
+div#intro div {
+    float:left;
+}
+div#intro img {
+    float:left;
+    padding:0.75em;
+}
+table#packages, table#packages tr, table#packages tbody, table#packages td, table#packages th {
+    border: 0px solid black;
+    clear: both;
+}
+table#packages tr:nth-child(even) {
+    background-color: #FFF;
+}
+table#packages tr:nth-child(odd) {
+    background-color: #EEE;
+}
+table#packages tr:hover, table#packages tr:focus, table#packages tr:active {
+    background-color: #DDD;
+}
+table#packages tr:first-child, table#packages tr:first-child:hover, table#packages tr:first-child:focus, table#packages tr:first-child:active {
+    background-color: #333;
+    color: #fff;
+}
+table#packages td {
+    margin:0px;
+    padding:0.2em 0.5em;
+}
+table#packages td:first-child {
+    width:10%;
+    text-align:center;
+}
+table#packages td:nth-child(2) {
+    width:30%;
+}
+table#packages td:last-child {
+    width:60%;
+}
+img.package-logo {
+    float: left;
+    padding: 0.75em;
+}
+table#packages span {
+    font-weight: 700;
+}
+table#packages span a {
+    float: right;
+    font-weight: 500;
+}
+a#top {
+    position:fixed;
+    right:10px;
+    bottom:10px;
+    font-size:150%;
+    background-color:#EEE;
+    padding:10px 7.5px 0 7.5px;
+    text-decoration:none;
+    color:#000;
+    border-radius:5px;
+}
+a#top:hover, a#top:focus {
+    background-color:#333;
+    color:#fff;
+}
diff --git a/build-aux/package-list.js b/build-aux/package-list.js
new file mode 100644
index 0000000..8b2971a
--- /dev/null
+++ b/build-aux/package-list.js
@@ -0,0 +1,43 @@
+// license: CC0
+function show_hide(idThing)
+{
+  if(document.getElementById && document.createTextNode) {
+    var thing = document.getElementById(idThing);
+    /* Used to change the link text, depending on whether description is
+       collapsed or expanded */
+    var thingLink = thing.previousSibling.lastChild.firstChild;
+    if (thing) {
+      if (thing.style.display == "none") {
+        thing.style.display = "";
+        thingLink.data = 'Collapse';
+      } else {
+        thing.style.display = "none";
+        thingLink.data = 'Expand';
+      }
+    }
+  }
+}
+/* Add controllers used for collapse/expansion of package descriptions */
+function prep(idThing)
+{
+  var tdThing = document.getElementById(idThing).parentNode;
+  if (tdThing) {
+    var aThing = tdThing.firstChild.appendChild(document.createElement('a'));
+    aThing.setAttribute('href', 'javascript:void(0)');
+    aThing.setAttribute('title', 'show/hide package description');
+    aThing.appendChild(document.createTextNode('Expand'));
+    aThing.onclick=function(){show_hide(idThing);};
+    /* aThing.onkeypress=function(){show_hide(idThing);}; */
+  }
+}
+/* Take n element IDs, prepare them for javascript enhanced
+display and hide the IDs by default. */
+function bulk_show_hide()
+{
+  if(document.getElementById && document.createTextNode) {
+    for(var i=0; i<arguments.length; i++) {
+      prep(arguments[i])
+      show_hide(arguments[i]);
+    }
+  }
+}
-- 
1.7.10.4


[-- Attachment #3: error.log --]
[-- Type: text/plain, Size: 1250 bytes --]

Backtrace:
In ice-9/boot-9.scm:
 157: 11 [catch #t #<catch-closure 915df70> ...]
In unknown file:
   ?: 10 [apply-smob/1 #<catch-closure 915df70>]
In ice-9/boot-9.scm:
  63: 9 [call-with-prompt prompt0 ...]
In ice-9/eval.scm:
 432: 8 [eval # #]
In unknown file:
   ?: 7 [call-with-input-string "(apply (@ (list-packages) list-packages)\n             (cdr (command-line)))" ...]
In ice-9/command-line.scm:
 180: 6 [#<procedure 9163ca0 at ice-9/command-line.scm:175:6 (port)> #<input: string 903da50>]
In unknown file:
   ?: 5 [eval (apply (@ # list-packages) (cdr #)) #<directory (guile-user) 90ec630>]
In build-aux/list-packages.scm:
 229: 4 [list-packages]
 201: 3 [insert-css]
In ice-9/boot-9.scm:
 793: 2 [call-with-input-file "/home/alex/projects/guix/build-aux/package-list.css" ...]
In ice-9/r4rs.scm:
 172: 1 [with-input-from-port #<variable 98b7c40 value: #<input: file /dev/pts/3>> ...]
In build-aux/list-packages.scm:
 202: 0 [#<procedure 993d4b0 at build-aux/list-packages.scm:202:8 (t-839)>]

build-aux/list-packages.scm:202:8: In procedure #<procedure 993d4b0 at build-aux/list-packages.scm:202:8 (t-839)>:
build-aux/list-packages.scm:202:8: Wrong number of arguments to #<procedure 993d4b0 at build-aux/list-packages.scm:202:8 (t-839)>