Blog Page Redesign Help Needed

[RudraSen2]

Can anyone help me a little? I want to design my /blog page where all the blogs are in a list to something like this using TailwindCSS - https://flowbite.com/blocks/marketing/blog/#default-blog-card
But I'm having trouble understanding the code and where to modify it. Help would be appreciated.

Another Question: Can anyone help me implement something like a spinner shown on the website till it's fully loaded?

[Advait251206]

You can achieve both of these in Docusaurus, but they require working in two different areas: theme swizzling for the blog layout, and a small client-side customization for the loading spinner.

1. Redesigning /blog with TailwindCSS-style cards

Docusaurus blog pages are controlled by the theme component:
@docusaurus/theme-classic

To customize the blog list layout:

• Swizzle the blog list component:

  npx docusaurus swizzle @docusaurus/theme-classic BlogListPage

• This will create an override in:

  src/theme/BlogListPage/
  

Inside that file, you’ll find the layout rendering logic. Replace the default post list rendering with a card layout similar to Flowbite.

You can adapt their card structure directly into JSX, for example:

• Wrap each post in a card container
• Use Tailwind classes like:
  • rounded-lg
  • shadow-md
  • hover:shadow-xl
  • overflow-hidden

Make sure Tailwind is already installed and configured in your Docusaurus project; otherwise, the classes won’t apply.

A good mental model is:

• BlogListPage = page wrapper
• BlogPostItems = list renderer
• Each item = your custom card

---

2. Adding a loading spinner before full page load

For a global loading spinner, you can do this in a few ways:

Option A: Use docusaurus-client.js

Create or edit:

src/clientModules/docusaurus-client.js

You can inject a simple loader that shows until React hydrates.

Option B: Add CSS-based loader in index.html

Modify docusaurus.config.js:

• Add a small inline spinner in headTags
• Hide it once the app mounts using JS

Simple approach:

• Add a full-screen div spinner in src/pages/index.js or layout wrapper
• Use useEffect to hide it after mount

Example logic:

• loading = true initially
• set loading = false in useEffect

---

Key takeaway

• Blog redesign → swizzle BlogListPage and replace item layout with Tailwind cards
• Spinner → client-side mount loader or injected HTML overlay

If you want a cleaner production setup, I’d recommend:

• Swizzle only the blog item component (not full page)
• Use a lightweight CSS spinner instead of blocking UI loaders

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206