mirror of
https://github.com/jorgev259/soc_site-astro.git
synced 2025-06-29 07:57:41 +00:00
66 lines
2.5 KiB
Text
66 lines
2.5 KiB
Text
---
|
|
import { Image } from 'astro:assets'
|
|
import * as m from '../paraglide/messages.js'
|
|
|
|
import discord from 'img/socials/discord.png'
|
|
import kofi from 'img/socials/ko-fi-donate-button.png'
|
|
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 AlbumBox from './AlbumBox.astro'
|
|
import AlbumCount from './sidebar/AlbumCount.astro'
|
|
import CommentCarousel from './sidebar/CommentCarousel.astro'
|
|
import SidebarAd from './sidebar/SidebarAd.astro'
|
|
|
|
const listClass =
|
|
'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
|
|
---
|
|
|
|
<div class='md:w-3/12 md:max-w-[300px] bg-dark flex flex-col'>
|
|
<a href='#' class={listClass}>{m.lastAddedSidebar()}</a>
|
|
<a href='#' class={listClass}>{m.getLucky()}</a>
|
|
<a href='#' class={listClass}>{m.randomPull()}</a>
|
|
<div class='px-6 flex flex-col gap-y-3'>
|
|
<SidebarSection class='flex flex-col gap-y-3'>
|
|
<div class='flex gap-x-2 justify-center'>
|
|
<a href='https://www.youtube.com/channel/UCb1Q0GuOa8p_7fY-pYnWCmQ' target='_blank' rel='noopener noreferrer'>
|
|
<Image class='rounded-md' src={yt} alt='youtube' />
|
|
</a>
|
|
|
|
<a href='https://twitter.com/SittingOnCloud' target='_blank' rel='noopener noreferrer'>
|
|
<Image class='rounded-md' src={twitter} alt='twitter' />
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a href='https://discord.gg/x23SFbE' target='_blank' rel='noopener noreferrer'>
|
|
<Image class='rounded-md' src={discord} alt='Join our Discord!' />
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a href='https://ko-fi.com/sittingonclouds' target='_blank' rel='noopener noreferrer'>
|
|
<Image class='rounded-md' src={kofi} alt='Support me on Ko-fi' />
|
|
</a>
|
|
</div>
|
|
</SidebarSection>
|
|
<Highlight server:defer>
|
|
<SidebarSection slot='fallback'>
|
|
<div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
|
|
<AlbumBox loading />
|
|
</SidebarSection>
|
|
</Highlight>
|
|
<CommentCarousel>
|
|
<SidebarSection slot='fallback' class='h-24 animate-pulse' />
|
|
</CommentCarousel>
|
|
<AlbumCount server:defer>
|
|
<SidebarSection slot='fallback' class='h-32 animate-pulse' />
|
|
</AlbumCount>
|
|
|
|
<SidebarSection class='h-96 p-0.5'>
|
|
<iframe title='radio' src='https://radio.sittingonclouds.net/widget' class='size-full rounded-md'></iframe>
|
|
</SidebarSection>
|
|
|
|
<SidebarAd />
|
|
</div>
|
|
</div>
|