Feature Resort Order #17

Former-commit-id: cf8501f

.env

@@ -5,15 +5,18 @@ AUTHOR_EMAIL=tim@maxvoltar.be
 AUTHOR_WEBSITE=https://maxvoltar.com
 DESCRIPTION=@maxvoltar's minimalistic, self-hosted photo stream.
 BASEURL=
-URL=https://maxvoltar.photo/ # must end with / or links will be broken
+# URL must end with / or links will be broken
+URL=https://maxvoltar.photo/
 SHOW_OFFICIAL_GITHUB=1
+ALLOW_ORDER_SORT_CHANGE=1
 PHOTO_PATH=./photos
-#TWITTER_USERNAME=maxvoltar
-#GITHUB_USERNAME=maxvoltar
-#INSTAGRAM_USERNAME=maxvoltar
-#CUSTOM_LINK_NAME=
-#CUSTOM_LINK_URL=
-#SYNCUSER=
-#SYNCPASS=
-#SYNCSERVER=
-#SYNCFOLDER=
+# leave the following blank to disable
+TWITTER_USERNAME=
+GITHUB_USERNAME=maxvoltar
+INSTAGRAM_USERNAME=maxvoltar
+CUSTOM_LINK_NAME=
+CUSTOM_LINK_URL=
+SYNCUSER=
+SYNCPASS=
+SYNCSERVER=
+SYNCFOLDER=

Dockerfile

@@ -1,8 +1,9 @@
-ARG  BASE_IMAGE=ruby:3.0.1-alpine3.13
+ARG  BASE_IMAGE=ruby:3.0.3-alpine3.15
 FROM ${BASE_IMAGE}
-ENV VIPSVER 8.11.3
-RUN apk update && apk upgrade && \
-    apk add --update --no-cache build-base glib-dev expat-dev tiff-dev jpeg-dev libgsf-dev git rsync lftp openssh libexif-dev &&\
+
+ENV VIPSVER 8.12.2
+RUN apk update && apk upgrade &&\
+    apk add --update --no-cache build-base glib-dev libexif-dev expat-dev tiff-dev jpeg-dev libgsf-dev git rsync lftp openssh &&\
     rm -rf /var/cache/apk/*
 
 RUN wget -O ./vips-$VIPSVER.tar.gz https://github.com/libvips/libvips/releases/download/v$VIPSVER/vips-$VIPSVER.tar.gz
@@ -19,5 +20,4 @@ RUN ruby -v && gem install bundler jekyll &&\
 
 EXPOSE 4000
 
-ARG DEBUG=false
-ENTRYPOINT DEBUG=${DEBUG} bundle exec jekyll serve --host 0.0.0.0
+ENTRYPOINT bundle exec jekyll serve --host 0.0.0.0

README.md

@@ -139,6 +139,7 @@ First thing you want to do is edit a couple of things in `/.env`:
 - `BASEURL`: Should be left empty or removed **⚠️ Do not change unless you know what you're doing**
 - `URL`: Where will this photo stream live (example: `https://maxvoltar.photo`)
 - `SHOW_OFFICIAL_GITHUB`: Set to either `1` or `0` to enable or disable showing the link to the official github repository
+- `ALLOW_ORDER_SORT_CHANGE`: Set to either `1` or `0` to enable or disable the 'reverse sort order' feature
 - `TWITTER_USERNAME`: Your Twitter username or remove/comment this line
 - `GITHUB_USERNAME`: Your Github username or remove/comment this line
 - `INSTAGRAM_USERNAME`: Your Instagram username or remove/comment this line

_includes/javascript.html

@@ -2,6 +2,8 @@
   const ESCAPE = 27;
   const RIGHT = 39;
   const LEFT = 37;
+  const UP = 38;
+  const DOWN = 40;
   const TARGET_CLASS = 'target';
 
   const clickNavigationButton = (buttonClass) => {
@@ -54,6 +56,15 @@
     }
   }
 
+  const reverseSorting = () => {
+    {% if site.env.ALLOW_ORDER_SORT_CHANGE == "1" %}
+    var parent = document.getElementById('target');
+    for (var i = 1; i < parent.childNodes.length; i++){
+        parent.insertBefore(parent.childNodes[i], parent.firstChild);
+    }
+    {% endif %}
+  }
+
   window.onpopstate = function(event) {
     if (event.state && event.state.id) {
       const id = event.state.id;
@@ -75,6 +86,14 @@
     handleKey(LEFT, event, () => {
       clickNavigationButton('.previous');
     });
+
+    handleKey(UP, event, () => {
+      reverseSorting();
+    });
+
+    handleKey(DOWN, event, () => {
+      reverseSorting();
+    });
   });
 
   document.addEventListener('click', (event) => {
@@ -88,6 +107,10 @@
       const href = event.target.getAttribute('href');
       closePhoto(href);
     });
+
+    handleClick('ul.links li.sort a', event, () => {
+      reverseSorting();
+    });
   });
 
   lazyload();

css/master.scss

@@ -36,8 +36,7 @@
 	// 	background-color: rgba(0, 0, 0, .25);
 	// }
 
-	&:hover,
-	&:focus {
+	&:hover {
 		background-color: rgba(200, 200, 200, .5);
 		// Disable until Safari supports `prefers-color-scheme` in SVG's
 		// @include dark {
@@ -313,6 +312,12 @@ body {
 				background-image: url(../img/icon-rss.svg);
 			}
 		}
+
+		&.sort {
+			a {
+				background-image: url(../img/icon-sort.svg);
+			}
+		}
 
 		&.link {
 			a {

index.html

@@ -11,20 +11,23 @@
 		{% include photos.html %}
 		</ul>
 		<ul class="links">
+			{% if site.env.ALLOW_ORDER_SORT_CHANGE == "1" %}
+			<li class="sort"><a rel="me" href="#" title="Reverse sort order">Sort</a></li>
+			{% endif %}
 			<li class="rss"><a rel="alternate" type="application/rss+xml" href="{{ site.env.URL }}feed.xml" title="RSS Feed">RSS Feed</a></li>
 			{% if site.env.SHOW_OFFICIAL_GITHUB == "1" %}
 			<li class="github"><a rel="me" href="https://github.com/waschinski/photo-stream" title="Fork on Github">Github</a></li>
 			{% endif %}
-			{% if site.env.TWITTER_USERNAME %}
+			{% if site.env.TWITTER_USERNAME != "" %}
 			<li class="twitter"><a rel="me" href="https://twitter.com/{{ site.env.TWITTER_USERNAME }}" title="@{{ site.env.TWITTER_USERNAME }} on Twitter">Twitter</a></li>
 			{% endif %}
-			{% if site.env.GITHUB_USERNAME %}
+			{% if site.env.GITHUB_USERNAME != "" %}
 			<li class="github"><a rel="me" href="https://github.com/{{ site.env.GITHUB_USERNAME }}" title="@{{ site.env.GITHUB_USERNAME }} on Github">Github</a></li>
 			{% endif %}
-			{% if site.env.INSTAGRAM_USERNAME %}
+			{% if site.env.INSTAGRAM_USERNAME != "" %}
 			<li class="instagram"><a rel="me" href="https://instagram.com/{{ site.env.INSTAGRAM_USERNAME }}" title="@{{ site.env.INSTAGRAM_USERNAME }} on Instagram">Instagram</a></li>
 			{% endif %}
-			{% if site.env.CUSTOM_LINK_URL and site.env.CUSTOM_LINK_NAME %}
+			{% if site.env.CUSTOM_LINK_URL != "" and site.env.CUSTOM_LINK_NAME != "" %}
 			<li class="link"><a rel="me" href="{{ site.env.CUSTOM_LINK_URL }}" title="{{ site.env.CUSTOM_LINK_NAME }}">{{ site.env.CUSTOM_LINK_NAME }}</a></li>
 			{% endif %}
 		</ul>