feat: Add follow widget to post detail sidebar

src/pages/HomePage.vue

@@ -5,7 +5,7 @@
 
 			<!-- Main content -->
 			<main class="grow overflow-hidden px-6">
-				<div class="w-full h-full max-w-[1072px] mx-auto flex flex-col">
+				<div id="home-top" class="w-full h-full max-w-[1072px] mx-auto flex flex-col">
 					<HeaderPartial />
 					<HeroPartial />
 
@@ -37,6 +37,10 @@
 						</aside>
 					</div>
 
+					<div class="flex justify-end pt-10 mb-10">
+						<BackToTopLink target="#home-top" />
+					</div>
+
 					<FooterPartial />
 				</div>
 			</main>
@@ -56,6 +60,7 @@ import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
 import FeaturedProjectsPartial from '@partials/FeaturedProjectsPartial.vue';
 import WidgetSkillsSkeletonPartial from '@partials/WidgetSkillsSkeletonPartial.vue';
 import WidgetOullinPartial from '@partials/WidgetOullinPartial.vue';
+import BackToTopLink from '@partials/BackToTopLink.vue';
 
 import { onMounted, ref } from 'vue';
 import { useApiStore } from '@api/store.ts';

src/pages/PostPage.vue

@@ -90,7 +90,7 @@
 												</li>
 											</ul>
 										</div>
-										<h1 class="h1 font-aspekta mb-4">{{ post.title }}</h1>
+										<h1 id="post-top" class="h1 font-aspekta mb-4">{{ post.title }}</h1>
 									</header>
 									<!-- Post content -->
 									<div class="text-slate-500 dark:text-slate-400 space-y-8">
@@ -107,11 +107,16 @@
 						<!-- Right sidebar -->
 						<aside class="md:w-[240px] lg:w-[300px] shrink-0">
 							<div class="space-y-6">
+								<WidgetSocialPartial />
 								<WidgetSponsorPartial />
 							</div>
 						</aside>
 					</div>
 
+					<div class="flex justify-end pt-10 mb-10">
+						<BackToTopLink target="#post-top" />
+					</div>
+
 					<FooterPartial />
 				</div>
 			</main>
@@ -134,6 +139,8 @@ import SideNavPartial from '@partials/SideNavPartial.vue';
 import type { PostResponse } from '@api/response/index.ts';
 import { siteUrlFor, useSeoFromPost } from '@/support/seo';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
+import WidgetSocialPartial from '@partials/WidgetSocialPartial.vue';
+import BackToTopLink from '@partials/BackToTopLink.vue';
 import { onMounted, ref, computed, watch, nextTick, watchEffect } from 'vue';
 import { initializeHighlighter, renderMarkdown } from '@/support/markdown.ts';
 import CoverImageLoader from '@components/CoverImageLoader.vue';

src/partials/RecommendationPartial.vue

@@ -16,7 +16,7 @@
 					<div class="pl-20 space-y-1">
 						<div class="font-aspekta font-[650] text-slate-800 dark:text-slate-100">{{ item.person.full_name }}</div>
 						<div class="text-sm font-medium text-slate-800 dark:text-slate-100">{{ item.person.company }}</div>
-						<div v-if="item.person.designation" class="text-sm text-slate-600 dark:text-slate-300">
+						<div v-if="item.person.designation" class="text-sm font-medium italic text-teal-600 dark:text-teal-300">
 							{{ item.person.designation }}
 						</div>
 						<div class="flex justify-between text-xs dark:text-teal-500 text-slate-400 pb-2">

tests/pages/HomePage.test.ts

@@ -71,4 +71,27 @@ describe('HomePage', () => {
 		const { debugError } = await import('@api/http-error.ts');
 		expect(debugError).toHaveBeenCalledWith(error);
 	});
+
+	it('renders a back to top link targeting the home container', async () => {
+		const wrapper = mount(HomePage, {
+			global: {
+				stubs: {
+					SideNavPartial: true,
+					HeaderPartial: true,
+					HeroPartial: true,
+					FooterPartial: true,
+					ArticlesListPartial: true,
+					FeaturedProjectsPartial: true,
+					TalksPartial: true,
+					WidgetSponsorPartial: true,
+					WidgetSkillsPartial: true,
+				},
+			},
+		});
+
+		await flushPromises();
+
+		const backToTopLink = wrapper.find('a[href="#home-top"]');
+		expect(backToTopLink.exists()).toBe(true);
+	});
 });

tests/pages/PostPage.test.ts

@@ -52,24 +52,28 @@ vi.mock('@/public.ts', () => ({
 	getReadingTime: () => '',
 }));
 
+const mountComponent = () =>
+	mount(PostPage, {
+		global: {
+			stubs: {
+				SideNavPartial: true,
+				HeaderPartial: true,
+				FooterPartial: true,
+				WidgetSponsorPartial: true,
+				WidgetSocialPartial: true,
+				WidgetSkillsPartial: true,
+				RouterLink: { template: '<a><slot /></a>' },
+			},
+		},
+	});
+
 describe('PostPage', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 	});
 
 	it('fetches post on mount', async () => {
-		const wrapper = mount(PostPage, {
-			global: {
-				stubs: {
-					SideNavPartial: true,
-					HeaderPartial: true,
-					FooterPartial: true,
-					WidgetSponsorPartial: true,
-					WidgetSkillsPartial: true,
-					RouterLink: { template: '<a><slot /></a>' },
-				},
-			},
-		});
+		const wrapper = mountComponent();
 		const skeleton = wrapper.find('[data-testid="post-page-skeleton"]');
 		expect(skeleton.exists()).toBe(true);
 		expect(skeleton.classes()).toContain('min-h-[25rem]');
@@ -80,18 +84,7 @@ describe('PostPage', () => {
 	});
 
 	it('initializes highlight.js on mount', async () => {
-		const wrapper = mount(PostPage, {
-			global: {
-				stubs: {
-					SideNavPartial: true,
-					HeaderPartial: true,
-					FooterPartial: true,
-					WidgetSponsorPartial: true,
-					WidgetSkillsPartial: true,
-					RouterLink: { template: '<a><slot /></a>' },
-				},
-			},
-		});
+		const wrapper = mountComponent();
 		await flushPromises();
 		const highlightCore = await import('highlight.js/lib/core');
 		expect(initializeHighlighter).toHaveBeenCalledWith(highlightCore.default);
@@ -101,18 +94,7 @@ describe('PostPage', () => {
 
 	it('processes markdown content', async () => {
 		const DOMPurify = await import('dompurify');
-		const wrapper = mount(PostPage, {
-			global: {
-				stubs: {
-					SideNavPartial: true,
-					HeaderPartial: true,
-					FooterPartial: true,
-					WidgetSponsorPartial: true,
-					WidgetSkillsPartial: true,
-					RouterLink: { template: '<a><slot /></a>' },
-				},
-			},
-		});
+		const wrapper = mountComponent();
 		await flushPromises();
 		expect(renderMarkdown).toHaveBeenCalledWith(post.content);
 		expect(DOMPurify.default.sanitize).toHaveBeenCalled();
@@ -122,22 +104,37 @@ describe('PostPage', () => {
 	it('handles post errors gracefully', async () => {
 		const error = new Error('fail');
 		getPost.mockRejectedValueOnce(error);
-		const wrapper = mount(PostPage, {
-			global: {
-				stubs: {
-					SideNavPartial: true,
-					HeaderPartial: true,
-					FooterPartial: true,
-					WidgetSponsorPartial: true,
-					WidgetSkillsPartial: true,
-					RouterLink: { template: '<a><slot /></a>' },
-				},
-			},
-		});
+		const wrapper = mountComponent();
 		await flushPromises();
 		const { debugError } = await import('@api/http-error.ts');
 		expect(debugError).toHaveBeenCalledWith(error);
 		expect(wrapper.find('[data-testid="post-page-skeleton"]').exists()).toBe(false);
 		expect(wrapper.text()).toContain("We couldn't load this post.");
 	});
+
+	it('renders the follow widget above the sponsor widget', async () => {
+		const wrapper = mountComponent();
+
+		await flushPromises();
+
+		const aside = wrapper.find('aside');
+		expect(aside.exists()).toBe(true);
+
+		const container = aside.find('div');
+		expect(container.exists()).toBe(true);
+
+		const children = container.element.children;
+		expect(children.length).toBeGreaterThanOrEqual(2);
+		expect(children[0].tagName).toBe('WIDGET-SOCIAL-PARTIAL-STUB');
+		expect(children[1].tagName).toBe('WIDGET-SPONSOR-PARTIAL-STUB');
+	});
+
+	it('renders a back to top link targeting the post header', async () => {
+		const wrapper = mountComponent();
+
+		await flushPromises();
+
+		const backToTopLink = wrapper.find('a[href="#post-top"]');
+		expect(backToTopLink.exists()).toBe(true);
+	});
 });