What This Screen Does
This is the public-facing page where visitors read a full blog article. Think of it like opening a magazine to a specific story — you see the cover image, the title, the author, the article body, tags, and a comment section at the bottom. Below the article, the system also shows a handful of recent posts so readers can keep exploring.
How to Get There
Open the dashboard or public site.
In the left-hand menu, click Blog.
Click on any article card in the list.
You are now on the Article Details screen for that post.
Step-by-Step Guide
1. View the Hero Banner
At the top of the page you will see a large cover image that spans the full width.
The article title is displayed in white text over the image.
In the bottom-left corner of the banner you will find the author’s avatar, author name, and the date the article was published.
2. Use the Breadcrumbs
Just below the hero banner there is a breadcrumb trail: Home → Blog → [Article Title].
Click Home to go back to the main dashboard.
Click Blog to return to the full list of articles.
3. Read the Article
Below the breadcrumbs you will find the article’s short description in bold text.
The full article content follows, rendered as rich text (headings, lists, images, links, etc.).
Simply scroll down to read everything.
4. Browse Tags
After the article body there is a row of tags (small labelled chips).
Tags describe the topics the article covers (for example, “Fitness”, “Nutrition”, “Tips”).
Tags are for reference only — clicking them does not filter or navigate anywhere on this screen.
5. Favorite the Article
Next to the tags you will see a heart icon with a number beside it.
The number shows how many people have favorited this article.
Click the heart checkbox to add or remove your favorite.
A row of small avatars shows some of the people who have favorited the article.
6. Read Comments
Scroll past the favorites section to reach the Comments area.
The heading shows the word “Comments” followed by the total count in parentheses, for example (12).
Each comment shows the commenter’s avatar, name, date, and message.
If a comment has replies, those appear indented below the original comment.
Use the pagination controls at the bottom of the comment list to move between pages of comments.
7. Post a Comment
To leave a comment, fill in the form above the comment list:
Field | Required | What to Enter |
Comment | Yes | Your comment text. This is a large text area — write as much or as little as you like. |
Name | Yes | Your name, so other readers know who wrote the comment. |
Yes | A valid email address (e.g. |
You can also use the toolbar icons below the comment box:
Gallery icon — attach an image.
Paperclip icon — attach a file.
Smiley face icon — insert an emoji.
When you are ready, click the Post comment button.
If any required field is missing or the email format is wrong, you will see an error message below the relevant field.
8. Browse Recent Posts
At the very bottom of the page, under the heading Recent Posts, you will see up to 4 other articles.
Each card shows the article’s cover image, title, and author.
Click any card to navigate to that article’s detail page.
What Happens Behind the Scenes
You open a blog article link (/blog/{title})
|
v
API call: useGetPost(title) — fetches the full article
|
v
API call: useGetLatestPosts(title) — fetches recent posts (excluding current)
|
v
While loading, a skeleton placeholder is displayed
|
v
If the article is found:
Hero banner, content, tags, favorites, and comments render
|
v
If the article is NOT found:
An error message is shown with a "Back to List" button
|
v
You scroll down and submit a comment
|
v
Form validates fields (Yup schema: comment, name, email required)
|
v
Comment is submitted (simulated API call)
|
v
Form resets and your comment appears
|
v
Recent posts load at the bottom of the page
Troubleshooting
“I see a blank page with a loading animation that never finishes”
The article data is still being fetched from the server.
Check your internet connection and try refreshing the page.
If the problem continues, the API may be temporarily down — wait a moment and try again.
“I see an error message instead of the article”
This means the system could not find an article with that title.
The article may have been deleted or unpublished since the link was shared.
Click the Back to List button to return to the blog and look for the article there.
If you followed a link from someone else, ask them to verify it is still valid.
“I filled in the comment form but the Post comment button does nothing”
Make sure all three fields — Comment, Name, and Email — are filled in.
The Email field must contain a valid email address (e.g.
name@example.com).Look for small red error messages below each field — they tell you exactly what needs to be fixed.
“My comment disappeared after I posted it”
After a successful submission the form resets to blank. This is normal — it means your comment was accepted.
Scroll down to the comment list to see your new comment.
If it does not appear, try refreshing the page. The comment may need a moment to show up.
“I do not see any tags on the article”
Not every article has tags. If the author did not add any, the tag section will simply be empty.
This is expected behavior, not a bug.
“The heart / favorite button does not seem to save”
The heart checkbox toggles on and off visually, but the favorite may not persist if you are not logged in or if the feature is display-only in your setup.
Try refreshing the page to see if your favorite was recorded.
If it resets every time, contact your administrator — the favorites API may not be connected.
“The Recent Posts section is empty”
Recent posts only appear when there are other published articles in the system.
If your blog has only one article, this section will be hidden.
Add more articles through the blog management screen to see them here.
“Images in the article body are broken or not loading”
The images may have been removed from the server or the URLs may have changed.
Check your internet connection — large images take longer to load on slow connections.
If you are the author, edit the article and re-upload the images.
“The page looks strange or the layout is broken”
Try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to clear cached styles.
Make sure your browser is up to date — older browsers may not render the page correctly.
If the problem persists on one specific article, the article content may contain malformed HTML — edit the article and review the content.