Skip to content

Commit

Permalink
Created Blog Page (#770)
Browse files Browse the repository at this point in the history
Fixes: #374

#Issue Description:

Create a Nostalgia Blog section on Retro featuring stories, interesting
facts, and nostalgic content related to various eras and product lines.
This will enhance user engagement by providing context and depth to the
collections.


Key Specifications:

1. Blog Post Display:
   - Renders blog posts dynamically from local storage
   - Shows post title, author, date, category, and tags
   - Displays a truncated version of the post content
   - Includes a "Read More" link for each post

2. Full Post View:
- Opens a modal with the full post content when "Read More" is clicked
   - Displays all comments for the post in the modal

3. Commenting System:
   - Allows users to add comments to posts
   - Displays the latest two comments on the main page
   - Shows all comments in the full post view modal

4. Filtering System:
   - Provides dropdown filters for categories and tags
   - Dynamically updates the post list based on selected filters

5. Content Management System (CMS):
   - New Post Creation:
     - Opens a modal with a form to create new blog posts
     - Allows input of title, content, author, category, and tags
     - Automatically adds new categories and tags to the system
   - Category Management:
     - Opens a modal to view all categories
     - Allows adding new categories
     - Enables deletion of existing categories
   - Tag Management:
     - Opens a modal to view all tags
     - Allows adding new tags
     - Enables deletion of existing tags

6. Data Persistence:
- Uses localStorage to store and retrieve blog posts, categories, and
tags
   - Initializes with sample data if localStorage is empty

7. Responsive Design:
   - Adapts layout for different screen sizes
   - Includes a hamburger menu for mobile view

8. UI Enhancements:
   - Smooth scrolling for anchor links
   - Fade-in effect for blog posts on scroll
   - Hover effects on blog posts (elevation and shadow change)
   - Parallax effect on the hero section background

9. Header Scroll Effect:
   - Changes header appearance when scrolling down the page

10. Social Media Integration:
    - Includes social media links in the footer

11. Navigation:
    - Provides links to other sections of the Retro website
    - Highlights the current "Blog" page in the navigation

12. Hero Section:
    - Displays a welcome message and brief description of the blog

13. Footer:
- Shows company information, quick links, contact details, and social
media links

14. Modals:
- Used for full post view, new post creation, and management of
categories and tags
    - Can be closed by clicking outside or on the close button

15. Error Handling:
    - Prevents duplicate categories and tags when adding new ones

16. Date Formatting:
    - Displays post dates in a readable format

17. Markdown Support:
- Includes the marked library for potential Markdown rendering (though
not explicitly used in the provided code)

18. Dynamic Updates:
- Refreshes the post list, filters, and modals after adding new content
or making changes

19. Accessibility:
    - Uses semantic HTML elements for better screen reader support

20. Performance Optimization:
    - Loads external resources (fonts, icons) from CDNs



# Type of PR

- [X] Bug fix
- [X] Feature enhancement


# Video:


https://github.com/user-attachments/assets/e11c151a-6883-46bf-be3a-7241efaff613

# Footer Aligned!

![image](https://github.com/user-attachments/assets/29b60b97-a137-432d-8562-0c4c1c0f8953)


# Checklist:

- [X] I have made this change from my own.
- [X] I have taken help from some online resources.
- [X] My code follows the style guidelines of this project.
- [X] I have performed a self-review of my own code.
- [X] I have commented my code, particularly in hard-to-understand
areas.
- [X] My changes generate no new warnings.
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers and screenshots after
making the changes.

@Anjaliavv51 Kindly provide all the required labels as per the task
completion.
  • Loading branch information
Anjaliavv51 authored Oct 31, 2024
2 parents 4d95f1f + ec8a7da commit ca7d3eb
Show file tree
Hide file tree
Showing 2 changed files with 1,333 additions and 0 deletions.
Loading

0 comments on commit ca7d3eb

Please sign in to comment.