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 #582

Closed

Conversation

Varsha-1605
Copy link
Contributor

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

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 15, 2024

Deploy Preview for rococo-mooncake-0d89f7 ready!

Name Link
🔨 Latest commit 0b01d91
🔍 Latest deploy log https://app.netlify.com/sites/rococo-mooncake-0d89f7/deploys/670ed10cde24330008259b89
😎 Deploy Preview https://deploy-preview-582--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.

</div>
</div>
</footer>
<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 +1129 to +1141
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 +1185 to +1197
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.
@Anjaliavv51
Copy link
Owner

@Varsha-1605 it loads diff

image

@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 what should I do?

@Anjaliavv51
Copy link
Owner

@Anjaliavv51 what should I do?

resolve merge conflicts

@Varsha-1605
Copy link
Contributor Author

Varsha-1605 commented Oct 16, 2024

@Anjaliavv51 kindly have a look at this pr and if still there are issues please let me know!!!.

2 similar comments
@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 kindly have a look at this pr and if still there are issues please let me know!!!.

@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 kindly have a look at this pr and if still there are issues please let me know!!!.

@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 I have resolved the issue please check this pr.

@Anjaliavv51
Copy link
Owner

@Varsha-1605 below footer is misaligned please look into it

image

@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 ok

@Varsha-1605
Copy link
Contributor Author

@Anjaliavv51 I have raised another pull request kindly check it let me know if there are any issues.

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

Successfully merging this pull request may close these issues.

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