use svg
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

remove log
This commit is contained in:
Simon Vieille 2024-04-17 17:49:04 +02:00
parent 00708174a9
commit 431f661740
Signed by: deblan
GPG key ID: 579388D585F70417

View file

@ -57,6 +57,17 @@
/>
</div>
<div class="pb-6">
<RangeForm
id="heading-spacing"
v-model="headingSpacing"
min="0"
max="300"
step="0.05"
label="Spacing"
/>
</div>
<div class="pb-6">
<RangeForm
id="content-padding"
@ -249,79 +260,86 @@
ref="ogwrapper"
class="og-wrapper lg:pl-10"
>
<div class="og-wrapper-content">
<div
ref="og"
class="og"
:style="ogStyle()"
<svg data-marpit-svg :viewBox="[0, 0, width, height].join(' ')">
<foreignObject
:width="width"
:height="height"
:style="ogSvgStyle()"
>
<div
class="og-image"
ref="ogimage"
:style="ogImageStyle()"
>
<div class="og-wrapper-content">
<div
class="og-image-hover"
:style="ogImageHoverStyle()"
ref="og"
class="og"
:style="ogStyle()"
>
<div
class="h-full flex flex-col justify-between"
:style="ogContentStyle()"
class="og-image"
ref="ogimage"
:style="ogImageStyle()"
>
<div v-if="allowHtml">
<h1
class="leading-none"
:style="ogHeadingStyle()"
v-html="heading"
/>
<p
class="mt-10 mb-16 leading-tight"
:style="ogSubheadingStyle()"
v-html="subheading"
/>
</div>
<div v-else>
<h1
class="leading-none"
:style="ogHeadingStyle()"
v-text="heading"
/>
<p
class="mt-10 mb-16 leading-tight"
:style="ogSubheadingStyle()"
v-text="subheading"
/>
</div>
<div
class="w-full flex flex-row items-center og-image--footer"
:style="ogAuthorStyle()"
class="og-image-hover"
:style="ogImageHoverStyle()"
>
<img
v-if="avatar"
class="h-10 w-10 rounded-full"
:src="avatar"
<div
class="h-full flex flex-col justify-between"
:style="ogContentStyle()"
>
<div v-if="allowHtml">
<h1
class="leading-none"
:style="ogHeadingStyle()"
v-html="heading"
/>
<p
class="leading-tight"
:style="ogSubheadingStyle()"
v-html="subheading"
/>
</div>
<div v-else>
<h1
class="leading-none"
:style="ogHeadingStyle()"
v-text="heading"
/>
<p
class="leading-tight"
:style="ogSubheadingStyle()"
v-text="subheading"
/>
</div>
<span
class="mx-4"
:style="ogAuthorTextStyle()"
v-text="author"
/>
<img
v-if="logo"
class="h-10 w-10 rounded-full"
:src="logo"
>
<div
class="w-full flex flex-row items-center og-image--footer"
:style="ogAuthorStyle()"
>
<img
v-if="avatar"
class="h-10 w-10 rounded-full"
:src="avatar"
>
<span
class="mx-4"
:style="ogAuthorTextStyle()"
v-text="author"
/>
<img
v-if="logo"
class="h-10 w-10 rounded-full"
:src="logo"
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</foreignObject>
</svg>
<div class="text-center mt-3">
<DownloadButton
class="rounded-l-md"
@ -373,6 +391,7 @@ export default {
authorBackgroundOpacity: localStorage.getItem('authorBackgroundOpacity') ?? 1,
heading: localStorage.getItem('heading') ?? 'Heading',
subheading: localStorage.getItem('subheading') ?? 'Subheading',
headingSpacing: localStorage.getItem('headingSpacing') ?? 10,
headingAlign: localStorage.getItem('headingAlign') ?? 'left',
font: localStorage.getItem('font') ?? 'Trebuchet MS',
avatar: localStorage.getItem('avatar'),
@ -446,6 +465,9 @@ export default {
subheading(value) {
localStorage.setItem('subheading', value)
},
headingSpacing(value) {
localStorage.setItem('headingSpacing', value)
},
avatar(value) {
localStorage.setItem('avatar', value)
},
@ -494,6 +516,13 @@ export default {
window.addEventListener('resize', this.updateOgMaxWidth, false)
},
methods: {
ogSvgStyle() {
return {
maxHeight: `${this.ogMaxHeight}px`,
maxWidth: `${this.ogMaxWidth}px !important`,
aspectRatio: `${this.width}/${this.height}`,
}
},
ogStyle() {
return {
color: this.textColor,
@ -505,8 +534,6 @@ export default {
},
ogImageStyle() {
let value = {
maxHeight: `${this.ogMaxHeight}px`,
maxWidth: `${this.ogMaxWidth}px`,
aspectRatio: `${this.width}/${this.height}`,
}
@ -527,6 +554,7 @@ export default {
return {
fontSize: `${this.subheadingSize}em`,
textAlign: this.headingAlign,
marginTop: `${this.headingSpacing}px`,
}
},
ogAuthorStyle() {
@ -559,8 +587,6 @@ export default {
value.marginLeft = 'auto !important'
}
console.log(value, this.authorAlign)
return value
},
ogImageHoverStyle() {