Merge pull request #67 from thekid/refactor/reading-direction

Switch journeys to display entries oldest - newest

Author: thekid

src/main/handlebars/content.handlebars

@@ -51,9 +51,10 @@ parent: feed
       mapping.project(document.querySelector('#map'));
 
       // Update statistics
-      window.setTimeout(() => {
-        fetch('/api/statistics/{{item.slug}}', {method: 'POST', body: '{{sign item.slug}}'});
-      }, Math.min({{size item.images}} * 1500, 5000));
+      {{&use 'statistics'}}
+      const statistics = new Statistics();
+      statistics.add('{{item.slug}}', '{{sign item.slug}}', Math.min({{size item.images}} * 1500, 5000));
+      statistics.schedule('{{item.slug}}');
     </script>
   {{/inline}}
 {{/layout}}

src/main/handlebars/feed.handlebars

@@ -22,7 +22,14 @@
     {{#with elements}}
       {{#each .}}
         <section>
-          <h2 class="{{range-rel is.from is.until}} date"><a href="{{route this}}">{{title}}</a></h2>
+          <h2>
+            {{#with parent}}
+              <span class="journey" title="Reise, {{range is.from is.until format="M Y"}}">
+                <a href="{{route this}}">{{title}}</a>
+              </span>
+            {{/with}}
+            <a href="{{route this}}">{{title}}</a>
+          </h2>
 
           <div class="meta">
             {{date ./date format="d.m.Y"}} @
@@ -34,11 +41,7 @@
             {{count views '' '(Eine Ansicht)' '(# Ansichten)'}}
           </div>
 
-          {{#if images}}
-            {{> partials/images in=. first=@first}}
-          {{else}}
-            {{> partials/cards in=children}}
-          {{/if}}
+          {{> partials/images in=. first=@first}}
 
           <div class="content">
             {{& content}}

src/main/handlebars/journey.handlebars

@@ -14,7 +14,7 @@ parent: feed
     {{/with}}
   {{/inline}}
   {{#*inline "main"}}
-    <h1 class="title">Dialog - {{journey.title}}</h1>
+    <h1 class="{{range-rel journey.is.from journey.is.until}} title">Dialog - {{journey.title}}</h1>
 
     <!-- The journey itself -->
     <section id="summary">
@@ -63,6 +63,7 @@ parent: feed
                 <li><a href="{{link}}">{{name}}</a></li>
               {{/each}}
             </ul>
+            {{count views '' '(Eine Ansicht)' '(# Ansichten)'}}
           </div>
           {{> partials/images in=.}}
 
@@ -92,10 +93,29 @@ parent: feed
 
       mapping.project(document.querySelector('#map'));
 
-      // Update statistics
-      window.setTimeout(() => {
-        fetch('/api/statistics/{{journey.slug}}', {method: 'POST', body: '{{sign journey.slug}}'});
-      }, 10000);
+      // Update statistics for journey after a little while. To determine which entries the
+      // user has spent time viewing, use intersection observer
+      {{&use 'statistics'}}
+      const statistics = new Statistics();
+      statistics.add('{{journey.slug}}', '{{sign journey.slug}}', 10000);
+      statistics.schedule('{{journey.slug}}');
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              statistics.schedule('{{journey.slug}}/' + entry.target.id);
+            } else {
+              statistics.withdraw('{{journey.slug}}/' + entry.target.id);
+            }
+          }
+        },
+        { threshold: 0.2 }
+      );
+      {{#each itinerary}}
+        observer.observe(document.querySelector('#{{scroll slug}}'));
+        statistics.add('{{slug}}', '{{sign slug}}', Math.min({{size images}} * 1500, 5000));
+      {{/each}}
     </script>
   {{/inline}}
 {{/layout}}

src/main/handlebars/journeys.handlebars

@@ -19,8 +19,8 @@
     <div class="cards">
       {{#each journeys}}
         <div class="card">
-          <div class="{{range-rel is.from is.until}} date">{{range is.from is.until format="M Y"}}</div>
-          <a title="{{title}}" href="/journey/{{slug}}">
+          <div class="{{range-rel is.from is.until}} context">{{range is.from is.until format="M Y"}}</div>
+          <a title="{{title}}" href="{{route this}}">
             {{#with preview}}<img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless (top 3 @index)}}loading="lazy"{{/unless}} src="/image/{{slug}}/thumb-{{name}}.webp">{{else}}<div class="without-preview"></div>{{/with}}
             <h3>{{title}}</h3>
           </a>

src/main/handlebars/layout.handlebars

@@ -360,25 +360,35 @@
         box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2);
       }
 
-      .date {
+      .context {
         position: absolute;
         top: .75rem;
         left: .75rem;
-        background-color: black;
+        background-color: var(--main-color);
         border-radius: .25rem;
-        color: white;
+        color: var(--text-color);
         padding: .125rem .4rem;
-      }
 
-      .current.date {
-        background-color: orange;
-      }
+        .journey a {
+          color: var(--text-color);
+        }
 
-      .current.date::before {
-        content: 'LIVE';
-        margin-right: .25rem;
-        padding-right: .25rem;
-        border-right: 1px solid white;
+        .journey::before {
+          content: '—';
+          margin-right: .25rem;
+        }
+
+        &.current {
+          background-color: orange;
+          color: white;
+        }
+
+        &.current::before {
+          content: 'LIVE';
+          margin-right: .25rem;
+          padding-right: .25rem;
+          border-right: 1px solid white;
+        }
       }
 
       h3 {
@@ -395,6 +405,15 @@
       }
     }
 
+    h1.current::before {
+      content: 'LIVE';
+      background-color: orange;
+      margin-right: .5rem;
+      padding: .125rem .4rem;
+      border-radius: .25rem;
+      font-size: 1.15rem;
+    }
+
     section {
       padding-top: 1rem;
       margin-bottom: 3rem;
@@ -403,6 +422,10 @@
       h2 {
         font-size: 1.5rem;
         font-weight: 700;
+
+        .journey::after {
+          content: '»';
+        }
       }
 
       h2.scroll {
@@ -414,15 +437,6 @@
         color: var(--text-color);
       }
 
-      h2.current::before {
-        content: 'LIVE';
-        background-color: orange;
-        margin-right: .5rem;
-        padding: .125rem .4rem;
-        border-radius: .25rem;
-        font-size: 1rem;
-      }
-
       h2 .top {
         text-decoration: none;
         color: orange;

src/main/handlebars/partials/cards.handlebars

@@ -10,9 +10,14 @@
     {{else}}
       <div class="card">
         {{#if is.content}}
-          <div class="date">{{date ./date format='d.m.Y'}}</div>
+          <div class="context">
+            <span class="date">{{date ./date format='d.m.Y'}}</span>
+            {{#with parent}}
+              <span class="journey"><a href="{{route this}}">{{title}}</a></span>
+            {{/with}}
+          </div>
         {{else if is.journey}}
-          <div class="{{range-rel is.from is.until}} date">{{range is.from is.until format="M Y"}}</div>
+          <div class="{{range-rel is.from is.until}} context">{{range is.from is.until format="M Y"}}</div>
         {{/if}}
         <a title="{{title}}" href="{{route this}}">
           {{#with preview}}<img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" src="/image/{{slug}}/thumb-{{name}}.webp">{{else}}<div class="without-preview"></div>{{/with}}

src/main/js/statistics.js

@@ -0,0 +1,29 @@
+class Statistics {
+  #tasks = {};
+
+  /** Adds a statistics target with a given delay */
+  add(target, signature, delay) {
+    this.#tasks[target] = { signature, delay, timer : null, completed : false };
+  }
+
+  /** Schedules the given statistics target */
+  schedule(target) {
+    const task = this.#tasks[target];
+    if (task === undefined) throw new Error(`Undefined target ${target}`);
+
+    task.timer && clearTimeout(task.timer);
+    task.completed || (task.timer = setTimeout(
+      () => fetch('/api/statistics/' + target, { method: 'POST', body: task.signature }).then(() => task.completed = true),
+      task.delay
+    ));
+  }
+
+  /** Withdraws any scheduling for the given statistics target */
+  withdraw(target) {
+    const task = this.#tasks[target];
+    if (task === undefined) return;
+
+    clearTimeout(task.timer);
+    task.timer = null; 
+  }
+}

src/main/php/de/thekid/dialog/Repository.php

@@ -6,6 +6,15 @@
 use util\{Date, Secret};
 
 class Repository {
+  private const WITH_PARENT= [
+    ['$lookup' => [
+      'from'         => 'entries',
+      'localField'   => 'parent',
+      'foreignField' => 'slug',
+      'as'           => 'parent',
+    ]],
+    ['$addFields' => ['parent' => ['$first' => '$parent']]],
+  ];
   private $passwords= Hashing::sha256();
 
   public function __construct(private Database $database) { }
@@ -19,13 +28,14 @@ public function authenticate(string $user, Secret $secret): ?Document {
     return $cursor->first();
   }
 
-  /** Returns newest (top-level) entries */
+  /** Returns newest entries */
   public function newest(int $limit): array<Document> {
     $cursor= $this->database->collection('entries')->aggregate([
-      ['$match' => ['parent' => ['$eq' => null], 'published' => ['$lt' => Date::now()]]],
+      ['$match' => ['is.journey' => ['$ne' => true], 'published' => ['$lt' => Date::now()]]],
       ['$unset' => '_searchable'],
       ['$sort'  => ['date' => -1]],
       ['$limit' => $limit],
+      ...self::WITH_PARENT,
     ]);
     return $cursor->all();
   }
@@ -40,36 +50,16 @@ public function journeys(): array<Document> {
     return $cursor->all();
   }
 
-  /** Returns paginated (top-level) entries */
-  public function entries(Pagination $pagination, int $page, int $children= 6): array<Document> {
-    $entries= $this->database->collection('entries');
-    $cursor= $entries->aggregate([
-      ['$match'  => ['parent' => ['$eq' => null], 'published' => ['$lt' => Date::now()]]],
+  /** Returns paginated entries */
+  public function entries(Pagination $pagination, int $page): array<Document> {
+    $cursor= $this->database->collection('entries')->aggregate([
+      ['$match'  => ['is.journey' => ['$ne' => true], 'published' => ['$lt' => Date::now()]]],
       ['$unset'  => '_searchable'],
       ['$sort'   => ['date' => -1]],
       ['$skip'   => $pagination->skip($page)],
       ['$limit'  => $pagination->limit()],
-
-      // If no preview images are set, aggregate children
-      ['$lookup' => [
-        'from'     => 'entries',
-        'let'      => ['parent' => '$slug', 'images' => ['$size' => ['$ifNull' => ['$images', []]]]],
-        'pipeline' => [
-          ['$match' => ['$expr' => ['$cond' => [
-            ['$eq' => ['$$images', 0]],
-            ['$eq' => ['$parent', '$$parent']],
-            ['$eq' => ['$_id', null]],
-          ]]]]
-        ],
-        'as'       => 'children',
-      ]],
-      ['$addFields' => ['children' => ['$map' => [
-        'input' => ['$sortArray' => ['input'  => '$children', 'sortBy' => ['date' => -1]]],
-        'as'    => 'it',
-        'in'    => ['$unsetField' => ['input' => '$$it', 'field' => '_searchable']],
-      ]]]],
+      ...self::WITH_PARENT,
     ]);
-
     return $pagination->paginate($page, $cursor);
   }
 
@@ -145,11 +135,11 @@ public function entry(string $slug, bool $published= true): ?Document {
   }
 
   /** Returns an entry's children, latest first */
-  public function children(string $slug): Cursor {
+  public function children(string $slug, array<string, mixed> $sort= ['date' => -1]): Cursor {
     return $this->database->collection('entries')->aggregate([
-      ['$match' => ['parent' => ['$eq' => $slug], 'published' => ['$lt' => Date::now()]]],
+      ['$match' => ['parent' => $slug, 'published' => ['$lt' => Date::now()]]],
       ['$unset' => '_searchable'],
-      ['$sort'  => ['date' => -1]],
+      ['$sort'  => $sort],
     ]);
   }
 

src/main/php/de/thekid/dialog/web/Feed.php

@@ -5,7 +5,7 @@
 
 #[Handler('/feed')]
 class Feed {
-  private $pagination= new Pagination(5);
+  private $pagination= new Pagination(8);
 
   public function __construct(private Repository $repository) { }
 

src/main/php/de/thekid/dialog/web/Home.php

@@ -12,7 +12,7 @@ public function __construct(private Repository $repository) { }
   public function index() {
     return View::named('home')->with([
       'cover'  => $this->repository->entry('@cover'),
-      'newest' => $this->repository->newest(6),
+      'newest' => $this->repository->newest(9),
     ]);
   }