@live-change/content-frontend 0.2.7 → 0.2.9

package/front/locales/en.json

@@ -0,0 +1,84 @@
+{
+  "content": {
+    "metadata": {
+      "title": "Title",
+      "description": "Description",
+      "og:title": "Open Graph",
+      "og": {
+        "title": "Title",
+        "description": "Description",
+        "image": "Image",
+        "determiner": "Determiner",
+        "locale": "Locale",
+        "localeAlternate:title": "Locale Alternate",
+        "type": "Type",
+        "type:options": {
+          "website": "Website",
+          "article": "Article",
+          "profile": "Profile",
+          "book": "Book",
+          "music": {
+            "song": "Music Song",
+            "album": "Music Album",
+            "playlist": "Music Playlist",
+            "radio_station": "Music Radio Station"
+          },
+          "video": {
+            "movie": "Video Movie",
+            "episode": "Video Episode",
+            "tv_show": "Video TV Show",
+            "other": "Video Other"
+          }
+        },
+        "music:title": "Music",
+        "music": {
+          "duration": "Duration",
+          "song:title": "Song",
+          "creator:title": "Creator",
+          "album:title": "Album",
+          "album": {
+            "url": "URL",
+            "disc": "Disc",
+            "track": "Track"
+          },
+          "song": {
+            "url": "URL",
+            "disc": "Disc",
+            "track": "Track"
+          },
+          "musician:title": "Musician"
+        },
+        "video:title": "Video",
+        "video": {
+          "duration": "Duration",
+          "actor:title": "Actor",
+          "actor": {
+            "url": "URL",
+            "role": "Role"
+          },
+          "director:title": "Director",
+          "writer:title": "Writer",
+          "releaseDate": "Release Date",
+          "tag:title": "Tag",
+          "series": "Series"
+        },
+        "article:title": "Article",
+        "article": {
+          "publishedTime": "Published Time",
+          "modifiedTime": "Modified Time",
+          "expirationTime": "Expiration Time",
+          "author:title": "Authors",
+          "section": "Section",
+          "tag:title": "Tags"
+        },
+        "book:title": "Book",
+        "book": {
+          "author:title": "Authors",
+          "isbn": "ISBN",
+          "releaseDate": "Release Date",
+          "tag:title": "Tags"
+        }
+      }
+    }
+  }
+}

package/front/src/App.vue

@@ -13,11 +13,14 @@
   import ViewRoot from "@live-change/frontend-base/ViewRoot.vue"
   import NavBar from "./NavBar.vue"
 
+  import { useI18n } from 'vue-i18n'
+  const i18n = useI18n()
+
   import { useMeta } from 'vue-meta'
   const { meta } = useMeta({
     title: 'Title',
     htmlAttrs: {
-      lang: 'en',
+      lang: i18n.locale.value,
       amp: true
     }
   })

package/front/src/components/Metadata.vue

@@ -0,0 +1,134 @@
+<template>
+<!--  <pre>{{ JSON.stringify(metadata, null, "  ") }}</pre>-->
+</template>
+
+<script setup>
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: Object,
+      required: true
+    }
+  })
+
+  import { computed, ref, onMounted } from 'vue'
+  import { path, live } from '@live-change/vue3-ssr'
+  import { useHost } from "@live-change/frontend-base"
+  const host = useHost()
+
+  const p = path()
+
+  const metadataLivePath = computed(
+    () => p.content.objectOwnedMetadata({ objectType: props.objectType, object: props.object })
+           .with(metadata => p.image.image({ image: metadata.og.image }).bind('ogImage'))
+  )
+  const canonicalUrlLivePath = computed(
+    () =>  p.url.targetOwnedCanonical({ targetType: props.objectType, target: props.object })
+  )
+  const [metadata, canonical] = await Promise.all([
+    live(metadataLivePath),
+    live(canonicalUrlLivePath)
+  ])
+
+  function metaProperty(name, value) {
+    return value ? { property: name, content: value } : undefined
+  }
+  function metaProperties(name, value) {
+    if(!value) return []
+    return value.map(v => ({ property: name, content: v }))
+  }
+  function metaPropertiesObjects(name, value) {
+    if(!value) return []
+    return value.map(v => {
+      for(let key in v) {
+        return { property: name+':'+key, content: v[key] }
+      }
+    })
+  }
+  import { useMeta } from 'vue-meta'
+  const m = metadata.value
+  const canonicalUrlDomain = canonical.value?.domain || host
+  const canonicalUrl = `https://${canonicalUrlDomain}/${canonical.value?.path ?? ''}`
+
+  let ogImage = []
+  if(m.ogImage) {
+    const image = m.ogImage
+    ogImage = [
+      { property: 'og:image', content: `https://${canonicalUrlDomain}/api/image/image/${image.id}` },
+      { property: 'og:image:width', content: image.width },
+      { property: 'og:image:height', content: image.height },
+      { property: 'og:image:type', content: 'image/'+image.extension }
+    ]
+  }
+
+  useMeta({
+    title: m.title,
+    description: m.description,
+    link: [
+      { rel: 'canonical', href: canonicalUrl }
+    ],
+    meta: [
+      metaProperty('og:title', m.og.title),
+      metaProperty('og:description', m.og.description),
+      ...ogImage,
+      metaProperty('og:determiner', m.og.determiner),
+      metaProperty('og:locale', m.og.locale),
+      ...metaProperties('og:locale:alternate', m.og.localeAlternate),
+      metaProperty('og:type', m.og.type),
+
+      metaProperty('og:music:duration', m.og.music.duration),
+      ...metaPropertiesObjects('og:music:album', m.og.music.album),
+      ...metaPropertiesObjects('og:music:song', m.og.music.song),
+      ...metaProperties('og:music:musician', m.og.music.duration),
+      metaProperty('og:music:release_date', m.og.music.releaseDate),
+      ...metaProperties('og:music:creator', m.og.music.creator),
+
+      metaProperty('og:video:duration', m.og.video.duration),
+      metaProperty('og:viceo:release_date', m.og.video.releaseDate),
+      ...metaPropertiesObjects('og:video:duration', m.og.video.actors),
+      ...metaProperties('og:video:director', m.og.video.director),
+      ...metaProperties('og:video:writer', m.og.video.writer),
+      ...metaProperties('og:video:series', m.og.video.series),
+      ...metaProperties('og:video:tag', m.og.video.tag),
+
+      ...metaProperties('og:profile:first_name', m.og.profile.firstName),
+      ...metaProperties('og:profile:last_name', m.og.profile.lastName),
+      ...metaProperties('og:profile:username', m.og.profile.username),
+      ...metaProperties('og:profile:gender', m.og.profile.gender),
+
+      metaProperty('og:article:published_time', m.og.article.publishedTime),
+      metaProperty('og:article:modified_time', m.og.article.modifiedTime),
+      metaProperty('og:article:expiration_time', m.og.article.expirationTime),
+      ...metaProperties('og:article:author', m.og.article.author),
+      metaProperty('og:article:section', m.og.article.section),
+      ...metaProperties('og:article:tag', m.og.article.tag),
+
+      ...metaProperties('og:book:author', m.og.book.author),
+      metaProperty('og:book:isbn', m.og.book.isbn),
+      metaProperty('og:book:release_date', m.og.book.releaseDate),
+      ...metaProperties('og:book:tag', m.og.book.tag),
+
+      { property: 'og:url', content: canonicalUrl },
+
+
+      /*      { property: 'og:url', content: m.url },
+            { property: 'og:type', content: 'website' },
+            { property: 'twitter:card', content: 'summary_large_image' },
+            { property: 'twitter:title', content: metadata.value.title },
+            { property: 'twitter:description', content: metadata.value.description },
+            { property: 'twitter:image', content: metadata.value.image },
+            { property: 'twitter:url', content: metadata.value.url }*/
+    ].filter(x => !!x)
+  })
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/MetadataEditor.vue

@@ -1,13 +1,19 @@
 <template>
-  <auto-input v-model="editable.title" :definition="properties.title" />
-
+<!--  <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ JSON.stringify(editable, null, '  ') }}</pre>-->
+  <auto-editor :definition="editableDefinition" v-model="editable" :rootValue="editable" i18n="content.metadata." />
+  <Button label="Save metadata" icon="pi pi-save" :disabled="!changed || error" @click="save" />
+  <div>
+    <small v-if="error" class="p-error">Fix errors above to save</small>
+  </div>
 </template>
 
 <script setup>
+  import Button from 'primevue/button'
+  import { AutoInput, AutoField, AutoEditor } from '@live-change/frontend-auto-form'
 
-  import AutoInput from '@live-change/frontend-auto-form/AutoInput.vue'
+  import "@live-change/image-frontend"
 
-  import { computed, watch, ref, onMounted, inject } from 'vue'
+  import { computed, watch, ref, onMounted, onUnmounted, inject } from 'vue'
   import { toRefs } from "@vueuse/core"
 
   const isMounted = ref(false)
@@ -31,11 +37,25 @@
   const p = path()
 
   const definition = api.getServiceDefinition('content').models.Metadata
-  const properties = definition.properties
-
-  import { synchronized } from "@live-change/vue3-components"
-
-  const metadata = await live(p.content.objectOwnedMetadata({ objectType, object }))
+  const editableDefinition = {
+    ...definition,
+    properties: { ...{
+      ...definition.properties,
+      objectType: undefined,
+      object: undefined,
+      lastUpdate: undefined
+    } }
+  }
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  import { synchronized, defaultData, validateData } from "@live-change/vue3-components"
+
+  const serverMetadata = await live(p.content.objectOwnedMetadata({ objectType, object }))
+  const metadata = computed(() => serverMetadata.value || defaultData(editableDefinition))
 
   const synchronizedMetadata = synchronized({
     source: metadata,
@@ -43,13 +63,22 @@
     identifiers: { object, objectType },
     recursive: true,
     autoSave: false,
-    onSave: () => toast.add({ severity: 'info', summary: 'Public access saved', life: 1500 })
-  }).value
+    onSave: () => toast.add({ severity: 'info', summary: 'Metadata saved', life: 1500 })
+  })
 
   const editable = synchronizedMetadata.value
   const save = synchronizedMetadata.save
   const changed = synchronizedMetadata.changed
 
+  const error = computed(() => validateData(editableDefinition, editable.value))
+
+
+  function beforeUnload(ev) {
+    if(changed.value) return ev.returnValue = "You have some unsaved changes!"
+  }
+  onMounted(() => window.addEventListener('beforeunload', beforeUnload))
+  onUnmounted(() => window.removeEventListener('beforeunload', beforeUnload))
+
 </script>
 
 <style scoped>

package/front/src/components/Page.vue

@@ -1,6 +1,7 @@
 <template>
   <ResolveUrl targetType="content_Page" :path="urlPath" :fetchMore="urlMore">
     <template #default="{ target, style, class: clazz }">
+      <Metadata objectType="content_Page" :object="target" />
       <LimitedAccess :requiredRoles="['writer']" objectType="content_Page" :object="target" hidden>
         <PageAdminButtons :page="target" :style="style" :class="clazz" :name="urlPath.value" />
       </LimitedAccess>
@@ -21,6 +22,7 @@
   import { ResolveUrl, NotFound } from "@live-change/url-frontend"
   import { LimitedAccess } from "@live-change/access-control-frontend";
   import Content from "./Content.vue"
+  import Metadata from "./Metadata.vue"
 
   import { computed, watch, ref, onMounted } from 'vue'
   import { toRefs } from "@vueuse/core"
@@ -34,7 +36,9 @@
 
   const urlMore = [
     url => p.content.page({ page: url.target }),
-    url => p.content.content({ objectType: 'content_Page', object: url.target })
+    url => p.content.content({ objectType: 'content_Page', object: url.target }),
+    url => p.content.objectOwnedMetadata({ objectType: 'content_Page', object: url.target }),
+    url => p.url.targetOwnedCanonical({ targetType: 'content_Page', target: url.target })
   ]
 
   const canCreatePage = computed(() => api.client.value.roles.includes('writer'))

package/front/src/components/PageEditor.vue

@@ -14,14 +14,15 @@
     </AccordionTab>
     <AccordionTab>
       <template #header>
-        <span v-if="metadata" class="font-bold mr-1">Title: {{ metadata.title }}</span>
+        <span v-if="metadata" class="font-bold mr-1">Metadata:</span>
+        <span v-if="metadata" class="mr-1 font-normal">{{ metadata.title }}</span>
         <span v-else class="font-bold text-red-600">Metadata not set</span>
       </template>
       <MetadataEditor objectType="content_Page" :object="pageId" :key="pageId"></MetadataEditor>
     </AccordionTab>
   </Accordion>
 
-  <DocumentEditor v-if="pageData" targetType="content_Page" :target="pageId"
+  <DocumentEditor v-if="pageData" targetType="content_Page" :target="pageId" purpose="page"
                   :config="contentConfig" type="content" v-model:saveState="saveState" v-model:version="version">
     <template #menuEnd="{}">
 

package/front/src/config.js

@@ -0,0 +1,13 @@
+import deepmerge from 'deepmerge';
+
+import contentEn from "../locales/en.json"
+import { locales as autoFormLocales } from "@live-change/frontend-auto-form"
+
+export default {
+  i18nMessages: {
+    en: deepmerge.all([
+      contentEn,
+      autoFormLocales.en
+    ])
+  }
+}

package/front/src/entry-client.js

@@ -1,6 +1,6 @@
 import { clientEntry } from '@live-change/frontend-base/client-entry.js'
 import App from './App.vue'
 import { createRouter } from './router'
+import config from './config.js'
 
-
-clientEntry(App, createRouter)
+await clientEntry(App, createRouter, config)

package/front/src/entry-server.js

@@ -1,6 +1,7 @@
 import { serverEntry } from '@live-change/frontend-base/server-entry.js'
 import App from './App.vue'
 import { createRouter } from './router'
+import config from './config.js'
 
-const render = serverEntry(App, createRouter)
+const render = serverEntry(App, createRouter, config)
 export { render }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/content-frontend",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,7 +20,7 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-free": "^6.2.0",
     "@live-change/cli": "0.7.4",
     "@live-change/dao": "0.5.8",
     "@live-change/dao-vue3": "0.5.8",
@@ -28,8 +28,8 @@
     "@live-change/framework": "0.7.4",
     "@live-change/image-service": "0.3.2",
     "@live-change/session-service": "0.3.2",
-    "@live-change/vue3-components": "0.2.15",
-    "@live-change/vue3-ssr": "0.2.15",
+    "@live-change/vue3-components": "0.2.16",
+    "@live-change/vue3-ssr": "0.2.16",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
     "@tiptap/extension-underline": "2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.185",
@@ -38,6 +38,7 @@
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
+    "deepmerge": "^4.2.2",
     "get-port-sync": "1.0.1",
     "pica": "^9.0.1",
     "pretty-bytes": "^6.0.0",
@@ -66,5 +67,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "ef577fb31dd857acb491bd7114e611638283fe6f"
+  "gitHead": "703c9723562ade7b2420e1b25b28ced51a96db09"
 }

package/server/init.js

@@ -96,6 +96,40 @@ module.exports = async function(services) {
     target: 'one'
   })
 
+  await services.content.models.Metadata.create({
+    id: App.encodeIdentifier(['content_Page', 'one']),
+    objectType: 'content_Page',
+    object: 'one',
+    title: 'Test Page',
+    description: 'Test Description',
+    "og": {
+      "locale": "en_US",
+      "localeAlternate": [],
+      "type": "website",
+      "music": {
+        "song": [],
+        "album": [],
+        "musician": [],
+        "creator": []
+      },
+      "video": {
+        "actor": [],
+        "director": [],
+        "writer": [],
+        "tag": []
+      },
+      "article": {
+        "author": [],
+        "tag": []
+      },
+      "profile": {},
+      "book": {
+        "author": [],
+        "tag": []
+      }
+    }
+  })
+
   await createPage('two')
 
   await services.url.models.Canonical.create({