DES-189
Our use of borders makes it very difficult to style a theme that looks
good with all states. Theme developers need a border to separate
comments from the content, but the current comments output includes
borders. It's possible to make it look ok in most of the time, but it's
difficult to work with. This change updates borders from the comments
CTA box with the following rules:
- Logged out without comments: no borders
- Logged out with comments: top border only
- Logged in without comments: no borders
- Logged in with comments: no borders
no issue
- moving the pagination button back to the top since it's not needed
now.
- Will move it to bottom in future along with additional comments enhancements.
ref MOM-135 MOM-211 MOM-213
- Bumped up the default comments count from 5 to 20 comments before
pagination kicks in.
- Moved the pagination (`Show X previous comments)` to bottom of the
page (soon to be reworded to `Show x more comments`)
- Updated tests and added a new helper for adding multiple comments easier.
closes https://linear.app/tryghost/issue/ENG-780
- the `admin-auth` frame was set up to log when any `message` event was handled but couldn't be parsed as JSON. For our own events that's fine but `message` events are also frequently triggered by browser extensions meaning the DevTools console log could become quite noisy for no reason
- removed the logging as it's noisy and not useful outside of development
closes https://linear.app/tryghost/issue/ENG-739
- `props.innerRef` in `<IFrame>` was inadvertently assumed to always exist, sometimes throwing an error on render when certain popups like the profile settings modal were opened resulting in the app crashing and the whole comments block disappearing
- added a guard to ensure the ref exists before trying to set it
- updated tests so the profile modal route is tested
closes https://linear.app/tryghost/issue/ENG-721
ref https://linear.app/tryghost/issue/ENG-708
Comments-UI loads `/ghost/admin-frame/` in an iframe to check if a Staff User is authenticated in order to show moderation options. That iframe request loads a HTML page which in turn contains a script that fires off an API request that attempts to fetch the logged-in user details, resulting in a 403 "error" showing up when not authenticated. In the vast majority of cases there will be no staff user authenticated so lots of extra requests and "errors" are seen unnecessarily.
- adjusted the `/ghost/auth-frame/` endpoint to check if the request contains an Admin session cookie
- if it does, continue as before with rendering the HTML page so the script is loaded
- if it doesn't, return an empty 204 response avoiding the script request and subsequent 403-generating API request
- eliminates the 403 error being generated for all typical visitor traffic, the error should only be seen when an Admin was previously logged in but their cookie is no longer valid (either from logging out, or going past the 6month validity period)
no issue
- defers loading of `admin-auth` frame and it's API request until we are displaying some comments
- defers the frame load and API request until the comments box is scrolled into view
- eliminates the requests altogether for posts that have no comments
closes ENG-711
When an Admin is authenticated in Comments-UI we only add moderation options to the displayed comments so we don't need to pre-emptively load the `admin-auth` iframe and make the `/ghost/api/admin/users/me/` request until some comments are actually visible.
- used `state.comments.length` property to defer rendering of the admin auth frame until comments have been fetched (after box is scrolled into view) and the count is > 0
no issue
- switches post browse requests to`/members/api/comments/post/:post_id/` to enable better cache bucketing
and invalidation
- removes `order` param from browse and replies requests
closes ENG-681
There's no need to provide an `order` param with every request in Comments-UI if the API has default ordering that matches our requirements. The order param makes logs more noisy/harder to read than they need to be so we want to get rid of it.
- modified comments API input serializer to add a default order param to the browse and replies endpoints when none is provided
- removed order param from the requests that Comments-UI makes
refs https://linear.app/tryghost/issue/ENG-676/
Now we have the case that there is no filter param, the simple string
approach fails. Instead we build up a URLSearchParams object which
makes it easier to handle conditional params & stringify it at the end.
closes ENG-678
The comments block is typically shown at the bottom of a post so it doesn't make sense to eagerly fetch comments from the API when we don't know if the comments block will even be viewed. By lazy-loading the data only when the comments block comes into view we can reduce both data usage for visitors and load on the site.
- uses IntersectionObserver API to delay comments app initialisation until the comments block has scrolled into view
- updated all iframe-related components to forward a `ref` so we can use the `<iframe>` element reference inside the `App` component
refs https://linear.app/tryghost/issue/ENG-673
This means that the initial load of comments can be cached for everyone.
We also improve the timestamp which is used when fetching future comments,
instead of using a locally generated timestamp, we use the created_at of
the first comment loaded, this drastically improved the likelyhood that the
timestamp will be the same, meaning that it will hit the cache.
no ref
- includes run of `eslint --fix` to update changed classname ordering in Tailwind
---------
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
