feat: integrate with backend

Author: bsdayo

package.json

@@ -16,6 +16,7 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource/maple-mono": "^5.2.5",
     "@iconify-json/simple-icons": "^1.2.54",
+    "@nanostores/react": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -30,6 +31,7 @@
     "dayjs": "^1.11.18",
     "lucide-react": "^0.545.0",
     "medium-zoom": "^1.1.0",
+    "nanostores": "^1.0.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rehype-autolink-headings": "^7.1.0",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 ---
 import { fade } from 'astro:transitions'
-import BlogAvatar from './common/BlogAvatar.astro'
+import HeaderAvatar from './common/HeaderAvatar.astro'
 import { HeaderActions } from './HeaderActions'
 ---
 
@@ -14,11 +14,10 @@ import { HeaderActions } from './HeaderActions'
   class="sticky top-0 z-100 h-16 px-4 bg-background border-b-1 select-none"
   transition:name="header"
   transition:animate="initial"
+  transition:persist
 >
   <div class="h-full max-w-4xl mx-auto flex items-center justify-between">
-    <a class="block" href="/">
-      <BlogAvatar size={40} />
-    </a>
+    <HeaderAvatar />
 
     <HeaderActions client:load />
   </div>

src/components/Header.astro

@@ -0,0 +1,38 @@
+---
+import { Image } from 'astro:assets'
+import { HeaderAvatarActivity } from './HeaderAvatarActivity'
+---
+
+<script>
+  import { onSocketMessage } from '@/utils/socket'
+  import { $activityIconUrl, $activityMessage } from '@/utils/stores'
+
+  let timeout: NodeJS.Timeout | null = null
+
+  onSocketMessage((message) => {
+    if (message.type !== 'activity') return
+
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      document.querySelector('.activity-icon')?.classList.add('hidden')
+    }, 30000)
+
+    $activityIconUrl.set(message.icon)
+    $activityMessage.set(message.message)
+    document.querySelector('.activity-icon')?.classList.remove('hidden')
+  })
+</script>
+
+<div class="relative">
+  <a href="/">
+    <Image
+      class="rounded-full"
+      src="https://avatars.githubusercontent.com/bsdayo"
+      alt="@bsdayo"
+      width={40}
+      height={40}
+      loading="eager"
+    />
+  </a>
+  <HeaderAvatarActivity client:only="react" className="absolute -bottom-1 -right-1 size-5" />
+</div>

src/components/common/BlogAvatar.astro

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '../ui/hover-card'
+import { $activityIconUrl, $activityMessage } from '@/utils/stores'
+import { useStore } from '@nanostores/react'
+
+export function HeaderAvatarActivity({ className }: { className?: string }) {
+  const activityIconUrl = useStore($activityIconUrl)
+  const activityMessage = useStore($activityMessage)
+  return (
+    <HoverCard openDelay={0}>
+      <HoverCardTrigger asChild>
+        <img className={cn('activity-icon hidden', className)} src={activityIconUrl} />
+      </HoverCardTrigger>
+      <HoverCardContent className="w-fit z-200 text-sm" collisionPadding={16}>
+        {activityMessage}
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

src/components/common/HeaderAvatar.astro

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/common/HeaderAvatarActivity.tsx

@@ -1,13 +1,13 @@
 ---
 import '@/styles/global.css'
 import { ClientRouter } from 'astro:transitions'
+import siteConfig from '@/site.config'
 
 interface Props {
   title?: string
 }
 
-const baseTitle = "bsdayo's blog w/ Astro"
-const title = Astro.props.title ? `${Astro.props.title} | ${baseTitle}` : baseTitle
+const title = Astro.props.title ? `${Astro.props.title} | ${siteConfig.title}` : siteConfig.title
 ---
 
 <script is:inline>

src/components/ui/hover-card.tsx

@@ -2,9 +2,16 @@
 layout: '@/layouts/ContentLayout.astro'
 ---
 
-import BlogAvatar from '@/components/common/BlogAvatar.astro'
+import { Image } from 'astro:assets'
 
-<BlogAvatar size={256} />
+<Image
+  class="rounded-full"
+  src="https://avatars.githubusercontent.com/bsdayo"
+  alt="@bsdayo"
+  width={200}
+  height={200}
+  loading="eager"
+/>
 
 # bsdayo
 

src/layouts/MainLayout.astro

@@ -1,7 +1,9 @@
 import type { ShikiConfig } from 'astro'
 
 export default {
+  title: "bsdayo's blog",
   site: 'https://bsdayo.moe',
+  backend: import.meta.env.DEV ? 'ws://localhost:8123' : 'wss://blog-backend.bsdayo.moe',
   shikiThemes: {
     light: 'catppuccin-latte',
     dark: 'catppuccin-mocha',