[DNM] Post-launch polishing patch

assets/utilities.ts

@@ -78,7 +78,17 @@ const resolveAuthorLink = (author?: Author) => {
                 url: linkData,
             };
     }
-}
+};
+
+const authorDivider = (key: number, length: number) => {
+    if (key === length - 1) {
+        return '';
+    }
+    if (key === length - 2) {
+        return ' & ';
+    }
+    return ', ';
+};
 
 const audioxideStructuredData = () => ({
     '@context': 'http://schema.org',
@@ -127,6 +137,7 @@ export {
     albumCoverAlt,
     throttle,
     resolveAuthorLink,
+    authorDivider,
     audioxideStructuredData,
     generateBreadcrumbs,
 }

components/Icon.vue

@@ -7,6 +7,7 @@
     faRss,
     faSearch,
     faBrain,
+    faInfoCircle,
   } from '@fortawesome/free-solid-svg-icons';
   import {
     faFacebookF,
@@ -27,6 +28,7 @@
     faRss,
     faSearch,
     faBrain,
+    faInfoCircle,
     faSpinnerThird,
   });
 

components/LeadArticleLink.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="post-link">
+        <div class="img-wrap">
+            <img v-if="image" :src="post.metadata.featuredimage[`${imageSize}-${imageFormat}`]" :alt="post.metadata.featuredimageAlt" loading="lazy" width="300" height="200" />
+        </div>
+        <div class="info">
+            <h4 v-if="title"><nuxt-link :to="`/${post.metadata.type}/${post.metadata.slug}`" class="overlay-link">{{ post.metadata.title | unescape }}</nuxt-link></h4>
+            <p v-if="blurb">{{ post.metadata.summary }}</p>
+            <p v-if="author && post.metadata.author" class="author">By <span class="name">{{ post.metadata.author.name }}</span></p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import PostLink from './PostLink.vue';
+
+export default PostLink.extend({
+    name: 'LeadArticleLink',
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~assets/styles/variables";
+
+@include postLink;
+@include small {
+    @include postLinkFlex;
+}
+
+</style>

components/LeadReviewLink.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="post-link review-link">
+        <div class="img-wrap" :style="{ borderColor: post.metadata.colours[0] }">
+            <img v-if="image" :src="post.metadata.featuredimage[`${imageSize}-${imageFormat}`]" :alt="coverAlt" loading="lazy" width="300" height="300" />
+        </div>
+        <div class="info">
+            <h4 v-if="title">
+                <nuxt-link :to="`/${post.metadata.type}/${post.metadata.slug}`" class="overlay-link">
+                    <span class="album">{{ post.metadata.album }}</span>
+                    <span class="artist">{{ post.metadata.artist }}</span>
+                </nuxt-link>
+            </h4>
+            <p v-if="blurb">{{ post.metadata.summary }}</p>
+            <p v-if="author && post.metadata.author" class="author">By <span class="name">{{ post.metadata.author.name }}</span></p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+import { albumCoverAlt } from '~/assets/utilities';
+import PostLink from './PostLink.vue';
+
+export default PostLink.extend({
+    name: 'LeadReviewLink',
+    props: {
+        imageFormat: { type: String as PropType<ImageSizeAspectRatios>, default: 'square' },
+    },
+    computed: {
+        coverAlt(): string {
+            return albumCoverAlt(this.post as Review);
+        }
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~assets/styles/variables";
+
+@include postLink;
+@include postLinkFlex;
+
+h4 span {
+    display: block;
+}
+
+.img-wrap {
+    border: $line-width solid black;
+}
+
+.album {
+    font-style: italic;
+}
+</style>

components/NavBar.vue

@@ -57,8 +57,6 @@ const nav = [
         ]
     },
     { link: { text: 'Interviews', route: '/interviews' } },
-    { link: { text: 'About', route: '/about' } },
-    { link: { text: 'Contact', route: '/contact' } },
 ];
 
 type NavConfig = typeof nav;

components/PostContent.vue

@@ -128,6 +128,9 @@ export default Vue.extend({
                 padding-right: 15px;
                 font-size: $site-content__font--small;
             }
+            .article-album-image {
+                outline: 1px solid #dddddd;
+            }
             hr {
                 @include hr-line-styles;
                 margin-top: $site-content__spacer--x-large;

pages/_type/_slug.vue

@@ -13,7 +13,7 @@
                 <span v-for="(author, key) in article.metadata.author.authors" :key="'author' + key">
                     <a class="review-header__author"
                         :href="authorLinks[key].url"
-                        v-if="authorLinks[key]">{{author.name}}</a><span v-else>{{author.name}}</span>{{ key !== authorLinks.length - 1 ? ', ' : ''}}
+                        v-if="authorLinks[key]">{{author.name}}</a><span v-else>{{author.name}}</span>{{ authorDivider(key, authorLinks.length) }}
                 </span>
             </p>
         </header>
@@ -143,6 +143,9 @@ export default Vue.extend({
             return this.article.metadata.author.authors.map(resolveAuthorLink);
         }
     },
+    methods: {
+        authorDivider,
+    }
 })
 
 </script>

pages/reviews/_slug.vue

@@ -19,7 +19,7 @@
                 <span v-for="(reviewItem, key) in reviews" :key="`reviewers-${key}`">
                     <a class="review-header__author"
                         :href="reviewAuthorLinks[key].url"
-                        v-if="reviewAuthorLinks[key]">{{reviewItem.author.name}}</a><span v-else>{{reviewItem.author.name}}</span>{{ key !== reviews.length - 1 ? ', ' : ''}}
+                        v-if="reviewAuthorLinks[key]">{{reviewItem.author.name}}</a><span v-else>{{reviewItem.author.name}}</span>{{ authorDivider(key, reviews.length) }}
                 </span>
             </p>
         </header>
@@ -39,7 +39,10 @@
                 </template>
             <figure>
             <img class="review-sidebar__album-cover" :alt="coverAlt" :src="review.metadata.featuredimage['medium-square']" :style="sidebarStyles" width="600" height="600" />
-            <figcaption class="review-sidebar__album-info">{ { review.featured_media.description } }</figcaption>
+            <template v-if="review.metadata.artworkCredit">
+                <figcaption id="review-sidebar__artwork-info">The album artwork of <i>{{ review.metadata.album }}<i/> by {{ review.metadata.artist }} {{ review.metadata.artworkCredit }} [<a :href="review.metadata.artworkCreditSource" target="_blank" rel="noopener">Source</a>]</figcaption>
+                <span class="review-sidebar__artwork-info-icon"><icon @click="toggleArtworkCredit" icon="info-circle" /></span>
+            </template>
             </figure>
             </div>
             <div class="review-sidebar__total-score" :style="sidebarStyles">
@@ -243,6 +246,9 @@ export default Vue.extend({
         coverAlt(): string {
             return albumCoverAlt(this.review);
         }
+    },
+    methods: {
+        authorDivider,
     }
 })
 </script>
@@ -254,6 +260,8 @@ export default Vue.extend({
         border-bottom: 5px solid black;
         padding-top: $site-content__spacer--large;
         padding-bottom: $site-content__spacer--x-large;
+        margin-bottom: -1px;
+        z-index: 2;
     }
 
     .collapsible {
@@ -319,6 +327,7 @@ export default Vue.extend({
 
     .review-sidebar__ribbon {
         position: absolute;
+        z-index: 3;
         top: -7px;
         right: 8%;
         width: 12%;
@@ -328,12 +337,32 @@ export default Vue.extend({
         display: block;
         width: 100%;
         height: auto;
-        border: 1px solid #dddddd;
-        border-top: 0;
+        outline: 1px solid #dddddd;
+        z-index: 1;
+    }
+
+    #review-sidebar__artwork-info {
+        font-family: 'Source Sans Pro', sans-serif;
+        position: absolute;
+        bottom:0;
+        left:0;
+        // display: none;
+        padding: 5% 20% 5% 5%;
+        opacity: 0.8;
+        color: white;
+        background-color: black;
+        line-height: 1.3;
+        font-size: 0.9em;
     }
 
-    .review-sidebar__album-info {
-        display: none;
+    .review-sidebar__artwork-info-icon {
+        color: lightgray;
+        margin: 1em;
+        width: 2em;
+        height: 2em;
+        position: absolute;
+        bottom: 0;
+        right: 0;
     }
 
     .review-sidebar__total-score, .review-sidebar__tracks {
@@ -472,8 +501,6 @@ export default Vue.extend({
         }
     }
 
-    /* LARGE STYLING (TABLET) */
-
-    /* LARGE STYLING (TABLET) */
+    /* LARGE STYLING (DESKTOP) */
 
 </style>