What This Screen Does
This is where you read a single blog post in full. Think of it like opening an article in a magazine — you see the cover image, the title, a short teaser, and the full body text. If you are an admin, you can also edit or delete the post from here.
How to Get There
Open the dashboard.
Find a blog post from the main dashboard or any link that points to a post.
Click on the post title or card.
You are now on the Post Details screen.
Step-by-Step Guide
1. View the Post
When the page loads, you will see:
Hero banner — A large cover image with the post title overlaid in white text. This takes up the top portion of the screen.
Teaser — A short summary paragraph displayed below the hero image. This gives you a quick idea of what the article is about.
Body — The full article content, rendered as rich text (formatted text with headings, links, images, etc.).
2. Go Back
In the top-left area, click the Back button (with a left arrow icon).
This takes you back to the dashboard home page.
3. Edit the Post (Admin Only)
If you are an admin, you will see an Edit button in the top-right area.
Click Edit to go to the post editing screen where you can change the title, teaser, body, or cover image.
This button is only visible to users with an admin role.
4. Delete the Post (Admin Only)
If you are an admin, you will see a Delete button next to the Edit button.
Click Delete.
A confirmation dialog will appear asking: “Are you sure want to delete?”
To confirm, click the red Delete button inside the dialog.
To cancel, click outside the dialog or press Escape.
Once deleted, you will see a green “Delete success!” notification and be redirected to the blog list.
What Happens Behind the Scenes
When the page loads:
You navigate to /blog/:id
|
v
API call: getArticle({ id })
|
v
Article data loads (title, teaser, body, cover image)
|
v
Article is marked as "seen" in your browser
|
v
Hero image, title, teaser, and body are displayed
When you delete a post:
You click "Delete"
|
v
Confirmation dialog appears
|
v
You click the red "Delete" button to confirm
|
v
API call: ArticleService.delete({ id })
|
v
Success notification: "Delete success!"
|
v
You are redirected to the blog list page
Troubleshooting
“The page is just showing a loading skeleton and nothing appears”
The article data is being fetched from the server. If it takes too long, check your internet connection.
Try refreshing the page. If the problem continues, the server may be temporarily unavailable — wait a moment and try again.
“I see an error message instead of the article”
The article may have been deleted or the link may be incorrect.
Click the Back to List button shown on the error screen to return to the blog list.
Double-check that the URL contains a valid post ID (a number after
/blog/).
“I cannot see the Edit or Delete buttons”
These buttons are only visible to admin users.
If you believe you should have admin access, contact your system administrator to check your role.
Regular staff members can read posts but cannot modify or remove them.
“I clicked Delete but nothing happened”
Make sure you confirmed the deletion by clicking the red Delete button inside the confirmation dialog.
If you clicked outside the dialog, it closed without deleting anything. Click the Delete button again and confirm this time.
If you confirmed but got an error, the server may be experiencing issues. Try again in a few moments.
“The cover image is not showing”
The image may have been removed from the server or the URL may be broken.
If you are an admin, click Edit to re-upload a cover image for the post.
If the image was never uploaded, the hero banner will appear with just the title on a dark background.
“The article body looks broken or has weird formatting”
The body content is stored as HTML. If it was pasted from an external source (like Word or Google Docs), it may contain unexpected formatting.
If you are an admin, click Edit and clean up the body content using the built-in editor.
“I deleted a post by accident”
Deletion is permanent — there is no undo.
If the content is important, check if you have a backup or ask your administrator if the data can be recovered from the server.
In the future, double-check the confirmation dialog before clicking the red Delete button.
“The page looks different on my phone”
The layout is responsive. On smaller screens, spacing and font sizes adjust automatically.
The hero image may appear shorter on mobile devices. This is expected behavior.
All features (Back, Edit, Delete) remain available on mobile.