feat: links links links

vue-theme/src/app.vue

@@ -43,9 +43,10 @@ html > body
             background-color: pink
             max-width: 100em
             width: 90%
-            padding: $ms
+            padding: $ms 0
             align-items: flex-start
             
+            /* Block Shadow Thing */
             .shadow
                 box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
             .b-radius
@@ -76,13 +77,37 @@ html > body
                     padding: $ms
                 > section, > header
                     margin: 0 0 $ms
+                > section .block-wrapper
+                    img
+                        width: 100%
+                    .wp-block-gallery
+                        .blocks-gallery
+                            &-grid
+                                list-style: none
+                            &-item
+                                loat: left
+                        &.columns-1
+                            .blocks-gallery-item
+                                width: 100%
+                        &.columns-2
+                            .blocks-gallery-item
+                                width: 50%
+                        &.columns-3
+                            .blocks-gallery-item
+                                width: 33.33%
+                        &.columns-4
+                            .blocks-gallery-item
+                                width: 25%
+                        
             > aside
                 background-color: salmon
                 margin: 0 0 0 $ms
+                min-width: 27%
                 width: 27%
-                > *
-                    padding: $ms
                 > section
+                    > *
+                        padding: $ms
+                        margin: 0 0 $ms 0
                     > .post
                         background-color: blue
 

vue-theme/src/components/navigation/navigation.vue

@@ -9,6 +9,8 @@ nav.main
             p  
         li
             a(href="/") home
+        li
+            a(href="/posts") news
         li
             a(href="/artists") artists
         li

vue-theme/src/components/sidebar/sidebar.vue → vue-theme/src/components/sidebars/sidebar.vue

@@ -1,9 +1,11 @@
 <template lang="pug">
-aside.shadow.b-radius
-    header
-        h4 this is an aisde for {{ type }}
+aside
     section
         slot
+        .shadow.b-radius(v-if="type === 'artists'")
+            p {{ type }} stuff
+        .shadow.b-radius(v-else)
+            p {{ type }} sidebar
 </template>
 
 <script>

vue-theme/src/pages/index.vue

@@ -1,21 +1,26 @@
 // Homepage grid
 <template lang="pug">
 .page--index.f-row.between
-    article.f-grow.shadow.b-radius
-        header
-            h1 {{ site }}: index
-        section(v-if="allEpisodesLoaded")
-            h4 Episodes
-            p {{ Object.values(allEpisodes).length }}
-        section(v-if="allArtistsLoaded")
-            h4 artists
-            p {{ Object.values(allArtists).length }}
-        section(v-if="allPagesLoaded")
+    article.f-grow
+        section(v-if="allEpisodesLoaded").shadow.b-radius
+            router-link(:to="`./episodes`")
+                h4 Episodes
+            router-link(:to="`./episodes/${Object.values(allEpisodes)[0].slug}`")
+                p {{ Object.values(allEpisodes)[0].title }}
+        section(v-if="allArtistsLoaded").shadow.b-radius
+            router-link(:to="`./artists`")
+                h4 artists
+            router-link(:to="`./artists/${Object.values(allArtists)[0].slug}`")
+                p {{ Object.values(allArtists)[0].title }}
+        section(v-if="allPagesLoaded").shadow.b-radius
             h4 pages
-            p {{ Object.values(allPages).length }}
-        section(v-if="allPostsLoaded")
-            h4 posts
-            p {{ Object.values(allPosts).length }}
+            router-link(:to="`./pages/${Object.values(allPages)[0].slug}`")
+                p {{ Object.values(allPages)[0].title }}
+        section(v-if="allPostsLoaded").shadow.b-radius
+            router-link(:to="`./posts`")
+                h4 posts
+            router-link(:to="`./posts/${Object.values(allPosts)[0].slug}`")
+                p {{ Object.values(allPosts)[0].title }}
         section
             //- COMPONENT: Looping component
             .post(v-for="post in allPosts")
@@ -24,18 +29,6 @@
                     li.post--content--block(v-for="block in post.blocks" v-html="block")
         footer.f-row
             p icon
-
-    //- COMPONENT: Make this with a prop
-    aside.shadow.b-radius
-        header
-            h4 this is some other stuff
-        section(v-if="allPostsLoaded")
-            //- COMPONENT: See above
-            .post(v-for="post in allPosts")
-                h4.post--title {{ post.slug }}
-                ul.post--content
-                    li.post--content--block(v-for="block in post.blocks" v-html="block")
-
 </template>
 
 <script>
@@ -46,11 +39,14 @@ export default {
         ...mapGetters({
             somePages: 'somePages',
             allPages: 'allPages',
-            allPostsLoaded: 'allPostsLoaded',
-            allPosts: 'allPosts',
             allPagesLoaded: 'allPagesLoaded',
+
+            allPosts: 'allPosts',
+            allPostsLoaded: 'allPostsLoaded',
+            
             allArtists: 'allArtists',
             allArtistsLoaded: 'allArtistsLoaded',
+            
             allEpisodes: 'allEpisodes',
             allEpisodesLoaded: 'allEpisodesLoaded',
         }),
@@ -72,4 +68,21 @@ export default {
         this.$store.dispatch('getAllEpisodes')
     }
 }
-</script>
+</script>
+
+<style lang="postcss">
+@import '../sss/variables.sss'
+
+.page--index
+    article
+        section
+            float: left
+            width: 25%
+            &:nth-of-type(1)
+                width: 49.7%
+            &:nth-of-type(2), &:nth-of-type(3)
+                margin: 0 0 0 $ms
+                width: 24%
+            &:nth-of-type(4), &:nth-of-type(5)
+                width: 100%
+</style>

vue-theme/src/pages/list.vue

@@ -1,22 +1,27 @@
 <template lang="pug">
 .page--list.f-row.between
     article.f-grow
-        header
-            h1 {{ $route.params.type }} list
-        section
-            h4 {{ $route.params.type }}
+        header.f-row.center
+            h1 {{ type }} list
+        section.shadow.b-radius
+            h4 {{ type }}
             p {{ Object.values(posts).length }}
             p {{ sidebar }}
-        section(v-for="post in posts")
+        section(v-for="post in posts").shadow.b-radius
             router-link(:to="`./${type}/${post.slug}`")
                 h4 {{ post.title }}
+
     sidebar(v-if="sidebar" :type="`${type}`")
-        h1 slots
+        .shadow.b-radius
+            h1 slots stuff
+            div
+                p more body whatever
+                p another line of stuff
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import sidebar from '@/components/sidebar/sidebar'
+import sidebar from '@/components/sidebars/sidebar'
 
 export default {
     props: {
@@ -29,6 +34,12 @@ export default {
     },
     computed: {
         ...mapGetters({
+            allPages: 'allPages',
+            allPagesLoaded: 'allPagesLoaded',
+
+            allPosts: 'allPosts',
+            allPostsLoaded: 'allPostsLoaded',
+            
             allArtists: 'allArtists',
             allArtistsLoaded: 'allArtistsLoaded',
 

vue-theme/src/pages/single.vue

@@ -2,7 +2,7 @@
 .page--single.f-row.between
     article.f-grow
         header
-            h1 {{ $route.params.type }}:{{ $route.params.slug }} single
+            h1 {{ type }}:{{ $route.params.slug }} single
         section
             h4 {{ posts[$route.params.slug].title }}
             .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
@@ -11,7 +11,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import sidebar from '@/components/sidebar/sidebar'
+import sidebar from '@/components/sidebars/sidebar'
 
 export default {
     props: {
@@ -24,6 +24,12 @@ export default {
     },
     computed: {
         ...mapGetters({
+            allPages: 'allPages',
+            allPagesLoaded: 'allPagesLoaded',
+
+            allPosts: 'allPosts',
+            allPostsLoaded: 'allPostsLoaded',
+            
             allArtists: 'allArtists',
             allArtistsLoaded: 'allArtistsLoaded',
 

vue-theme/src/sss/_helpers.sss

@@ -19,6 +19,9 @@
             justify-content: space-between
         &.around
             justify-content: space-around
+        &.center
+            justify-content: center
+            align-items: center
     &-row
         flex-direction: row
     &-col