Created Blog Page

[Varsha-1605]

Fixes: #367

Description

To provide valuable content to our users and improve SEO, we need to implement a blog section on BuddyTrail. This will serve as a platform for sharing travel tips, destination highlights, and user stories.

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 BuddyTrail 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

• Bug fix
• Feature enhancement

Screenshots:

Checklist:

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

@PriyaGhosal Kindly provide all the labels as per the task completion.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buddy-trail	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 8:09am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our contributing.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

❌ Deploy Preview for buddytrail failed. Why did it fail? →

Name	Link
🔨 Latest commit	ebce68a
🔍 Latest deploy log	https://app.netlify.com/sites/buddytrail/deploys/670a2ec93eea5100088f12dc