Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Created Blog Page #770

Merged
merged 1 commit into from
Oct 31, 2024
Merged

Created Blog Page #770

merged 1 commit into from
Oct 31, 2024

Conversation

Varsha-1605
Copy link
Contributor

@Varsha-1605 Varsha-1605 commented Oct 27, 2024

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

  • Bug fix
  • Feature enhancement

Video:

Retro.-.Google.Chrome.2024-10-12.12-38-18.mp4

Footer Aligned!

image

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.

@Anjaliavv51 Kindly provide all the required labels as per the task completion.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job, @Varsha-1605! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

Copy link

netlify bot commented Oct 27, 2024

Deploy Preview for rococo-mooncake-0d89f7 ready!

Name Link
🔨 Latest commit ec8a7da
🔍 Latest deploy log https://app.netlify.com/sites/rococo-mooncake-0d89f7/deploys/671e47ca8ede570008575e42
😎 Deploy Preview https://deploy-preview-770--rococo-mooncake-0d89f7.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

</footer>
<button onclick="window.print()" style="font-family:Georgia; font-size:medium; line-height: inherit;border-radius:5px ;background-color: #f9e2c4;padding:5px 5px;">Print this page</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
Comment on lines +1138 to +1150
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<h2>Manage Categories</h2>
<ul id="categoryList" class="item-list">
${categories.map(category => `<li>${category} <button class="delete-btn delete-category" data-category="${category}">Delete</button></li>`).join('')}
</ul>
<form id="addCategoryForm" class="modal-form">
<input type="text" id="newCategory" placeholder="Enter new category" required>
<button type="submit">Add Category</button>
</form>
</div>
`;

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
is reinterpreted as HTML without escaping meta-characters.
Comment on lines +1194 to +1206
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<h2>Manage Tags</h2>
<ul id="tagList" class="item-list">
${tags.map(tag => `<li>${tag} <button class="delete-btn delete-tag" data-tag="${tag}">Delete</button></li>`).join('')}
</ul>
<form id="addTagForm" class="modal-form">
<input type="text" id="newTag" placeholder="Enter new tag" required>
<button type="submit">Add Tag</button>
</form>
</div>
`;

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
is reinterpreted as HTML without escaping meta-characters.
@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 Kindly check this pr, let me know if there are any issues.

1 similar comment
@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 Kindly check this pr, let me know if there are any issues.

@Anjaliavv51 Anjaliavv51 merged commit ca7d3eb into Anjaliavv51:main Oct 31, 2024
7 checks passed
Copy link

🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

✨[feature Request]: Implement Nostalgia Blog Section for Retro
2 participants