Skip to content

Feat/custom size #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
qixing-jk wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Feat/custom size #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5fa840
feat(ImageSize): Support customized image size
qixing-jk Feb 27, 2025
efac89d
feat(Cover image display): Modifying the implementation of "fix the t…
qixing-jk Feb 27, 2025
8224779
feat(BackgroundTheme): adjust layout to ensure theme fits properly in…
qixing-jk Feb 27, 2025
ab443e9
feat(StylishTheme): adjust layout to ensure theme fits properly in cu…
qixing-jk Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/components/CoverImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
40 changes: 35 additions & 5 deletions src/components/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }

Expand All @@ -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"
Expand Down Expand Up @@ -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}>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Themes/BackgroundTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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 ">

Expand Down
8 changes: 4 additions & 4 deletions src/components/Themes/StylishTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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" />

Expand Down
2 changes: 1 addition & 1 deletion src/components/UnsplashSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 0 additions & 5 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down