feed sample grid for kiosk

app/controllers/newsroom.js

@@ -153,6 +153,7 @@ class NewsroomController extends SiteController {
     try {
       res.locals.pagination = this.getPaginationParameters(req, 10);
       res.locals.entries = await feedService.getFeedEntries(res.locals.feed, res.locals.pagination);
+      res.locals.samples = await feedService.sample([ ], 21);
       res.render('newsroom/kiosk/feed');
     } catch (error) {
       this.log.error('failed to serve Newsroom Kiosk feed view', { error });
@@ -165,6 +166,7 @@ class NewsroomController extends SiteController {
     try {
       res.locals.pagination = this.getPaginationParameters(req, 10);
       res.locals.entries = await feedService.getNewsfeed(res.locals.pagination);
+      res.locals.samples = await feedService.sample([ ], 21);
       res.render('newsroom/kiosk/home');
     } catch (error) {
       this.log.error('failed to serve Newsroom Kiosk unified feed view', { error });

app/services/feed.js

@@ -400,6 +400,29 @@ class FeedService extends SiteService {
     const totalFeedEntryCount = await FeedEntry.countDocuments(search);
     return { entries, totalFeedEntryCount };
   }
+
+  async sample (exclusions = [ ], maxCount = 10) {
+    const NOW = new Date();
+    const OLDEST_DATE = moment(NOW).subtract(7, 'day').toDate();
+
+    let entries = await FeedEntry.aggregate([
+      {
+        $match: {
+          $and: [
+            { published: { $gte: OLDEST_DATE } },
+            { _id: { $nin: exclusions } },
+          ],
+        },
+      },
+      {
+        $sample: { size: maxCount },
+      }
+    ]);
+
+    entries = await FeedEntry.populate(entries, this.populateFeedEntry);
+
+    return entries;
+  }
 }
 
 module.exports = {

app/views/newsroom/components/feed-entry-grid.pug

@@ -0,0 +1,12 @@
+mixin renderFeedEntryGrid (entries)
+  div(uk-grid)
+    each entry of entries
+      .uk-width-1-3
+        .uk-panel
+          img(src= `/newsroom/kiosk/${entry.feed._id}/article/${entry._id}/image`).feed-entry-image
+          .feed-entry-summary.uk-position-bottom
+            .feed-entry-title.entry-title-small.uk-text-truncate
+              a(href= entry.link, target="_blank").uk-link-reset= entry.title
+            div(uk-grid).uk-grid-small.uk-text-small.uk-text-muted
+              .uk-width-auto= moment(entry.published).format('MMM D [at] h:mm a')
+              .uk-width-auto.uk-text-truncate= entry.feed.title

app/views/newsroom/components/kiosk-carousel.pug

@@ -2,9 +2,12 @@ mixin renderKioskCarouselFeedEntry (entry)
   .uk-panel
     img(src= `/newsroom/kiosk/${entry.feed._id}/article/${entry._id}/image`).feed-entry-image
     .feed-entry-summary.uk-position-bottom
-      .feed-entry-title.uk-text-truncate= entry.title
+      .feed-entry-title.uk-text-truncate
+        a(href= entry.link, target="_blank")= entry.title
       .feed-entry-description.uk-margin-small!= marked.parse(entry.description)
-      .uk-text-small.uk-text-muted= moment(entry.published).format('MMMM D, YYYY [at] h:mm a')
+      div(uk-grid).uk-text-small.uk-text-muted
+        .uk-width-auto= moment(entry.published).format('MMMM D, YYYY [at] h:mm a')
+        .uk-width-auto= entry.feed.title
 
 mixin renderKioskFeedCarousel (entries)
   div(tabindex="-1", uk-slider="center: true; autoplay: true;").uk-position-relative.uk-visible-toggle.uk-light

app/views/newsroom/components/search-form.pug

@@ -3,24 +3,27 @@ form(method="GET", action="/newsroom/search").uk-form.uk-margin
     div(uk-grid).uk-grid-small
       .uk-width-expand
         input(id="search", name="q", type="text", placeholder="Enter search", value= query.q || undefined).uk-input
+        .uk-margin-small
+          div(uk-grid).uk-grid-small
+            .uk-width-auto Sort:
+            .uk-width-auto
+              .pretty.p-default.p-round.p-smooth
+                input(type="radio", name="s", value="s", checked= (query.s === 's'))
+                .state
+                  label Relevance
+            .uk-width-auto
+              .pretty.p-default.p-round.p-smooth
+                input(type="radio", name="s", value="dd", checked= (query.s === 'dd'))
+                .state
+                  label Newest First
+            .uk-width-expand
+              .pretty.p-default.p-round.p-smooth
+                input(type="radio", name="s", value="da", checked= (query.s === 'da'))
+                .state
+                  label Oldest First
+            .uk-width-auto
+              a(href="https://vote.gov/", target="_blank") Register to Vote
+
       .uk-width-auto
         button(type="submit").uk-button.dtp-button-secondary.uk-border-rounded
-          i.fas.fa-search
-  .uk-margin-small
-    div(uk-grid).uk-grid-small
-      .uk-width-auto Sort:
-      .uk-width-auto
-        .pretty.p-default.p-round.p-smooth
-          input(type="radio", name="s", value="s", checked= (query.s === 's'))
-          .state
-            label Relevance
-      .uk-width-auto
-        .pretty.p-default.p-round.p-smooth
-          input(type="radio", name="s", value="dd", checked= (query.s === 'dd'))
-          .state
-            label Newest First
-      .uk-width-auto
-        .pretty.p-default.p-round.p-smooth
-          input(type="radio", name="s", value="da", checked= (query.s === 'da'))
-          .state
-            label Oldest First
+          i.fas.fa-search

app/views/newsroom/kiosk/feed.pug

@@ -2,6 +2,7 @@ extends ../layouts/kiosk
 block kiosk-content
 
   include ../components/kiosk-carousel
+  include ../components/feed-entry-grid
 
   .feed-header.uk-margin
     div(uk-grid).uk-flex-bottom
@@ -13,4 +14,8 @@ block kiosk-content
         .uk-text-bold= moment(feed.published).format('MMM D [at] h:mm a')
 
   .feed-content.uk-margin-medium
-    +renderKioskFeedCarousel(entries.entries)
+    +renderKioskFeedCarousel(entries.entries)
+
+  if Array.isArray(samples) && (samples.length > 0)
+    h3 Newsroom Samples
+    +renderFeedEntryGrid(samples)

app/views/newsroom/kiosk/home.pug

@@ -2,6 +2,7 @@ extends ../layouts/kiosk
 block kiosk-content
 
   include ../components/kiosk-carousel
+  include ../components/feed-entry-grid
 
   .feed-header
     div(uk-grid).uk-flex-middle
@@ -13,4 +14,7 @@ block kiosk-content
         .uk-text-bold= moment().format('MMMM D, YYYY')
   
   .feed-content.uk-margin-medium
-    +renderKioskFeedCarousel(entries.entries)
+    +renderKioskFeedCarousel(entries.entries)
+
+  if Array.isArray(samples) && (samples.length > 0)
+    +renderFeedEntryGrid(samples)

app/views/newsroom/layouts/kiosk.pug

@@ -16,7 +16,7 @@ block content
               a(href="/")
                 img(src=`/img/icon/${site.domainKey}/icon-72x72.png`)
 
-          ul.uk-list.sidebar-feed-list
+          ul.uk-list.sidebar-feed-list.uk-margin-medium
             li
               div(class={ 'item-active': !feed }).feed-list-item
                 a(href='/newsroom/kiosk')
@@ -27,9 +27,8 @@ block content
                     .uk-width-expand
                       .uk-text-bold.uk-text-truncate Unified Feed
 
-            li  
-
-            if feedList && Array.isArray(feedList.feeds) && (feedList.feeds.length > 0)
+          if feedList && Array.isArray(feedList.feeds) && (feedList.feeds.length > 0)
+            ul.uk-list.sidebar-feed-list
               each feedItem in feedList.feeds
                 li
                   div(, class={ 'item-active': (feed && feed._id.equals(feedItem._id)) }).feed-list-item
@@ -45,19 +44,20 @@ block content
         div(class="uk-width-1-1 uk-width-expand@s").kiosk-content
           block kiosk-content
 
-        if entries && Array.isArray(entries.entries) && (entries.entries.length > 0)
-          div(class="uk-width-1-1 uk-width-1-5@s").kiosk-sidebar
-            ul.uk-list.sidebar-feed-list
-              each entry of entries.entries
-                li
-                  .feed-entry
-                    a(href=`/newsroom/kiosk/${entry.feed._id}/article/${entry._id}`)
-                      div(uk-grid).uk-grid-small
-                        .uk-width-expand
-                          .uk-text-bold.uk-text-truncate= entry.title
-                    a(href=`/newsroom/kiosk/${entry.feed._id}`)
-                      .uk-flex.uk-flex-middle
-                        div(class="uk-visible@s").uk-width-auto
-                          img(src= entry.feed.favicons[0]).feed-icon
-                        .uk-width-expand
-                          .uk-text-truncate= entry.feed.title
+        div(class="uk-width-1-1 uk-width-1-5@s")
+          .kiosk-sidebar
+            if entries && Array.isArray(entries.entries) && (entries.entries.length > 0)
+              ul.uk-list.sidebar-feed-list
+                each entry of entries.entries
+                  li
+                    .feed-entry
+                      a(href=`/newsroom/kiosk/${entry.feed._id}/article/${entry._id}`)
+                        div(uk-grid).uk-grid-small
+                          .uk-width-expand
+                            .uk-text-bold.uk-text-truncate= entry.title
+                      a(href=`/newsroom/kiosk/${entry.feed._id}`)
+                        .uk-flex.uk-flex-middle
+                          div(class="uk-visible@s").uk-width-auto
+                            img(src= entry.feed.favicons[0]).feed-icon
+                          .uk-width-expand
+                            .uk-text-truncate= entry.feed.title

client/less/site/kiosk.less

@@ -151,6 +151,10 @@
         font-size: 32px;
         line-height: 1;
         color: inherit;
+
+        &.entry-title-small {
+          font-size: 16px;
+        }
       }
 
       .feed-entry-description {