feat: add rss page

[nash1111]

User description

Why

Closes #101

What

---

PR Type

Enhancement, Tests, Documentation

---

Description

• Added RSS, JSON Feed, and Atom feed generation and integration.
• Created new route to display RSS feed data.
• Updated meta tags to use constants for site metadata.
• Added GitHub Actions for generating feeds, current issues JSON, and running Playwright tests.
• Updated dependencies to include feed and gray-matter.

---

Changes walkthrough 📝

	Relevant files
Enhancement	6 files Footer.tsx Add RSS icon and link in footer                                                    app/components/Footer.tsx - Added RSS icon and link to the footer. +3/-1      const.ts Add site constants for metadata                                                    app/lib/const.ts Added site constants for title, description, author name, domain, OGP, and favicon. +6/-0      root.tsx Add alternate links for RSS, JSON Feed, and Atom                  app/root.tsx - Added alternate links for RSS, JSON Feed, and Atom. +3/-0      _index.tsx Use constants for meta tags                                                            app/routes/_index.tsx - Updated meta tags to use constants for site title and author name. +3/-2      rss.tsx Create RSS feed route                                                                        app/routes/rss.tsx - Created a new route to load and display RSS feed data. +34/-0    generateRSS.ts Add script to generate RSS, JSON, and Atom feeds                  scripts/generateRSS.ts Added script to generate RSS, JSON, and Atom feeds from blog posts. +85/-0
Miscellaneous	2 files lastUpdated.ts Update last updated timestamp                                                        public/lastUpdated.ts - Updated the last updated timestamp. +1/-1      currentIssues.json Update current issues JSON file                                                    public/currentIssues.json - Updated current issues JSON file. +1/-1
Tests	3 files commit-feeds.yaml Add GitHub Action for generating feeds                                      .github/workflows/commit-feeds.yaml - Added GitHub Action to generate and commit feed files. +45/-0    commit-issues.yaml Add GitHub Action for generating current issues JSON          .github/workflows/commit-issues.yaml - Added GitHub Action to generate and commit current issues JSON. +48/-1    playwright.yaml Add GitHub Action for Playwright tests                                      .github/workflows/playwright.yaml Added GitHub Action to run Playwright tests and update test results. +63/-1
Dependencies	1 files package.json Add dependencies for feed generation                                          package.json - Added dependencies for `feed` and `gray-matter`. +2/-0
Documentation	3 files atom.xml Add Atom feed file                                                                              public/atom.xml - Added Atom feed file. +100/-0  feed.json Add JSON feed file                                                                              public/feed.json - Added JSON feed file. +97/-0    rss.xml Add RSS feed file                                                                                public/rss.xml - Added RSS feed file. +74/-0

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[cloudflare-pages[bot]]

Deploying nash1111-tech-blog with    Cloudflare Pages

Latest commit:	e193e6e
Status:	✅  Deploy successful!
Preview URL:	https://c935a4f5.nash1111-tech-blog.pages.dev
Branch Preview URL:	https://issue-101.nash1111-tech-blog.pages.dev

View logs

[github-actions[bot]]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	3
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: The rss.tsx file uses synchronous file reading (fs.readFileSync) which might block the Node.js event loop if the file is large or if the operation is frequent. Consider using asynchronous file reading methods to improve performance.
	Code Duplication: The generateRSS.ts script and the rss.tsx route both handle RSS feed generation but seem to do so separately. It might be beneficial to centralize RSS feed generation to avoid redundancy and potential inconsistencies.
	Hardcoded Values: The generateRSS.ts script contains hardcoded paths and file names. It would be better to use environment variables or configuration files for such values to make the code more flexible and environment-independent.

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Accessibility	Improve accessibility by adding an aria-label to the RSS link ___ **Add an aria-label to the RSS link for better accessibility and to help screen readers interpret the link purpose.** [app/components/Footer.tsx [6]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-65edf535b119e7cb1b653d5546abcf5d2f3d35d580ce5d54c63574ba22533862R6-R6) ```diff - + ``` Suggestion importance[1-10]: 9 Why: Adding an `aria-label` significantly improves accessibility, which is crucial for users relying on screen readers.	9
Security	Enhance privacy and security by anonymizing direct links to GitHub issues in the JSON data ___ **Consider removing or anonymizing direct links to GitHub issues in the JSON data to enhance privacy and security, especially if this data is publicly accessible.** [public/currentIssues.json [1]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-1a27d3828a7c20f8dc1d863aa066eae7d2e45873e77ccfa7cc636b42d9a6760bR1-R1) ```diff -"url": "https://github.com/nash1111/nash1111-tech-blog/issues/102" +"url": "https://github.com/nash1111/nash1111-tech-blog/issues/[issue_number]" ``` Suggestion importance[1-10]: 9 Why: Anonymizing direct links enhances privacy and security, which is crucial for publicly accessible data. This suggestion addresses a significant concern.	9
Maintainability	Replace repeated navigation buttons with a single reusable component ___ **Replace the repeated button for navigation with a single reusable component to avoid redundancy and improve maintainability.** [app/routes/rss.tsx [22-29]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-fc34cf23f8d5687941ec7b733c4198c17a9bf59469bca4321aace4e303307d56R22-R29) ```diff - navigate(-1)}> - - Back - - navigate(-1)}> - - Back - + ``` Suggestion importance[1-10]: 8 Why: This suggestion improves maintainability by reducing redundancy, making the code cleaner and easier to manage.	8
Best practice	Escape HTML special characters in JSON strings to ensure safe parsing and display ___ **It's recommended to escape HTML special characters in JSON strings to prevent potential issues when parsing or displaying the data. For example, use < and > instead of < and >.** [public/feed.json [14]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-d95a584b300a221e32d0409d9559f2c019ccd4f97fe91cba0ee9e1b729eed8eaR14-R14) ```diff -" AI GitHubActions " +"<p>AI</p><p>GitHubActions</p>" ``` Suggestion importance[1-10]: 8 Why: Escaping HTML special characters is a best practice that prevents potential parsing issues and enhances security, making it a valuable improvement.	8
	Use a more descriptive variable name for the default OGP image ___ **Consider using a more descriptive variable name for DEFAULT_OGP to clarify its purpose, such as DEFAULT_OGP_IMAGE.** [app/lib/const.ts [5]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-aba09a71dc279599c127b728ce8f17cf983cdbdb72e6aa2118f1e0431947ea81R5-R5) ```diff -export const DEFAULT_OGP = "default_ogp.png"; +export const DEFAULT_OGP_IMAGE = "default_ogp.png"; ``` Suggestion importance[1-10]: 6 Why: While the suggestion improves code readability by making the variable name more descriptive, it is a minor change.	6
Enhancement	Improve accessibility and SEO by specifying the document language using the xml:lang attribute in the tag ___ **Add xml:lang attribute to the tag to specify the language of the document, improving accessibility and SEO.** [public/rss.xml [2]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-238d316fd0a59926ec5bfe7005cbfd7336cca7823fd177905cba65e37acb6a33R2-R2) ```diff - + ``` Suggestion importance[1-10]: 8 Why: Adding the `xml:lang` attribute improves accessibility and SEO, which are important for user experience and search engine ranking, making this a valuable enhancement.	8
	Simplify the date format in the date_modified field for consistency and readability ___ **Ensure that the date_modified field in each item uses a consistent date format. Currently, the date format includes milliseconds which might not be necessary and could be simplified to enhance readability and consistency.** [public/feed.json [18]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-d95a584b300a221e32d0409d9559f2c019ccd4f97fe91cba0ee9e1b729eed8eaR18-R18) ```diff -"date_modified": "2024-06-23T00:00:00.000Z" +"date_modified": "2024-06-23T00:00:00Z" ``` Suggestion importance[1-10]: 7 Why: The suggestion improves readability and consistency, but the change is minor and does not address a critical issue.	7
Possible issue	Verify and correct MIME types for feed links to ensure proper content delivery ___ **Ensure the MIME types for the feed links are correctly specified and match the expected content type served by the server.** [app/root.tsx [24-26]](https://github.com/nash1111/nash1111-tech-blog/pull/103/files#diff-4133eb55408b25b35b8e07c696a9dfc97b741c555d7407e8c86d0845e5eecc28R24-R26) ```diff - - - + + + ``` Suggestion importance[1-10]: 7 Why: Correcting MIME types is important for proper content delivery, but the current types are not necessarily incorrect, making this a minor improvement.	7