Improve embeds

This commit is contained in:
Jorge Vargas 2025-04-06 11:33:03 -06:00
parent e03508f57c
commit 32a86b7a72
10 changed files with 507 additions and 20 deletions

View file

@ -0,0 +1,25 @@
---
import { SEO } from 'astro-seo'
---
<SEO
slot='head'
titleDefault='Sitting on Clouds'
title='Sitting on Clouds'
description='Largest Video Game & Animation Soundtrack サウンドトラック Archive'
openGraph={{
basic: {
title: 'Sitting on Clouds — High Quality soundtrack library',
type: 'website',
image: '/img/assets/clouds_thumb.png',
url: Astro.site
},
optional: {
description: 'Largest Video Game & Animation Soundtrack サウンドトラック Archive',
siteName: 'Sitting on Clouds'
}
}}
extend={{
meta: [{ name: 'theme-color', content: '#ffffff' }]
}}
/>

View file

@ -9,6 +9,7 @@ interface Props {
import Base from './base.astro'
import AlbumBox from 'components/AlbumBox.astro'
import DefaultSEO from 'components/DefaultSEO.astro'
import FooterNav from 'components/lastAdded/FooterNav.astro'
const { albums, limitMD, limitXS, ...listProps } = Astro.props
@ -18,6 +19,7 @@ if (albums.length === 0) {
}
---
<DefaultSEO />
<Base>
<div class='flex flex-col w-full'>
<div class='w-full min-h-100vh mx-auto max-w-[1140px]'>

View file

@ -10,10 +10,6 @@ import 'styles/global.css'
<html lang={languageTag()} dir={Astro.locals.paraglide.dir} class='h-full'>
<head>
<title>Sitting on Clouds</title>
<meta property='og:type' content='website' />
<meta property='og:site_name' content='Sitting on Clouds' />
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
<link
@ -21,12 +17,7 @@ import 'styles/global.css'
rel='stylesheet'
/>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='theme-color' content='#ffffff' />
<meta property='og:url' content='/' />
<meta property='og:title' content='Sitting on Clouds — High Quality soundtrack library' />
<meta property='og:description' content='Largest Video Game & Animation Soundtrack サウンドトラック Archive' />
<meta property='og:image' content='/img/assets/clouds_thumb.png' />
<slot name='head' />
<meta name='generator' content={Astro.generator} />
<meta charset='utf-8' />

View file

@ -10,6 +10,7 @@ import { Input, InputArea, InputLabel, InputSelect } from 'components/form/Input
import Button from 'components/Button'
import MultiSelectWrapper from 'components/form/MultiSelectWrapper'
import StoresSection from 'components/adminAlbum/StoresSection'
import DefaultSEO from 'components/DefaultSEO.astro'
const { user, permissions } = Astro.locals
if (!user || !permissions.includes('UPDATE')) return Astro.redirect('/404')
@ -67,6 +68,7 @@ if (!album) {
})
</script>
<DefaultSEO />
<Base>
<div class='flex flex-col w-full'>
<div class='w-full min-h-100vh mx-auto max-w-[1140px]'>

View file

@ -1,8 +1,9 @@
---
import prismaClient from 'utils/prisma-client'
import * as m from 'paraglide/messages'
import { Image } from 'astro:assets'
import { getImage, Image } from 'astro:assets'
import { AlbumStatus } from '@prisma/client'
import { SEO } from 'astro-seo'
import BaseLayout from 'layouts/base.astro'
import TrackList from 'components/albumPage/TrackList'
@ -47,7 +48,15 @@ if (!album) {
Astro.response.status = 404
Astro.response.statusText = 'Not found'
}
const { currentLocale } = Astro
const coverImage = await getImage({
src: `https://cdn.sittingonclouds.net/album/${album?.id}.png`,
height: 150,
width: 150
})
console.log(coverImage)
---
<style>
@ -58,6 +67,27 @@ const { currentLocale } = Astro
}
</style>
<SEO
slot='head'
titleDefault='Sitting on Clouds'
title={album?.title ?? undefined}
description='Largest Video Game & Animation Soundtrack サウンドトラック Archive'
openGraph={{
basic: {
title: album?.title ?? '',
type: 'website',
image: `https://www.sittingonclouds.net${coverImage.src}`,
url: Astro.url.pathname
},
optional: {
description: album?.subTitle || album?.artists.map((a) => a.artist.name).join(' - '),
siteName: 'Sitting on Clouds'
}
}}
extend={{
meta: [{ name: 'theme-color', content: album?.headerColor }]
}}
/>
<BaseLayout>
<div
class={`w-full min-h-100vh bg-fixed bg-center bg-cover`}

View file

@ -4,6 +4,7 @@ import prismaClient from 'utils/prisma-client'
import BaseLayout from 'layouts/base.astro'
import Sidebar from 'components/Sidebar.astro'
import LetterSection from 'components/albumList/letterSection.astro'
import DefaultSEO from 'components/DefaultSEO.astro'
const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
SELECT DISTINCT UPPER(LEFT(title, 1)) AS letter, COUNT(*) AS count
@ -14,6 +15,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
`
---
<DefaultSEO />
<BaseLayout>
<div class='flex flex-col md:flex-row flex-1 max-w-[2000px]'>
<div class='flex-1 px-5 bg-dark'>
@ -38,11 +40,11 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
<div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
<div class='my-4'>
<LetterSection letter={l.letter} server:defer>
<Fragment slot="fallback">
<Fragment slot='fallback'>
<div class='flex flex-col gap-y-2'>
{Array.from({ length: Number(l.count) }).map(() => (
<div class='animate-pulse h-3.5 w-lg bg-gray/85' />
))}
{Array.from({ length: Number(l.count) }).map(() => (
<div class='animate-pulse h-3.5 w-lg bg-gray/85' />
))}
</div>
</Fragment>
</LetterSection>

View file

@ -1,4 +1,5 @@
---
import DefaultSEO from 'components/DefaultSEO.astro'
import ForgorForm from 'components/form/ForgorForm'
import BaseLayout from 'layouts/base.astro'
@ -7,4 +8,5 @@ const token = Astro.url.searchParams.get('token')
if (!token) return Astro.redirect('/404')
---
<DefaultSEO />
<BaseLayout><ForgorForm token={token} client:only='react' /></BaseLayout>