wip: OGP

[nash1111]

User description

Why

Closes

What

---

PR Type

enhancement, bug fix

---

Description

• Centralized blog post data and retrieval logic in app/lib/posts.ts.
• Enhanced the loader function in app/routes/blog.tsx to include post thumbnails and Open Graph meta tags for better social media sharing.
• Refactored app/routes/blog_._index.tsx to use the centralized posts array.
• Updated the lastUpdated timestamp in public/lastUpdated.ts.
• Updated current issues data in public/currentIssues.json.

---

Changes walkthrough 📝

	Relevant files
Enhancement	posts.ts Centralize blog post data and retrieval logic.                      app/lib/posts.ts Added imports for multiple blog posts. Created posts array with blog post data. Implemented getPostDataByPath function to retrieve post data by path. +14/-0    blog.tsx Add Open Graph meta tags and post thumbnail support.          app/routes/blog.tsx Imported getPostDataByPath and posts from ~/lib/posts. Enhanced loader function to include post thumbnail in response. Added Open Graph meta tags for better social media sharing. +20/-3    blog_._index.tsx Refactor blog index to use centralized posts array.            app/routes/blog_._index.tsx Removed individual blog post imports. Utilized centralized posts array from ~/lib/posts. +2/-10
Miscellaneous	lastUpdated.ts Update last updated timestamp.                                                      public/lastUpdated.ts - Updated `lastUpdated` timestamp. +1/-1
Bug fix	currentIssues.json Update current issues data.                                                            public/currentIssues.json - Updated current issues JSON data. +1/-1

---

💡 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:	1e318bb
Status:	✅  Deploy successful!
Preview URL:	https://a60888b5.nash1111-tech-blog.pages.dev
Branch Preview URL:	https://issue-82-investigate.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 code in app/routes/blog.tsx uses console.log statements which are generally not recommended for production code as they can expose sensitive data and are not a good practice for performance reasons.
	Code Quality: The use of hardcoded values for Open Graph meta tags in app/routes/blog.tsx (og:title, og:description) might not be ideal. It would be better to dynamically generate these tags based on the blog post data to enhance flexibility and maintainability.
	Refactoring Opportunity: The getPostDataByPath function in app/lib/posts.ts could be improved by handling the case where a post is not found more gracefully, perhaps by returning a default object or handling this case upstream.

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Security	Sanitize or validate the thumbnail URL to prevent XSS attacks ___ **Ensure that the thumbnail URL is properly sanitized or validated to prevent potential security risks such as XSS attacks when dynamically setting the image URL in the meta tag.** [app/routes/blog.tsx [28]](https://github.com/nash1111/nash1111-tech-blog/pull/83/files#diff-2fe1a7f46af32cecd2ce3dd41041581c69e2fabb67664faa44c9445e9f5cecf2R28-R28) ```diff - + ``` Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential security risk by ensuring that the thumbnail URL is sanitized, which is crucial for preventing XSS attacks.	9
Maintainability	Replace multiple static imports with a dynamic import function ___ **Consider using a more generic import method to reduce redundancy and improve maintainability. Instead of importing each post separately, use a dynamic import based on the file path.** [app/lib/posts.ts [1-4]](https://github.com/nash1111/nash1111-tech-blog/pull/83/files#diff-e0d130593a72d881fed8ab93b4c88c4d41b875a9c0ee6133bfb307522d3ca794R1-R4) ```diff -import * as postFirst from "~/routes/blog.nexttoremix.mdx"; -import * as postHowTaskPageCreated from "~/routes/blog.howtaskpagecreated.mdx"; -import * as postWhatICareAbout from "~/routes/blog.whaticareabout.mdx"; -import * as postPrAgent from "~/routes/blog.pragent.mdx"; +function importPost(path) { + return import(`~/routes/${path}.mdx`); +} ``` Suggestion importance[1-10]: 8 Why: This suggestion improves maintainability by reducing redundancy in the import statements. It makes the code more scalable and easier to manage as new posts are added.	8
Performance	Remove redundant console logs ___ **Remove redundant console logs to clean up the code and improve performance by reducing unnecessary console output in production.** [app/routes/blog.tsx [11-15]](https://github.com/nash1111/nash1111-tech-blog/pull/83/files#diff-2fe1a7f46af32cecd2ce3dd41041581c69e2fabb67664faa44c9445e9f5cecf2R11-R15) ```diff -console.log(path); -console.log("thumbnail"); -console.log(thumbnail); +// Removed console logs ``` Suggestion importance[1-10]: 7 Why: Removing unnecessary console logs helps clean up the code and can improve performance by reducing console output in production environments.	7
Best practice	Simplify null checking using optional chaining ___ **Use TypeScript's optional chaining to simplify the null checking in the getPostDataByPath function.** [app/lib/posts.ts [13]](https://github.com/nash1111/nash1111-tech-blog/pull/83/files#diff-e0d130593a72d881fed8ab93b4c88c4d41b875a9c0ee6133bfb307522d3ca794R13-R13) ```diff -return post ? post.data : null; +return post?.data ?? null; ``` Suggestion importance[1-10]: 6 Why: Using optional chaining is a best practice that simplifies the code and makes it more readable, although the functional improvement is minor.	6

[nash1111]

OGP broken: https://github.com/nash1111/nash1111-tech-blog/pull/83/commits/012719fefdd9fee4903c1f63d57a16a127395fbc OGP works: https://github.com/nash1111/nash1111-tech-blog/pull/83/commits/1e318bbdf306d1cbd465ad328fcbfadb7d9ab307