From 4fee2959cac632911a082262d85cd876f255857a Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 20 Feb 2020 18:12:10 +0000
Subject: [PATCH] Added Ginny's stylesheet permanently to the archive

Work on 'failed to find dimensions of image' bug, which only happens under Tomcat. Not yet resolved.
---
 resources/public/content/arty.css           | 544 ++++++++++++++++++++
 resources/templates/base.html               |   2 +-
 resources/templates/edit.html               |  10 +-
 src/smeagol/extensions/photoswipe.clj       |  44 +-
 src/smeagol/formatting.clj                  |   2 +-
 src/smeagol/routes/wiki.clj                 |  14 +-
 test/smeagol/test/extensions/photoswipe.clj |   5 +
 7 files changed, 584 insertions(+), 37 deletions(-)
 create mode 100644 resources/public/content/arty.css

diff --git a/resources/public/content/arty.css b/resources/public/content/arty.css
new file mode 100644
index 0000000..aa8aa97
--- /dev/null
+++ b/resources/public/content/arty.css
@@ -0,0 +1,544 @@
+/*
+ ## Smeagol: a very simple Wiki engine
+
+ ## Stylesheet variant for Ginny Reed
+
+ ## Copyright and licence
+ Copyright (C) 2014 Simon Brooke
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ as published by the Free Software Foundation; either version 2
+ of the License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301,
+ USA.
+
+ # The Stylesheet
+
+ ## html elements generally in alphabetic order
+ */
+
+a {
+  color: darkgray;
+  font-weight: bold;
+}
+
+a:hover {
+  color: darkgray;
+  background:rgba(200,200,200,0.8);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+del {
+  color: red;
+}
+
+div.content, div.error, div.message, form, p, pre, h1, h2, h3, h4, h5 {
+  padding: 0.1em 5% 0 5%;
+}
+
+dl, menu, ol, table, ul {
+  margin: 0.25em 5%;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  font-style: italic;
+}
+
+/* footer of the page - not-editable, provided by Smeagol */
+footer {
+  border-top: thin solid silver;
+  color: gray;
+  background:rgba(200,200,200,0.8);
+  clear: both;
+  font-size: smaller;
+  text-align: center;
+  width: 100%;
+  margin: 0;
+  min-height: 4px;
+  padding: 0.25em 0;
+  bottom:0;
+  position:fixed;
+  vertical-align: top;
+  z-index:150;
+  _position:absolute;
+  _top:expression(eval(document.documentElement.scrollTop+
+        (document.documentElement.clientHeight-this.offsetHeight)));
+}
+
+footer div {
+  display: none;
+  padding: 0.1em;
+}
+
+footer:hover div {
+  display: block;
+}
+
+form {
+  border: thin solid silver;
+}
+
+/* header for all pages in the Wiki - editable, provided by users. */
+header {
+  margin-top: 0;
+  width:100%;
+  max-width: 100%;
+}
+
+header h1 {
+  margin-top: 0;
+}
+
+header a {
+  font-weight: bold;
+}
+
+header a:hover {
+  color: darkgray;
+}
+
+img {
+  border: 0;
+  padding: 0;
+  vertical-align: middle;
+}
+
+input {
+  background-color: white;
+}
+
+input.action {
+  background-color: green;
+}
+
+input.action-dangerous {
+	color: white;
+	background-color: red;
+}
+
+input.required:after {
+  content: " \*";
+  color: red;
+}
+
+ins {
+  color: green;
+}
+
+label {
+  width: 20%;
+  min-width: 20em;
+  border-right: thin solid silver;
+  display: inline-block;
+}
+
+table {
+  border: thin solid silver;
+  border-collapse: collapse;
+}
+
+table.music-ruled tr:nth-child(odd) {
+	background-color: silver;
+}
+
+th, td {
+	text-align: left;
+  vertical-align: top;
+	padding: 0.15em 1.5em;
+  border: 1px solid silver;
+}
+
+th {
+  background-color: silver;
+}
+
+/*
+ ## ids generally in document order
+ */
+
+/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
+#main-container{
+}
+
+
+/* left bar for all pages in the Wiki - editable, provided by users. Within main-container */
+#side-bar {
+  display: none;
+  width: 17%;
+  height: 100%;
+  float: left;
+}
+
+/* cookies information box, fixed, in right margin, just above footer */
+#cookies {
+	width: 20%;
+	float: right;
+  position: fixed;
+  bottom: 8px;
+  right: 0;
+	z-index: 175;
+  background: transparent;
+}
+
+/* about-cookies box: permanently visible part of cookies information box */
+#about-cookies {
+  clear: right;
+  font-size: 66%;
+  float: right;
+  text-align: right;
+  padding: 0.25em 2em;
+  border-radius: 0.25em;
+	color: gray;
+  background:rgba(200,200,200,0.8);
+}
+
+/* more-about-cookies box, normally hidden */
+#more-about-cookies {
+  display: none;
+	padding: 0.5em 2em;
+  border-radius: 0.5em;
+	color: gray;
+  background:rgba(200,200,200,0.8);
+	border-bottom: thin solid gray;
+}
+
+/* but magically appears on mouseover */
+#cookies:hover #more-about-cookies {
+	display: block;
+}
+
+#uploaded-image {
+  float: right;
+}
+
+.change {
+  background-color: rgb( 223, 223, 223);
+  border: thin solid silver;
+}
+
+
+.data-visualisation {
+  padding: 0.25em 5%;
+}
+
+.error {
+  width: 100%;
+  background-color: red;
+  color: white;
+  border: thin solid maroon;
+}
+
+.message {
+  color: darkgreen;
+  background-color: silver;
+  border: thin solid lime;
+}
+
+.minor-controls {
+  list-style: none;
+  float: right;
+  right: 0;
+  padding: 0.25em 2em;
+  border-radius: 0.25em;
+	color: gray;
+  background:rgba(200,200,200,0.8);
+  font-size: 66%;
+}
+
+.minor-controls li {
+  display: inline;
+}
+
+.minor-controls a {
+  float: right;
+  padding: 0.25em 2em;
+  color: gray;
+}
+
+.minor-controls a:hover {
+  color: darkgray;
+}
+
+.pseudo-input {
+  border: inset thin;
+  background-color: white;
+  display: inline-block;
+  min-width: 7.5em;
+  padding: 0 2em 0 0;
+}
+
+.sanity-cause .sanity-stacktrace {
+  display: none;
+}
+
+.sanity-cause:hover .sanity-stacktrace {
+  display: block;
+}
+
+.vega-bindings, .vega-actions {
+  font-size: 66%;
+}
+
+/* Add space between Vega-Embed links  */
+.vega-actions a {
+  margin-right: 5px;
+}
+
+.warn {
+  color: maroon;
+}
+
+.widget {
+	background-color: silver;
+ 	border: thin solid white;
+ 	margin-top: 0;
+ 	margin-bottom: 0;
+  width: 100%;
+}
+
+.wiki {
+  margin: 0;
+}
+
+/* desktops and laptops, primarily. Adapted to mouse; targets may be small */
+@media all and (min-device-width: 1025px) {
+  /* content of the current page in the Wiki - editable, provided by users. Within main-container */
+  #content {
+    border: thin solid silver;
+    width: 100%;
+    padding-bottom: 5em;
+  }
+
+  #phone-side-bar, #phone-credits {
+    display: none;
+  }
+
+  #header {
+    font-size: smaller;
+  }
+
+  /* top-of-page navigation, not editable, provided by Smeagol */
+  #nav{
+    margin: 0;
+    padding: 0;
+    top: 0;
+    min-height: 4px;
+    _position: absolute;
+    _top: expression(document.documentElement.scrollTop);
+    z-index: 149;
+    color: gray;
+    background:rgba(200,200,200,0.8);
+ }
+
+  #nav #nav-menu {
+    display: none;
+  }
+
+  #nav:hover #nav-menu {
+    display: block;
+  }
+
+  /* only needed for fly-out menu effect on tablet and phone stylesheets */
+  #nav-icon {
+    display: none;
+  }
+
+  #nav-menu {
+    margin: 0;
+    padding: 0;
+  }
+
+  #nav menu li {
+    padding: 0;
+    margin: 0;
+    display: inline;
+  }
+
+  #nav menu li a {
+    color: gray;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0.1em 0.75em;
+    margin: 0;
+  }
+
+  #nav menu li.active a { background: gray; color: white;}
+  li.nav-item a:hover { background: rgb( 240, 240, 240) }
+  li.nav-item a:active { background: gray; color: white; }
+
+  #nav menu li#user {
+    padding: 0 1em;
+    float: right;
+  }
+}
+
+/* tablets, primarily. Adapted to touch; targets are larger */
+@media all and (min-device-width: 769px) and (max-device-width: 1024px) {
+  h1 {
+    /* I wouldn't normally use a px value, but the menu icon is 49px wide */
+    padding: 0.25em 5%;
+    padding-left: 100px;
+  }
+
+  /* content of the current page in the Wiki - editable, provided by users. Within main-container */
+  #content {
+    border: thin solid silver;
+    width: 80%;
+    float: right;
+    padding-bottom: 5em;
+  }
+
+  #nav{
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    z-index: 149;
+    color: black;
+    background:rgba(200,200,200,0.9);
+  }
+
+  #nav a {
+    font-weight: bold;
+  }
+
+  #nav:hover #nav-menu, #nav:hover #phone-side-bar {
+    display: block;
+    list-style-type: none;
+    width: 100%;
+  }
+
+  #nav-icon {
+    padding: 0;
+  }
+
+  #nav-menu, #phone-side-bar {
+    display: none;
+  }
+
+  #nav menu li {
+    padding: 0.5em;
+    margin: 0.5 em;
+    font-size: 150%;
+  }
+
+  #nav menu li a {
+  }
+
+  #nav ul li.active a { background: silver;}
+  li.nav-item a:hover { background: rgb( 240, 240, 240) }
+  li.nav-item a:active { background: gray; color: white; }
+
+  #nav menu #user {
+    text-decoration: none;
+    font-weight: bold;
+    margin: 0;
+  }
+}
+
+/* phones, and, indeed, smaller phones. Adapted to touch; display radically
+ * decluttered */
+@media all and (max-device-width: 768px) {
+  footer {
+    display: none;
+  }
+
+  h1 {
+    /* I wouldn't normally use a px value, but the menu icon is 49px wide */
+    padding: 0.25em 5%;
+    padding-left: 100px;
+    text-align: right;
+  }
+
+  /* content of the current in the Wiki - editable, provided by users. Within main-container */
+  #content {
+    border: thin solid silver;
+    width: 100%;
+    padding-bottom: 2em;
+  }
+
+  #main-container {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+
+  #cookies {
+    display: none;
+  }
+
+  #header {
+    display: none;
+  }
+
+  #nav{
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    z-index: 149;
+    color: black;
+    background:rgba(200,200,200,0.9);
+  }
+
+  #nav a {
+    color: black;
+    font-weight: bold;
+  }
+
+  #nav:hover #nav-menu, #nav:hover #phone-side-bar {
+    display: block;
+    list-style-type: none;
+    width: 100%;
+  }
+
+  #nav-icon {
+    padding: 0;
+  }
+
+  #nav-menu, #phone-side-bar {
+    display: none;
+  }
+
+  #nav menu li {
+    padding: 0.5em;
+    margin: 0.5 em;
+    font-size: 150%;
+  }
+
+  #nav menu li a {
+    color: black;
+    font-weight: bold;
+  }
+
+  #nav ul li.active a { background: silver;}
+  li.nav-item a:hover { background: rgb( 240, 240, 240) }
+  li.nav-item a:active { background: gray; color: white; }
+
+  #nav menu #user {
+    text-decoration: none;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  #side-bar {
+    display: none;
+  }
+}
diff --git a/resources/templates/base.html b/resources/templates/base.html
index 01152af..48e5ae4 100644
--- a/resources/templates/base.html
+++ b/resources/templates/base.html
@@ -39,7 +39,7 @@
               Smeagol wiki engine {{version}} ||
               <img height="16" width="16"
                    alt="The Web Engineering Factory &amp; Toolworks"
-                  src="http://www.weft.scot/images/weft.logo.64.png">
+                  src="https://www.weft.scot/images/weft.logo.64.png">
               Developed by <a href="http://www.weft.scot/">WEFT</a>
             </p>
           </div>
diff --git a/resources/templates/edit.html b/resources/templates/edit.html
index 9b2023f..8a8e41f 100644
--- a/resources/templates/edit.html
+++ b/resources/templates/edit.html
@@ -22,14 +22,15 @@
                 </p>
                 <p class="widget">
                     <label for="submit-button">{% i18n save-prompt %}</label>
-                    <input name="submit-button" id="submit-button" type="submit" class="action" value="{% i18n save-label %}"/>
+                    <input name="submit-button" id="submit-button" type="submit"
+                           class="action" value="{% i18n save-label %}"/>
                 </p>
             </form>
         </div>
         <script>
-          // intercept control-S (or on Mac meta-S) and submit the form. Saves much annoyance.
+          /* intercept control-S (or on Mac meta-S) and submit the form. Saves much annoyance. */
           document.addEventListener("keydown", function(e) {
-            if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey))      {
+            if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
               e.preventDefault();
               document.getElementById('edit-form').submit();
             }
@@ -37,6 +38,9 @@
           // initialise the editor
           var simplemde = new SimpleMDE({
             autosave: {
+              /* there's an unlovely bug that if you have two Smeagol instances on the same host,
+               * and you edit their files in the same browser, the autosave gets confused as to
+               * which site the autosave buffer belongs to. Better to disable in that case? */
               enabled: true,
               uniqueId: "Smeagol-{{page}}",
               delay: 1000,
diff --git a/src/smeagol/extensions/photoswipe.clj b/src/smeagol/extensions/photoswipe.clj
index 766fef0..1330cf4 100644
--- a/src/smeagol/extensions/photoswipe.clj
+++ b/src/smeagol/extensions/photoswipe.clj
@@ -108,17 +108,17 @@
         dimensions (try
                      (if (uploaded? url)
                        (dimensions
-                         (buffered-image (cio/file upload-dir (fs/base-name url)))))
-                     (catch Exception x (.getMessage x)))]
+                         (buffered-image
+                           (cio/file upload-dir (fs/base-name url)))))
+                     (catch Exception x
+                       (log/error
+                         "Failed to fetch dimensions of image "
+                         url (.getMessage x))
+                       nil))]
     (if dimensions
       (assoc slide :w (first dimensions) :h (nth dimensions 1))
-      (do
-        (log/warn "Failed to fetch dimensions of image " url)
-        slide))))
+      slide)))
 
-;; (slide-merge-dimensions
-;;   {:title "Frost on a gate, Laurieston",
-;;    :src "content/uploads/g1.jpg"})
 
 (defn find-thumb
   [url thumbsize]
@@ -131,7 +131,11 @@
           r (str (cio/file "content" p))]
       (if
         (and (fs/exists? p') (fs/readable? p'))
-        r))))
+        r
+        (do
+          (log/warn "Failed to find" thumbsize "thumbnail for" url "at" p')
+          nil)))))
+
 
 (defn process-simple-slide
   "Process a single `slide`, as decoded by `simple-grammar`. At this stage a
@@ -149,11 +153,13 @@
                     (sort
                       #(> (%1 thumbsizes) (%2 thumbsizes))
                       (keys thumbsizes)))
-        url (:src s')]
+        url (:src s')
+        thumb (find-thumb url thumbsize)]
     (slide-merge-dimensions
-      (assoc s' :msrc (find-thumb url thumbsize)))))
+      (if thumb
+        (assoc s' :msrc thumb)
+        s'))))
 
-(process-simple-slide '([:title "Frost on a gate, Laurieston"] [:src "content/uploads/g1.jpg"]))
 
 (def process-simple-photoswipe
   "Process a simplified specification for a photoswipe gallery, comprising just
@@ -170,20 +176,6 @@
            :options { :timeToIdle 100 }
            :openImmediately true}) index))))
 
-;; (map
-;;   process-simple-slide
-;;   (re-seq #"!\[[^(]*\([^)]*\)"
-;;           "![Frost on a gate, Laurieston](content/uploads/g1.jpg)
-;;           ![Feathered crystals on snow surface, Taliesin](content/uploads/g2.jpg)
-;;           ![Feathered snow on log, Taliesin](content/uploads/g3.jpg)
-;;           ![Crystaline growth on seed head, Taliesin](content/uploads/g4.jpg)"))
-
-(process-simple-photoswipe
-  "![Frost on a gate, Laurieston](content/uploads/g1.jpg)
-  ![Feathered crystals on snow surface, Taliesin](content/uploads/g2.jpg)
-  ![Feathered snow on log, Taliesin](content/uploads/g3.jpg)
-  ![Crystaline growth on seed head, Taliesin](content/uploads/g4.jpg)"
-  1)
 
 (defn process-photoswipe
   "Process a Photoswipe specification which may conform either to the
diff --git a/src/smeagol/formatting.clj b/src/smeagol/formatting.clj
index a2d245e..eeb0753 100644
--- a/src/smeagol/formatting.clj
+++ b/src/smeagol/formatting.clj
@@ -97,7 +97,7 @@
       (last vs))))
 
 
-(defn- apply-formatter
+(defn apply-formatter
   "Within the context of `process-text`, process a fragment for which an explicit
   `formatter` has been identified, and then recurse back into `process-text` to
   process the remainder of the fragments. Arguments are as for `process-text`, q.v.,
diff --git a/src/smeagol/routes/wiki.clj b/src/smeagol/routes/wiki.clj
index 17c46a4..a691b2f 100644
--- a/src/smeagol/routes/wiki.clj
+++ b/src/smeagol/routes/wiki.clj
@@ -98,11 +98,12 @@
            file-path (cjio/file util/content-dir file-name)
            exists? (.exists (cjio/as-file file-path))
            user (session/get :user)]
-       (if-not
-         exists?
-         (log/info
-           (format "File '%s' not found; creating a new file" file-path))
-         (log/info (format "Opening '%s' for editing" file-path)))
+       (log/info
+         (format (if-not
+                   exists?
+                   "User %s: File '%s' not found; creating a new file"
+                   "User %s Opening '%s' for editing")
+                 user file-path))
        (cond src-text (process-source params suffix request)
              true
              (layout/render template
@@ -204,7 +205,7 @@
           page (or (:page params) util/start-page (util/get-message :default-page-title "Introduction" request))
           file-name (str page ".md")
           file-path (cjio/file util/content-dir file-name)
-          exists? (.exists (clojure.java.io/as-file file-path))]
+          exists? (.exists (cjio/as-file file-path))]
       (if exists?
         (do
           (log/info (format "Showing page '%s' from file '%s'" page file-path))
@@ -411,6 +412,7 @@
   ;; TODO: probably I need to use either the 'buddy' or 'friend' authentication libraries
   ;; see https://github.com/cemerick/friend and
   ;; https://github.com/metosin/compojure-api/wiki/Authentication-and-Authorization
+  ;; https://jakemccrary.com/blog/2014/12/21/restricting-access-to-certain-routes/
   ;; but I don't yet see even so how to do redirect to the failed page after successful
   ;; authorisation.
   [f request]
diff --git a/test/smeagol/test/extensions/photoswipe.clj b/test/smeagol/test/extensions/photoswipe.clj
index 34674ea..88ee900 100644
--- a/test/smeagol/test/extensions/photoswipe.clj
+++ b/test/smeagol/test/extensions/photoswipe.clj
@@ -24,6 +24,11 @@
           actual (find-thumb "passwd" :med)]
       (is (= actual expected) "`resources/passwd` is in
           the repository, but is not uploaded so should NOT be found")))
+  (testing "Merging image dimensions"
+    (let [expected {:title "Frost on a gate, Laurieston", :src "content/uploads/g1.jpg", :w 2592, :h 1944}
+          actual (slide-merge-dimensions {:title "Frost on a gate, Laurieston",
+                                          :src "content/uploads/g1.jpg"})]
+      (is (= actual expected))))
   (testing "Simple slide grammar"
     (let [expected '(([:title "Frost on a gate, Laurieston"] [:src "content/uploads/g1.jpg"]))
           actual (simplify