add default value

src/page/HomePage.vue

@@ -1,39 +1,17 @@
 <template>
-  <div class="md:grid md:grid-cols-12 md:col-span-12">
+  <div class="flex">
     <div
-      class="col-span-3 lg:mr-4 tools"
+      class="lg:mr-4 tools"
       ref="tools"
     >
-      <div class="mb-2">
+      <div class="mb-2 flex flex-row">
         <button
+          v-for="(name, value) in tools"
           class="p-3 mr-2 rounded"
-          :class="{'bg-slate-300': this.tool == 'heading'}"
+          :class="{'bg-slate-300': this.tool == value}"
-          @click="this.tool = 'heading'"
+          @click="this.tool = value"
-        >Heading</button>
+          v-text="name"
-
+        ></button>
-        <button
-          class="p-3 mr-2 rounded"
-          :class="{'bg-slate-300': this.tool == 'author'}"
-          @click="this.tool = 'author'"
-        >Author</button>
-
-        <button
-          class="p-3 mr-2 rounded"
-          :class="{'bg-slate-300': this.tool == 'font'}"
-          @click="this.tool = 'font'"
-        >Font</button>
-
-        <button
-          class="p-3 mr-2 rounded"
-          :class="{'bg-slate-300': this.tool == 'background'}"
-          @click="this.tool = 'background'"
-        >Background</button>
-
-        <button
-          class="p-3 rounded"
-          :class="{'bg-slate-300': this.tool == 'size'}"
-          @click="this.tool = 'size'"
-        >Size</button>
       </div>
 
       <div
@@ -232,7 +210,7 @@
         </div>
       </div>
       <div
-        :class="{hidden: this.tool !== 'size'}"
+        :class="{hidden: this.tool !== 'sizes'}"
         class="drop-shadow-md rounded-md md:border border-zinc-300 tool"
       >
         <div class="p-5">
@@ -240,7 +218,7 @@
             <label
               class="block text-sm font-medium text-gray-700"
               for="width"
-            >Size</label>
+            >Sizes</label>
 
             <div class="grid grid-cols-2 gap-x-4">
               <InputForm
@@ -254,13 +232,22 @@
                 type="number"
               />
             </div>
+
+            <h3 class="mt-4 block text-sm font-medium text-gray-700">Recommendations</h3>
+
+            <button
+              v-for="(sizes, name) in sizesRecommendations"
+              class="bg-lime-300 rounded px-3 py-2 mt-1 mr-1"
+              @click="this.setSizes(sizes[0], sizes[1])"
+              v-text="name"
+            ></button>
           </div>
         </div>
       </div>
     </div>
     <div
       ref="ogwrapper"
-      class="og-wrapper col-span-9 lg:pl-10"
+      class="og-wrapper lg:pl-10"
     >
       <div class="og-wrapper-content">
         <div
@@ -348,8 +335,6 @@
         />
       </div>
     </div>
-
-    <div id="bottom"></div>
   </div>
 </template>
 
@@ -379,31 +364,43 @@ export default {
   data() {
     return {
       tool: localStorage.getItem('tool') ?? 'heading',
-      author: localStorage.getItem('author'),
+      author: localStorage.getItem('author') ?? 'Author name',
-      authorPadding: localStorage.getItem('authorPadding') ?? 0,
+      authorPadding: localStorage.getItem('authorPadding') ?? 10,
       authorAlign: localStorage.getItem('authorAlign') ?? 'left',
-      authorTextColor: localStorage.getItem('authorTextColor') ?? 0,
+      authorTextColor: localStorage.getItem('authorTextColor') ?? '#fff9e6',
-      authorMarginBottom: localStorage.getItem('authorMarginBottom') ?? 0,
+      authorMarginBottom: localStorage.getItem('authorMarginBottom') ?? 200,
-      authorBackgroundColor: localStorage.getItem('authorBackgroundColor') ?? '#000000',
+      authorBackgroundColor: localStorage.getItem('authorBackgroundColor') ?? '#fc5705',
-      authorBackgroundOpacity: localStorage.getItem('authorBackgroundOpacity') ?? 0,
+      authorBackgroundOpacity: localStorage.getItem('authorBackgroundOpacity') ?? 1,
-      heading: localStorage.getItem('heading'),
+      heading: localStorage.getItem('heading') ?? 'Heading',
-      subheading: localStorage.getItem('subheading'),
+      subheading: localStorage.getItem('subheading') ?? 'Subheading',
       headingAlign: localStorage.getItem('headingAlign') ?? 'left',
       font: localStorage.getItem('font') ?? 'Trebuchet MS',
       avatar: localStorage.getItem('avatar'),
       logo: localStorage.getItem('logo'),
-      textColor: localStorage.getItem('textColor') ?? '#333333',
+      textColor: localStorage.getItem('textColor') ?? '#fc5705',
       background: localStorage.getItem('background'),
-      backgroundHover: localStorage.getItem('backgroundHover') ?? '#000000',
+      backgroundHover: localStorage.getItem('backgroundHover') ?? '#fff9e6',
-      backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 0,
+      backgroundHoverOpacity: localStorage.getItem('backgroundHoverOpacity') ?? 1,
       headingSize: localStorage.getItem('headingSize') ?? 4,
       subheadingSize: localStorage.getItem('subheadingSize') ?? 2,
-      width: localStorage.getItem('width') ?? 1920,
+      width: localStorage.getItem('width') ?? 1200,
-      height: localStorage.getItem('height') ?? 1080,
+      height: localStorage.getItem('height') ?? 600,
-      contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
+      contentPadding: localStorage.getItem('contentPadding') ?? 20,
       allowHtml: localStorage.getItem('allowHtml'),
       ogMaxWidth: 100,
-
+      tools: {
+        heading: 'Heading',
+        author: 'Author',
+        font: 'Font',
+        background: 'Background',
+        sizes: 'Sizes',
+      },
+      sizesRecommendations: {
+        Mastodon: [1200, 600],
+        LinkedIn: [1200, 627],
+        Instagram: [1200, 630],
+        X: [1200, 675],
+      },
       fonts: [
         {label: 'Arial (sans-serif)', value : 'Arial'},
         {label: 'Brush Script MT (cursive)', value : 'Brush Script MT'},
@@ -588,6 +585,10 @@ export default {
         paddingLeft: `${this.contentPadding}px`,
       }
     },
+    setSizes(width, height) {
+      this.width = width
+      this.height = height
+    },
     downloadAsPng() {
       return this.download(toPng, 'image.png')
     },
@@ -626,11 +627,6 @@ export default {
 </script>
 
 <style>
-#bottom {
-  position: fixed;
-  bottom: 0;
-}
-
 .tool {
   max-height: calc(100vh - 250px);
   overflow: auto;
@@ -638,12 +634,17 @@ export default {
 
 .tools {
   height: calc(100vh - 250px);
+  width: 443px;
 }
 
 .og {
   margin: auto;
 }
 
+.og-wrapper {
+  width: calc(100vw - 540px);
+}
+
 .og-wrapper-content {
   background-color: #c1c1c1;
   background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);