...using the dominant color from https://lokeshdhakar.com/projects/color-thief/ - how does this look?

Using :has as shown in https://youtu.be/jJcO-IZJalQ e.g.?

When showing an image in the lightbox, nothing happens until it has been fully loaded, then, all of a sudden, the entire image appears. Can we show a progress bar using https://stackoverflow.com/a/42196770?

If freshly installed:

• Ask user to create Atlas API key
• Make user select filesystem location for media
• Save this to an INI file
• Create admin login
• Create search indexes
• Redirect to admin interface once #26 is implemented

See also:

• MP4: https://github.com/dhowden/tag/blob/master/mp4.go
• MOV: https://github.com/drewnoakes/metadata-extractor/blob/master/Source/com/drew/metadata/mov/metadata/QuickTimeMetadataDirectory.java
• Atoms: https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFChap2/qtff2.html#//apple_ref/doc/uid/TP40000939-CH204-BBCCFFGD

See https://dialog.sloppy.zone/journey/fjord-zamm-2022

From the browser console:

Starting point for /feed:

TODO:

• Investigate deprecated APIs layers - see #17
• Image dimensions when using cards or smaller images
• Content Security Policy - #19

Instead of "Bild vom [date]", we should be using "[location] @ [date]", and maybe also embed IPTC data if available.

• Use https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
• Update JavaScript to use <dialog open> instead of <div id="lightbox" class="open">
• Prevent background scrolling - see https://getbootstrap.com/docs/4.3/components/modal/ and https://usefulangle.com/post/279/hide-page-scrollbar-when-fixed-modal-opened
• Prevent layout shifts when hiding the scrollbar (adjust padding as seen here)

Ideas

• Tags
• Colors (see #36)
• Date and time taken (from EXIF)
• Sharing possibility via https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

...and only open lightbox from here or have a lightbox zoom icon hover?

Inspiration

https://500px.com/photo/1056381889/winter-evening-by-andrey-gubanov

Didn't notice in dark mode :)

Create an admin interface to upload images and videos

• Authentication
• Upload via drag and drop
• Upload folders?
• Copy&paste images
• Image processing - see #44
• WYSIWYG editor for content

Step 1: Research which libraries we can use for this

The 92 lighthouse score for "best practices" results from deprecated APIs. This warning doesn't appear on pages without a map, so it must come from the OpenLayers implementation somewhere.

Certain ARIA roles must be contained by particular parents: Required ARIA parents role not present: group, listbox

See https://youtu.be/IP_rtWEMR0o?si=zi1NxOm861libo4S

• Appears when trying to zoom in
• Does not fit into one line

Lighthouse says:

A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks

See comment in Repository::entries():

...
$cursor= $entries->aggregate([
  ['$match' => ['parent' => ['$eq' => null], 'published' => ['$lt' => Date::now()]]],
  ['$unset' => '_searchable'],
  ['$sort'  => ['date' => -1]],
  ['$skip'  => $pagination->skip($page)],
  ['$limit' => $pagination->limit()],
]);

// We could use $lookup here but would then not have the children sorted
// properly - $sortArray is not available until 5.2, and Atlas free tier
// currently runs 5.0. TODO: Change this once prerequisites are fully met!
$results= [];
foreach ($cursor as $entry) {
  if (empty($entry['images'])) {
    $children= $entries->aggregate([
      ['$match' => ['parent' => $entry['slug']]],
      ['$unset' => '_searchable'],
      ['$sort'  => ['date' => -1]],
      ['$limit' => $children],
    ]);
    $entry['children']= $children->all();
  }
  $results[]= $entry;
}
...

• Wait for MongoDB Atlas free tier to have 5.2+ available
• Rewrite above to use $lookup with $sortArray
• Bonus: Figure out if there is a way to conditionally perform the lookup stage as done in the code above

Purpose

This issue serves as a concept for an architecture which enables us to process uploaded media online. Key requirements:

• Separate from main web application
• Make use of MongoDB change streams
• Horizontally scalable

Overview and flow

User uploads

Implemented inside the backstage area, see #26. Uploaded images are stored directly in the correct location (see below), and an entry in the processing collection is created:

{
  "slug":"rueppur_alb_2022-11-13",
  "file":"20221113_151718315_iOS.jpg",
  "at":{"$date":{"$numberLong":"1668873515000"}},
  "state":"new"
}

Media processor

Implemented in #46. Watches processing collection for entries with state = new, fetches uploaded images, extracts meta data and converts images to the correct sizes, then uploads all of that.

Media storage

Currently, media is stored right inside the folder for a given entry. Each variant has a prefix:

• full - Full-size image (WebP, 3840 * x)
• thumb - Thumbnail image (WebP, 1024 * x)
• preview - Preview image (JPEG, 720 * x)
• video - Video file (MPEG-4, H.264, 1920 * x)

/space/image
 |- rueppur_alb_2022-11-13
 |  |- full-20221113_151718315_iOS.jpg.webp
 |  |- preview-20221113_151718315_iOS.jpg.jpg
 |  `- thumb-20221113_151718315_iOS.jpg.webp
 |
 `- philippines-2006
    |- alona_white_beach-2006-09-06
    |  |- full...
    |  `- ...
    |- full...
    `- ...

The original uploads will be stored alongside these without any prefix, e.g. 20221113_151718315_iOS.jpg.