deblan/og-image
deblan/og-image
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add padding
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source 
update ui

fix issue with background colors
This commit is contained in:
Simon Vieille 2023-01-31 20:37:10 +01:00
parent 520bea92d5
commit e80ea4d19d
Signed by: deblan
GPG key ID: 579388D585F70417
1 changed files with 116 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
src/page/Home.vue
View file

@ -1,89 +1,120 @@
<template> <template>
<div class="max-w-md mx-auto w-full flex flex-col gap-4 lg:gap-6"> <div class="grid grid-cols-12 col-span-12">
<div> <div class="col-span-3 flex flex-col gap-4 lg:gap-6">
<label class="block text-sm font-medium text-gray-700" for="heading">Heading</label> <div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
<input type="text" class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="heading" id="heading"> <div>
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="headingSize" id="heading-size"> <label class="block text-sm font-medium text-gray-700" for="heading">Heading</label>
</div> <input type="text" class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="heading" id="heading">
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="headingSize" id="heading-size">
</div>
<div> <div class="py-6">
<label class="block text-sm font-medium text-gray-700" for="subheading">Subheading</label> <label class="block text-sm font-medium text-gray-700" for="subheading">Subheading</label>
<textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="subheading" id="subheading"></textarea> <textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="subheading" id="subheading"></textarea>
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="subheadingSize" id="subheading-size"> <input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="1" max="10" step="0.1" v-model="subheadingSize" id="subheading-size">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700" for="author">Author</label> <div class="text-center stroke-gray-400">
<input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="author" id="author"> <button v-on:click="headingAlign = 'left'">
</div> <svg class="inline border-gray-400 rounded-md" :class="{border: headingAlign === 'left'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m4.498 10.5h5.997"/><path d="m4.5 14.5h9.995"/></g></svg>
</button>
<div> <button v-on:click="headingAlign = 'center'">
<label class="block text-sm font-medium text-gray-700" for="avatar">Avatar</label> <svg class="inline border-gray-400 rounded-md" :class="{border: headingAlign === 'center'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m7.498 10.5h5.997"/><path d="m5.5 14.5h9.995"/></g></svg>
<input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateAvatar" id="avatar"> </button>
</div>
<div> <button v-on:click="headingAlign = 'right'">
<label class="block text-sm font-medium text-gray-700" for="logo">Logo</label> <svg class="inline border-gray-400 rounded-md" :class="{border: headingAlign === 'right'}" height="40" viewBox="0 0 21 21" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 6.5h12"/><path d="m10.498 10.5h5.997"/><path d="m6.5 14.5h9.995"/></g></svg>
<input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateLogo" id="logo"> </button>
</div> </div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="text-color">Text color</label>
<input type="color" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="textColor" id="text-color">
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="width">Size and quality</label>
<div class="flex justify-between">
<input type="number" class="mt-1 inline w-49 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="width" id="width">
<input type="number" class="mt-1 inline w-48 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="height">
</div> </div>
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="quality"> <div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
<div>
<label class="block text-sm font-medium text-gray-700" for="author">Author</label>
<input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="author" id="author">
</div>
<div class="py-6">
<label class="block text-sm font-medium text-gray-700" for="avatar">Avatar</label>
<input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateAvatar" id="avatar">
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="logo">Logo</label>
<input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateLogo" id="logo">
</div>
</div>
</div> </div>
<div class="col-span-3 px-10 flex flex-col gap-4 lg:gap-6">
<div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
<div>
<label class="block text-sm font-medium text-gray-700" for="text-color">Text color</label>
<input type="color" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="textColor" id="text-color">
</div>
<div> <div class="py-6">
<label class="block text-sm font-medium text-gray-700" for="background">Background</label> <label class="block text-sm font-medium text-gray-700" for="background">Background</label>
<input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateBackground" id="background"> <input type="file" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-on:change="updateBackground" id="background">
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="background-hover">Background hover</label>
<input type="color" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="backgroundHover" id="background-hover">
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="backgroundHoverOpacity" id="background-hover-opacity">
</div>
</div>
<div class="drop-shadow-md rounded-md border border-zinc-300 p-5">
<div>
<label class="block text-sm font-medium text-gray-700" for="width">Size and quality</label>
<div class="grid grid-cols-2 gap-x-4">
<input type="number" class="mt-1 inline rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="width" id="width">
<input type="number" class="mt-1 inline rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="height">
</div>
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="quality">
</div>
<div>
<label class="block text-sm font-medium text-gray-700" for="width">Box padding</label>
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="2.5" max="10" step="0.1" v-model="contentPadding">
</div>
</div>
</div> </div>
<div class="col-span-6 space-y-6" ref="ogwrapper">
<div class="og" ref="og" :style="ogStyle()">
<div class="og-image" :style="ogImageStyle()">
<div class="og-image-hover" :style="ogImageHoverStyle()">
<div class="h-full flex flex-col justify-between" :style="ogContentStyle()">
<div>
<h1 class="leading-none" v-text="heading" :style="ogHeadingStyle()"></h1>
<p class="mt-10 mb-16 leading-tight" v-text="subheading" :style="ogSubheadingStyle()"></p>
</div>
<div> <div class="w-full flex flex-row items-center og-image--footer">
<label class="block text-sm font-medium text-gray-700" for="background-hover">Background hover</label> <img class="mr-4 h-10 w-10 rounded-full" v-if="avatar" :src="avatar">
<input type="color" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="backgroundHover" id="background-hover">
<input type="range" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" min="0" max="1" step="0.1" v-model="backgroundHoverOpacity" id="background-hover-opacity">
</div>
</div>
<div class="space-y-6" ref="ogwrapper">
<div class="og" ref="og" :style="ogStyle()">
<div class="og-image" :style="ogImageStyle()">
<div class="og-image-hover" :style="ogImageHoverStyle()">
<div class="h-full px-10 flex flex-col justify-between">
<div>
<h1 class="pt-10 leading-none" v-text="heading" :style="ogHeadingStyle()"></h1>
<p class="mt-10 mb-16 leading-tight" v-text="subheading" :style="ogSubheadingStyle()"></p>
</div>
<div class="w-full flex flex-row items-center og-image--footer mb-10"> <span class="mr-auto" v-text="author"></span>
<img class="mr-4 h-10 w-10 rounded-full" v-if="avatar" :src="avatar">
<span class="mr-auto" v-text="author"></span> <img v-if="logo" class="mr-4 h-10 w-10 rounded-full" :src="logo">
</div>
<img v-if="logo" class="mr-4 h-10 w-10 rounded-full" :src="logo">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="rounded-md text-center" role="group"> <div class="rounded-md text-center" role="group">
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsPng"> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsPng">
PNG PNG
</button> </button>
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsJpeg"> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white" v-on:click="downloadAsJpeg">
JPEG JPEG
</button> </button>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -120,17 +151,19 @@ export default {
author: localStorage.getItem('author'), author: localStorage.getItem('author'),
heading: localStorage.getItem('heading'), heading: localStorage.getItem('heading'),
subheading: localStorage.getItem('subheading'), subheading: localStorage.getItem('subheading'),
headingAlign: localStorage.getItem('headingAlign') ?? 'left',
avatar: localStorage.getItem('avatar'), avatar: localStorage.getItem('avatar'),
logo: localStorage.getItem('logo'), logo: localStorage.getItem('logo'),
textColor: localStorage.getItem('textColor') ?? '#33333', textColor: localStorage.getItem('textColor') ?? '#333333',
background: localStorage.getItem('background'), background: localStorage.getItem('background'),
backgroundHover: localStorage.getItem('backgroundHover') ?? '#33333', backgroundHover: localStorage.getItem('backgroundHover') ?? '#000000',
backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 0, backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 0,
headingSize: localStorage.getItem('headingSize') ?? 4, headingSize: localStorage.getItem('headingSize') ?? 4,
subheadingSize: localStorage.getItem('subheadingSize') ?? 2, subheadingSize: localStorage.getItem('subheadingSize') ?? 2,
width: localStorage.getItem('width') ?? 1920, width: localStorage.getItem('width') ?? 1920,
height: localStorage.getItem('height') ?? 1080, height: localStorage.getItem('height') ?? 1080,
quality: localStorage.getItem('quality') ?? 0.9, quality: localStorage.getItem('quality') ?? 0.9,
contentPadding: localStorage.getItem('contentPadding') ?? 10,
ogMaxWidth: 100, ogMaxWidth: 100,
} }
}, },
@ -153,11 +186,13 @@ export default {
ogHeadingStyle() { ogHeadingStyle() {
return { return {
fontSize: `${this.headingSize}em`, fontSize: `${this.headingSize}em`,
textAlign: this.headingAlign,
} }
}, },
ogSubheadingStyle() { ogSubheadingStyle() {
return { return {
fontSize: `${this.subheadingSize}em`, fontSize: `${this.subheadingSize}em`,
textAlign: this.headingAlign,
} }
}, },
ogImageHoverStyle() { ogImageHoverStyle() {
@ -173,6 +208,11 @@ export default {
aspectRatio: `${this.width}/${this.height}` aspectRatio: `${this.width}/${this.height}`
} }
}, },
ogContentStyle() {
return {
padding: `${this.contentPadding}em`,
}
},
async updateBackground(event) { async updateBackground(event) {
this.background = await this.convertFileToBase64(event.target.files) this.background = await this.convertFileToBase64(event.target.files)
}, },
@ -256,6 +296,9 @@ export default {
subheadingSize(value) { subheadingSize(value) {
localStorage.setItem('subheadingSize', value) localStorage.setItem('subheadingSize', value)
}, },
headingAlign(value) {
localStorage.setItem('headingAlign', value)
},
width(value) { width(value) {
localStorage.setItem('width', value) localStorage.setItem('width', value)
}, },
@ -265,6 +308,9 @@ export default {
quality(value) { quality(value) {
localStorage.setItem('quality', value) localStorage.setItem('quality', value)
}, },
contentPadding(value) {
localStorage.setItem('contentPadding', value)
},
}, },
mounted() { mounted() {
this.updateOgMaxWidth() this.updateOgMaxWidth()