Add gh profile url to comments

app/actions/comments.ts

@@ -4,7 +4,6 @@ import {auth, signIn} from '@/auth'
 import {createClient} from '@/lib/supabase/server'
 import {z} from 'zod'
 import {sendNotification} from '@/lib/ntfy'
-import {extractUserId} from '@/lib/github'
 
 export async function loginWithGitHub() {
     await signIn('github')
@@ -56,16 +55,21 @@ export async function addComment(prevState: { message: string }, formData: FormD
     try {
         const supabase = await createClient()
         const session = await auth()
-        const isMe = process.env.GITHUB_USER_ID === extractUserId(session?.user?.image ?? '')
+        const isMe = process.env.GITHUB_USER_ID === String(session?.user?.id)
 
         if (!session?.user) {
             return {message: authorisation_error}
         }
 
-        const {name, email, image} = session.user
+        const {name, email, image, login} = session.user as { [k: string]: string }
 
         const [{data: user}, {data: article}] = await Promise.all([
-            supabase.from('users').upsert({name, email, image}, {onConflict: 'email'}).select('*').single(),
+            supabase.from('users').upsert({
+                name,
+                email,
+                image,
+                username: login ?? null
+            }, {onConflict: 'email'}).select('*').single(),
             supabase.from('articles').select('*').eq('slug', slug).single()
         ])
 

auth.ts

@@ -11,6 +11,21 @@ export const {handlers, signIn, signOut, auth} = NextAuth({
     callbacks: {
         async redirect({url, baseUrl}) {
             return url
+        },
+        async jwt({token, user, account, profile}) {
+            if (profile) {
+                token.profile = profile
+            }
+            return token
+        },
+        async session({session, user, token}) {
+            if (token.profile) {
+                session.user = {
+                    ...session.user,
+                    ...token.profile
+                }
+            }
+            return session
         }
     }
 })

components/ui/Comments.tsx

@@ -3,6 +3,7 @@
 import React, {useActionState, useEffect, useState} from 'react'
 import {useSession} from 'next-auth/react'
 import Image from 'next/image'
+import Link from 'next/link'
 import clsx from 'clsx'
 import {addComment, loginWithGitHub} from '@/app/actions/comments'
 import {Button} from '@/components/ui/Button'
@@ -57,7 +58,9 @@ Comments.Comment = function Comment({comment, isReply = false, className}: {
                        className={clsx('rounded-full', isReply ? 'size-8' : 'size-12')}/>
                 <div className="flex-auto">
                     <div className="flex items-baseline gap-x-1">
-                        <p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p>
+                        <p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">
+                            <Link href={`https://github.com/${comment.user.username ?? ''}`}>{comment.user.name}</Link>
+                        </p>
                         <p className="text-sm text-zinc-500 dark:text-zinc-400">
                             <time dateTime={comment.created_at}>
                                 <span>&middot; {`${getShortDurationFromNow(comment.created_at)}`}</span>

lib/getComments.ts

@@ -13,7 +13,7 @@ export async function getComments(slug: string) {
                     published,
                     created_at,
                     parent_id,
-                    user:users!inner(id, name, image),
+                    user:users!inner(id, name, image, username),
                     article:articles!inner(id, title, slug)
                 `)
             .eq('article.slug', slug)

lib/github.ts

@@ -47,7 +47,3 @@ export async function getPinnedRepos() {
 
     return response.data.user.pinnedItems.nodes
 }
-
-export function extractUserId(avatarUrl: string) {
-    return new URL(avatarUrl).pathname.split('/')[2]
-}

types/index.ts

@@ -31,6 +31,7 @@ export type Comment = {
     parent_id: number | null
     user: {
         id: number
+        username: string
         name: string
         image: string
     }