home teasers and static pages #796

2023-02-17 23:04:15 +01:00
parent 9c8bf3f38f
commit ac853527fb
9 changed files with 485 additions and 78 deletions
@@ -21,7 +21,7 @@
        </ul>
      </li>
      <li><router-link to="/bibliography">Bibliographie</router-link></li>
-      <li><a href="#">Blog</a></li>
+      <li><router-link to="/schema">Schema</router-link></li>
      <li>
        <a href="#" class="mdi mdi-login-variant" title="connexion">
          <span class="visualy-hidden">connexion</span>
@@ -7,23 +7,22 @@
      <h1>Les Guides de Paris</h1>
      <h2>Corpus des XVII et XVIII<sup>E</sup> siècles</h2>
    </header>
-    <section class="row">
+    <section v-if="colophonHome.length && colophonHome.length > 0" class="row">
      <div class="col-3" />
      <div class="col-6 teasers">
-        <article>
-          <h1>Lorem ipsum</h1>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales libero turpis, in tincidunt felis feugiat sit amet. Etiam laoreet diam sapien, sit amet ullamcorper magna rhoncus a. Duis sapien ipsum, consectetur ornare luctus eu, tincidunt id magna.</p>
-          <span>Lire la suite</span>
-        </article>
-        <article>
-          <h1>Lorem ipsum</h1>
-          <p>Integer in pulvinar quam, ac porttitor arcu. Nulla tempor tempor risus, vitae eleifend ligula feugiat id. Vivamus at semper ex. Nulla mattis sapien lacus, ut iaculis urna finibus id. Donec elementum purus quis odio scelerisque feugiat. Donec massa lorem, mattis id ullamcorper et, semper luctus magna. Vivamus interdum luctus massa, pharetra consequat libero fermentum non. Quisque nec dolor ut urna efficitur ultrices semper vitae lacus.</p>
-          <span>Lire la suite</span>
-        </article>
-        <article>
-          <h1>Lorem ipsum</h1>
-          <p>Aliquam in viverra metus. Suspendisse pretium eget nisl nec fermentum. Aliquam pellentesque turpis diam, ut congue nulla gravida ac. Vestibulum a tempus mi, ac rhoncus sem. Sed quis ultrices test.</p>
-          <span>Lire la suite</span>
+        <article
+          v-for="page in colophonHome"
+          :key="page.uuid"
+        >
+          <!-- <h1>{{ page.title }}</h1> -->
+          <div v-html="trimedTei(page.tei)" />
+          <a
+            :href="page.url"
+            @click.prevent="onclick(page.uuid)"
+            @keyup.enter="onclick(page.uuid)"
+          >
+            <span>Lire la suite</span>
+          </a>
        </article>
      </div>
      <div class="col-3" />
@@ -34,6 +33,51 @@

 <script>

+import { mapState, mapActions } from 'vuex'
+import truncate from 'truncate-html'
+
 export default {
+  name: 'Home',
+  metaInfo: {
+    title: 'Home'
+  },
+  // data: () => ({
+  //   // editionslist: []
+  // }),
+  computed: {
+    ...mapState({
+      colophonHome: state => state.Colophon.colophonHome
+    })
+  },
+  created () {
+    if (!this.colophonHome.length) {
+      this.getColophon()
+    }
+  },
+  methods: {
+    ...mapActions({
+      getColophon: 'Colophon/getColophon'
+    }),
+    trimedTei (tei) {
+      return truncate(tei, 30, {
+        byWords: true,
+        stripTags: false,
+        reserveLastWord: 10
+      })
+    },
+    onclick (uuid) {
+      console.log('clicked on home teaser', uuid)
+      this.$router.push({
+        name: uuid
+      })
+    }
+
+  }
 }
 </script>
+
+<style lang="scss">
+  // a{
+  //   z-index: 100;
+  // }
+</style>
@@ -0,0 +1,80 @@
+<template>
+  <MainContentLayout id="not-found" class="">
+    <template v-slot:header>
+      <span v-if="!page" class="loading">Loading ...</span>
+      <h1 v-else>{{ page.title }}</h1>
+    </template>
+
+    <div v-if="page" v-html="page.tei" />
+
+  </MainContentLayout>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+
+export default {
+  name: 'Static',
+  components: {
+    MainContentLayout
+  },
+  data: () => ({
+    uuid: null,
+    page: null
+  }),
+  computed: {
+    ...mapState({
+      colophon: state => state.Colophon.colophon
+    })
+    // page () {
+    // }
+  },
+  beforeCreate () {
+
+  },
+  created () {
+    if (!this.colophon.length) {
+      this.getColophon()
+    }
+    console.log('Static created', this.$route)
+    this.uuid = this.$route.name
+    if (this.colophon && this.colophon.length > 0) {
+      this.setPage()
+    }
+  },
+  watch: {
+    $route (n, o) {
+      console.log('static route changed', n, o)
+      this.uuid = n.name
+      if (this.colophon && this.colophon.length > 0) {
+        this.setPage()
+      }
+    },
+    colophon (n, o) {
+      this.setPage()
+    }
+  },
+  methods: {
+    ...mapActions({
+      getColophon: 'Colophon/getColophon'
+    }),
+    setPage () {
+      for (let i = 0; i < this.colophon.length; i++) {
+        if (this.colophon[i].uuid === this.uuid) {
+          this.page = this.colophon[i]
+        }
+      }
+    }
+  },
+  metaInfo () {
+    return {
+      title: `Static`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -14,6 +14,7 @@ import Locorum from 'pages/Locorum'
 import Operum from 'pages/Operum'
 import Bibliographie from 'pages/Bibliographie'
 import NotFound from 'pages/NotFound'
+import Static from 'pages/Static'

 Vue.use(Router)

@@ -23,12 +24,26 @@ const routes = [
    path: '/',
    component: Home
  },
-  // {
-  //   name: 'item',
-  //   path: '/babar/:uuid',
-  //   component: Item,
-  //   props: true
-  // },
+  {
+    name: 'credits',
+    path: '/credits',
+    component: Static
+  },
+  {
+    name: 'guide',
+    path: '/guide',
+    component: Static
+  },
+  {
+    name: 'schema',
+    path: '/schema',
+    component: Static
+  },
+  {
+    name: 'api',
+    path: '/api',
+    component: Static
+  },
  {
    name: 'listcorpus',
    path: '/corpus',
@@ -4,12 +4,14 @@ import Vuex from 'vuex'
 import Corpus from './modules/corpus'
 import Search from './modules/search'
 import History from './modules/history'
+import Colophon from './modules/colophon'

 Vue.use(Vuex)
 export default new Vuex.Store({
  modules: {
    Corpus,
    Search,
-    History
+    History,
+    Colophon
  }
 })
@@ -0,0 +1,65 @@
+import { REST } from 'api/rest-axios'
+import router from '../../router'
+
+export default {
+  namespaced: true,
+  router,
+  // initial state
+  state: {
+    colophon: [],
+    colophonHome: []
+  },
+
+  // getters
+  getters: {},
+
+  // mutations
+  mutations: {
+    setColophon (state, colophon) {
+      state.colophon = colophon
+      for (let i = 0; i < colophon.length; i++) {
+        if (colophon[i].uuid !== 'schema') {
+          state.colophonHome.push(colophon[i])
+        }
+      }
+    }
+  },
+
+  // actions
+  actions: {
+    getColophon ({ dispatch, commit, state }) {
+      REST.get(`${window.apipath}/colophon`, {})
+        .then(({ data }) => {
+          console.log('colophon getColophon REST: data', data)
+          // commit('setColophon', data.content)
+          dispatch('getPages', data.content.pages)
+            .then((pages) => {
+              console.log('all pages returned: pages', pages)
+              commit('setColophon', pages)
+            })
+        })
+        .catch((error) => {
+          console.warn('Issue with getColophon', error)
+          Promise.reject(error)
+        })
+    },
+    // async get pages
+    getPages ({ dispatch, commit, state }, pages) {
+      return Promise.all(pages.map(function (page) {
+        return REST.get(`${window.apipath}/colophon/` + page.uuid, {})
+          .then(({ data }) => {
+            console.log('colophon getPages REST: page, data', page, data)
+            // // work arround
+            // if (!Array.isArray(data.content)) {
+            //   data.content = [data.content]
+            // }
+            return data.content
+          })
+          .catch((error) => {
+            console.warn('colophon Issue with getPages', error)
+            Promise.reject(error)
+          })
+      }))
+    }
+  }
+}