OpenLake/OpenLake--Website

Feature: Update blog listing page

Open

#17 opened on Apr 27, 2025

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (12 forks)auto 404
help wanted

Repository metrics

Stars
 (2 stars)
PR merge metrics
 (PR metrics pending)

Description

Update blog listing page

This is a sub-issue for #15

Overview

Refactor the existing Blogs.jsx component to work with our new Markdown-based blog system and enhance the user interface for browsing blogs.

Tasks

  • Modify Blogs.jsx to load blog data from Markdown files using the new utility functions
  • Implement tag filtering with a clean UI for selecting categories
  • Update blog cards to display frontmatter metadata (title, author, date, read time, tags)
  • Create responsive grid layout that works on all device sizes
  • Add pagination if the number of blogs exceeds a certain threshold
  • Ensure proper routing to individual blog posts via slug-based URLs
  • Add loading states and error handling for blog data fetching
  • Implement basic search functionality (optional)

Technical Details

  • Use the getAllBlogs utility from Sub-Issue #16
  • Implement client-side filtering for tags
  • Optimize image loading with lazy loading techniques
  • Ensure accessibility compliance for all interactive elements

Definition of Done

  • Blog listing page successfully displays blogs from Markdown files
  • Tag filtering works correctly
  • UI is responsive and visually consistent with the site design
  • Clicking on a blog card navigates to the correct blog detail page
  • Performance is optimized for quick loading

Contributor guide

Research direction
Examine the existing Blogs.jsx component and the getAllBlogs utility from sub issue #16. Understand the Markdown frontmatter structure. Implement tag filtering and pagination. Ensure responsive design.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70