+
- {count}
+```
+
+Test page loads without error and prints a number.
+
+Commit final part.
+
+git add .
+git commit -m "test query working"
+git push
+```
diff --git a/src/actions/admin.ts b/src/actions/admin.ts
new file mode 100644
index 00000000..bf2782d2
--- /dev/null
+++ b/src/actions/admin.ts
@@ -0,0 +1,67 @@
+'use server'
+
+import { db } from '@/server/db/connection'
+import { blogPosts, blogViews, contactSubmissions, contactInteractions, contactAbandonments } from '@/server/db/schema'
+import { desc, count, sql, eq } from 'drizzle-orm'
+
+export async function getAdminMetrics() {
+ const [
+ totalViews,
+ uniqueVisitors,
+ viewsByCountry,
+ recentViews,
+ contactStats,
+ interactions,
+ abandonments,
+ postStats
+ ] = await Promise.all([
+ // Total Views
+ db.select({ count: count() }).from(blogViews),
+
+ // Unique Visitors (distinct fingerprint)
+ db.select({ count: count(blogViews.fingerprint) }).from(blogViews),
+
+ // Views by Country
+ db.select({
+ country: blogViews.geoCountry,
+ count: count()
+ })
+ .from(blogViews)
+ .groupBy(blogViews.geoCountry)
+ .orderBy(desc(count()))
+ .limit(10),
+
+ // Recent Views Log
+ db.select()
+ .from(blogViews)
+ .orderBy(desc(blogViews.viewedAt))
+ .limit(50),
+
+ // Contact Submissions
+ db.select().from(contactSubmissions).orderBy(desc(contactSubmissions.createdAt)),
+
+ // Contact Interactions
+ db.select().from(contactInteractions).orderBy(desc(contactInteractions.createdAt)),
+
+ // Contact Abandonments
+ db.select().from(contactAbandonments).orderBy(desc(contactAbandonments.createdAt)),
+
+ // Per-post view stats
+ db.select({
+ slug: blogPosts.slug,
+ totalViews: blogPosts.totalViews,
+ uniqueViews: blogPosts.uniqueViews
+ }).from(blogPosts)
+ ])
+
+ return {
+ totalViews: totalViews[0].count,
+ uniqueVisitors: uniqueVisitors[0].count,
+ viewsByCountry,
+ recentViews,
+ contactStats,
+ interactions,
+ abandonments,
+ postStats: postStats // Returns array of { slug, totalViews, uniqueViews }
+ }
+}
diff --git a/src/actions/analytics.ts b/src/actions/analytics.ts
new file mode 100644
index 00000000..1b05f344
--- /dev/null
+++ b/src/actions/analytics.ts
@@ -0,0 +1,75 @@
+'use server'
+
+import { db } from '@/server/db/connection'
+import { blogPosts, blogViews } from '@/server/db/schema'
+import { eq, and, sql } from 'drizzle-orm'
+import { headers } from 'next/headers'
+import { getClientIp } from '@/lib/protection'
+import { fetchGeoInfo } from '@/lib/geo'
+import { createHash } from 'crypto'
+
+/**
+ * Tracks a blog post view with robust unique visitor detection.
+ * Uses a fingerprint of (IP + UserAgent + DailySalt) to detect uniqueness across Incognito.
+ */
+export async function trackBlogView(slug: string) {
+ try {
+ const ip = await getClientIp()
+ const headersList = await headers()
+ const userAgent = headersList.get('user-agent') || 'unknown'
+
+
+ const fingerprintInput = `${ip}|${userAgent}`
+ const fingerprint = createHash('sha256').update(fingerprintInput).digest('hex')
+
+ // Ensure the blog post exists in the database
+ await db.insert(blogPosts)
+ .values({ slug })
+ .onConflictDoNothing()
+ .execute()
+
+ const existingView = await db.query.blogViews.findFirst({
+ where: and(
+ eq(blogViews.slug, slug),
+ eq(blogViews.fingerprint, fingerprint)
+ ),
+ })
+
+ if (existingView) {
+
+ await db.update(blogPosts)
+ .set({ totalViews: sql`${blogPosts.totalViews} + 1` })
+ .where(eq(blogPosts.slug, slug))
+
+ return { unique: false }
+ }
+
+
+ const geoInfo = await fetchGeoInfo(ip)
+
+ await db.insert(blogViews).values({
+ slug,
+ fingerprint,
+ ipAddress: ip,
+ geoCountry: geoInfo?.country,
+ geoCity: geoInfo?.city,
+ geoRegion: geoInfo?.region,
+ geoLoc: geoInfo?.loc,
+ geoOrg: geoInfo?.org,
+ geoTimezone: geoInfo?.timezone,
+ })
+
+ await db.update(blogPosts)
+ .set({
+ uniqueViews: sql`${blogPosts.uniqueViews} + 1`,
+ totalViews: sql`${blogPosts.totalViews} + 1`
+ })
+ .where(eq(blogPosts.slug, slug))
+
+ return { unique: true }
+
+ } catch (error) {
+ console.error('Failed to track blog view:', error)
+ return { success: false }
+ }
+}
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
new file mode 100644
index 00000000..16972855
--- /dev/null
+++ b/src/actions/auth.ts
@@ -0,0 +1,29 @@
+'use server'
+
+import { auth } from '@/server/auth'
+import { env } from '@/server/env'
+import { cookies } from 'next/headers'
+
+const ADMIN_EMAIL = env.ADMIN_EMAIL
+
+export async function checkAdminStatus(): Promise+ Generate a refresh token for the Spotify API integration +
+{error}
++ ✓ Authorization successful! +
+
+ Copy the refresh token below and add it to your{' '}
+
+ .env
+ {' '}
+ file.
+
+ Add this to your .env{' '}
+ file:
+
+ SPOTIFY_REFRESH_TOKEN={tokens.refresh_token}
+
+
+ First, generate the Spotify authorization URL. Make sure you
+ have{' '}
+
+ SPOTIFY_CLIENT_ID
+ {' '}
+ and{' '}
+
+ SPOTIFY_CLIENT_SECRET
+ {' '}
+ in your{' '}
+
+ .env
+ {' '}
+ file.
+
+ Click the button below to authorize your Spotify account. + You'll be redirected back here with your refresh token. +
+ + +SPOTIFY_CLIENT_ID - From
+ Spotify Developer Dashboard
+ SPOTIFY_CLIENT_SECRET -
+ From Spotify Developer Dashboard
+ SPOTIFY_REDIRECT_URI -
+ Should be{' '}
+
+ {typeof window !== 'undefined'
+ ? `${window.location.origin}/dev/spotify`
+ : 'http://localhost:3000/dev/spotify'}
+
+ Welcome back, Remco.
++ Completing authentication... +
++ Loading... +
++ {post.metadata.summary} +
+{post.metadata.summary}
- +{post.metadata.summary}
- +The page you are looking for does not exist.
+ <> + ++ The page you're looking for seems to have vanished into the digital void. + Don't worry though, let's get you back on track. +
+
+
+ This page demonstrates the PostHog analytics integration. Interact with the demo component below to see events being captured. +
++ Last updated: {lastUpdated} +
++ This Privacy Policy explains how I collect, use, and protect your information when you visit remcostoeten.nl. + I believe in transparency and only collect data that's necessary to improve your experience on this site. +
++ I use PostHog to understand how people interact with my site. This includes: +
++ This data is anonymized and never linked to your personal identity. +
++ When you sign in with GitHub to leave blog reactions or comment: +
++ I only store what's necessary for authentication and personalization. +
++ When you contact me through the contact form, I receive your email address and message. + This data is only used to respond to your inquiry. +
++ Basic technical information like IP address, browser headers, and cookies are collected + for security and site functionality. +
++ Your data is stored securely on: +
++ I take reasonable security measures to protect your data, including encryption for data transmission + and limited access to personal information. +
+Required for the site to function:
++ PostHog cookies for anonymous usage tracking. You can opt out by disabling cookies + in your browser or using the privacy settings. +
++ Under GDPR and other privacy laws, you have the right to: +
++ To exercise these rights, email me at stoetenremco [dot] rs [at] gmail [dot] com. +
++ This site uses the following third-party services: +
++ Each service has its own privacy policy and data handling practices. +
++ If you have questions about this Privacy Policy or how I handle your data, + please contact me: +
++ stoetenremco [dot] rs [at] gmail [dot] com +
++ I'll respond to your privacy concerns within 7 days. +
++ 11 reusable skeleton loader components for your application +
+
+ {`import { ${demos.find((d) => d.id === activeDemo)?.name}Skeleton } from '@/components/ui/skeletons'
+
+export default function MyComponent() {
+ const { data, isLoading } = useQuery(...)
+
+ if (isLoading) {
+ return <${demos.find((d) => d.id === activeDemo)?.name}Skeleton />
+ }
+
+ return {/* Your content */}
+}`}
+
+ Configure your Spotify integration
-- Your Spotify account has been connected. Here are your credentials: -
- -- Click this button to copy the complete .env configuration to your clipboard -
-- First, create a Spotify Developer app to get your Client ID and Client Secret. -
- -- Add the redirect URI to your Spotify app settings. -
- -http://127.0.0.1:3000/api/spotify/callback
-
- - In your Spotify app dashboard, go to "Edit Settings" and add this URL to "Redirect URIs". -
-- Enter your Spotify app credentials and authorize this application. -
- -- Authorization link generated! Click the button below to authorize this app with Spotify. -
-+ Last updated: {lastUpdated} +
++ Welcome to remcostoeten.nl. These Terms of Service govern your use of my personal website and blog. + By accessing or using this site, you agree to these terms. +
++ This is a personal portfolio and blog. I'm not a company - just a developer sharing my work and thoughts. +
++ Blog posts, tutorials, and original content are my intellectual property. +
++ When you leave comments or reactions: +
++ Limited quoting and sharing for educational, commentary, or criticism purposes + is welcome under fair use principles, provided proper attribution is given. +
++ This site uses GitHub OAuth for authentication. By signing in: +
++ I only access the minimum information needed for authentication and personalization. +
++ Your privacy matters. My Privacy Policy explains: +
++ Using this site means you consent to the data collection practices described in the Privacy Policy. +
++ I do my best to provide accurate information, but content may contain errors or become outdated. + Technical tutorials might not work in all environments. Use at your own risk. +
++ This is a personal blog, not professional advice. Content reflects my personal opinions + and experiences, not professional guidance. +
++ This is a personal website, not a commercial service. I try to keep it running smoothly, + but: +
++ This service is provided "as is" without warranties. +
++ To the fullest extent permitted by law: +
++ This is a personal project - use it responsibly and at your own risk. +
++ I may update these Terms occasionally. Changes are effective immediately upon posting. + Continued use of the site means you accept the updated terms. +
++ Major changes will be announced in a blog post or site notice. +
++ Questions about these Terms or want to report violations? +
++ stoetenremco [dot] rs [at] gmail [dot] com +
++ I'm reasonable and happy to discuss concerns about site usage or content. +
+{sub.name}
+ + {new Date(sub.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })} + +{sub.email}
+{sub.message}
++ You'll be redirected to {provider === 'github' ? 'GitHub' : 'Google'} to complete authentication +
++ Click the button below to continue +
+{error}
++ By signing in, you agree to our terms and privacy policy +
+- {post.metadata.title} -
- - {post.metadata.summary && ( -- {post.metadata.summary} -
- )} - - {/* Combine categories, tags, and topics for display */} - {(() => { - const allTags = [ - ...(post.metadata.categories || []), - ...(post.metadata.tags || []), - ...(post.metadata.topics || []) - ] - return allTags.length > 0 ? ( -