02/05: website: Add screenshots overview page.

[Florian Pelz]

pelzflorian pushed a commit to branch master
in repository guix-artwork.

commit bd7fe3c9a33504deeb12c5ecfc873559a459a35e
Author: Florian Pelz <address@hidden>
Date:   Sat Oct 26 12:22:33 2019 +0200

    website: Add screenshots overview page.
    
    * website/apps/media/templates/screenshot.scm (screenshot-t):
    Move code for a screenshots box from here to this ...
    * website/apps/media/templates/components.scm (screenshots-box):
    ... new procedure.
    * website/apps/base/templates/home.scm (home-t): Use it.
    * website/apps/media/templates/screenshots-overview.scm: New file.
    (screenshots-overview-t): New procedure.
    * website/apps/media/builder.scm
    (screenshots-overview-builder): New procedure.
    (builder): Add it.
---
 website/apps/base/templates/home.scm               |  4 +--
 website/apps/media/builder.scm                     | 12 ++++++++-
 website/apps/media/templates/components.scm        | 15 ++++++++++-
 website/apps/media/templates/screenshot.scm        |  4 +--
 .../apps/media/templates/screenshots-overview.scm  | 30 ++++++++++++++++++++++
 5 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/website/apps/base/templates/home.scm 
b/website/apps/base/templates/home.scm
index e5f9cc0..e751eff 100644
--- a/website/apps/base/templates/home.scm
+++ b/website/apps/base/templates/home.scm
@@ -113,9 +113,7 @@
        ,(link-yellow #:label "GNU Guix" #:url "#guix-in-other-distros")
        " package manager.")
 
-      (div
-       (@ (class "screenshots-box"))
-       ,@(map screenshot->shtml (context-datum context "screenshots")))
+      ,(screenshots-box (context-datum context "screenshots"))
 
       (div
        (@ (class "action-box centered-text"))
diff --git a/website/apps/media/builder.scm b/website/apps/media/builder.scm
index eb4643a..807ba6f 100644
--- a/website/apps/media/builder.scm
+++ b/website/apps/media/builder.scm
@@ -1,4 +1,5 @@
 ;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
 ;;; Initially written by sirgazil who waives all
 ;;; copyright interest on this file.
 
@@ -6,6 +7,7 @@
   #:use-module (apps aux system)
   #:use-module (apps media data)
   #:use-module (apps media templates screenshot)
+  #:use-module (apps media templates screenshots-overview)
   #:use-module (apps media types)
   #:use-module (haunt html)
   #:use-module (haunt page)
@@ -34,7 +36,8 @@
      A list of page objects that represent the web resources of the
      application. See Haunt <page> objects for more information."
   (flatten
-   (list (screenshots-builder))))
+   (list (screenshots-overview-builder)
+         (screenshots-builder))))
 
 
 ;;;
@@ -54,3 +57,10 @@
                   (screenshot-t context)
                   sxml->html)))
    screenshots))
+
+
+(define (screenshots-overview-builder)
+  "Return a Haunt page representing the screenshots overview page."
+  (make-page "screenshots/index.html"
+             (screenshots-overview-t screenshots)
+             sxml->html))
diff --git a/website/apps/media/templates/components.scm 
b/website/apps/media/templates/components.scm
index 825ac37..08544b8 100644
--- a/website/apps/media/templates/components.scm
+++ b/website/apps/media/templates/components.scm
@@ -1,4 +1,5 @@
 ;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
 ;;; Initially written by sirgazil who waves all
 ;;; copyright interest on this file.
 
@@ -8,7 +9,8 @@
   #:use-module (apps aux web)
   #:use-module (apps base utils)
   #:use-module (apps media types)
-  #:export (screenshot->shtml))
+  #:export (screenshot->shtml
+            screenshots-box))
 
 
 ;;;
@@ -31,3 +33,14 @@
          (alt "")))
      (span (@ (class "screenshot-inset-shadow")) ""))
     (p ,(screenshot-caption shot) (span (@ (class "hidden")) "."))))
+
+
+(define* (screenshots-box screenshots #:key shadow)
+  "Return SHTML for a box displaying all SCREENSHOTS.  If SHADOW is
+true, a shadow is displayed at the top."
+  `(div
+    (@ (class ,(string-join `("screenshots-box"
+                              ,@(if shadow
+                                    '("top-shadow-bg")
+                                    '())))))
+    ,@(map screenshot->shtml screenshots)))
diff --git a/website/apps/media/templates/screenshot.scm 
b/website/apps/media/templates/screenshot.scm
index 9f480de..9bf9c2a 100644
--- a/website/apps/media/templates/screenshot.scm
+++ b/website/apps/media/templates/screenshot.scm
@@ -41,6 +41,4 @@
             (src ,(screenshot-image shot))
             (alt ,(screenshot-caption shot)))))
 
-       (div
-        (@ (class "screenshots-box top-shadow-bg"))
-        ,@(map screenshot->shtml shots)))))))
+        ,(screenshots-box shots #:shadow #t))))))
diff --git a/website/apps/media/templates/screenshots-overview.scm 
b/website/apps/media/templates/screenshots-overview.scm
new file mode 100644
index 0000000..5858048
--- /dev/null
+++ b/website/apps/media/templates/screenshots-overview.scm
@@ -0,0 +1,30 @@
+;;; GNU Guix web site
+;;; Copyright © 2019 Florian Pelz <address@hidden>
+;;; Initially written by sirgazil who waves all
+;;; copyright interest on this file.
+
+(define-module (apps media templates screenshots-overview)
+  #:use-module (apps base templates theme)
+  #:use-module (apps base utils)
+  #:use-module (apps media templates components)
+  #:export (screenshots-overview-t))
+
+
+(define (screenshots-overview-t screenshots)
+  "Return an SHTML page for all SCREENSHOTS."
+  (theme
+   #:title '("Screenshots")
+   #:description "Overview of all screenshots."
+   #:keywords
+   '("GNU" "Linux" "Unix" "Free software" "Libre software"
+     "Operating system" "GNU Hurd" "GNU Guix package manager"
+     "GNU Guile" "Guile Scheme" "Transactional upgrades"
+     "Functional package management" "Reproducibility")
+   #:active-menu-item "Overview"
+   #:css (list (guix-url "static/base/css/index.css")
+               (guix-url "static/base/css/screenshots.css"))
+   #:content
+   `(main
+     (section
+      (@ (class "light-text centered-text noise-bg"))
+      ,(screenshots-box screenshots #:shadow #t)))))