feat: dispaly pageview at the bottom

src/components/PageViews.tsx

@@ -1,40 +1,36 @@
 'use client'
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
 
 interface PageViewsProps {
-  slug: string;
+	slug: string
 }
 
 export default function PageViews({ slug }: PageViewsProps) {
-  const [views, setViews] = useState<number | null>(null);
+	const [views, setViews] = useState<number | null>(null)
 
-  useEffect(() => {
+	useEffect(() => {
-    console.log('PageViews component mounted with slug:', slug);
+		console.log('PageViews component mounted with slug:', slug)
-    async function updatePageView() {
+		async function updatePageView() {
-      try {
+			try {
-        // First increment the view count
+				// First increment the view count
-        const postResponse = await fetch(`/api/pageview/${slug}`, {
+				const postResponse = await fetch(`/api/pageview/${slug}`, {
-          method: 'POST',
+					method: 'POST'
-        });
+				})
-        if (!postResponse.ok) throw new Error('Failed to increment view count');
+				if (!postResponse.ok) throw new Error('Failed to increment view count')
-        
-        // Then get the updated count
-        const { views } = await postResponse.json();
-        console.log('Updated views:', views);
-        setViews(views);
-      } catch (error) {
-        console.error('Error updating page views:', error);
-        setViews(null);
-      }
-    }
 
-    updatePageView();
+				// Then get the updated count
-  }, [slug]);
+				const { views } = await postResponse.json()
+				console.log('Updated views:', views)
+				setViews(views)
+			} catch (error) {
+				console.error('Error updating page views:', error)
+				setViews(null)
+			}
+		}
 
-  return (
+		updatePageView()
-    <span className="text-sm text-gray-500">
+	}, [slug])
-      Views: {views === null ? '-' : views}
+
-    </span>
+	return <span className='text-sm text-gray-500'>Views: {views === null ? '-' : views}</span>
-  );
 }

src/components/layout/Footer.astro

@@ -3,9 +3,7 @@ import { Icon } from 'astro-icon/components'
 import PageViews from '../PageViews'
 
 const pathname = new URL(Astro.request.url).pathname
-const isBlogPost = pathname.startsWith('/blog/') && pathname !== '/blog'
 const slug = pathname === '/' ? 'home' : pathname.replace(/^\/|\/$/g, '')
-console.log('Slug:', slug)
 ---
 
 <footer class='mx-auto mt-24 w-full'>
@@ -17,18 +15,12 @@ console.log('Slug:', slug)
 				<p class=''>2024 kazoottt. All rights reserved.</p>
 			</div>
 
-		
-
 			<div class='flex items-center justify-between'>
 				<!-- Social Brands -->
 				<div class='flex items-center gap-x-4'>
-					{
+					<div class='text-center'>
-						!isBlogPost && (
+						<PageViews client:load slug={slug} />
-							<div class='text-center'>
+					</div>
-								<PageViews client:load slug={slug} />
-							</div>
-						)
-					}
 					<!-- Linkedin -->
 					<a
 						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'

src/layouts/BlogPost.astro

@@ -5,7 +5,6 @@ import BlogHero from '@/components/blog/Hero.astro'
 import TOC from '@/components/blog/TOC.astro'
 import Button from '@/components/Button.astro'
 import PageLayout from './BaseLayout.astro'
-import PageViews from '@/components/PageViews'
 
 interface Props {
 	post: CollectionEntry<'post'>
@@ -44,9 +43,6 @@ const { headings } = await post.render()
 			<article class='flex-1 flex-grow break-words' data-pagefind-body>
 				<div id='blog-hero'>
 					<BlogHero content={post} />
-					<div class="mt-2">
-						<PageViews client:load slug={slug} />
-					</div>
 				</div>
 				<div
 					id='blog-gallery'