1158 Embed ghost blog articles in frontend app #1161
Conversation
| import React from 'react' | ||
| import { PostOrPage } from '@tryghost/content-api' | ||
| import { Container, Typography, Unstable_Grid2 as Grid2 } from '@mui/material' | ||
|
|
||
| import { baseUrl, routes } from 'common/routes' | ||
| import Layout from 'components/layout/Layout' | ||
| import BackButton from 'components/navigation/BackButton' | ||
|
|
||
| import ReadingTime from './ReadingTime' | ||
| import DateCreated from './DateCreated' | ||
| import FeaturedImage from './FeaturedImage' | ||
| import RenderContent from './RenderContent' |
| component="div" | ||
| variant="body2" | ||
| sx={{ fontSize: (theme) => theme.typography.pxToRem(18) }} | ||
| dangerouslySetInnerHTML={{ __html: html }} |
There was a problem hiding this comment.
Just a sanity check. This is the way to handle the rich text right?
There was a problem hiding this comment.
Unless we use markdown I think we're stuck with dangerouslySetInnerHTML
This is the default method that Ghost suggests in their articles and tutorials:
https://ghost.org/docs/jamstack/next/#rendering-a-single-post
| export const getStaticProps: GetStaticProps = async ({ params, locale }) => { | ||
| if (typeof params?.slug !== 'string') return { notFound: true } | ||
|
|
||
| try { | ||
| const client = createGhostClient() | ||
| const post = await client.posts.read({ slug: params.slug }) | ||
|
|
||
| if (!post) { | ||
| return { notFound: true } | ||
| } | ||
| return { | ||
| props: { | ||
| post, | ||
| ...(await serverSideTranslations(locale ?? 'bg', ['common', 'blog'])), | ||
| }, | ||
| } | ||
| } catch (error) { | ||
| console.error(error) | ||
| Sentry.captureException(error) | ||
| return { notFound: true } | ||
| } | ||
| } |
There was a problem hiding this comment.
Is this the way we should do the fetching of other pages. Or should we continue with the dehydrate/hydrate approach. I saw that both are viable approaches from the react-query docs https://tanstack.com/query/v4/docs/guides/ssr#using-nextjs
There was a problem hiding this comment.
If we want to have good SEO we need to have one of the following two approaches:
- SSR hydratation via
getStaticPropsandgetStaticPaths - SSR hydratation via
getServerSideProps
In order to have the page content downloaded from the server and embedded in the HTML we need to practice the methods above.
For the blog SP is more appropriate as content changes rarely.
For the campaigns SSP seems to be more appropriate since content needs to be up-to-date often.
| ARG GHOST_API_URL | ||
| ENV GHOST_API_URL="$GHOST_API_URL" | ||
| ARG GHOST_CONTENT_KEY | ||
| ENV GHOST_CONTENT_KEY="$GHOST_CONTENT_KEY" |
There was a problem hiding this comment.
why should these be part of the container? We can set them externally
There was a problem hiding this comment.
@imilchev I'm trying to fix the build running in check-pr and release procedure.
In order to do next build we need to have the static content downloaded from the blog instance.
We can hardcode them in the image, but that removes the ability to replace them via ENV variable, which contradicts with the 12factor rules.
Any ideas are welcome
There was a problem hiding this comment.
@imilchev It's gonna be awesome if we don't need that in the Dockerfile. I'll do a test now.
There was a problem hiding this comment.
Well.. it doesn't pass
Check out https://github.com/podkrepi-bg/frontend/actions/runs/3534858086/jobs/5932216756
I'm reverting it for now
This reverts commit df0456f.
Closes #1158
Motivation and context
Integrates Ghost API and fetches articles and pages using their Content API
Screenshots:
Articles listing
Article viewing
Pages
Additional updates
v6.17.8tov7.21.1blacklistUrlswithdenyUrlsregarding their Inclusive Language Policy.@testing-libraryfromv12.1.2tov13.4.0to work with react 18createRootinstead ofrendertesting-library/react-testing-library#933Testing
Visit the following URLs and be sure to see the articles from the blog:
Visit the following page and be sure that it's able to open:
New environment variables:
GHOST_API_URL- URL of the Ghost blog instance withouthttps://prefixGHOST_CONTENT_KEY- Public content API key to fetch articlesNew dependencies:
@tryghost/content-api: https://www.npmjs.com/package/@tryghost/content-api