Add blog posts feature

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased](https://github.com/shift72/core-template/compare/1.9.31...HEAD)
 
+### Added
+
+Blog posts and feed. A /posts/ route has been added to kibble.json for the feed,
+but it shouldn't affect sites that don't actively use the posts feature and link
+to it from the nav.
+
 ## [1.9.31](https://github.com/shift72/core-template/compare/1.9.29...1.9.31)
 
 ### Added

kibble.json

@@ -3,6 +3,7 @@
   "version": "1.9.31",
   "siteUrl": "https://tvoddemo.shift72.com",
   "builderVersion": "0.17.8",
+  "builderVersion": "0.17.9",
   "defaultLanguage": "en",
   "languages": {
     "ar": {
@@ -173,6 +174,23 @@
       "datasource": "PageIndex",
       "pageSize": 0
     },
+    {
+      "name": "postIndex",
+      "firstPageUrlPath": "/posts/",
+      "urlPath": "/posts/:index/",
+      "templatePath": "templates/page/posts-feed.jet",
+      "datasource": "PageIndex",
+      "options": {
+        "pageTypes": [
+          "post"
+        ],
+        "sortBy": [
+          "published_date:desc",
+          "title:asc"
+        ]
+      },
+      "pageSize": 5
+    },
     {
       "name": "bundleItem",
       "urlPath": "/bundle/:slug/",

package.json

@@ -53,7 +53,7 @@
     "postcss-cli": "^11.0.1",
     "rollup": "^2.23.0",
     "rollup-plugin-terser": "^6.1.0",
-    "s72-kibble": "^0.17.8",
+    "s72-kibble": "^0.17.9",
     "sass": "^1.36.0"
   },
   "devDependencies": {

site/en_AU.all.json

@@ -1745,5 +1745,14 @@
   },
   "wcag_aria_label_social_bluesky": {
     "other": "Visit us on Bluesky"
+  },
+  "posts_pagination_next": {
+    "other": "Older posts"
+  },
+  "posts_pagination_prev": {
+    "other": "Newer posts"
+  },
+  "post_preview_show_more": {
+    "other": "Read more"
   }
-}
+}

site/styles/_forms.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 label {
   @include subtitle-1-style;

site/styles/_legacy.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 html {
   height: 100%;

site/styles/_meta-detail.scss

@@ -169,10 +169,6 @@
     margin-right: 20px;
     width: 110px;
 
-    &.poster-image {
-      margin-bottom: 0px;
-    }
-
     @include media-breakpoint-up(xs) {
       width: 155px;
     }
@@ -181,6 +177,10 @@
       width: 208px;
     }
 
+    &.poster-image {
+      margin-bottom: 0;
+    }
+
     .live {
       display: none;
     }

site/styles/_meta-sub-item.scss

@@ -110,7 +110,6 @@
   }
 }
 
-
 s72-show-hide-switcher {
   display: block;
   margin-bottom: 15px;

site/styles/_pages.scss

@@ -38,6 +38,8 @@
 .curated-page,
 .library-page,
 .content-page,
+.post-page,
+.posts-feed-page,
 .form-page,
 .wishlist-page,
 .search-page,

site/styles/_posts.scss

@@ -0,0 +1,142 @@
+.post-page,
+.posts-feed-page {
+  margin-top: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
+  width: var(--page-reading-column-width);
+  max-width: calc(min(95vw, 1100px));
+}
+
+.post-title {
+  @include heading-2-style();
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+
+  > a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  opacity: 0.7;
+  font-size: var(--body-2-style-font-size);
+  margin-bottom: 1rem;
+}
+
+.post-published-date::first-letter {
+  text-transform: capitalize; // icky hack for dates like "yesterday 10:32am" maybe the s72-time component needs a 'format' prop so we can force short dates?
+}
+
+.post-header-image {
+  margin-bottom: 1rem;
+
+  s72-image {
+    display: flex;
+    flex-direction: column;
+    aspect-ratio: 1200 / 422;
+
+    border-radius: 0.5rem;
+    overflow: hidden;
+
+    transition: background-color 0.25s ease;
+    background-color: var(--poster-skeleton-background-color);
+
+    /* stylelint-disable selector-no-qualifying-type */
+    // a bit of a pedantic rule, wrong in this case. <s72-image> applies the
+    // modifier classes to the wrapper element as well as the <img>, but setting
+    // a background color for the skeleton needs to happen on the wrapper
+    // because you can't colour an <img>
+    &.s72-image--loaded {
+      background-color: transparent;
+      aspect-ratio: unset;
+    }
+
+    img {
+      transition: opacity 0.25s ease;
+      opacity: 0;
+
+      &.s72-image--loaded {
+        opacity: 1;
+      }
+    }
+    /* stylelint-enable selector-no-qualifying-type */
+  }
+}
+
+.post-body {
+  &,
+  p {
+    word-wrap: break-word;
+    font-weight: var(--post-body-font-weight);
+    line-height: var(--post-body-line-height);
+  }
+
+  strong {
+    font-weight: bolder;
+  }
+
+  a {
+    @include a;
+  }
+}
+
+.post-page {
+  comment-section {
+    padding: 0;
+    margin-top: 3rem;
+  }
+}
+
+.posts-feed-page {
+  .post-preview + .post-preview {
+    margin-top: var(--posts-feed-spacing);
+  }
+
+  .post-preview-show-more {
+    text-align: center;
+    opacity: 0.8;
+  }
+
+  // Overflow behaviour: js in the template applies a .post-preview--overflowed class
+  .post-preview {
+    overflow: hidden;
+
+    .post-body {
+      max-height: var(--post-preview-height);
+    }
+
+    .post-preview-show-more {
+      display: none;
+    }
+
+    &.post-preview--overflowed {
+      .post-preview-show-more {
+        display: block;
+      }
+
+      .post-body {
+        mask-image: linear-gradient(180deg, #000 72%, transparent);
+      }
+    }
+  }
+
+  .posts-pagination {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 4rem;
+    padding-top: 2rem;
+    border-top: 1px solid #fff5;
+
+    .posts-pagination-next {
+      margin-left: auto;
+    }
+  }
+}

site/styles/_variables.scss

@@ -140,6 +140,14 @@
   --page-detail-padding-hz: 20px;
   --page-detail-padding-hz-lg: 50px;
 
+  --page-reading-column-width: 69ch;
+
+  --posts-feed-spacing: 6rem;
+  --post-preview-height: 300px;
+
+  --post-body-font-weight: 400;
+  --post-body-line-height: 1.55;
+
   --heading-1-style-letter-spacing: normal;
   --heading-2-style-letter-spacing: normal;
   --heading-3-style-letter-spacing: normal;
@@ -187,7 +195,6 @@
   --playback-progress-bar-color: var(--secondary);
   --playback-progress-bar-bg-color: rgba(var(--body-bg-rgb), 0.5);
 
-
   // Detail player
   --page-detail-player-padding-top: 140px;
   --page-detail-player-padding-top-lg: 200px;

site/styles/main.scss

@@ -10,6 +10,7 @@
 @import '_buttons';
 @import '_cta-buttons';
 @import '_pages';
+@import '_posts';
 @import '_forms';
 @import '_card';
 

site/templates/page/post.jet

@@ -0,0 +1,29 @@
+{{extends "templates/application/application.jet"}}
+
+{{import "templates/page/posts/shared.jet"}}
+{{import "templates/common/background-image.jet"}}
+
+{{block head()}}
+  {{yield seo() page}}
+{{end}}
+
+{{block body()}}
+  <main id="main" class="page post-page">
+    {{yield backgroundImage(containerClass="page-bg", gradientClass="right-gradient", imageClass="page-bg-img", imageSrc=page.Images.Background)}}
+
+    <div class="post">
+      {{yield postTitle(post=page)}}
+      {{yield postMeta(post=page)}}
+      {{yield postHeaderImage(post=page)}}
+      {{yield postBody(text=page.Content)}}
+    </div>
+
+    {{if isEnabled("commenting")}}
+      <comment-section slug="{{page.Slug}}"></comment-section>
+    {{end}}
+  </main>
+{{end}}
+
+
+
+{{block appBadges()}}{{end}}