What This Screen Does
This is where you read a full newsletter article. Think of it like opening a blog post — you see the cover image, the title, the author, and the full content of the article. You can also browse tags, favourite the article, leave a comment, and discover other recent posts at the bottom of the page.
How to Get There
Open the dashboard.
In the left-hand menu, click Newsletter.
Click on any article title or thumbnail in the list.
You are now on the Newsletter Article Details screen.
Step-by-Step Guide
1. View the Hero Banner
At the top of the page you will see a large cover image with a dark overlay.
The article title is displayed in white text over the image.
Below the title you will see the author’s avatar, author name, and the date the article was published.
On the bottom-right of the hero banner there is a Share button (a speed dial). Click it to reveal sharing options for social platforms (Facebook, Instagram, LinkedIn, Twitter).
2. Follow the Breadcrumbs
Just below the hero banner you will see 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 newsletter articles.
3. Read the Article
Below the breadcrumbs the article is displayed in a centred column (max width 720 px).
First you will see a short description of the article in bold text.
Below that is the full article content, rendered as rich text (markdown). This can include headings, paragraphs, images, links, lists, and code blocks.
4. Browse Tags
After the article content you will see a row of tags displayed as small chips.
Tags describe the topics covered in the article (for example, “Marketing”, “Tips”, “Product Update”).
Tags are for reference only — clicking them does not filter or navigate anywhere on this screen.
5. Favourite the Article
Below the tags there is a heart icon with a number next to it.
The number shows how many people have favourited (liked) this article.
Click the heart checkbox to toggle your favourite on or off.
Next to the heart you will see a small row of avatars showing some of the people who have favourited the article.
6. Read Comments
Scroll down to the Comments section.
The heading shows the total number of comments in parentheses, for example “Comments (12)”.
Each comment shows the commenter’s avatar, name, date, and message.
If a comment has replies, those replies appear indented underneath it, showing the replier’s name and the person they are responding to.
Use the pagination control at the bottom of the comment list to browse through pages of comments.
7. Post a Comment
Above the comment list there is a comment form with three fields:
Field | Required | What to Enter |
Comment | Yes | The text of your comment. You can write multiple lines. |
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.
Attachment icon — attach a file.
Smiley face icon — insert an emoji.
When you are ready, click the Post comment button.
The button will show a loading state while the comment is being submitted.
Once posted, the form will clear and your comment will appear in the list.
8. Discover Recent Posts
At the very bottom of the page you will find a Recent Posts section.
This shows the four most recent newsletter articles (excluding the one you are currently reading).
Each post is displayed as a card with a thumbnail, title, and author info.
Click any card to navigate to that article’s details page.
What Happens Behind the Scenes
You click on an article from the newsletter list
|
v
The screen reads the article title from the URL
|
v
API call: useGetPost(title) — fetches the full article
|
v
API call: useGetLatestPosts(title) — fetches recent posts
|
v
While loading, a skeleton placeholder is shown
|
v
Article data arrives — hero, content, tags, favourites, and comments render
|
v
Latest posts data arrives — "Recent Posts" section renders at the bottom
When You Post a Comment
You fill in Name, Email, and Comment, then click "Post comment"
|
v
Form validates all three fields (Yup schema)
|
v
Comment is submitted (simulated with a short delay)
|
v
Form fields are cleared
|
v
Success — your comment appears in the list
Troubleshooting
“The page is just showing a loading skeleton and never finishes”
The article data may be taking a long time to load. Check your internet connection.
Try refreshing the page in your browser.
If the problem continues, the article may have been deleted or the server may be experiencing issues. Go back to the newsletter list and try a different article.
“I see an error message instead of the article”
This means the system could not find the article. The URL may be wrong or the article may have been removed.
Click the Back to List button shown on the error screen to return to the newsletter list.
If you believe the article should exist, contact your administrator.
“I cannot post a comment — the 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 the fields — they tell you exactly what is missing or invalid.
“My comment disappeared after I posted it”
The comment form clears after a successful submission. Scroll down through the comment list — your comment should be there.
If you do not see it, try refreshing the page.
Comments may be paginated. Check if there are multiple pages using the pagination control at the bottom of the comments section.
“The share button does not do anything”
Click the share icon (speed dial) in the bottom-right of the hero banner. A fan of social media icons should appear.
Click one of the social icons (Facebook, Instagram, LinkedIn, or Twitter) to share the article.
If nothing appears, try scrolling up so the hero banner is fully visible and click the share icon again.
“The Recent Posts section is empty”
If there are no other newsletter articles in the system, the Recent Posts section will not appear.
This is normal for a new setup. Once more articles are published, they will show up here automatically.
“The cover image is not loading”
The image URL may be broken or the file may have been removed from the server.
The article content will still be readable — only the hero banner will appear as a dark background without the image.
Contact your administrator if the image should be restored.
“I cannot see the tags section”
If the article has no tags assigned, the tags row will be empty or not visible.
Tags are added when the article is created or edited. If you want tags on this article, go to the article edit screen and add them.
“The favourite count looks wrong”
The number next to the heart icon is a shortened number (for example, 1.2k instead of 1,200).
This is normal formatting for large numbers to keep the display clean.
The actual count is accurate — it is just displayed in a compact format.