From f606230c65f672bbe1d0f6425c86cc8dc8a03fdf Mon Sep 17 00:00:00 2001
From: bono <13803343+bonomite@users.noreply.github.com>
Date: Fri, 16 Dec 2022 13:07:03 -0500
Subject: [PATCH] Bono/goth 324 (#218)

* good start

* first draft complete

* added logic for when only 1 article

* clean up

* design feedback done

* qa bug fixed
---
 components/Byline.vue         |   8 +-
 components/CenterFeature.vue  |   4 +-
 components/SkylineFeature.vue | 201 ++++++++++++++++++++++++++++++++++
 components/VCardMetadata.vue  |  17 ++-
 pages/index.vue               |  37 ++++---
 5 files changed, 242 insertions(+), 25 deletions(-)
 create mode 100644 components/SkylineFeature.vue

diff --git a/components/Byline.vue b/components/Byline.vue
index bf8af780..1f8e664b 100644
--- a/components/Byline.vue
+++ b/components/Byline.vue
@@ -42,7 +42,7 @@ const commentCount = computed(() => {
   <div class="byline">
     <!-- sponsored -->
     <div v-if="isSponsored" class="sponsored flex align-items-center">
-      <div class="author-image">
+      <div class="author-image flex-none">
         <v-flexible-link :to="sponsor?.link" raw>
           <v-simple-responsive-image
             v-if="sponsor?.logo"
@@ -67,7 +67,8 @@ const commentCount = computed(() => {
           to="#comments"
           class="type-textlink2"
         >
-          {{ String(Number(commentCount)) }} {{commentCount === 1 ? 'comment' : 'comments'}}
+          {{ String(Number(commentCount)) }}
+          {{ commentCount === 1 ? 'comment' : 'comments' }}
         </v-flexible-link>
       </div>
     </div>
@@ -101,7 +102,8 @@ const commentCount = computed(() => {
           to="#comments"
           class="type-textlink2"
         >
-          {{ String(Number(commentCount)) }} {{commentCount === 1 ? 'comment' : 'comments'}}
+          {{ String(Number(commentCount)) }}
+          {{ commentCount === 1 ? 'comment' : 'comments' }}
         </v-flexible-link>
       </div>
     </div>
diff --git a/components/CenterFeature.vue b/components/CenterFeature.vue
index 57671426..64bd86d6 100644
--- a/components/CenterFeature.vue
+++ b/components/CenterFeature.vue
@@ -24,8 +24,8 @@ const articlesSm = ref([
 <template>
   <div v-if="articleLg && articleMd && articlesSm" class="center-feature">
     <template v-if="collection.label">
-      <hr class="mb-2 black" />
-      <div class="type-label3 mb-5">{{ collection.label }}</div>
+      <hr class="black" />
+      <div class="type-label3 mt-2 mb-4">{{ collection.label }}</div>
     </template>
     <div class="grid gutter-x-30">
       <div class="col-fixed flex-order-2 lg:flex-order-1">
diff --git a/components/SkylineFeature.vue b/components/SkylineFeature.vue
new file mode 100644
index 00000000..5497c6fb
--- /dev/null
+++ b/components/SkylineFeature.vue
@@ -0,0 +1,201 @@
+<script setup>
+import VCard from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VCard.vue'
+import { useBreakpoints } from '@vueuse/core'
+import breakpoint from '@nypublicradio/nypr-design-system-vue3/src/assets/library/breakpoints.module.scss'
+import { ref } from 'vue'
+
+const props = defineProps({
+  collection: {
+    type: Object,
+    default: {},
+    required: true,
+  },
+})
+
+const breakpoints = useBreakpoints({
+  md: Number(breakpoint.md),
+})
+const smallerThanMd = ref(breakpoints.smaller('md'))
+// Note: the skyline feature should display the first 3 stories in the content collection
+const articleLg = ref(
+  props.collection.data[0]
+    ? normalizeArticlePage(props.collection.data[0])
+    : null
+)
+const articleMd = ref(
+  props.collection.data[1]
+    ? normalizeArticlePage(props.collection.data[1])
+    : null
+)
+const articleSm = ref(
+  props.collection.data[2]
+    ? normalizeArticlePage(props.collection.data[2])
+    : null
+)
+
+const featureLabel = ref(props.collection.label)
+const isOneOnly = !articleMd.value && !articleSm.value
+</script>
+
+<template>
+  <div v-if="articleLg">
+    <div class="skyline-feature">
+      <template v-if="featureLabel">
+        <hr class="black" />
+        <p role="heading" aria-level="2" class="type-label3 mt-2 mb-4">
+          {{ featureLabel }}
+        </p>
+      </template>
+      <div class="grid gutter-x-30 justify-content-center">
+        <div
+          class="col-12 lg:col-12 flex-order-0 xl:flex-order-3"
+          :class="isOneOnly ? 'xl:col-12' : 'xl:col-6'"
+        >
+          <v-card
+            class="primary article-lg mod-vertical mod-featured2 mod-large mb-4"
+            :image="useImageUrl(articleLg?.listingImage)"
+            :sizes="[1]"
+            :ratio="isOneOnly ? [6, 2] : [3, 2]"
+            :width="isOneOnly ? 1360 : 665"
+            :height="isOneOnly ? 453 : 443"
+            :title="articleLg?.listingTitle"
+            :titleLink="articleLg?.link"
+            :maxWidth="articleLg?.listingImage?.width"
+            :maxHeight="articleLg?.listingImage?.height"
+            :tags="[
+              {
+                name: articleLg?.section.name,
+                slug: `/${articleLg?.section.slug}`,
+              },
+            ]"
+            loading="eager"
+          >
+            <v-card-metadata
+              class="mt-0 md:mt-2"
+              altDesign
+              :article="articleLg"
+            />
+          </v-card>
+          <!-- <hr class="block xl:hidden mb-3" /> -->
+        </div>
+        <!-- need to wrap in ClientOnly for breakpoint to initially work -->
+        <ClientOnly>
+          <div
+            v-if="articleMd"
+            class="col-12 md:col-6 xl:col-3 flex-order-1 lg:flex-order-0"
+          >
+            <!-- md article desktop  -->
+            <v-card
+              class="secondary article-md mb-5 tag-small"
+              :class="
+                smallerThanMd
+                  ? 'mod-horizontal mod-left'
+                  : 'mod-vertical mod-large'
+              "
+              :image="useImageUrl(articleMd?.listingImage)"
+              :title="articleMd?.listingTitle"
+              :titleLink="articleMd?.link"
+              :ratio="[1, 1]"
+              :width="318"
+              :height="318"
+              :sizes="[1]"
+              :maxWidth="articleMd?.listingImage?.width"
+              :maxHeight="articleMd?.listingImage?.height"
+              :tags="[
+                {
+                  name: articleMd?.section.name,
+                  slug: `/${articleMd?.section.slug}`,
+                },
+              ]"
+              loading="eager"
+            >
+              <p>
+                {{ articleMd?.description }}
+              </p>
+              <v-card-metadata stack :article="articleMd" />
+            </v-card>
+          </div>
+          <div
+            v-if="articleSm"
+            class="col-12 md:col-6 xl:col-3 flex-order-2 lg:flex-order-1"
+          >
+            <!-- sm article desktop  -->
+
+            <v-card
+              class="secondary article-sm mb-5 tag-small secondary"
+              :class="
+                smallerThanMd
+                  ? 'mod-horizontal mod-left'
+                  : 'mod-vertical mod-large'
+              "
+              :image="useImageUrl(articleSm?.listingImage)"
+              :title="articleSm?.listingTitle"
+              :titleLink="articleSm?.link"
+              :ratio="[3, 2]"
+              :width="318"
+              :height="212"
+              :sizes="[1]"
+              :maxWidth="articleSm?.listingImage?.width"
+              :maxHeight="articleSm?.listingImage?.height"
+              :tags="[
+                {
+                  name: articleSm?.section.name,
+                  slug: `/${articleSm?.section.slug}`,
+                },
+              ]"
+              loading="eager"
+            >
+              <p>
+                {{ articleSm?.description }}
+              </p>
+              <v-card-metadata stack :article="articleSm" />
+            </v-card>
+          </div>
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.skyline-feature {
+  .v-card {
+    &.primary.mod-featured2 {
+      .card-details {
+        .card-title {
+          .v-tag {
+            margin-top: 0;
+            // line-height: var(--font-size-2);
+            @include media('<lg') {
+              margin-top: 11px;
+            }
+            @include media('<md') {
+              margin-top: 0;
+            }
+          }
+          .h2 {
+            @include font-config($type-header3);
+          }
+        }
+      }
+    }
+    &.secondary {
+      .card-details {
+        .card-title {
+          .v-tag {
+            margin-top: 0;
+            line-height: var(--font-size-2);
+            @include media('<md') {
+              line-height: inherit;
+            }
+          }
+          .h2 {
+            font-size: var(--font-size-7);
+            line-height: 21px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/VCardMetadata.vue b/components/VCardMetadata.vue
index f70e5cec..eba48cf5 100644
--- a/components/VCardMetadata.vue
+++ b/components/VCardMetadata.vue
@@ -45,8 +45,14 @@ const commentCount = computed(() => {
           :authors="props.article.authors || props.article.relatedAuthors"
         />
       </span>
-      <span class="comments" v-if="!props.article.comments && showComments && commentCount">
-        <NuxtLink :to="{ path: props.article.link, hash: '#comments' }">{{ String(Number(commentCount)) }} {{commentCount === 1 ? 'comment' : 'comments'}}</NuxtLink>
+      <span
+        class="comments"
+        v-if="!props.article.comments && showComments && commentCount"
+      >
+        <NuxtLink :to="{ path: props.article.link, hash: '#comments' }"
+          >{{ String(Number(commentCount)) }}
+          {{ commentCount === 1 ? 'comment' : 'comments' }}</NuxtLink
+        >
       </span>
     </template>
 
@@ -69,9 +75,10 @@ const commentCount = computed(() => {
           class="col-12 comments"
           v-if="!props.article.comments && showComments && commentCount"
         >
-        <NuxtLink :to="{ path: props.article.link, hash: '#comments' }">
-          {{ String(Number(commentCount)) }} {{commentCount === 1 ? 'comment' : 'comments'}}
-        </NuxtLink>
+          <NuxtLink :to="{ path: props.article.link, hash: '#comments' }">
+            {{ String(Number(commentCount)) }}
+            {{ commentCount === 1 ? 'comment' : 'comments' }}
+          </NuxtLink>
         </span>
       </div>
     </template>
diff --git a/pages/index.vue b/pages/index.vue
index 5ef01c26..4344d89a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,18 +3,17 @@ import { onMounted } from 'vue'
 import VCard from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VCard.vue'
 import { useUpdateCommentCounts } from '~~/composables/comments'
 import useImageUrl from '~~/composables/useImageUrl'
-import { ArticlePage } from '~~/composables/types/Page';
+import { ArticlePage } from '~~/composables/types/Page'
 import { computed, ref } from 'vue'
 
 const riverStoryCount = ref(6)
 const riverAdOffset = ref(2)
 const riverAdRepeatRate = ref(6)
 
-const articlesPromise = findArticlePages({limit: riverStoryCount.value}).then(({ data }) =>
-  normalizeFindArticlePagesResponse(data)
+const articlesPromise = findArticlePages({ limit: riverStoryCount.value }).then(
+  ({ data }) => normalizeFindArticlePagesResponse(data)
 )
 
-
 const homePageCollectionsPromise = findPage('/').then(({ data }) => {
   return data.value.pageCollectionRelationship.map((collection) => {
     return {
@@ -30,7 +29,6 @@ const [articles, homePageCollections] = await Promise.all([
   articlesPromise,
   homePageCollectionsPromise,
 ])
-
 // the latest articles
 const latestArticles = ref([...articles])
 
@@ -49,7 +47,7 @@ const riverSegments = computed(() => {
 const loadMoreArticles = async () => {
   const newArticles = await useLoadMoreArticles({
     limit: riverStoryCount.value,
-    offset: latestArticles.value.length
+    offset: latestArticles.value.length,
   })
   latestArticles.value.push(...newArticles)
 }
@@ -85,7 +83,6 @@ const nativoSectionLoaded = (name) => {
     PostRelease.Start()
   }
 }
-
 </script>
 
 <template>
@@ -98,7 +95,7 @@ const nativoSectionLoaded = (name) => {
           @vue:mounted="nativoSectionLoaded('ntv-latest-1')"
         />
         <!-- newsletter -->
-        <div class="my-8">
+        <div class="mt-8">
           <hr class="black mb-4" />
           <newsletter-home source="gothamist_home" @submit="newsletterSubmitEvent" />
         </div>
@@ -118,6 +115,11 @@ const nativoSectionLoaded = (name) => {
             v-if="collection.layout === 'center-feature'"
             :collection="collection"
           />
+          <skyline-feature
+            class="content"
+            v-if="collection.layout === 'skyline'"
+            :collection="collection"
+          />
           <div v-if="index === 0" id="ntv-stream-2"></div>
         </template>
       </template>
@@ -132,13 +134,18 @@ const nativoSectionLoaded = (name) => {
           <div id="latest">
             <div
               v-for="(riverSegment, segmentIndex) in riverSegments"
-              :key="riverSegment.map(article => article.uuid).join('-')"
+              :key="riverSegment.map((article) => article.uuid).join('-')"
               class="grid gutter-x-xl"
             >
-              <div class="col-12 xxl:col-1 type-label3">{{segmentIndex === 0 ? "LATEST" : ""}}</div>
+              <div class="col-12 xxl:col-1 type-label3">
+                {{ segmentIndex === 0 ? 'LATEST' : '' }}
+              </div>
               <div class="col">
                 <div
-                  v-for="(article, itemIndex) in riverSegment.slice(0, riverStoryCount)"
+                  v-for="(article, itemIndex) in riverSegment.slice(
+                    0,
+                    riverStoryCount
+                  )"
                   :key="article.uuid"
                 >
                   <v-card
@@ -189,10 +196,10 @@ const nativoSectionLoaded = (name) => {
               <div class="col-12 xxl:col-1"></div>
               <div class="col">
                 <Button
-                    class="p-button-rounded"
-                    label="Load More"
-                    @click="loadMoreArticles"
-                  >
+                  class="p-button-rounded"
+                  label="Load More"
+                  @click="loadMoreArticles"
+                >
                 </Button>
               </div>
             </div>