Add latest issue part on Subscribe page and Create component for Issue

src/components/molecules/NewsletterIssue.svelte

@@ -0,0 +1,33 @@
+<style lang="scss">
+    @import "../../style/molecules/issue";
+</style>
+
+<script lang="ts">
+    import dayjs from 'dayjs'
+    import Image from '$components/atoms/Image.svelte'
+
+    export let title: string
+    export let issue: number
+    export let date: string
+    export let link: string
+    export let thumbnail: { id: string }
+    export let size: string = undefined
+</script>
+
+<div class="issue" class:is-large={size === 'large'}>
+    <a href={link} target="_blank" rel="external noopener" tabindex="0">
+        <Image
+            id={thumbnail.id}
+            sizeKey="issue-thumbnail-small"
+            width={160} height={112}
+            alt="Issue {issue} thumbnail"
+        />
+        <dl>
+            <dt>Issue #{issue}</dt>
+            <dd>
+                <p>{title}</p>
+                <time>{dayjs(date).format('DD/MM/YYYY')}</time>
+            </dd>
+        </dl>
+    </a>
+</div>

src/routes/subscribe.svelte

@@ -5,21 +5,22 @@
 <script lang="ts">
     import { navigating } from '$app/stores'
     import { onMount } from 'svelte'
-    import dayjs from 'dayjs'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/contants'
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
-    import Image from '$components/atoms/Image.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
+    import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
     import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
 
     export let data: any
     export let issues: any[]
 
+    const latestIssue = issues[0]
+
 
     onMount(() => {
         /**
@@ -27,7 +28,7 @@
          */
         const animation = timeline([
             // Elements
-            ['.heading .text, .subscribe__top .newsletter-form, .subscribe__issues', {
+            ['.heading .text, .subscribe__top .newsletter-form', {
                 y: [24, 0],
                 opacity: [0, 1],
             }, {
@@ -36,7 +37,7 @@
             }],
 
             // Reveal each issue
-            ['.subscribe__issues > ul > li', {
+            ['.subscribe__issues h2, .subscribe__issues > .issue-container, .subscribe__issues > ul', {
                 y: [16, 0],
                 opacity: [0, 1],
             }, {
@@ -59,7 +60,7 @@
 </script>
 
 <Metas
-    title="Subscribe"
+    title="Subscribe — Houses Of"
     description={data.newsletter_page_text}
     image=""
 />
@@ -74,30 +75,21 @@
     </div>
 
     <section class="subscribe__issues">
-        <h2 class="title-small">Past Issues</h2>
+        <h2 class="title-small">Latest Issue</h2>
-        <ul>
+        <div class="issue-container">
-            {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
+            <NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
-                <li>
+        </div>
-                    <div class="issue">
+
-                        <a href={link} target="_blank" rel="external noreferrer noopener" tabindex="0">
+        {#if issues.length > 1}
-                            <Image
+            <h2 class="title-small">Past Issues</h2>
-                                id={id}
+            <ul>
-                                sizeKey="issue-thumbnail-small"
+                {#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
-                                width={160} height={112}
+                    <li class="issue-container">
-                                alt="Issue {issue} thumbnail"
+                        <NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
-                            />
+                    </li>
-                            <dl>
+                {/each}
-                                <dt>Issue #{issue}</dt>
+            </ul>
-                                <dd>
+        {/if}
-                                    <p>{title}</p>
-                                    <time>{dayjs(date_sent).format('DD/MM/YYYY')}</time>
-                                </dd>
-                            </dl>
-                        </a>
-                    </div>
-                </li>
-            {/each}
-        </ul>
     </section>
 
     <InteractiveGlobe2 type="cropped" />

src/style/molecules/_issue.scss

@@ -8,21 +8,29 @@
 
     a {
         display: flex;
+        width: 100%;
         padding: 20px;
         text-decoration: none;
     }
     // Image
-    :global(img) {
+    :global(picture) {
         $shadow-color: rgba(#936B47, 0.06);
-        display: block;
         width: 80px;
-        height: 56px;
         margin-right: 16px;
+        margin-bottom: auto;
+        overflow: hidden;
         border-radius: 3px;
         box-shadow:
             0 1.5px 1.5px $shadow-color,
             0 3px 3px $shadow-color,
             0 12px 12px $shadow-color;
+
+        :global(img) {
+            display: block;
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+        }
     }
     // Title
     dt {
@@ -61,7 +69,6 @@
         transition: transform 0.7s var(--ease-quart);
     }
 
-
     // Hover
     &:hover {
         background: $color-cream;
@@ -74,4 +81,38 @@
             transform: rotate(3deg) translateZ(0);
         }
     }
+
+
+    // Large Variant
+    &.is-large {
+        a {
+            @include bp (sm) {
+                padding: 28px 64px;
+            }
+        }
+        dt {
+            @include bp (sm) {
+                font-size: rem(24px);
+            }
+        }
+        dd {
+            @include bp (sm) {
+                font-size: rem(16px);
+            }
+        }
+        time {
+            @include bp (sm) {
+                margin-top: 16px;
+                font-size: rem(14px);
+            }
+        }
+        :global(picture) {
+            @include bp (sm) {
+                width: 200px;
+                max-height: 140px;
+                border-radius: 6px;
+                margin-right: 40px;
+            }
+        }
+    }
 }

src/style/pages/_subscribe.scss

@@ -34,11 +34,16 @@
         // Title
         h2 {
             text-align: center;
+            margin-top: 40px;
+            margin-bottom: 24px;
+
+            @include bp (sm) {
+                margin-top: 64px;
+                margin-bottom: 32px;
+            }
         }
 
         ul {
-            margin-top: 32px;
-
             @include bp (sm) {
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
@@ -52,10 +57,11 @@
             @include bp (sm) {
                 margin-bottom: 0;
             }
-        }
 
-        // Issue
+            & > :global(*) {
-        @import "../molecules/issue";
+                height: 100%;
+            }
+        }
     }
 }