diff --git a/CHANGELOG.md b/CHANGELOG.md index e44afe25..017589a2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/kibble.json b/kibble.json index ececa720..e724d10d 100644 --- a/kibble.json +++ b/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/", diff --git a/package-lock.json b/package-lock.json index 53e0771a..a06f8367 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,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": { @@ -8180,10 +8180,11 @@ } }, "node_modules/s72-kibble": { - "version": "0.17.8", - "resolved": "https://registry.npmjs.org/s72-kibble/-/s72-kibble-0.17.8.tgz", - "integrity": "sha512-YzmlHFZxZfAZX6Jzk/CniLF7M51PIa5xTYZ1pdsdOPNgaXviLo4aD9Zkt4eqvdgReJ/8MRkZXqT4nMmA+cwbyg==", + "version": "0.17.9", + "resolved": "https://registry.npmjs.org/s72-kibble/-/s72-kibble-0.17.9.tgz", + "integrity": "sha512-nZZP0gCu88n9u37VhgHEijR2pWPNYDNpAKcPdvMQ+cGclsJdBT+DkRiZHHeR0sa7jOvEeHGxDuENzLrNRov3AA==", "hasInstallScript": true, + "license": "MIT", "dependencies": { "binwrap": "^0.2.0" }, @@ -15367,9 +15368,9 @@ } }, "s72-kibble": { - "version": "0.17.8", - "resolved": "https://registry.npmjs.org/s72-kibble/-/s72-kibble-0.17.8.tgz", - "integrity": "sha512-YzmlHFZxZfAZX6Jzk/CniLF7M51PIa5xTYZ1pdsdOPNgaXviLo4aD9Zkt4eqvdgReJ/8MRkZXqT4nMmA+cwbyg==", + "version": "0.17.9", + "resolved": "https://registry.npmjs.org/s72-kibble/-/s72-kibble-0.17.9.tgz", + "integrity": "sha512-nZZP0gCu88n9u37VhgHEijR2pWPNYDNpAKcPdvMQ+cGclsJdBT+DkRiZHHeR0sa7jOvEeHGxDuENzLrNRov3AA==", "requires": { "binwrap": "^0.2.0" } diff --git a/package.json b/package.json index 70eaccae..a096ff5d 100644 --- a/package.json +++ b/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": { diff --git a/site/en_AU.all.json b/site/en_AU.all.json index ea582408..e5f1f5db 100644 --- a/site/en_AU.all.json +++ b/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" } -} \ No newline at end of file +} diff --git a/site/styles/_forms.scss b/site/styles/_forms.scss index ff2345fc..8f481758 100644 --- a/site/styles/_forms.scss +++ b/site/styles/_forms.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; label { @include subtitle-1-style; diff --git a/site/styles/_legacy.scss b/site/styles/_legacy.scss index 9a0ed169..598f3238 100644 --- a/site/styles/_legacy.scss +++ b/site/styles/_legacy.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; html { height: 100%; diff --git a/site/styles/_meta-detail.scss b/site/styles/_meta-detail.scss index e7df45b3..19c607e7 100644 --- a/site/styles/_meta-detail.scss +++ b/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; } diff --git a/site/styles/_meta-sub-item.scss b/site/styles/_meta-sub-item.scss index fab076f7..def18d4e 100644 --- a/site/styles/_meta-sub-item.scss +++ b/site/styles/_meta-sub-item.scss @@ -110,7 +110,6 @@ } } - s72-show-hide-switcher { display: block; margin-bottom: 15px; diff --git a/site/styles/_pages.scss b/site/styles/_pages.scss index 3dc57a4c..6f36c4c5 100644 --- a/site/styles/_pages.scss +++ b/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, diff --git a/site/styles/_posts.scss b/site/styles/_posts.scss new file mode 100644 index 00000000..4ae11633 --- /dev/null +++ b/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. applies the + // modifier classes to the wrapper element as well as the , but setting + // a background color for the skeleton needs to happen on the wrapper + // because you can't colour an + &.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; + } + } +} diff --git a/site/styles/_variables.scss b/site/styles/_variables.scss index cb4b40aa..1286e5fc 100644 --- a/site/styles/_variables.scss +++ b/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; diff --git a/site/styles/main.scss b/site/styles/main.scss index 1ecf3ae5..8c73c885 100644 --- a/site/styles/main.scss +++ b/site/styles/main.scss @@ -10,6 +10,7 @@ @import '_buttons'; @import '_cta-buttons'; @import '_pages'; +@import '_posts'; @import '_forms'; @import '_card'; diff --git a/site/templates/page/post.jet b/site/templates/page/post.jet new file mode 100644 index 00000000..4bc3dd50 --- /dev/null +++ b/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()}} +
+ {{yield backgroundImage(containerClass="page-bg", gradientClass="right-gradient", imageClass="page-bg-img", imageSrc=page.Images.Background)}} + +
+ {{yield postTitle(post=page)}} + {{yield postMeta(post=page)}} + {{yield postHeaderImage(post=page)}} + {{yield postBody(text=page.Content)}} +
+ + {{if isEnabled("commenting")}} + + {{end}} +
+{{end}} + + + +{{block appBadges()}}{{end}} diff --git a/site/templates/page/posts-feed.jet b/site/templates/page/posts-feed.jet new file mode 100644 index 00000000..6c041191 --- /dev/null +++ b/site/templates/page/posts-feed.jet @@ -0,0 +1,66 @@ +{{extends "templates/application/application.jet"}} + +{{import "templates/page/posts/shared.jet"}} +{{import "templates/common/background-image.jet"}} + +{{block body()}} +
+ {{range page := pages}} + {{yield postPreview(post=page)}} + {{end}} + +
+ {{ if len(pagination.PreviousURL) > 0 }} + {{i18n("posts_pagination_prev")}} + {{end}} + {{ if len(pagination.NextURL) > 0 }} + {{i18n("posts_pagination_next")}} + {{end}} +
+ + +{{end}} + + +{{block postPreview(post)}} +
+ {{yield postTitle(post=post, href=routeTo(post, "pageItem"))}} + {{yield postMeta(post=post)}} + {{yield postHeaderImage(post=post)}} + {{yield postBody(text=post.Content)}} + {{i18n("post_preview_show_more")}} +
+{{end}} + + +{{block appBadges()}}{{end}} diff --git a/site/templates/page/posts/shared.jet b/site/templates/page/posts/shared.jet new file mode 100644 index 00000000..9bd2c02d --- /dev/null +++ b/site/templates/page/posts/shared.jet @@ -0,0 +1,34 @@ +{{block postTitle(post, href="")}} +

+ {{if len(href) > 0}} + {{post.Title}} + {{else}} + {{post.Title}} + {{end}} +

+{{end}} + +{{block postMeta(post)}} +
+ {{if !post.PublishedDate.IsZero()}} +
+ +   {* nbsp helps prevent layout shift due to s72-time relish component loading delay *} +
+ {{end}} +
+{{end}} + +{{block postHeaderImage(post)}} + {{if len(post.Images.Header) > 0}} +
+ +
+ {{end}} +{{end}} + +{{block postBody(text="")}} +
+ {{text | raw}} +
+{{end}}