docs(blog): add hero image to AI safety post

[ankur-arch]

Summary

• Adds a cover/title card image (hero.png) for How to Use AI Safely and Responsibly.
• Sets both heroImagePath and metaImagePath in the post frontmatter so the image appears on the blog index card and in social/link previews.

Test plan

• pnpm dev and visit /blog — the post card shows the new hero image.
• Open the post page — hero renders correctly above the body.
• Confirm the og:image resolves to /how-to-use-ai-safely-and-responsibly/imgs/hero.png in page source.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Documentation
  • Added image metadata to the "How to Use AI Safely and Responsibly" blog post to enhance its display and sharing capabilities.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blog	Ready	Preview, Comment	May 19, 2026 0:25am
docs	Ready	Preview, Comment	May 19, 2026 0:25am
eclipse	Ready	Preview, Comment	May 19, 2026 0:25am
site	Ready	Preview, Comment	May 19, 2026 0:25am

[coderabbitai]

Walkthrough

The MDX frontmatter for a blog article is updated to add two image asset references: metaImagePath and heroImagePath both pointing to the hero image. This enables the blog platform to display the image in social previews and as the article header graphic.

Changes

Blog Post Metadata Update

Layer / File(s)	Summary
Hero image metadata apps/blog/content/blog/how-to-use-ai-safely-and-responsibly/index.mdx	The article's frontmatter now declares metaImagePath and heroImagePath, both referencing the hero image asset for use in social previews and page display.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• prisma/web#7903: Adds the blog post and initial frontmatter; this PR extends that file to include the image asset references.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a hero image to the AI safety blog post, which aligns perfectly with the file modifications and PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/blog/content/blog/how-to-use-ai-safely-and-responsibly/index.mdx`:
- Around line 10-11: The frontmatter references metaImagePath and heroImagePath
in index.mdx but the imgs/hero.png file is missing and the repo uses
hashed/dimensioned filenames; add the missing image assets into the post's imgs/
folder using the project's naming convention (e.g.,
meta-{hash}-{width}x{height}.png and hero-{hash}-{width}x{height}.svg or png),
or regenerate the images so they match that convention, then update the
metaImagePath and heroImagePath values in index.mdx to the exact filenames used
and commit the new files so the image renders and og:image works.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1f5e8268-52db-4dc3-959c-d4d424120707

📥 Commits

Reviewing files that changed from the base of the PR and between 75ffead and 11b89c5.

⛔ Files ignored due to path filters (1)

• apps/blog/public/how-to-use-ai-safely-and-responsibly/imgs/hero.png is excluded by !**/*.png

📒 Files selected for processing (1)

• apps/blog/content/blog/how-to-use-ai-safely-and-responsibly/index.mdx

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	May 19, 2026, 12:31 PM