fix: header link on packages with entrypoints (#11285)

* fix: header link on packages with entrypoints

* types: add types

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: almeidx

apps/website/src/components/EntrypointSelect.tsx

@@ -3,13 +3,14 @@
 import { Loader2Icon } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
 import { Select, SelectList, SelectOption, SelectTrigger } from '@/components/ui/Select';
+import type { EntryPoint } from '@/util/fetchEntryPoints';
 import { parseDocsPathParams } from '@/util/parseDocsPathParams';
 
 export function EntryPointSelect({
 	entryPoints,
 	isLoading,
 }: {
-	readonly entryPoints: { readonly entryPoint: string }[];
+	readonly entryPoints: EntryPoint[];
 	readonly isLoading: boolean;
 }) {
 	const router = useRouter();

apps/website/src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ import { VersionSelect } from '@/components/VersionSelect';
 import { SidebarHeader as BasSidebarHeader } from '@/components/ui/Sidebar';
 import { buttonStyles } from '@/styles/ui/button';
 import { PACKAGES_WITH_ENTRY_POINTS } from '@/util/constants';
+import type { EntryPoint } from '@/util/fetchEntryPoints';
 
 export function SidebarHeader() {
 	const params = useParams<{
@@ -21,7 +22,7 @@ export function SidebarHeader() {
 
 	const hasEntryPoints = PACKAGES_WITH_ENTRY_POINTS.includes(params.packageName);
 
-	const { data: entryPoints, isLoading: isLoadingEntryPoints } = useQuery({
+	const { data: entryPoints, isLoading: isLoadingEntryPoints } = useQuery<EntryPoint[]>({
 		queryKey: ['entryPoints', params.packageName, params.version],
 		queryFn: async () => {
 			const response = await fetch(`/api/docs/entrypoints?packageName=${params.packageName}&version=${params.version}`);
@@ -43,7 +44,10 @@ export function SidebarHeader() {
 		<BasSidebarHeader className="bg-[#f3f3f4] p-4 dark:bg-[#121214]">
 			<div className="flex flex-col gap-2">
 				<div className="flex place-content-between place-items-center p-1">
-					<Link className="text-xl font-bold" href={`/docs/packages/${params.packageName}/${params.version}`}>
+					<Link
+						className="text-xl font-bold"
+						href={`/docs/packages/${params.packageName}/${params.version}${hasEntryPoints ? `/${entryPoints?.[0]?.entryPoint ?? ''}` : ''}`}
+					>
 						{params.packageName}
 					</Link>
 					<div className="flex place-items-center gap-2">

apps/website/src/util/fetchEntryPoints.ts

@@ -3,7 +3,7 @@ import { join } from 'node:path';
 import { PACKAGES_WITH_ENTRY_POINTS } from './constants';
 import { ENV } from './env';
 
-export async function fetchEntryPoints(packageName: string, version: string) {
+export async function fetchEntryPoints(packageName: string, version: string): Promise<EntryPoint[] | null> {
 	const hasEntryPoint = PACKAGES_WITH_ENTRY_POINTS.includes(packageName);
 
 	if (!hasEntryPoint) {
@@ -37,3 +37,7 @@ export async function fetchEntryPoints(packageName: string, version: string) {
 
 	return fileContent.json();
 }
+
+export interface EntryPoint {
+	readonly entryPoint: string;
+}