feat(analytics): make top page links clickable in dashboard

This commit is contained in:
Usman Baig
2026-01-18 16:57:54 +01:00
parent 84e7be1853
commit 2fc623c14e
2 changed files with 24 additions and 4 deletions

View File

@@ -208,7 +208,12 @@ export default function SiteDashboardPage() {
</div> </div>
<div className="grid gap-6 lg:grid-cols-2 mb-8"> <div className="grid gap-6 lg:grid-cols-2 mb-8">
<ContentStats topPages={topPages} entryPages={entryPages} exitPages={exitPages} /> <ContentStats
topPages={topPages}
entryPages={entryPages}
exitPages={exitPages}
domain={site.domain}
/>
<TopReferrers referrers={topReferrers} /> <TopReferrers referrers={topReferrers} />
</div> </div>

View File

@@ -9,13 +9,14 @@ interface ContentStatsProps {
topPages: TopPage[] topPages: TopPage[]
entryPages: TopPage[] entryPages: TopPage[]
exitPages: TopPage[] exitPages: TopPage[]
domain: string
} }
type Tab = 'top_pages' | 'entry_pages' | 'exit_pages' type Tab = 'top_pages' | 'entry_pages' | 'exit_pages'
const LIMIT = 7 const LIMIT = 7
export default function ContentStats({ topPages, entryPages, exitPages }: ContentStatsProps) { export default function ContentStats({ topPages, entryPages, exitPages, domain }: ContentStatsProps) {
const [activeTab, setActiveTab] = useState<Tab>('top_pages') const [activeTab, setActiveTab] = useState<Tab>('top_pages')
const [isModalOpen, setIsModalOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false)
@@ -86,7 +87,14 @@ export default function ContentStats({ topPages, entryPages, exitPages }: Conten
{displayedData.map((page, index) => ( {displayedData.map((page, index) => (
<div key={index} className="flex items-center justify-between h-7"> <div key={index} className="flex items-center justify-between h-7">
<div className="flex-1 truncate text-neutral-900 dark:text-white"> <div className="flex-1 truncate text-neutral-900 dark:text-white">
{page.path} <a
href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
>
{page.path}
</a>
</div> </div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4"> <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(page.pageviews)} {formatNumber(page.pageviews)}
@@ -114,7 +122,14 @@ export default function ContentStats({ topPages, entryPages, exitPages }: Conten
{data.map((page, index) => ( {data.map((page, index) => (
<div key={index} className="flex items-center justify-between py-1"> <div key={index} className="flex items-center justify-between py-1">
<div className="flex-1 truncate text-neutral-900 dark:text-white"> <div className="flex-1 truncate text-neutral-900 dark:text-white">
{page.path} <a
href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
>
{page.path}
</a>
</div> </div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4"> <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(page.pageviews)} {formatNumber(page.pageviews)}