use svg

remove log

src/page/HomePage.vue

@@ -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">
+      <svg data-marpit-svg :viewBox="[0, 0, width, height].join(' ')">
-        <div
+        <foreignObject
-          ref="og"
+          :width="width"
-          class="og"
+          :height="height"
-          :style="ogStyle()"
+          :style="ogSvgStyle()"
         >
-          <div
+          <div class="og-wrapper-content">
-            class="og-image"
-            ref="ogimage"
-            :style="ogImageStyle()"
-          >
             <div
-              class="og-image-hover"
+              ref="og"
-              :style="ogImageHoverStyle()"
+              class="og"
+              :style="ogStyle()"
             >
               <div
-                class="h-full flex flex-col justify-between"
+                class="og-image"
-                :style="ogContentStyle()"
+                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"
+                  class="og-image-hover"
-                  :style="ogAuthorStyle()"
+                  :style="ogImageHoverStyle()"
                 >
-                  <img
+                  <div
-                    v-if="avatar"
+                    class="h-full flex flex-col justify-between"
-                    class="h-10 w-10 rounded-full"
+                    :style="ogContentStyle()"
-                    :src="avatar"
                   >
+                    <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
+                    <div
-                    v-if="logo"
+                      class="w-full flex flex-row items-center og-image--footer"
-                    class="h-10 w-10 rounded-full"
+                      :style="ogAuthorStyle()"
-                    :src="logo"
+                    >
-                  >
+                      <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>
+        </foreignObject>
-      </div>
+      </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() {