@shift72/core-template 1.9.31 → 1.9.33

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Changelog
 
-## [Unreleased](https://github.com/shift72/core-template/compare/1.9.31...HEAD)
+## [Unreleased](https://github.com/shift72/core-template/compare/1.9.33...HEAD)
+
+## [1.9.33](https://github.com/shift72/core-template/compare/1.9.32...1.9.33)
+
+### Changed
+
+- Update font.jet to use cdn.shift72.com for fonts. Preload poppins faces to prevent unwanted pop-ins.
+- Blog post styling tweaks
+
+## [1.9.32](https://github.com/shift72/core-template/compare/1.9.31...1.9.32)
+
+### 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)
 

package/kibble.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shift72/core-template",
-  "version": "1.9.31",
+  "version": "1.9.33",
   "description": "Shift72 core template",
   "license": "MIT",
   "scripts": {
@@ -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.10",
     "sass": "^1.36.0"
   },
   "devDependencies": {

package/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"
   }
-}
+}

package/site/styles/_forms.scss

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

package/site/styles/_legacy.scss

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

package/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;
     }

package/site/styles/_meta-sub-item.scss

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

package/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,

package/site/styles/_posts.scss

@@ -0,0 +1,156 @@
+.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 .post,
+.posts-feed-page .post-preview {
+  background-color: var(--post-background-color);
+  padding: 20px 25px;
+  border-radius: 8px;
+}
+
+.post-page {
+  .page-bg {
+    filter: blur(8px);
+    -webkit-filter: blur(8px);
+  }
+  .post {
+    margin: 1rem 0;
+  }
+  comment-section {
+    padding: 0;
+    margin-top: 2rem;
+  }
+}
+
+.posts-feed-page {
+  .post-preview + .post-preview {
+    margin-top: var(--posts-feed-spacing);
+  }
+
+  .post-preview-show-more {
+    text-align: center;
+    text-decoration: underline;
+    opacity: 0.8;
+  }
+
+  // Overflow behaviour: js in the template applies a .post-preview--overflowed class
+  .post-preview {
+    overflow: hidden;
+
+    .post-body {
+      margin-bottom: 40px;
+      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;
+
+    .posts-pagination-next {
+      margin-left: auto;
+    }
+  }
+}

package/site/styles/_variables.scss

@@ -140,6 +140,15 @@
   --page-detail-padding-hz: 20px;
   --page-detail-padding-hz-lg: 50px;
 
+  --page-reading-column-width: 69ch;
+
+  --posts-feed-spacing: 3rem;
+  --post-preview-height: 250px;
+  --post-background-color: #030303a0;
+
+  --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 +196,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;

package/site/styles/main.scss

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

package/site/templates/application/head/font.jet

@@ -1,4 +1,6 @@
 {{block font()}}
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
-{{end}}
+  <link rel="stylesheet" href="https://cdn.shift72.com/fonts/poppins/index.css">
+  <link rel="preload" href="https://cdn.shift72.com/fonts/poppins/files/poppins-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="https://cdn.shift72.com/fonts/poppins/files/poppins-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="https://cdn.shift72.com/fonts/poppins/files/poppins-latin-500-normal.woff2" as="font" type="font/woff2" crossorigin>
+{{end}}

package/site/templates/page/post/posts-feed.jet

@@ -0,0 +1,68 @@
+{{extends "templates/application/application.jet"}}
+
+{{import "templates/page/post/shared.jet"}}
+{{import "templates/common/background-image.jet"}}
+
+{{block body()}}
+  <main id="main" class="page posts-feed-page">
+    {{range page := pages}}
+      {{yield postPreview(post=page)}}
+    {{end}}
+    {{ if len(pagination.PreviousURL) > 0 || len(pagination.NextURL) > 0 }}
+      <div class="posts-pagination">
+      {{ if len(pagination.PreviousURL) > 0 }}
+        <a class="posts-pagination-prev" href="{{pagination.PreviousURL}}">{{i18n("posts_pagination_prev")}}</a>
+      {{end}}
+      {{ if len(pagination.NextURL) > 0 }}
+        <a class="posts-pagination-next" href="{{pagination.NextURL}}">{{i18n("posts_pagination_next")}}</a>
+      {{end}}
+      </div>
+    {{end}}
+  </main>
+
+  <script>
+    (function () {
+      function detectClamping() {
+        var previews = document.querySelectorAll('.post-preview');
+
+        previews.forEach(function (el) {
+          el.classList.remove('post-preview--overflowed');
+
+          var scroll = el.scrollHeight;
+          var client = el.clientHeight;
+
+          if (scroll > client + 1) {
+            el.classList.add('post-preview--overflowed');
+          }
+        });
+      }
+
+      detectClamping();
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', detectClamping);
+      }
+
+      window.addEventListener('load', detectClamping);
+
+      var resizeTimeout;
+      window.addEventListener('resize', function () {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(detectClamping, 150);
+      });
+    })();
+  </script>
+{{end}}
+
+
+{{block postPreview(post)}}
+  <div class="post-preview">
+    {{yield postTitle(post=post, href=routeTo(post, "pageItem"))}}
+    {{yield postMeta(post=post)}}
+    {{yield postHeaderImage(post=post)}}
+    {{yield postBody(text=post.Content)}}
+    <a class="post-preview-show-more" href='{{routeTo(post, "pageItem")}}'>{{i18n("post_preview_show_more")}}</a>
+  </div>
+{{end}}
+
+
+{{block appBadges()}}{{end}}

package/site/templates/page/post/shared.jet

@@ -0,0 +1,40 @@
+{{block postTitle(post, href="")}}
+  <h3 class="post-title">
+    {{if len(href) > 0}}
+      <a href="{{href}}">{{post.Title}}</a>
+    {{else}}
+      {{post.Title}}
+    {{end}}
+  </h3>
+{{end}}
+
+{{block postMeta(post)}}
+  <div class="post-meta">
+    {{if !post.PublishedDate.IsZero()}}
+      <div class="post-published-date">
+        <s72-time datetime="{{post.PublishedDate.UnixMilli()}}" mode="date"></s72-time>
+        &nbsp; {* nbsp helps prevent layout shift due to s72-time relish component loading delay *}
+      </div>
+    {{end}}
+  </div>
+{{end}}
+
+{{block postHeaderImage(post)}}
+  {{if len(post.Images.Header) > 0}}
+    <div class="post-header-image">
+      <s72-image src="{{post.Images.Header}}"></s72-image>
+    </div>
+  {{end}}
+{{end}}
+
+{{block postBody(text="")}}
+  <div class="post-body">
+    {{text | raw}}
+  </div>
+{{end}}
+
+{{block postBacktoPostsLink()}}
+  <div class="post-back-to-posts">
+    <a href="{{routeToPath("/posts/")}}">{{i18n("post_back_to_posts")}}</a>
+  </div>
+{{end}}

package/site/templates/page/post.jet

@@ -0,0 +1,26 @@
+{{extends "templates/application/application.jet"}}
+
+{{import "templates/page/post/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)}}
+    {{yield postBacktoPostsLink()}}
+    <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}}
+    {{yield postBacktoPostsLink()}}
+  </main>
+{{end}}