Refine Nginx example with docker-compose file

docker-compose.nginx.yml

@@ -0,0 +1,21 @@
+version: '3'
+
+services:
+  webdav:
+    image: webdav-js-nginx
+    build: docker/nginx
+    ports:
+      - 8080:80
+    volumes:
+      # main functionality
+      - ./:/var/www/webdav-js
+
+      # configs
+      - ./examples/nginx/nginx.conf:/opt/nginx/conf/nginx.conf:ro
+      - ./examples/nginx/webdav.conf:/etc/nginx/conf.d/webdav.conf:ro
+      - ./examples/nginx/davindex-header.html:/var/www/davindex-header.html:ro
+      - ./examples/nginx/davindex-footer.html:/var/www/davindex-footer.html:ro
+
+      # demo content
+      - ./dist/webdav.js:/var/www/html/source.js:ro
+      - ./dist/webdav.css:/var/www/html/style.css:ro

docker-compose.yml

@@ -14,8 +14,8 @@ services:
       - ./examples/apache-directory-list-local/webdav.conf:/var/www/conf/webdav.conf:ro
 
       # demo content
-      - ./src/webdav.js:/var/www/html/source.js:ro
-      - ./assets/css/style.css:/var/www/html/style.css:ro
+      - ./dist/webdav.js:/var/www/html/source.js:ro
+      - ./dist/webdav.css:/var/www/html/style.css:ro
   test:
     image: webdav-js-test
     build: docker/test

docker/nginx/Dockerfile

@@ -0,0 +1,78 @@
+FROM alpine
+
+# This chunk copied from https://github.com/duxlong/webdav/blob/main/Dockerfile
+RUN apk update && \
+  apk add --no-cache pcre libxml2 libxslt apache2-utils \
+    gcc make libc-dev pcre-dev zlib-dev libxml2-dev libxslt-dev && \
+  cd /tmp && \
+  wget https://github.com/nginx/nginx/archive/refs/tags/release-1.23.1.zip -O nginx.zip && \
+  unzip nginx.zip && \
+  wget https://github.com/arut/nginx-dav-ext-module/archive/refs/tags/v3.0.0.zip -O dav-ext-module.zip && \
+  unzip dav-ext-module.zip && \
+  wget https://github.com/aperezdc/ngx-fancyindex/archive/refs/tags/v0.5.2.zip -O ngx-fancyindex.zip && \
+  unzip ngx-fancyindex.zip && \
+  cd nginx-release-1.23.1 && \
+  ./auto/configure --prefix=/opt/nginx --with-http_dav_module --add-module=/tmp/nginx-dav-ext-module-3.0.0 --add-module=/tmp/ngx-fancyindex-0.5.2 && \
+  make && make install && \
+  cd /root && \
+  apk del gcc make libc-dev pcre-dev zlib-dev libxml2-dev libxslt-dev && \
+  rm -rf /var/cache/apk/* && \
+  rm -rf /tmp/*
+
+EXPOSE 80
+
+RUN apk -U upgrade && \
+  apk add --no-cache curl && \
+  mkdir -p /var/www/html && \
+  mkdir -p /var/www/conf && \
+\
+  # add images
+  for i in 0 1 2 3 4 5 6 7 8 9; do \
+    while ! curl -m 2 -L -o "/var/www/html/$i.jpg" "https://picsum.photos/1280/960"; do \
+      sleep 1; \
+    done \
+  done && \
+\
+  # add transparent png
+  while ! curl -m 2 -o /var/www/html/transparent-test.png "https://www.w3.org/Graphics/PNG/alphatest.png"; do \
+    sleep 1; \
+  done && \
+\
+  # add fonts
+  for font in notoserif/NotoSerif-Regular.ttf unlock/Unlock-Regular.ttf blackandwhitepicture/BlackAndWhitePicture-Regular.ttf indieflower/IndieFlower-Regular.ttf; do \
+    while ! curl -m 10 -L -o "/var/www/html/$(basename $font)" "https://cdn.jsdelivr.net/gh/google/fonts/ofl/$font"; do \
+      sleep 1; \
+    done \
+  done && \
+\
+  # add video
+  while ! curl -m 10 -L -o /var/www/html/video.mp4 "https://ik.imagekit.io/demo/sample-video.mp4"; do \
+    sleep 1; \
+  done && \
+\
+  # add PDF
+  while ! curl -m 2 -L -o /var/www/html/dummy.pdf "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"; do \
+    sleep 1; \
+  done && \
+\
+  # create som inaccessible files for testing
+  mkdir -p /var/www/html/inaccessible-dir && \
+\
+  while ! curl -m 2 -L -o /var/www/html/inaccessible-image.jpg "https://picsum.photos/1280/960"; do \
+    sleep 1; \
+  done && \
+\
+  echo 'Lorem ipsum dolor sit amet' > /var/www/html/inaccessible-text-file.txt && \
+  > /var/www/html/inaccessible-file && \
+\
+  # set ownership properly
+  chown -R daemon:daemon /var/www && \
+  chown nobody:nobody /var/www/html/inaccessible* && \
+  chmod 700 /var/www/html/inaccessible* && \
+\
+  # clean up
+  apk del curl;
+
+ENTRYPOINT ["/opt/nginx/sbin/nginx", "-g", "daemon off;"]
+
+EXPOSE 80

docker/webdav/Dockerfile

@@ -13,7 +13,7 @@ RUN \
   done && \
 \
   # add transparent png
-  while ! curl -o /var/www/html/transparent-test.png "https://www.w3.org/Graphics/PNG/alphatest.png"; do \
+  while ! curl -m 2 -o /var/www/html/transparent-test.png "https://www.w3.org/Graphics/PNG/alphatest.png"; do \
     sleep 1; \
   done && \
 \

examples/nginx/README.md

@@ -1,7 +1,7 @@
 # Nginx Directory List Example
 
 To utilise this example, you'll need a running nginx server with the fancyindex
-module and (obviously) WebDAV enabled.
+module and (obviously) WebDAV enabled including dav-ext-module.
 
 Copy the files in this directory to /usr/local/share/webdavjs-nginx/, and add
 the following line to your server config:
@@ -11,5 +11,5 @@ include /usr/local/share/webdavjs-nginx/webdavindex.conf;
 ```
 
 By using the fancyindex module and having the module's generated index under
-\<noscript\> tags, a directory index is still available to clients that can not
+`<noscript>` tags, a directory index is still available to clients that can not
 use JavaScript, including `wget` or MPD's curl storage plugin backend.

examples/nginx/davindex-footer.html

@@ -1,3 +1,4 @@
 </noscript>
+<script src="/source.js"></script>
 </body>
 </html>

examples/nginx/davindex-header.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width">
 <!-- The fancy index's own default style -->
 <style type="text/css">noscript tr:nth-child(even) {background:#f4f4f4;}noscript th,td {padding:0.1em 0.5em;}th {text-align:left;font-weight:bold;background:#eee;border-bottom:1px solid #aaa;}noscript #list {border:1px solid #aaa;width:100%;}</style>
-<script>["https://cdn.jsdelivr.net/gh/dom111/webdav-js@feature/file-information-on-preview/assets/css/style-min.css","https://cdn.jsdelivr.net/gh/dom111/webdav-js@feature/file-information-on-preview/src/webdav-min.js"].forEach((function(e,s){/css$/.test(e)?((s=document.createElement("link")).href=e,s.rel="stylesheet"):(s=document.createElement("script")).src=e,document.head.appendChild(s)}));</script>
+<link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <noscript>

examples/nginx/nginx.conf

@@ -0,0 +1,14 @@
+user daemon daemon;
+
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    include       /etc/nginx/conf.d/*;
+}

examples/nginx/webdav.conf

@@ -0,0 +1,33 @@
+server {
+    listen 80;
+
+    access_log  /dev/stdout;
+    error_log   /dev/stdout info;
+
+    # Maximum size of uploaded file, 0 means unlimited
+    client_max_body_size    0;
+
+    fancyindex on;
+    fancyindex_header /+dav/header.html;
+    fancyindex_footer /+dav/footer.html;
+
+    location /+dav/header.html {
+            alias /var/www/davindex-header.html;
+    }
+    location /+dav/footer.html {
+            alias /var/www/davindex-footer.html;
+    }
+
+    location / {
+        root /var/www/html;
+
+        autoindex on;
+
+        create_full_put_path on;
+
+        dav_methods PUT DELETE MKCOL COPY MOVE;
+        dav_ext_methods PROPFIND OPTIONS;
+
+        dav_access user:rw group:rw all:r;
+    }
+}

examples/nginx/webdavindex.conf

@@ -1,10 +0,0 @@
-fancyindex on;
-fancyindex_header /+dav/header.html;
-fancyindex_footer /+dav/footer.html;
-
-location /+dav/header.html {
-        alias /usr/local/share/webdavjs-nginx/davindex-header.html;
-}
-location /+dav/footer.html {
-        alias /usr/local/share/webdavjs-nginx/davindex-footer.html;
-}

src/lib/DAV/Response.ts

@@ -38,9 +38,14 @@ export default class Response {
       directory: !!this.#getTag(response, 'D:collection'),
       fullPath: this.#getTagContent(response, 'D:href'),
       modified: Date.parse(
-        this.#getTagContent(response, 'lp1:getlastmodified')
+        this.#getTagContent(response, 'lp1:getlastmodified') ||
+          this.#getTagContent(response, 'D:getlastmodified')
+      ),
+      size: parseInt(
+        this.#getTagContent(response, 'lp1:getcontentlength') ||
+          this.#getTagContent(response, 'D:getcontentlength'),
+        10
       ),
-      size: parseInt(this.#getTagContent(response, 'lp1:getcontentlength'), 10),
       mimeType: this.#getTagContent(response, 'D:getcontenttype'),
     }));
   }

src/lib/UI/NativeDOM/List/Item.ts

@@ -186,9 +186,9 @@ export default class Item extends Element {
     this.loading();
 
     if (entry.directory) {
-      return this.trigger('go', entry.fullPath, false, () =>
-        this.loading(false)
-      );
+      return this.trigger('go', entry.fullPath, {
+        failure: () => this.loading(false),
+      });
     }
 
     const launchLightbox = (lightboxContent, onShow = null) => {

translations/en.json

@@ -3,9 +3,9 @@
     "pangram": "The quick brown fox jumps over the lazy dog.",
     "alphabet": "Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz",
     "dropFilesAnywhereToUpload": "Drop files anywhere to upload",
-    "uploadFiles": "Upload files",
+    "uploadFiles": "upload files",
     "or": "or",
-    "createNewDirectory": "Create new directory",
+    "createNewDirectory": "create new directory",
     "directoryName": "Directory name",
     "delete": "Delete",
     "rename": "Rename",