still teaking endpoints | created resizable hero | created hero global state

plugins/cia-endpoints/includes/class.make-endpoint.php

@@ -62,6 +62,7 @@ class Make_Endpoint_For extends WP_REST_Controller {
         $filtered[blocks] = get_rearrange_blocks($item->blocks);
         
         return $filtered;
+        // return $item;
     }
 }
 

vue-theme/src/app.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 div#theme.f-col
     cia-nav
+    cia-hero
     main
         router-view
     cia-footer
@@ -8,6 +9,7 @@ div#theme.f-col
 
 <script>
 import navigation from '@/widgets/navigation/navigation'
+import hero from '@/components/hero'
 import footer from '@/components/footer'
 
 import '@/sss'
@@ -15,6 +17,7 @@ import '@/sss'
 export default {
     components: {
         'cia-nav': navigation,
+        'cia-hero': hero,
         'cia-footer': footer,
     }
 }
@@ -35,7 +38,6 @@ html > body
     nav, footer
         &.main
             background-color: #ccc
-            margin: 0 0 $ms
             padding: $ms
             width: 100%
             ul > li

vue-theme/src/components/hero.vue

@@ -1,11 +1,47 @@
 <template lang="pug">
-.hero
-    h3 hero
+.hero.f-col(v-if="showHero")
+    h3(v-if="heroText") {{ heroText }}
+    button(v-if="showPlaybutton") play
 </template>
 
+<script>
+import { mapState } from 'vuex'
+
+export default {
+    data() {
+        return {
+            heroHeight: 0
+        }
+    },
+    computed: mapState({
+        showHero: state => state.hero.url,
+        heroText: state => state.hero.text,
+        showPlaybutton: state => state.hero.playbutton,
+    }),
+    methods: {
+        onResize() {
+            this.heroHeight = this.$el.offsetWidth / 2.33
+        }
+    },
+    mounted() {
+        this.heroHeight = this.$el.offsetWidth / 2.33
+        this.$nextTick(() => { window.addEventListener('resize', this.onResize) })
+    },
+    watch: {
+        heroHeight() {
+            Object.assign(this.$el.style, {height: this.heroHeight + 'px'})
+        }
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.onResize)
+    },
+    
+}
+</script>
+
 <style lang="postcss">
 .hero
-    background-color: rebecca-purple
-    padding: 1em
-    width: 100vw
+    background-color: rebeccapurple
+    min-height: 30%
+    width: 100%
 </style>

vue-theme/src/pages/index.vue

@@ -3,14 +3,14 @@ article.page--index
     h1 {{ site }}: index
     section(v-if="allPagesLoaded")
         h4 pages
-        p {{ allPages.length }}
+        p {{ Object.values(allPages).length }}
     section(v-if="allPostsLoaded")
         h4 posts
-        p {{ allPosts.length }}
+        p {{ Object.values(allPosts).length }}
         hr
         div(v-for="post in allPosts")
             h4 {{ post.slug }}
-            p(v-for="block in post.blocks" v-html="block")
+            div(v-for="block in post.blocks" v-html="block")
 </template>
 
 <script>

vue-theme/src/store/index.js

@@ -12,9 +12,21 @@ Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
+// Current page state
+const state = {
+  title: 'Test',
+  hero: {
+    url: 'http://sample-image-url/',
+    text: 'sample hero text',
+    playbutton: true
+  },
+  view: 'list'
+}
+
 export default new Vuex.Store({
   actions,
   getters,
+  state,
   modules: {
       post,
       page,

vue-theme/src/store/modules/page.js

@@ -9,7 +9,7 @@ const state = {
 
 // getters
 const getters = {
-    allPages: state => Object.values((state.all)),
+    allPages: state => state.all,
     allPagesLoaded: state => state.loaded,
     page: state => id => {
         let field = typeof id === 'number' ? 'id' : 'slug'

vue-theme/src/store/modules/post.js

@@ -1,11 +1,5 @@
 import api from '../../utils/api'
 
-const createPostSlug = post => {
-    // let slug = post.link.replace(window.location.protocol + '//' + window.location.host, '')
-    // post.slug = slug
-    return post
-}
-
 const state = {
     all: {},
     loaded: false,
@@ -13,7 +7,7 @@ const state = {
 }
 
 const getters = {
-    allPosts: state => Object.values(state.all),
+    allPosts: state => state.all,
     allPostsLoaded: state => state.loaded,
     post: state => id => {
         let field = typeof id === 'number' ? 'id' : 'slug'
@@ -38,9 +32,6 @@ const getters = {
 const actions = {
     getAllPosts({ commit }) {
         api.getByType('posts', posts => {
-            Object.values(posts).map((post, i) => {
-                posts[i] = createPostSlug(post)
-            })
             commit('STORE_FETCHED_POSTS', { posts })
             commit('POSTS_LOADED', true)
         })