Implement header banner

src/components/Header.astro

@@ -2,6 +2,8 @@
 import { gql } from '@/graphql/__generated__/client'
 import { getApolloClient } from '@/graphql/apolloClient.mjs'
 import { Image } from 'astro:assets'
+// @ts-ignore
+import { Picture } from 'astro-imagetools/components'
 import { getSession } from 'auth-astro/server'
 import * as m from '../paraglide/messages.js'
 
@@ -16,7 +18,10 @@ import NavButton from './header/NavButton.astro'
 
 const headerQuery = gql(`
     query HeaderInfo {
-      config(name: "banner") {
+      banner: config(name: "banner") {
+        value
+      }
+      bannerPosition: config(name: "banner-position") {
         value
       }
     }
@@ -24,17 +29,25 @@ const headerQuery = gql(`
 
 const client = await getApolloClient()
 const { data: headerInfo } = await client.query({ query: headerQuery })
+const { banner, bannerPosition } = headerInfo
 
 const session = await getSession(Astro.request)
 ---
 
 <header class='relative'>
-  <div
-    class='h-[150px] bg-top bg-no-repeat bg-cover'
-    style={{
-      backgroundImage: `url(https://cdn.sittingonclouds.net/live/${headerInfo?.config?.value}.png)`
-    }}
-  >
+  <div class='relative h-[150px] bg-top bg-no-repeat bg-cover'>
+    <div class='absolute size-full'>
+      <Picture
+        attributes={{
+          picture: { class: '!size-full' },
+          img: {
+            class: `!size-full !object-cover !object-${bannerPosition?.value || 'top'} !z-0`
+          }
+        }}
+        src={`https://cdn.sittingonclouds.net/live/${banner?.value}.png`}
+        alt=''
+      />
+    </div>
     <div class='relative px-20 size-full'>
       <a href='/'>
         <Image

src/graphql/typeDefs/site.graphql

@@ -3,20 +3,17 @@ scalar JSON
 scalar JSONObject
 
 type Config {
-    name: String!
-    value: String!
+  name: String!
+  value: String
 }
 
 type Query {
-    config(name: String): Config
-    banners: [String]!
+  config(name: String): Config
+  banners: [String]!
 }
 
 type Mutation {
-    uploadBanner(banner: Upload!): Int
-    selectBanner(name: String!): Int
-    config(
-        name: String!
-        value: String!
-    ): Config!
-}
+  uploadBanner(banner: Upload!): Int
+  selectBanner(name: String!): Int
+  config(name: String!, value: String!): Config!
+}

src/sequelize/models/config.ts

@@ -4,8 +4,9 @@ import { Attribute, PrimaryKey, AutoIncrement, Default, Table } from '@sequelize
 @Table({
   freezeTableName: true,
 })
+
 export default class Config extends Model<InferAttributes<Config>, InferCreationAttributes<Config>> {
-  @Attribute(DataTypes.STRING)
+  @Attribute(DataTypes.ENUM('banner', 'banner-position'))
   @PrimaryKey
   declare name: string