From b5fa840e66028fd3fcaf51cf3a9e6b19e896c7da Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Thu, 27 Feb 2025 18:13:34 +0800
Subject: [PATCH 1/4] feat(ImageSize): Support customized image size

---
 src/components/CoverImage.js |  8 ++++++--
 src/components/Editor.js     | 40 +++++++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 8dafd0c..ff5c7c6 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -39,9 +39,13 @@ const CoverImage = (props) => {
 		}
 	}
 
-
+	const {CoverImageWidth, CoverImageHeight, platform} = props
+	const isCustomSize = platform === 'custom'
 	return (
-		<div className={`border-2  border-gray-50 md:scale-100 scale-50 ${props.platform}`}>
+		<div className={`border-2  border-gray-50 md:scale-100 scale-50 ${platform}`} style={{
+			width: isCustomSize ? `${CoverImageWidth}px` : null,
+			height: isCustomSize ? `${CoverImageHeight}px` : null,
+		}}>
 			{selectTheme(theme)}
 		</div>
 	);
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 5796605..846b1d3 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -3,11 +3,11 @@ import CoverImage from "./CoverImage";
 import ComponentToImg from "./ComponentToImg";
 import Select from 'react-select';
 import RandomTheme from './RandomTheme';
-import { ImgProvider } from '../utils/ImgContext'
+import {ImgProvider} from '../utils/ImgContext'
 import Header from "./Header";
 
 
-import { THEMES } from "../utils/constants";
+import {THEMES} from "../utils/constants";
 
 const defaultIcon = { 'label': 'react', 'value': 'react' }
 
@@ -22,7 +22,9 @@ const defaultSettings = {
 	font: 'font-Anek',
 	theme: 'background',
 	customIcon: '',
-	platform: 'hashnode'
+	platform: 'hashnode',
+	CoverImageWidth: '750',
+	CoverImageHeight: '750',
 };
 
 const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
@@ -195,11 +197,39 @@ class Editor extends React.Component {
 														className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
 														<option>hashnode</option>
 														<option>dev</option>
+														<option>custom</option>
 													</select>
 												</div>
-
 											</div>
-
+											{this.state.platform === 'custom' ? (
+												<div className="flex flex-col m-2 w-full">
+													<span className="font-medium text-sm pb-1">Platform</span>
+													<div>
+														<div>
+															<label>
+																<span
+																	className="font-medium text-sm pb-1">CoverImageWidth</span>
+																<input
+																	type="number"
+																	value={this.state.CoverImageWidth}
+																	className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
+																	onChange={(e) => this.setState({CoverImageWidth: e.target.value})}
+																/>
+															</label>
+															<label>
+																<span
+																	className="font-medium text-sm pb-1">CoverImageHeight</span>
+																<input
+																	type="number"
+																	value={this.state.CoverImageHeight}
+																	className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
+																	onChange={(e) => this.setState({CoverImageHeight: e.target.value})}
+																/>
+															</label>
+														</div>
+													</div>
+												</div>
+											) : null}
 											<button
 												className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base  p-1 px-4 mx-auto border"
 												onClick={this.handleReset}>

From efac89df66998b938e8fa486ab6c322ee738ccfb Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Thu, 27 Feb 2025 18:43:36 +0800
Subject: [PATCH 2/4] feat(Cover image display): Modifying the implementation
 of "fix the theme image is highly out of range"

related commit hash
c892b74fe3d0a543fcfe82abbfd23fab798f8125
---
 src/components/UnsplashSearch.js | 2 +-
 src/index.css                    | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/UnsplashSearch.js b/src/components/UnsplashSearch.js
index 5517c85..cb97afd 100644
--- a/src/components/UnsplashSearch.js
+++ b/src/components/UnsplashSearch.js
@@ -82,7 +82,7 @@ const UnsplashSearch = ({ largeImgPreview }) => {
                 </div>
 
 
-                <div className="overflow-y-scroll w-full pb-12 overflow-x-hidden h-max justify-center flex flex-wrap">
+                <div className="overflow-y-scroll w-full pb-12 overflow-x-hidden max-h-[70vh] justify-center flex flex-wrap">
                     {
                         imageList.map(image => {
                             return <div key={image.id}
diff --git a/src/index.css b/src/index.css
index 32ba69b..ab19c07 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,11 +13,6 @@
     height:36rem;
 }
 
-/* Solve the problem of poor display effect caused by the height of the cover image exceeding the range under the first theme */
-.h-max.w-full {
-    height: 420px;
-}
-
 .h-99{
     height:35rem;
 }

From 8224779c70056c0695525e243d20a8084612063d Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Thu, 27 Feb 2025 20:50:08 +0800
Subject: [PATCH 3/4] feat(BackgroundTheme): adjust layout to ensure theme fits
 properly in custom size

---
 src/components/Themes/BackgroundTheme.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index 1725e9d..12698d3 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -8,21 +8,21 @@ const BackgroundTheme = ({ config }) => {
 
 
     return (
-        <div className=" bg-white ">
+        <div className="w-full h-full bg-white ">
 
 
-            <div className={` overflow-y-hidden flex flex-col`}
+            <div className={`w-full h-full overflow-y-hidden flex flex-col`}
                 style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row  items-center bg-white  justify-center ">
+                <div className="w-full h-full flex flex-row items-center bg-white justify-center ">
 
-                    <div className="w-full">
+                    <div className="w-full h-full">
 
                         {unsplashImage ?
-                            <div className='relative flex group'>
+                            <div className='w-full h-full relative flex group'>
 
-                                <div className="h-max w-full ">
+                                <div className="w-full h-full">
                                     <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-full w-full  " alt="preview" />
                                 </div>
 
@@ -35,7 +35,7 @@ const BackgroundTheme = ({ config }) => {
 
                                     </button>
 
-                                    <div className={`${font} px-10 pt-32  text-left rounded-xl h-full p-4 flex flex-col`}>
+                                    <div className={`${font} px-[10%] pt-[8%] text-left rounded-xl h-full flex flex-col items-center justify-center`}>
                                         <h1 className=" md:text-5xl text-center text-2xl font-bold text-white">{title}</h1>
                                         <div className="flex flex-col items-center py-10  ">
 

From ab443e9849898e69a36a24d2faf5a3a701e461f5 Mon Sep 17 00:00:00 2001
From: anime <street-anime-olive@duck.com>
Date: Thu, 27 Feb 2025 20:54:24 +0800
Subject: [PATCH 4/4] feat(StylishTheme): adjust layout to ensure theme fits
 properly in custom size

---
 src/components/Themes/StylishTheme.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index 3cc81ff..bacc4b8 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -11,13 +11,13 @@ const StylishTheme = ({ config }) => {
         <div className=" bg-white w-full h-full">
 
 
-            <div className={` overflow-y-hidden flex flex-col`}
+            <div className={`w-full h-full overflow-y-hidden flex flex-col`}
                 style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row  items-center bg-white  justify-center">
+                <div className="w-full h-full flex flex-row items-center bg-white justify-center">
 
-                    <div className="h-full w-1/2  bg-white rounded-l-xl">
+                    <div className="h-full w-1/2 bg-white rounded-l-xl">
                         <div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
                             <h1 className=" text-4xl font-bold text-gray-800">{title}</h1>
                             <div className="flex items-center mt-10 text-left">
@@ -41,7 +41,7 @@ const StylishTheme = ({ config }) => {
 
 
                         {unsplashImage ?
-                            <div className='relative w-full h-max flex group'>
+                            <div className='relative w-full h-full flex group'>
 
                                 <img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full  " alt="preview" />