Merge branch 'main' of https://github.com/JhumanJ/OpnForm

the commit.

client/components/global/NotionPage.vue

@@ -1,7 +1,18 @@
 <template>
-  <notion-renderer
+  <NotionRenderer
     v-if="!loading"
-    :block-map="blockMap"
+    :block-map="blocks"
+    :block-overrides="blockOverrides"
+    :content-id="contentId"
+    :full-page="fullPage"
+    :hide-list="hideList"
+    :level="level"
+    :map-image-url="mapImageUrl"
+    :map-page-url="mapPageUrl"
+    :page-link-options="pageLinkOptions"
+    :image-options="imageOptions"
+    :prism="prism"
+    :todo="todo"
   />
   <div
     v-else
@@ -12,27 +23,69 @@
 </template>
 
 <script>
-import { NotionRenderer } from "vue-notion"
+import { NotionRenderer, defaultMapPageUrl, defaultMapImageUrl } from 'vue-notion'
 
 export default {
-  name: "NotionPage",
+  name: 'NotionPage',
   components: { NotionRenderer },
   props: {
     blockMap: {
+      type: Object
+    },
+    blockOverrides: {
       type: Object,
+      default: () => ({})
     },
     loading: {
-      type: Boolean,
-      required: true,
+      type: Boolean
     },
+    contentId: String,
+    contentIndex: { type: Number, default: 0 },
+    fullPage: { type: Boolean, default: false },
+    hideList: { type: Array, default: () => [] },
+    level: { type: Number, default: 0 },
+    mapImageUrl: { type: Function, default: defaultMapImageUrl },
+    mapPageUrl: { type: Function, default: defaultMapPageUrl },
+    pageLinkOptions: {
+      type: Object, default: () => {
+        const NuxtLink = resolveComponent('NuxtLink')
+        return { component: NuxtLink, href: 'to' }
+      }
+    },
+    imageOptions: Object,
+    prism: { type: Boolean, default: false },
+    todo: { type: Boolean, default: false }
   },
+  computed: {
+    blocks () {
+      if (this.blockMap && this.blockMap.data) {
+        return this.blockMap.data
+      }
+      return this.blockMap
+    }
+
+  }
 }
 </script>
 
-<style lang="scss">
+<style lang='scss'>
 @import "vue-notion/src/styles.css";
 
 .notion-blue {
   @apply text-nt-blue;
 }
+
+.notion-spacer {
+  width: 24px !important;
+}
+
+.notion-link {
+  text-decoration: none;
+}
+
+.notion {
+  img, iframe {
+    @apply rounded-md;
+  }
+}
 </style>

client/components/global/Settings/SettingsSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-show="isActive"
+    v-if="isActive"
     class="settings-section"
   >
     <h3 class="text-xl font-medium mb-1">