feat: Add follow widget to post detail sidebar

[gocanto]

Summary

• render the Follow Me widget on the post detail sidebar above the sponsor card
• wire the post page to import the social widget component
• cover the new layout requirement with a unit test that verifies widget order

Testing

• npm test (fails: vitest not found because dependencies cannot be installed in the execution environment)

---

https://chatgpt.com/codex/tasks/task_e_68e764494f0083338b519ae29fc4a29e

Summary by CodeRabbit

• New Features

  • Added a Social widget to the Post page sidebar (now shown above the Sponsor widget).
  • Added Back-to-Top links on Post and Home pages for quick navigation to the top.

• UI / Styling

  • Adjusted recommendation designation styling for improved emphasis and color contrast.

• Tests

  • Added/updated tests to verify social widget ordering and presence of Back-to-Top links.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Added BackToTopLink anchors and usage to PostPage and HomePage, inserted WidgetSocialPartial above WidgetSponsorPartial in PostPage aside, tweaked RecommendationPartial designation styling, and updated tests to assert widget ordering and back-to-top links.

Changes

Cohort / File(s)	Summary
Post page component & imports src/pages/PostPage.vue	Added id="post-top" to the post title, imported WidgetSocialPartial and BackToTopLink, rendered <WidgetSocialPartial /> above <WidgetSponsorPartial />, and added <BackToTopLink target="#post-top" /> below main content.
Home page component src/pages/HomePage.vue	Added id="home-top" to main container, imported and rendered <BackToTopLink target="#home-top" /> in the page footer area.
Partial styling change src/partials/RecommendationPartial.vue	Changed designation line classes to text-sm font-medium italic text-teal-600 dark:text-teal-300 (styling change only).
Tests — PostPage tests/pages/PostPage.test.ts	Introduced mountComponent test helper, updated mounts to stub new partials, added test asserting WidgetSocialPartial appears above WidgetSponsorPartial, and added test for BackToTop presence targeting #post-top.
Tests — HomePage tests/pages/HomePage.test.ts	Added test asserting BackToTop link that targets #home-top.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant PostPage as PostPage.vue
    participant Aside as Aside (widgets)
    participant Social as WidgetSocialPartial
    participant Sponsor as WidgetSponsorPartial
    participant BackToTop as BackToTopLink

    User->>PostPage: Navigate to Post page
    activate PostPage
    PostPage->>Aside: render aside
    Aside->>Social: render (top)
    Aside->>Sponsor: render (below social)
    PostPage->>BackToTop: render BackToTopLink(target="#post-top") (below main)
    deactivate PostPage

    note over Social,Sponsor: Ordering asserted by tests

Loading

sequenceDiagram
    participant User as User
    participant HomePage as HomePage.vue
    participant BackToTop as BackToTopLink

    User->>HomePage: Navigate to Home page
    activate HomePage
    HomePage->>HomePage: ensure `id="home-top"` on main container
    HomePage->>BackToTop: render BackToTopLink(target="#home-top") (footer area)
    deactivate HomePage

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: Add follow widget to post detail sidebar #111 — modifies src/pages/PostPage.vue to add/render WidgetSocialPartial and updates PostPage tests (closely related).
• feat: Add back-to-top links to resume sections #94 — adds and uses BackToTopLink and top anchors across pages (shared BackToTop usage).
• fix: adjust recommendation designation visibility #110 — touches src/partials/RecommendationPartial.vue rendering/styling (related to the designation styling change).

Suggested labels

codex

Poem

A rabbit hops in, tweaks anchors and cheer,
Socials above, sponsors tucked near.
A back-to-top link for quick, comfy hops,
Tests check the order — no floppy crop stops.
🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title clearly and succinctly summarizes the main change of adding the follow (social) widget to the post detail sidebar, accurately reflecting the new feature introduced in this PR.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5086348 and 6bd0f5b.

📒 Files selected for processing (5)

• src/pages/HomePage.vue (3 hunks)
• src/pages/PostPage.vue (3 hunks)
• src/partials/RecommendationPartial.vue (1 hunks)
• tests/pages/HomePage.test.ts (1 hunks)
• tests/pages/PostPage.test.ts (4 hunks)

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Summary of Changes

Hello @gocanto, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new 'Follow Me' widget to the sidebar of the post detail page, enhancing social engagement by making follow options more accessible. The changes involve integrating the new component into the page's template and script, and ensuring its correct placement through a dedicated unit test.

Highlights

• New Widget Placement: The 'Follow Me' social widget is now rendered on the post detail sidebar, specifically positioned above the existing sponsor card.
• Component Integration: The PostPage component has been updated to import and utilize the WidgetSocialPartial component.
• Unit Test Coverage: A new unit test has been added to verify the correct rendering order of the 'Follow Me' widget relative to the sponsor widget in the sidebar.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully adds the 'Follow Me' widget to the post detail sidebar and includes a unit test to verify its position. The implementation is straightforward. My review focuses on improving the quality and maintainability of the tests. I've identified significant code duplication in the test setup across multiple test cases, which this PR makes more apparent. I've suggested a refactoring to make the tests DRYer. Additionally, the new test for widget order uses a fragile assertion method; I've provided a more robust alternative that directly inspects the DOM structure.