Skip to content

Conversation

@pharmacist-sabot
Copy link
Owner

@pharmacist-sabot pharmacist-sabot commented Dec 30, 2025

…public images

Summary by Sourcery

Reorganize blog content and public assets into a structured page-bundle layout and centralized image hierarchy, updating pages and posts to reference the new image locations.

Enhancements:

  • Convert all blog MDX posts to directory-based page bundles using index.mdx files per post.
  • Standardize image paths by moving blog-specific assets under /images/blog/[post-slug]/ and shared assets under /images/common/, updating heroImage and inline Image component references accordingly.
  • Update the home and about pages to use the new shared profile image path and improve HTML formatting and responsive styling.

Summary by CodeRabbit

  • New Features

    • Enhanced responsive design on homepage with single-column layout for smaller viewports and improved image sizing.
    • Added circular profile image styling with borders and shadows on homepage.
  • Chores

    • Reorganized and relocated blog and profile assets to a new directory structure for improved asset management.

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link

vercel bot commented Dec 30, 2025

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

Project Deployment Review Updated (UTC)
rxdevnotes Ready Ready Preview, Comment Dec 30, 2025 2:17pm

@sourcery-ai
Copy link

sourcery-ai bot commented Dec 30, 2025

Reviewer's Guide

Refactors blog content to use directory-based page bundles and a structured public image hierarchy, updates all affected image paths, and adds internal documentation for the refactor, while also pointing homepage/about images to the new locations and making minor formatting adjustments.

Flow diagram for the refactoring process described in agents.md

flowchart TD
  A_start["Start refactor"] --> B_phase1

  subgraph Phase_1_Reorganize_MDX
    B_phase1["Phase 1: Reorganize MDX files"] --> B1_list_files["List all src/content/blog/*.mdx"]
    B1_list_files --> B2_for_each_file["For each MDX file"]
    B2_for_each_file --> B3_create_dir["Create folder src/content/blog/[slug]/"]
    B3_create_dir --> B4_git_mv_mdx["git mv file to src/content/blog/[slug]/index.mdx"]
  end

  B4_git_mv_mdx --> C_phase2

  subgraph Phase_2_Reorganize_Images
    C_phase2["Phase 2: Reorganize public images"] --> C1_create_structure["Ensure public/images/blog and public/images/common exist"]
    C1_create_structure --> C2_identify_images["Identify images for each blog post"]
    C2_identify_images --> C3_move_post_images["git mv post specific images to public/images/blog/[slug]/"]
    C2_identify_images --> C4_move_common_images["git mv shared images to public/images/common/"]
  end

  C3_move_post_images --> D_phase3
  C4_move_common_images --> D_phase3

  subgraph Phase_3_Update_References
    D_phase3["Phase 3: Update references in MDX"] --> D1_update_heroImage["Update frontmatter heroImage paths"]
    D1_update_heroImage --> D2_update_markdown_images["Update markdown image links"]
    D2_update_markdown_images --> D3_update_astro_image["Update Astro Image component src attributes"]
  end

  D3_update_astro_image --> E_phase4

  subgraph Phase_4_Verification
    E_phase4["Phase 4: Verification"] --> E1_run_checks["Run npm run lint or npm run build"]
    E1_run_checks --> E2_fix_issues{"Broken paths?"}
    E2_fix_issues -->|Yes| D_phase3
    E2_fix_issues -->|No| F_done["Refactor complete"]
  end
Loading

File-Level Changes

Change Details Files
Switch blog MDX posts to directory-based page bundles and align image paths with a new /images hierarchy.
  • Rename flat MDX blog files to index.mdx inside slug-named folders under src/content/blog/
  • Update frontmatter heroImage fields to point to new /images/blog/[slug]/... or /images/common/... paths
  • Adjust inline component src attributes to reference the reorganized /images/... locations
src/content/blog/benefits-of-touch-typing/index.mdx
src/content/blog/essential-git-commands-guide/index.mdx
src/content/blog/automate-release-with-semantic-release/index.mdx
src/content/blog/awesome-warfarin-open-source/index.mdx
src/content/blog/frontend-developer-roadmap-part-1/index.mdx
src/content/blog/frontend-developer-roadmap-part-2/index.mdx
src/content/blog/git-commit-messages/index.mdx
src/content/blog/google-app-script-drug-search-app/index.mdx
src/content/blog/google-app-script/index.mdx
src/content/blog/haskell-ep1/index.mdx
src/content/blog/haskell-ep2/index.mdx
src/content/blog/learn-python-with-ritesh-chauhan/index.mdx
src/content/blog/rust-variables-and-mutability/index.mdx
src/content/blog/vue-standard-protocol-antfu/index.mdx
src/content/blog/web-accessibility-101/index.mdx
Point homepage and about page profile images to the new shared image location and normalize markup/formatting.
  • Change profile image src paths from /profile-placeholder.jpg to /images/common/profile-placeholder.jpg on index and about pages
  • Reformat Astro templates and CSS to consistent two-space indentation and clean line wrapping
  • Add responsive tweaks to the home profile image styling without changing behavior
src/pages/index.astro
src/pages/about.astro
Add an internal refactoring guide describing the page bundle and image reorganization process.
  • Introduce agents.md documenting context, goals, constraints, and phased plan for reorganizing blog content and public assets
  • Specify conventions for blog slug directories and /images/blog vs /images/common usage
  • Document verification steps and constraints (no deletion, absolute paths, use of git mv)
agents.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. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the 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 exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

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

@coderabbitai
Copy link

coderabbitai bot commented Dec 30, 2025

📝 Walkthrough

Walkthrough

This PR reorganizes asset paths across an Astro blog project from legacy locations (/blog/, /blog-placeholder-*.png) to a new structured system (/images/blog/<slug>/, /images/common/). Updates include frontmatter heroImage references in 15 blog posts, image asset paths in page components, and responsive styling enhancements on the homepage.

Changes

Cohort / File(s) Summary
Planning documentation
agents.md
Documents a 4-phase refactoring plan for reorganizing blog content into per-post Page Bundle directories and standardizing image assets under /images/blog/<slug>/ and /images/common/ with verification steps.
Blog post asset path updates (slug-specific images)
src/content/blog/automate-release-with-semantic-release/index.mdx, awesome-warfarin-open-source/index.mdx, benefits-of-touch-typing/index.mdx, essential-git-commands-guide/index.mdx, rust-variables-and-mutability/index.mdx, vue-standard-protocol-antfu/index.mdx
Updated heroImage and inline image paths from /blog/ prefixes to /images/blog/<slug>/ structure.
Blog post asset path updates (common placeholder images)
src/content/blog/frontend-developer-roadmap-part-1/index.mdx, frontend-developer-roadmap-part-2/index.mdx, git-commit-messages/index.mdx, google-app-script-drug-search-app/index.mdx, google-app-script/index.mdx, haskell-ep1/index.mdx, haskell-ep2/index.mdx, learn-python-with-ritesh-chauhan/index.mdx, web-accessibility-101/index.mdx
Updated heroImage paths from /blog-placeholder-*.png to /images/common/blog-placeholder-*.png.
Page component asset paths and styling
src/pages/about.astro
Updated profile image path from /profile-placeholder.jpg to /images/common/profile-placeholder.jpg; minor content reflowing in Thai text.
Homepage asset paths, styling, and layout
src/pages/index.astro
Updated profile image path to /images/common/profile-placeholder.jpg; added CSS for profile image styling (circular shape, border, shadow); introduced responsive layout adjustments with single-column stacking on viewports under 900px and reduced image dimensions on mobile.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐰 Hop along, dear files, to your new home,
Where /images/blog/<slug> spreads far and roam,
From chaos of /blog/ to order divine,
Each photo finds place in a tidy design—
Assets now dwell where they're meant to be found!

Pre-merge checks

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main refactoring work: reorganizing blog MDX files into page bundles and restructuring public images, which aligns with the changeset's primary objective.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f43e930 and 9b6c918.

⛔ Files ignored due to path filters (19)
  • public/images/blog/automate-release-with-semantic-release/semantic-release-hero.png is excluded by !**/*.png
  • public/images/blog/awesome-warfarin-open-source/digital-warfarin-management.png is excluded by !**/*.png
  • public/images/blog/benefits-of-touch-typing/confident-typing-at-work-2.png is excluded by !**/*.png
  • public/images/blog/benefits-of-touch-typing/confident-typing-at-work.png is excluded by !**/*.png
  • public/images/blog/benefits-of-touch-typing/typing-on-keyboard-hero.png is excluded by !**/*.png
  • public/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.jpeg is excluded by !**/*.jpeg
  • public/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.png is excluded by !**/*.png
  • public/images/blog/rust-variables-and-mutability/rust-variables-hero.png is excluded by !**/*.png
  • public/images/blog/vue-standard-protocol-antfu/eslint-antfu-setup.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-1.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-2.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-3.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-4.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-5.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-6.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-7.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-8.png is excluded by !**/*.png
  • public/images/common/blog-placeholder-python-course.png is excluded by !**/*.png
  • public/images/common/profile-placeholder.jpg is excluded by !**/*.jpg
📒 Files selected for processing (18)
  • agents.md
  • src/content/blog/automate-release-with-semantic-release/index.mdx
  • src/content/blog/awesome-warfarin-open-source/index.mdx
  • src/content/blog/benefits-of-touch-typing/index.mdx
  • src/content/blog/essential-git-commands-guide/index.mdx
  • src/content/blog/frontend-developer-roadmap-part-1/index.mdx
  • src/content/blog/frontend-developer-roadmap-part-2/index.mdx
  • src/content/blog/git-commit-messages/index.mdx
  • src/content/blog/google-app-script-drug-search-app/index.mdx
  • src/content/blog/google-app-script/index.mdx
  • src/content/blog/haskell-ep1/index.mdx
  • src/content/blog/haskell-ep2/index.mdx
  • src/content/blog/learn-python-with-ritesh-chauhan/index.mdx
  • src/content/blog/rust-variables-and-mutability/index.mdx
  • src/content/blog/vue-standard-protocol-antfu/index.mdx
  • src/content/blog/web-accessibility-101/index.mdx
  • src/pages/about.astro
  • src/pages/index.astro
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Sourcery review
  • GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (22)
src/content/blog/learn-python-with-ritesh-chauhan/index.mdx (1)

5-5: Image path update is correct and image file exists.

The heroImage path has been correctly updated to /images/common/blog-placeholder-python-course.png, and the image file is present in the repository with valid content.

src/content/blog/frontend-developer-roadmap-part-2/index.mdx (1)

5-5: Image asset relocation is valid. The new image file exists at /images/common/blog-placeholder-2.png and no stale references to the old path remain in the codebase.

src/content/blog/haskell-ep2/index.mdx (1)

5-5: Asset path is correct and follows the blog restructuring pattern.

The heroImage path (/images/common/blog-placeholder-7.png) aligns with the organized asset structure, and the image file exists at the specified location. The change is consistent with other blog posts in the repository.

src/content/blog/google-app-script/index.mdx (1)

5-5: The image exists at /images/common/blog-placeholder-3.png and all 15 blog post frontmatter updates are consistent across the PR. No issues found.

src/content/blog/automate-release-with-semantic-release/index.mdx (1)

5-5: Path change is correct and image file exists at new location.

The heroImage path update follows the new organizational structure and the image file has been successfully moved. No broken images will result from this change.

src/content/blog/awesome-warfarin-open-source/index.mdx (1)

5-5: Image file verified and old path references cleaned up.

The heroImage path update is correct. Verification confirms:

  • Image file exists at public/images/blog/awesome-warfarin-open-source/digital-warfarin-management.png (2.0M)
  • No remaining references to the old path /blog/digital-warfarin-management.png in the codebase

The change follows the new structured asset organization pattern and is ready to merge.

src/content/blog/haskell-ep1/index.mdx (1)

5-5: Image asset successfully migrated.

The path update is correct. The new image file exists at public/images/common/blog-placeholder-6.png, the old file has been properly removed, and there are no stale references to the legacy path in the codebase.

src/content/blog/web-accessibility-101/index.mdx (1)

5-5: Image asset path change is correct and verified.

The heroImage path has been properly updated to /images/common/blog-placeholder-5.png, the image file exists at the new location, and no references to the old path remain in the codebase. The asset reorganization is complete.

src/content/blog/rust-variables-and-mutability/index.mdx (1)

5-5: Image path refactoring is complete and correct.

The structured path /images/blog/rust-variables-and-mutability/ successfully replaces the flat /blog/ directory structure. The image file exists at the new location, the old file has been removed, and no stale references remain in the codebase.

src/content/blog/google-app-script-drug-search-app/index.mdx (1)

5-5: LGTM! Placeholder image moved to common directory.

The heroImage path has been updated to use the /images/common/ directory for shared placeholder assets. This is the correct pattern for common/reusable images.

src/content/blog/frontend-developer-roadmap-part-1/index.mdx (1)

5-5: LGTM! Placeholder path updated to common directory.

The heroImage correctly uses the /images/common/ directory for the shared placeholder asset.

src/content/blog/git-commit-messages/index.mdx (1)

5-5: LGTM! Placeholder image path updated.

Consistent with the other placeholder updates, using the /images/common/ directory.

src/pages/about.astro (3)

11-31: LGTM! Content formatting improved.

The Thai text has been reformatted with better line breaks for improved source code readability. No content changes, only formatting.


39-50: LGTM! HTML markup improved for consistency.

The anchor tags have been reformatted with better attribute organization and consistent formatting, improving code maintainability without affecting functionality.


55-55: LGTM! Profile image path updated to common directory.

The profile image path has been correctly updated to /images/common/profile-placeholder.jpg, aligning with the new asset organization structure.

src/pages/index.astro (3)

6-30: LGTM! HTML structure improved with semantic class names.

The markup has been reorganized with more descriptive class names (.home-container, .intro-grid, .intro-text-content, .profile-image-container). The structure is cleaner and more maintainable.


24-24: LGTM! Profile image path updated consistently.

The profile image path matches the update in about.astro, using /images/common/profile-placeholder.jpg. This maintains consistency across pages.


34-106: Excellent responsive layout improvements!

The new CSS adds significant improvements to the homepage:

Desktop layout (line 34-84):

  • Flexbox centering for optimal vertical alignment
  • 2:1 grid layout with proper spacing
  • Circular profile image with shadow and border

Mobile-responsive design (line 86-106):

  • Single-column layout at 900px breakpoint
  • Content reordering (image first, text second)
  • Centered text alignment
  • Appropriately sized profile image (220px)

These changes enhance the user experience across different screen sizes without breaking existing functionality.

src/content/blog/vue-standard-protocol-antfu/index.mdx (1)

5-5: LGTM! Asset path updated to new structure.

The heroImage path has been successfully updated to follow the new organized structure under /images/blog/<slug>/, with the image file correctly in place at public/images/blog/vue-standard-protocol-antfu/eslint-antfu-setup.png. This aligns with the PR's goal of reorganizing blog assets into page bundles.

src/content/blog/essential-git-commands-guide/index.mdx (1)

5-5: Image paths are inconsistent across references.

Line 5 uses 12-git-commands-cheatsheet.png while line 16 uses 12-git-commands-cheatsheet.jpeg. Both files exist in the directory, but the references should use the same file extension for consistency. Choose one format and update both references.

Likely an incorrect or invalid review comment.

src/content/blog/benefits-of-touch-typing/index.mdx (1)

5-5: All image paths consistently updated and verified. All three image references (lines 5, 50, 91) have been updated to the new structured path /images/blog/benefits-of-touch-typing/ and all image files exist at their new locations:

  • typing-on-keyboard-hero.png
  • confident-typing-at-work.png
  • confident-typing-at-work-2.png
agents.md (1)

1-64: Refactoring plan is well-structured and has been successfully executed.

The documentation is clear, logical, and comprehensive. All phases (1–3) have been completed across 16 blog posts, with page bundles properly created and image paths correctly updated to the new /images/blog/[slug]/ structure.

Astro v5.16.6 maintains backward compatibility with the existing src/content/config.ts structure, so the constraint "Do NOT change the logic in src/content/config.ts" remains valid and appropriate. No Content Layer migration is required for this project to function correctly on v5.

The documentation can serve as a reference for similar refactoring tasks.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location> `agents.md:24` </location>
<code_context>
+   - Example: `src/content/blog/my-article.mdx` -> `src/content/blog/my-article/`
+2. Move the `.mdx` file into that directory and rename it to `index.mdx`.
+   - Result: `src/content/blog/my-article/index.mdx`
+3. **Important:** Use `git mv` command if possible to preserve file history.
+
+### Phase 2: Reorganize Public Images
</code_context>

<issue_to_address>
**suggestion (typo):** Consider adding an article: "Use the `git mv` command" for smoother grammar.

Update the sentence to: "Use the `git mv` command if possible to preserve file history." for clearer grammar.

```suggestion
3. **Important:** Use the `git mv` command if possible to preserve file history.
```
</issue_to_address>

### Comment 2
<location> `agents.md:64` </location>
<code_context>
+
+## Execution Order
+
+Please perform Phase 1 first. Once confirmed, proceed to Phase 2 and 3 together.
</code_context>

<issue_to_address>
**suggestion (typo):** Use "Phases 2 and 3" instead of "Phase 2 and 3" for correct plural agreement.

Suggested wording: "Once confirmed, proceed to Phases 2 and 3 together."
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

agents.md Outdated
- Example: `src/content/blog/my-article.mdx` -> `src/content/blog/my-article/`
2. Move the `.mdx` file into that directory and rename it to `index.mdx`.
- Result: `src/content/blog/my-article/index.mdx`
3. **Important:** Use `git mv` command if possible to preserve file history.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (typo): Consider adding an article: "Use the git mv command" for smoother grammar.

Update the sentence to: "Use the git mv command if possible to preserve file history." for clearer grammar.

Suggested change
3. **Important:** Use `git mv` command if possible to preserve file history.
3. **Important:** Use the `git mv` command if possible to preserve file history.

agents.md Outdated

## Execution Order

Please perform Phase 1 first. Once confirmed, proceed to Phase 2 and 3 together.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (typo): Use "Phases 2 and 3" instead of "Phase 2 and 3" for correct plural agreement.

Suggested wording: "Once confirmed, proceed to Phases 2 and 3 together."

@pharmacist-sabot pharmacist-sabot merged commit 377e19d into main Dec 30, 2025
10 checks passed
@pharmacist-sabot pharmacist-sabot deleted the refactor/organize-content-structure branch December 30, 2025 14:19
github-actions bot pushed a commit that referenced this pull request Dec 30, 2025
## [1.2.1](v1.2.0...v1.2.1) (2025-12-30)

### ♻️ Refactoring

* **content:** reorganize blog mdx to page bundles and structure … ([#5](#5)) ([377e19d](377e19d))
@github-actions
Copy link

🎉 This PR is included in version 1.2.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant