Implement Highlight SidebarSection

astro.config.mjs

@@ -25,6 +25,7 @@ export default defineConfig({
     icon({ iconDir: 'src/img/icons' }),
     react()
   ],
+  image: { domains: ['cdn.sittingonclouds.net'] },
   output: 'server',
   adapter: node({ mode: 'standalone' })
 })

src/components/Sidebar.astro

@@ -7,7 +7,7 @@ import yt from 'img/socials/yt.png'
 import twitter from 'img/socials/twitter.png'
 import SidebarSection from './sidebar/SidebarSection.astro'
 
-// import Highlight from './sidebar/Highlight.astro'
+import Highlight from './sidebar/Highlight.astro'
 
 const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
@@ -39,6 +39,6 @@ const listClass =
         </a>
       </div>
     </SidebarSection>
-    <!-- <Highlight /> -->
+    <Highlight />
   </div>
 </div>

src/components/sidebar/Highlight.astro

@@ -0,0 +1,8 @@
+---
+import Content from './highlight/content.astro'
+import Loading from './highlight/loading.astro'
+---
+
+<Content server:defer>
+  <Loading slot='fallback' />
+</Content>

src/components/sidebar/SidebarSection.astro

@@ -0,0 +1,10 @@
+---
+interface Props {
+  class?: string
+}
+const { class: className } = Astro.props
+---
+
+<div class:list={['relative bg-gray rounded-md p-3.5', className]}>
+  <slot />
+</div>

src/components/sidebar/highlight/content.astro

@@ -0,0 +1,27 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import AlbumBox from 'components/AlbumBox.astro'
+import SidebarSection from '../SidebarSection.astro'
+
+const highlightConfig = await prismaClient.config.findUnique({
+  where: { name: 'highlight' },
+  select: { value: true }
+})
+
+const album = highlightConfig?.value
+  ? await prismaClient.albums.findUnique({
+      where: { id: parseInt(highlightConfig.value) },
+      select: { title: true, id: true }
+    })
+  : null
+---
+
+{
+  album ? (
+    <SidebarSection>
+      <div class='uppercase text-center text-2xl/6 font-semibold'>Highlight Soundtrack</div>
+      <AlbumBox href={`/album/${album.id}`} title={album.title ?? 'Unknown Title'} image={`/album/${album.id}.png`} />
+    </SidebarSection>
+  ) : null
+}

src/components/sidebar/highlight/loading.astro

@@ -0,0 +1,9 @@
+---
+import AlbumBox from 'components/AlbumBox.astro'
+import SidebarSection from '../SidebarSection.astro'
+---
+
+<SidebarSection>
+  <div class='uppercase text-center text-2xl/6 font-semibold'>Highlight Soundtrack</div>
+  <AlbumBox loading />
+</SidebarSection>

tailwind.config.mjs

@@ -11,7 +11,8 @@ export default {
         'dark-hover': '#2b3035',
         gray: '#3f3f3f',
         'gray-hover': '#4f4f4f',
-        'soc-green': '#4b7667'
+        'soc-green': '#4b7667',
+        'hover-link': '#00d4ff'
       }
     }
   },