Blog: Technical Articles with Category Filtering

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/iwinser117/react-portafolio/llms.txt

Use this file to discover all available pages before exploring further.

​

Routes

​

Blog.jsx composition

// src/pages/Blog.jsx
import BlogListModern from "../containers/BlogListModern";
import Nav            from "@components/Nav";
import Footer         from "@components/Footer";
import BtnArriba      from "@buttons/BtnArriba";

const Blog = () => {
  return (
    <div className="data-bs-theme-dark letra-home">
      <Nav />
      <BlogListModern />
      <Footer />
      <BtnArriba />
    </div>
  );
};

​

Data Source

​

Post Data Shape

{
  "_id": "post-example-sap-advanced",
  "title": "Post title",
  "slug": "post-slug",
  "author": "Author Name",
  "date": "2026-02-05",
  "category": "SAP",
  "tags": ["SAP", "MM", "Tutorial"],
  "excerpt": "Short summary",
  "content": "<h2>HTML content</h2>...",
  "image": "https://...",
  "views": 0,
  "comments": []
}

​

Inline image markers

// BlogPost.jsx — processContent()
imageArray.forEach((imgUrl, index) => {
  const marker = `{{img-${index}}}`;
  const imgHtml = `<figure class="blog-post__inline-image">
    <img src="${imgUrl}" alt="Imagen ${index + 1} del post" />
    <figcaption>Imagen ${index + 1}</figcaption>
  </figure>`;
  processedContent = processedContent.replace(new RegExp(marker, "g"), imgHtml);
});

​

BlogListModern Features

• Category tabs — built from useBlogCategories(). Clicking a tab sets selectedCategory; clicking “Todos” clears it. Each tab shows the post count for that category.
• Tag chips — built from useBlogTags(). Up to 8 tags are shown by default; a +N más button reveals the rest. Selected tags are highlighted and show a ✕ to deactivate.
• Free-text search — filters posts by title and excerpt via useBlogFilter(). A clear button (✕) appears inside the input when a query is present.
• Active filters bar — when any filter is active, a summary row shows the active category, tags, and search query with individual remove buttons and a “Limpiar todo” button.
• Pagination — 9 posts per page (POSTS_PER_PAGE = 9). Previous / Next buttons scroll back to the top on page change.
• Contact CTA — a call-to-action section and <Formulario /> are appended after the grid.

​

BlogPost Features

1. Reads the slug param via useParams().
2. Fetches the post with useBlogPost(slug).
3. Calls BlogService.incrementViewCount(slug) in a useEffect once the post is loaded.
4. Renders the post header (category, date, views, title, author), the cover image, and the processed HTML content.
5. Renders all tags as links to /blog?tag=<tag> for cross-filtering.
6. Provides a breadcrumb (Blog / Post title) and a back link.

​

Adding a New Blog Post

{
  "_id": "post-my-new-article",
  "title": "My New Article",
  "slug": "my-new-article",
  "author": "Iwinser Sanchez",
  "date": "2026-03-01",
  "category": "React",
  "tags": ["React", "Hooks", "Tutorial"],
  "excerpt": "A short summary of the article visible in the list view.",
  "content": "<h2>Introduction</h2><p>Article body goes here.</p>",
  "image": "https://your-cdn.com/cover.png",
  "views": 0,
  "comments": []
}

"image": [
  "https://cdn.example.com/cover.png",
  "https://cdn.example.com/screenshot.png"
],
"content": "<h2>Step 1</h2><p>Description.</p>{{img-1}}<h2>Step 2</h2>"

​

Comment Data Shape

{
  "id": "comment-1738800000000",
  "author": "Juan García",
  "email": null,
  "content": "Great article!",
  "date": "2026-02-06",
  "approved": false
}

​

BlogService.addComment()

• author is required; an empty value throws a validation error.
• content is required and must be at least 3 characters long.
• The returned object always has approved: false.

// Example usage
const newComment = await BlogService.addComment(slug, {
  author: "Jane Doe",
  email: "jane@example.com",
  content: "Very helpful, thanks!"
});
// newComment.approved === false

​

Related

• BlogService API reference
• Blog hooks (useBlog, useBlogPost, useBlogFilter)