What This Screen Does
This is the main blog page where you can browse all published articles. Think of it like a news feed or bulletin board — you see all posts laid out in a grid, and you can search for a specific article or change the order they appear in. The first article is shown larger to highlight it as the featured post.
How to Get There
Open the dashboard.
In the left-hand menu, click Blog.
You are now on the Blog article list screen.
Step-by-Step Guide
1. Browse Articles
When the page loads, all articles are displayed in a grid.
The first article takes up a larger card (half the row) so it stands out as the featured post.
All other articles are shown as smaller cards in a four-column grid.
While articles are loading, you will see placeholder skeleton cards so you know content is on the way.
2. Search for an Article
At the top of the page, you will find a Search bar on the left side.
Start typing the title of the article you are looking for.
The search uses a short delay (debounce) so it waits for you to stop typing before fetching results — this keeps things fast and avoids unnecessary lookups.
A dropdown will appear showing matching articles, each with a thumbnail image and highlighted title.
Click on any result to go directly to that article’s detail page.
You can also press Enter to navigate to the first matching result.
If no results are found, a “Not found” message will appear in the dropdown.
Control | Required | What It Does |
Search field | No | Type a keyword or title to find a specific article. Results appear in a dropdown as you type. |
3. Sort Articles
To the right of the search bar you will find a Sort By button.
Click it to open a dropdown menu with the following options:
Sort Option | What It Does |
Latest | Shows the newest articles first (sorted by creation date, descending). This is the default. |
Oldest | Shows the oldest articles first (sorted by creation date, ascending). |
Popular | Shows the most-viewed articles first (sorted by total views, descending). |
Click any option to re-order the article grid immediately.
The currently selected sort option is shown in bold next to “Sort By.”
4. View an Article
Click on any article card in the grid to open its full detail page.
Each card shows a preview with the article’s cover image, title, and basic information.
5. Load More Articles
If there are more than 8 articles, a Load More button appears at the bottom of the page.
Click it to load additional articles into the grid.
What Happens Behind the Scenes
Page loads
|
v
API call: useGetPosts() fetches all articles
|
v
Articles are sorted by "latest" (default)
|
v
Grid renders — first post gets a large card, the rest get small cards
|
v
(If you type in the search bar)
Input is debounced (short delay)
|
v
API call: useSearchPosts(query) searches for matching articles
|
v
Matching results appear in the search dropdown
|
v
(If you click a result or press Enter)
You are redirected to the article detail page at /blog/:title
|
v
(If you change the sort order)
Articles are re-sorted locally — no new API call needed
|
v
Grid updates instantly with the new order
Troubleshooting
“The page is blank and I cannot see any articles”
The articles may still be loading. Wait a moment — you should see skeleton placeholder cards while content is being fetched.
If nothing appears after several seconds, check your internet connection.
Try refreshing the page. If the problem continues, the blog API may be temporarily unavailable — contact your administrator.
“I typed in the search bar but no results appeared”
The search waits briefly after you stop typing before looking for results. Give it a second.
Make sure you are searching by article title — the search does not look at article body text.
If you see a “Not found” message, no articles match your query. Double-check your spelling and try a shorter or broader keyword.
“I clicked on a search result but nothing happened”
Make sure you clicked directly on the article title in the dropdown.
If the page did not navigate, try pressing Enter after typing your search term instead.
Check that pop-up blockers or browser extensions are not interfering with navigation.
“The sort order does not seem to change”
After clicking a sort option, the grid should update immediately. If all articles have the same creation date or the same number of views, the order may look the same regardless of the sort you pick.
Try switching to Popular — if view counts differ, you should see a clear reorder.
“I do not see the Load More button”
The Load More button only appears when there are more than 8 articles in the system.
If you have 8 or fewer articles, all of them are already shown on the page and no button is needed.
“The articles are loading very slowly”
Large cover images can slow things down on a poor connection. Check your internet speed.
If loading persists, try refreshing the page or clearing your browser cache.
The skeleton loading cards will show while content is being fetched — this is normal behaviour, not an error.
“I want to create a new article but I do not see a button”
The article list page is for browsing and reading articles only.
To create or manage articles, look for a separate management or editor section in the dashboard, or check with your administrator for the correct permissions.
“The featured (large) article is not the one I expected”
The first article in the sorted list is always displayed as the featured (large) card.
If you want a different article featured, change the sort order. For example, switching to Latest will feature the most recently created article.