Add blog posts feature

[sam-shift72]

Description of work

Add support for blog pages and a chronological feed.

The feed (/posts/) is rendered as a separate kibble.json route using the PageIndex, filtered to posts and chronologically sorted by the page's published date. It uses Kibble's pagination.

The header image is used in the post feed / page; but in future it'd be nice to have other features in that 'slot' -- a media item 'embed' (or at least a link to the page), or something else.

It might be nice to add some shortcode templates too for embedding media, e.g. {{poster slug=/film/123 cta=true orientation=portrait size=lg}} to make it more useful for posts to feature content from the site. OTOH, shortcodes are very problematic for native app support / future email notification features -- so maybe not the best idea.

Edge cases/Caveats/Known issues

• The blog feed renders entire posts and relies on CSS to truncate. It'd be good to implement a markdown preview function in Kibble that followed a convention like splitting on a <!--more--> comment like Wordpress etc. do to indicate a good place for the fold. This will need some careful refactoring of the way Markdown fields in Kibble are handled though, as currently the Description/Content is replaced with rendered + sanitised HTML before the Jet runs
• Commenting on pages is only works for admins (because nobody owns a page, and mods can comment on anything regardless of ownership)
• Posts still just have a page url, e.g. (/page/whatever/) due to limitations with Kibble's routeTo function

Checklist

• CI tests are passing Github actions (inc. linting)
• Have checked this at multiple screen resolutions and range of browsers
• Updated changelog (if applicable)

[l0ud0gg]

nice man, havent run it up but looking over the template and styles makes sense. was it intentional to remove the app badges footer block for posts? i think that makes sense, we could prolly reduce it across the site a bit as its not so subtle. CSS lint is failing but otherwise lgtm.

[l0ud0gg]

I was able to run it up against staging-store-kibble. looks good. I did notice the posts page height calculation is a bit wierd -seem to be able to scroll a bit past the footer, or is this the caveat with the truncation?

[sam-shift72]

Good catch on the footer issue -- not 100% sure why the max-heighted overflow was making the body longer, but overflow: hidden on the .post-preview fixed that. Can't overflow:hidden on the .post-body because the "read more" fade out relies on detecting scrollHeight vs clientHeight of the element

[sam-shift72]

was it intentional to remove the app badges footer block for posts? i think that makes sense, we could prolly reduce it across the site a bit as its not so subtle

i forgot i put that in as an experiment; i felt they were distracting and not really relevant to the post / feed because it appeared right below it, but maybe the real issue is that they're a bit obnoxious in our default template and we should try to do a better job of pushing people to apps at a relevant part of the journey?

[l0ud0gg]

was it intentional to remove the app badges footer block for posts? i think that makes sense, we could prolly reduce it across the site a bit as its not so subtle

i forgot i put that in as an experiment; i felt they were distracting and not really relevant to the post / feed because it appeared right below it, but maybe the real issue is that they're a bit obnoxious in our default template and we should try to do a better job of pushing people to apps at a relevant part of the journey?

yeah totally agree to both points. can prolly leave out of posts anyways