Show Blog Posts from API #48
Conversation
- use `faUserCircle` as author profile image placeholder when profile image src is an empty string - center author profile image to <title + description>: this design doesn't work for very long author bio/description, but works great for current authors.
- loads blog posts from both: 1. blog API; 2. static markdown pages.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Please have a look at this draft and branch |
|
This is awesome thank you! 2 things though:
|
- Remove static post related functions - Update API Client to use new API format
|
API client is now updated accordingly. Static Post related API calls are removed. |
src/app/blog/utils.ts
Outdated
| export async function getStaticPostSlugs(): Promise<string[]> { | ||
| const fileNames = fs.readdirSync(POSTS_FILE_PATH); | ||
| return fileNames.map((fileName) => fileName.replace(".md", "")); | ||
| } | ||
|
|
||
| export async function getPostBySlug(slug: string): Promise<Post> { | ||
| /** | ||
| * Get a static post using slug. | ||
| * @param slug URL slug string. Should be a non-numerical string. | ||
| */ | ||
| export async function getStaticPostBySlug(slug: string): Promise<Post> { | ||
| const readFile = fs.readFileSync(`${POSTS_FILE_PATH}/${slug}.md`, "utf-8"); | ||
| const { | ||
| data: { |
There was a problem hiding this comment.
Should we remove all of this static stuff now? (And update wording of "remote" stuff to just blog/post
src/app/blog/utils.ts
Outdated
| * Get a remote blog post using slug. | ||
| * @param slug URL slug string that denotes a remote blog integer ID. | ||
| */ | ||
| export async function getDynamicPostBySlug(slug: string): Promise<Post | undefined> { |
There was a problem hiding this comment.
And then just expose this directly?
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // TODO Type this properly | ||
| export async function generateStaticParams(): Promise<any> { |
There was a problem hiding this comment.
Im still undecided whether removing this is the right plan.
The nice thing about it is we can render blogs as soon as they get released on the website. If we keep this then we have to do some sort of build everytime we release a blog which is a bit of a pain.
The annoying thing is
- We have to fetch the blog each time someone goes to the site (we can solve this with some caching below) but this is a very small issue
- If we are going to build a site map (which it sounds like we want) then for blogs I assume we will want to know all of them at build time (so we can add all the blogs in the sitemap?)
What do you think makes sense?
There was a problem hiding this comment.
I suppose for now we can do it in two ways. One is to fetch everything dynamically (which is basically what this pull request does). I assume you worried about too much API calls right? We can definitely reduce API calls, by:
- having next.js cache accessed webpages (request results) for a fixed period (see https://nextjs.org/docs/app/api-reference/functions/fetch#optionsnextrevalidate), set it to cache blog posts for a day seems reasonable to me (which is not added to this pull request yet), so that the number of API calls = the number of times Next.js request new data for cache purposes.
- Same thing applies to sitemaps: we can have next.js dynamically generate a new site map after a fixed period passed.
I think this is the better way to do it. We can do some tests to see if the backend calls reduced after we added dynamic content cache to our project.
As of the second approach: we can also do it fully statically by only fetching data once at build time. I imagine you can add something (called webhooks?) to the backend so that any update to the blogs (or any other part of the backend data) to trigger a new frontend build, which should work just fine if we don't update blogs very frequently. The benefit of this is that we can render the whole website as a static website rather than server-side rendering, in theory because we can distribute static content via CDN the performance would be better. Then again, it will probably take more time to build considering this is an architecture change.
Let me know if there is anything need to be clarified.
UPDATED 10 Sep 2024
Last Week Update
Remote Blogs fetched from API are now presented along with static blogs, screenshots are attached below.
Important Changes:
slugproperty is not very useful: because we need blog ID to fetch blog content, the URL slug part must contain the blog ID i.e. something like/blog/1rather than/blog/post/blog-1.md. One drawback is that these articles won't have a descriptive url, but I guess this is pretty much unavoidable unless our authors always give their articles a unique url path name.Something worth noticing:
Below is the correctly rendered remote blog post at
/blog/1Other changes:
BlogTileUI so only the upper corners of the header image are rounded;AuthorTile), previously it was poorly styled, which made it look like capsule shape sometimes; author placeholder is also added