Integration pages from Notion (#753)

* Integration pages from Notion

* fix integration page

* Refactor environment variables and update routing in integration pages

- Removed unused environment variables related to MUX from `.env.docker` and `.env.example` to streamline configuration.
- Updated routing links in `OpenFormFooter.vue` to correct navigation paths for "Integrations", "Report Abuse", and "Privacy Policy", enhancing user experience.
- Added middleware to `definePageMeta` in `index.vue` and `[slug].vue` for integration pages to enforce self-hosted logic.

These changes aim to improve code clarity and ensure proper routing functionality across the application.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/stores/notion_cms.js

@@ -0,0 +1,127 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import opnformConfig from "~/opnform.config.js"
+
+function notionApiFetch (entityId, type = 'table') {
+  const apiUrl = opnformConfig.notion.worker
+  return useFetch(`${apiUrl}/${type}/${entityId}`)
+}
+
+function fetchNotionDatabasePages (databaseId) {
+  return notionApiFetch(databaseId)
+}
+
+function fetchNotionPageContent (pageId) {
+  return notionApiFetch(pageId, 'page')
+}
+
+export const useNotionCmsStore = defineStore('notion_cms', () => {
+
+  // State
+  const databases = ref({})
+  const pages = ref({})
+  const pageContents = ref({})
+  const slugToIdMap = ref({})
+
+  const loading = ref(false)
+
+  // Actions
+  const loadDatabase = (databaseId) => {
+    return new Promise((resolve, reject) => {
+      if (databases.value[databaseId]) return resolve()
+
+      loading.value = true
+      return fetchNotionDatabasePages(databaseId).then((response) => {
+        databases.value[databaseId] = response.data.value.map(page => formatId(page.id))
+        response.data.value.forEach(page => {
+          pages.value[formatId(page.id)] = {
+            ...page,
+            id: formatId(page.id)
+          }
+          const slug = page.Slug ?? page.slug ?? null
+          if (slug) {
+            setSlugToIdMap(slug, page.id)
+          }
+        })
+        loading.value = false
+        resolve()
+      }).catch((error) => {
+        loading.value = false
+        console.error(error)
+        reject(error)
+      })
+    })
+  }
+  const loadPage = async (pageId) => {
+    return new Promise((resolve, reject) => {
+      if (pageContents.value[pageId]) return resolve('in already here')
+      loading.value = true
+      return fetchNotionPageContent(pageId).then((response) => {
+        pageContents.value[formatId(pageId)] = response.data.value
+        loading.value = false
+        return resolve('in finishg')
+      }).catch((error) => {
+        console.error(error)
+        loading.value = false
+        return reject(error)
+      })
+    })
+  }
+
+  const loadPageBySlug = (slug) => {
+    if (!slugToIdMap.value[slug.toLowerCase()]) return
+    loadPage(slugToIdMap.value[slug.toLowerCase()])
+  }
+
+  const formatId = (id) => id.replaceAll('-', '')
+
+  const getPage = (pageId) => {
+    return {
+      ...pages.value[pageId],
+      blocks: getPageBody(pageId)
+    }
+  }
+
+  const getPageBody = (pageId) => {
+    return pageContents.value[pageId]
+  }
+
+  const setSlugToIdMap = (slug, pageId) => {
+    if (!slug) return
+    slugToIdMap.value[slug.toLowerCase()] = formatId(pageId)
+  }
+
+  const getPageBySlug = (slug) => {
+    if (!slug) return
+    const pageId = slugToIdMap.value[slug.toLowerCase()]
+    return getPage(pageId)
+  }
+
+// Getters
+  const databasePages = (databaseId) => computed(() => databases.value[databaseId]?.map(id => pages.value[id]) || [])
+  const pageContent = (pageId) => computed(() => pageContents.value[pageId])
+  const pageBySlug = (slug) => computed(() => getPageBySlug(slug))
+
+  return {
+    // state
+    loading,
+    databases,
+    pages,
+    pageContents,
+    slugToIdMap,
+
+    // actions
+    loadDatabase,
+    loadPage,
+    loadPageBySlug,
+    getPage,
+    getPageBody,
+    setSlugToIdMap,
+    getPageBySlug,
+
+    // getters
+    databasePages,
+    pageContent,
+    pageBySlug
+  }
+})

client/stores/notion_pages.js

@@ -1,26 +0,0 @@
-import { defineStore } from "pinia"
-import { useContentStore } from "~/composables/stores/useContentStore.js"
-import opnformConfig from "~/opnform.config.js"
-export const useNotionPagesStore = defineStore("notion_pages", () => {
-  const contentStore = useContentStore()
-
-  const load = (pageId) => {
-    contentStore.startLoading()
-
-    const apiUrl = opnformConfig.notion.worker
-    return useFetch(`${apiUrl}/page/${pageId}`)
-      .then(({ data }) => {
-        const val = data.value
-        val["id"] = pageId
-        contentStore.save(val)
-      })
-      .finally(() => {
-        contentStore.stopLoading()
-      })
-  }
-
-  return {
-    ...contentStore,
-    load,
-  }
-})