feat: added border helpers | feat: added artist endpoint | feat: added episode endpoint

plugins/cia-endpoints/cia-end-points.php

@@ -38,6 +38,10 @@ add_action( 'rest_api_init', function () {
  * Craft in America custom post_types
  */
 add_action( 'rest_api_init', function () {
-    $media_controller = new Make_Endpoint_For('customtype');
-    $media_controller->register_custom_route('custometypes');
+    $media_controller = new Make_Endpoint_For('episode');
+    $media_controller->register_custom_route('episodes');
 });
+add_action( 'rest_api_init', function () {
+    $media_controller = new Make_Endpoint_For('artist');
+    $media_controller->register_custom_route('artists');
+});

plugins/includes/custom-types.php

@@ -1,9 +1,9 @@
 <?php
     function get_all_custom_types() {
         return array(
-            'customtype',
-            // 'artist',
-            // 'episode',
+            // 'customtype',
+            'artist',
+            'episode',
             // 'short',
             // 'talk',
             // 'object',

vue-theme/functions.php

@@ -154,6 +154,11 @@ remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' );
+// REMOVE block CSS
+function webapptiv_remove_block_library_css() {
+    wp_dequeue_style( 'wp-block-library' );
+}
+add_action( 'wp_enqueue_scripts', 'webapptiv_remove_block_library_css' );
 
 // header( 'Access-Control-Allow-Origin: http://localhost:8080' );
 header( 'Content-Type: application/json' );

vue-theme/src/app.vue

@@ -46,6 +46,11 @@ html > body
             padding: $ms
             align-items: flex-start
             
+            .shadow
+                box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
+            .b-radius
+                border-radius:5px
+                
             /* Content Pieces */
             .post
                 background-color: teal
@@ -59,6 +64,8 @@ html > body
                         color: white
                     .wp-block-image
                         margin: 0
+                        img
+                            width: 100%
                 > ul
                     list-style: none
             

vue-theme/src/pages/index.vue

@@ -1,7 +1,7 @@
 // Homepage grid
 <template lang="pug">
 .page--index.f-row.between
-    article.f-grow
+    article.f-grow.shadow.b-radius
         header
             h1 {{ site }}: index
         section(v-if="allPagesLoaded")
@@ -20,7 +20,7 @@
             p icon
 
     //- COMPONENT: Make this with a prop
-    aside
+    aside.shadow.b-radius
         header
             h4 this is some other stuff
         section(v-if="allPostsLoaded")

vue-theme/src/sss/_helpers.sss

@@ -24,4 +24,12 @@
     &-col
         flex-direction: column
     &-grow
-        flex-grow: 1
+        flex-grow: 1
+
+.b
+    &-radius
+        border-radius: 5px
+    &-none
+        border: none
+    &-solid
+        border: #000000 1px solid

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

@@ -0,0 +1,46 @@
+import api from '../../utils/api'
+
+const state = {
+    all: {},
+    loaded: false,
+    artist: null,
+}
+
+const getters = {
+    allArtists: state => state.all,
+    allArtistsLoaded: state => state.loaded,
+    artist: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let artist = state.all.filter(artist => artist[field] === id)
+        return (artist[0]) ? artist[0] : false
+    },
+    artistContent: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let artist = state.all.filter(artist => artist[field] === id)
+
+        return (artist[0]) ? artist[0].content.rendered : false
+    },
+    someArtists: state => limit => {
+        if (state.all.length < 1) return false
+
+        let all = [...state.all]
+
+        return all.splice(0, Math.min(limit, state.all.length))
+    },
+}
+
+const actions = {
+    getAllArtists({ commit }) {
+        api.getByType('artists', artists => {
+            commit('STORE_FETCHED_ARTISTS', { artists })
+            commit('ARTISTS_LOADED', true)
+        })
+    }
+}
+
+const mutations = {
+    STORE_FETCHED_ARTISTS(state, { artists }) { state.all = artists },
+    ARTISTS_LOADED(state, val) { state.loaded = val },
+}
+
+export default { state, getters, actions, mutations }

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

@@ -0,0 +1,46 @@
+import api from '../../utils/api'
+
+const state = {
+    all: {},
+    loaded: false,
+    episode: null,
+}
+
+const getters = {
+    allEpisodes: state => state.all,
+    allEpisodesLoaded: state => state.loaded,
+    episode: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let episode = state.all.filter(episode => episode[field] === id)
+        return (episode[0]) ? episode[0] : false
+    },
+    episodeContent: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let episode = state.all.filter(episode => episode[field] === id)
+
+        return (episode[0]) ? episode[0].content.rendered : false
+    },
+    someEpisodes: state => limit => {
+        if (state.all.length < 1) return false
+
+        let all = [...state.all]
+
+        return all.splice(0, Math.min(limit, state.all.length))
+    },
+}
+
+const actions = {
+    getAllEpisodes({ commit }) {
+        api.getByType('episodes', episodes => {
+            commit('STORE_FETCHED_EPISODES', { episodes })
+            commit('EPISODES_LOADED', true)
+        })
+    }
+}
+
+const mutations = {
+    STORE_FETCHED_EPISODES(state, { episodes }) { state.all = episodes },
+    EPISODES_LOADED(state, val) { state.loaded = val },
+}
+
+export default { state, getters, actions, mutations }