From 5868cddcb6656bc5b2882bfba8cd30b7c2d4145f Mon Sep 17 00:00:00 2001
From: Lry722 <91137806+Lry722@users.noreply.github.com>
Date: Mon, 10 Jun 2024 02:03:57 +0800
Subject: [PATCH] feat: add option `position` for banner image (#106)

---
 src/components/misc/ImageWrapper.astro | 11 +++++++----
 src/config.ts                          |  1 +
 src/types/config.ts                    |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/misc/ImageWrapper.astro b/src/components/misc/ImageWrapper.astro
index 131fd5f..78d12b9 100644
--- a/src/components/misc/ImageWrapper.astro
+++ b/src/components/misc/ImageWrapper.astro
@@ -5,12 +5,13 @@ interface Props {
     src: string;
     class?: string;
     alt?: string
+    position?: string;
     basePath?: string
 }
 import { Image } from 'astro:assets';
-import {url} from "../../utils/url-utils";
+import { url } from "../../utils/url-utils";
 
-const {id, src, alt, basePath = '/'} = Astro.props;
+const {id, src, alt, position = 'center', basePath = '/'} = Astro.props;
 const className = Astro.props.class;
 
 const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWith('https') || src.startsWith('data:'));
@@ -25,10 +26,12 @@ if (isLocal) {
     img = await (files[normalizedPath])();
 }
 
+const imageClass = 'w-full h-full object-cover';
+const imageStyle = `object-position: ${position}`
 ---
 <div class:list={[className, 'overflow-hidden relative']}>
     <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
-    {isLocal && <Image src={img} alt={alt || ""} class="w-full h-full object-center object-cover" />}
-    {!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class="w-full h-full object-center object-cover" />}
+    {isLocal && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
+    {!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
 </div>
 
diff --git a/src/config.ts b/src/config.ts
index ce3b2a8..05d8e43 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -17,6 +17,7 @@ export const siteConfig: SiteConfig = {
   banner: {
     enable: false,
     src: 'assets/images/demo-banner.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
+    position: 'center', // Equivalent to object-position, defaults center
   },
   favicon: [    // Leave this array empty to use the default favicon
     // {
diff --git a/src/types/config.ts b/src/types/config.ts
index ec4cd6a..0e7aff9 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -13,6 +13,7 @@ export type SiteConfig = {
   banner: {
     enable: boolean
     src: string
+    position?: string
   }
 
   favicon: Favicon[]