diff --git a/.env b/.env index 93f7e044..79a83ded 100644 --- a/.env +++ b/.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= diff --git a/Dockerfile b/Dockerfile index 291f7535..340f3b31 100644 --- a/Dockerfile +++ b/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 diff --git a/README.md b/README.md index 7268e009..45a3d6e8 100644 --- a/README.md +++ b/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 diff --git a/_includes/javascript.html b/_includes/javascript.html index c44f6d47..7ec3f469 100644 --- a/_includes/javascript.html +++ b/_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(); diff --git a/css/master.scss b/css/master.scss index e0aff9ad..39283a76 100644 --- a/css/master.scss +++ b/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 { diff --git a/img/icon-sort.svg b/img/icon-sort.svg new file mode 100644 index 00000000..218290a1 --- /dev/null +++ b/img/icon-sort.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index 946ffab3..40d19291 100644 --- a/index.html +++ b/index.html @@ -11,20 +11,23 @@ {% include photos.html %}