add 'allowHtml' option

src/page/HomePage.vue

@@ -32,6 +32,14 @@
           />
         </div>
 
+        <div class="pb-6">
+          <CheckboxForm
+            id="allow-html"
+            v-model="allowHtml"
+            label="Allow HTML"
+          />
+        </div>
+
         <div class="pb-6">
           <SelectForm
             id="font"
@@ -171,7 +179,19 @@
               class="h-full flex flex-col justify-between"
               :style="ogContentStyle()"
             >
-              <div>
+              <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()"
@@ -184,6 +204,7 @@
                 />
               </div>
 
+
               <div class="w-full flex flex-row items-center og-image--footer">
                 <img
                   v-if="avatar"
@@ -231,6 +252,7 @@ import RangeForm from '../ui/RangeForm'
 import TextareaForm from '../ui/TextareaForm'
 import FileForm from '../ui/FileForm'
 import SelectForm from '../ui/SelectForm'
+import CheckboxForm from '../ui/CheckboxForm'
 import AlignForm from '../ui/AlignForm'
 import DownloadButton from '../ui/DownloadButton'
 
@@ -241,6 +263,7 @@ export default {
     TextareaForm,
     FileForm,
     SelectForm,
+    CheckboxForm,
     AlignForm,
     DownloadButton,
   },
@@ -263,6 +286,7 @@ export default {
       height: localStorage.getItem('height') ?? 1080,
       quality: localStorage.getItem('quality') ?? 0.9,
       contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
+      allowHtml: localStorage.getItem('allowHtml'),
       ogMaxWidth: 100,
 
       fonts: [
@@ -331,6 +355,9 @@ export default {
     font(value) {
       localStorage.setItem('font', value)
     },
+    allowHtml(value) {
+      localStorage.setItem('allowHtml', value)
+    },
   },
   mounted() {
     this.updateOgMaxWidth()

src/ui/CheckboxForm.vue

@@ -0,0 +1,38 @@
+<template>
+  <input
+    :id="id"
+    class="mr-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+    type="checkbox"
+    :checked="modelValue === 'true'"
+    :class="$attrs.class"
+    @change="$emit('change', $event)"
+    @input="$emit('update:modelValue', $event.target.checked)"
+  >
+  <label
+    v-if="label"
+    class="text-sm font-medium text-gray-700"
+    :for="id"
+    v-text="label"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: null,
+    },
+    label: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue', 'change'],
+}
+</script>