feat: post snippet

[duyet]

Summary by Sourcery

Add support for HTML snippets in blog posts, enabling the integration of elements like ads. Update the content component to render these snippets using a new Snippet component.

New Features:

• Introduce a new 'snippet' feature in blog posts, allowing the inclusion of HTML snippets such as ads within the post content.

Enhancements:

• Enhance the blog post content component to render the new 'snippet' field using a dedicated Snippet component.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR implements a new snippet feature that allows embedding HTML content (specifically ads) within blog posts. The implementation includes adding a new snippet field to the Post interface, creating a new Snippet component, and integrating it into the blog post content rendering system.

Class diagram for the new Snippet component

classDiagram
    class Snippet {
        +Snippet(html: string, className: string)
        +render(): JSX.Element
    }
    note for Snippet "New component to render HTML snippets within blog posts"

Loading

File-Level Changes

Change	Details	Files
Added new snippet functionality to the blog post system	Added snippet field to Post interface Created new Snippet component for rendering HTML content Added snippet field extraction in post processing Integrated Snippet component into the main Content component	packages/interfaces/src/post.ts apps/blog/app/[year]/[month]/[slug]/content/snippet.tsx packages/libs/getPost.ts apps/blog/app/[year]/[month]/[slug]/content/content.tsx
Added Google AdSense snippet to an example blog post	Added AdSense script and configuration to post metadata	apps/blog/_posts/2015/04/tim-hieu-ve-giay-phep-gnu.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
blog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 9, 2024 5:47pm
cv	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 9, 2024 5:47pm
insights	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 9, 2024 5:47pm

[sourcery-ai]

Hey @duyet - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider adding HTML sanitization to the Snippet component to prevent potential XSS attacks when rendering arbitrary HTML content.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Review instructions: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Consider removing the type assertion as the Snippet component already handles undefined properly

The Post interface already defines snippet as string | undefined, and the Snippet component handles undefined cases. The type assertion isn't necessary and could mask potential type issues.

Suggested change

	<Snippet html={post.snippet as string} />
	<Snippet html={post.snippet} />