add more option for author: background, color, padding, position

move options

src/page/HomePage.vue

@@ -40,6 +40,26 @@
           />
         </div>
 
+        <div class="pb-6">
+          <RangeForm
+            id="content-padding"
+            v-model="contentPadding"
+            min="0"
+            max="50"
+            step="0.05"
+            label="Padding"
+          />
+        </div>
+
+        <div class="pb-3">
+          <InputForm
+            id="text-color"
+            v-model="textColor"
+            label="Text color"
+            type="color"
+          />
+        </div>
+
         <div class="pb-6">
           <SelectForm
             id="font"
@@ -64,7 +84,6 @@
             label="Author"
           />
         </div>
-
         <div class="py-6">
           <FileForm
             id="avatar"
@@ -80,19 +99,60 @@
             label="Logo"
           />
         </div>
-      </div>
-    </div>
-    <div class="col-span-3 md:px-10 flex flex-col gap-4 lg:gap-6">
-      <div class="drop-shadow-md rounded-md md:border border-zinc-300 p-5">
-        <div>
+
+        <div class="stroke-gray-400 py-6">
+          <RangeForm
+            id="author-margin-bottom"
+            v-model="authorMarginBottom"
+            min="0"
+            max="500"
+            step="0.1"
+            label="Position"
+          />
+          <RangeForm
+            id="author-padding"
+            v-model="authorPadding"
+            min="0"
+            max="50"
+            step="0.05"
+            label="Padding"
+          />
+        </div>
+
+        <div class="pb-3">
           <InputForm
-            id="text-color"
-            v-model="textColor"
+            id="author-text-color"
+            v-model="authorTextColor"
             label="Text color"
             type="color"
           />
         </div>
 
+        <div>
+          <InputForm
+            id="background-color"
+            v-model="authorBackgroundColor"
+            label="Background color"
+            type="color"
+          />
+          <RangeForm
+            id="author-background-opacity"
+            v-model="authorBackgroundOpacity"
+            min="0"
+            max="1"
+            step="0.05"
+          />
+        </div>
+
+        <div>
+          <div class="text-center stroke-gray-400 pt-5">
+            <AlignForm v-model="authorAlign" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-span-3 md:px-10 flex flex-col gap-4 lg:gap-6">
+      <div class="drop-shadow-md rounded-md md:border border-zinc-300 p-5">
         <div class="py-6">
           <FileForm
             id="background"
@@ -145,17 +205,6 @@
             step="0.05"
           />
         </div>
-
-        <div>
-          <RangeForm
-            id="content-padding"
-            v-model="contentPadding"
-            min="2.5"
-            max="10"
-            step="0.05"
-            label="Box padding"
-          />
-        </div>
       </div>
     </div>
     <div
@@ -205,15 +254,19 @@
               </div>
 
 
-              <div class="w-full flex flex-row items-center og-image--footer">
+              <div
+                class="w-full flex flex-row items-center og-image--footer"
+                :style="ogAuthorStyle()"
+              >
                 <img
                   v-if="avatar"
-                  class="mr-4 h-10 w-10 rounded-full"
+                  class="h-10 w-10 rounded-full"
                   :src="avatar"
                 >
 
                 <span
-                  class="mr-auto"
+                  class="mx-4"
+                  :style="ogAuthorTextStyle()"
                   v-text="author"
                 />
 
@@ -270,6 +323,12 @@ export default {
   data() {
     return {
       author: localStorage.getItem('author'),
+      authorPadding: localStorage.getItem('authorPadding') ?? 0,
+      authorAlign: localStorage.getItem('authorAlign') ?? 'left',
+      authorTextColor: localStorage.getItem('authorTextColor') ?? 0,
+      authorMarginBottom: localStorage.getItem('authorMarginBottom') ?? 0,
+      authorBackgroundColor: localStorage.getItem('authorBackgroundColor') ?? '#000000',
+      authorBackgroundOpacity: localStorage.getItem('authorBackgroundOpacity') ?? 0,
       heading: localStorage.getItem('heading'),
       subheading: localStorage.getItem('subheading'),
       headingAlign: localStorage.getItem('headingAlign') ?? 'left',
@@ -307,6 +366,24 @@ export default {
     author(value) {
       localStorage.setItem('author', value)
     },
+    authorAlign(value) {
+      localStorage.setItem('authorAlign', value)
+    },
+    authorPadding(value) {
+      localStorage.setItem('authorPadding', value)
+    },
+    authorBackgroundColor(value) {
+      localStorage.setItem('authorBackgroundColor', value)
+    },
+    authorBackgroundOpacity(value) {
+      localStorage.setItem('authorBackgroundOpacity', value)
+    },
+    authorTextColor(value) {
+      localStorage.setItem('authorTextColor', value)
+    },
+    authorMarginBottom(value) {
+      localStorage.setItem('authorMarginBottom', value)
+    },
     heading(value) {
       localStorage.setItem('heading', value)
     },
@@ -392,6 +469,40 @@ export default {
         textAlign: this.headingAlign,
       }
     },
+    ogAuthorStyle() {
+      let background = 'none'
+
+      if (this.backgroundHover) {
+        const colors = hexToRgb(this.authorBackgroundColor)
+        background = `rgba(${colors.red}, ${colors.green}, ${colors.blue}, ${this.authorBackgroundOpacity})`
+      }
+
+      return {
+        textAlign: this.authorAlign,
+        color: this.authorTextColor,
+        marginBottom: `${this.authorMarginBottom}px`,
+        padding: `${this.authorPadding}px`,
+        marginLeft: `-${this.contentPadding}px`,
+        width: `calc(${this.contentPadding * 2}px + 100%)`,
+        background,
+      }
+    },
+    ogAuthorTextStyle() {
+      let value = {}
+
+      if (this.authorAlign === 'left') {
+        value.marginRight = 'auto !important'
+      } else if (this.authorAlign === 'center') {
+        value.marginLeft = 'auto !important'
+        value.marginRight = 'auto !important'
+      } else if (this.authorAlign === 'right') {
+        value.marginLeft = 'auto !important'
+      }
+
+      console.log(value, this.authorAlign)
+
+      return value
+    },
     ogImageHoverStyle() {
       let background = 'none'
 
@@ -407,7 +518,9 @@ export default {
     },
     ogContentStyle() {
       return {
-        padding: `${this.contentPadding}em`,
+        paddingTop: `${this.contentPadding}px`,
+        paddingRight: `${this.contentPadding}px`,
+        paddingLeft: `${this.contentPadding}px`,
       }
     },
     downloadAsPng() {