Implement header banner

astro.config.mjs

@@ -4,7 +4,7 @@ import node from '@astrojs/node'
 import paraglide from '@inlang/paraglide-astro'
 import auth from 'auth-astro'
 import { languageTags } from './project.inlang/settings.json'
-
+import { astroImageTools } from 'astro-imagetools'
 import icon from 'astro-icon'
 
 // https://astro.build/config
@@ -26,7 +26,8 @@ export default defineConfig({
       project: './project.inlang',
       outdir: './src/paraglide' //where your files should be
     }),
-    icon({ iconDir: 'src/img/icons' })
+    icon({ iconDir: 'src/img/icons' }),
+    astroImageTools
   ],
   output: 'server',
   adapter: node({

package.json

@@ -31,6 +31,7 @@
     "@sequelize/mysql": "^7.0.0-alpha.41",
     "astro": "^4.13.1",
     "astro-icon": "^1.1.1",
+    "astro-imagetools": "^0.9.0",
     "auth-astro": "^4.1.2",
     "bcrypt": "^5.1.1",
     "graphql-scalars": "^1.23.0",
@@ -54,4 +55,4 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.9.5"
   }
-}
+}

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