feat: add referrals carousel

Cooty · Mar 26, 2023 · 1739fd1 · 1739fd1
1 parent eb29c50
commit 1739fd1
Show file tree

Hide file tree

Showing 11 changed files with 626 additions and 156 deletions.
diff --git a/components/home/HomeReferrals.vue b/components/home/HomeReferrals.vue
@@ -2,16 +2,13 @@
     <UiSection id="referrals">
         <UiWrapper as="article" class="bd-home-page-full-height">
             <UiTitle :priority="2" :appearance="1" sectionName="referrals" class="bd-mw-800">
-                {{ referrals?.title }}
+                {{ referralsContent?.title }}
             </UiTitle>
-            <Carousel :label="referrals?.body.children[2].children[0].value" :splide-options="referralCarouselOptions">
-                <CarouselItemReferral v-for="referral in DUMMY_REFERRALS" :key="referral.id"
-                    :name="referral.person.name" :image="referral.person.image" :title="referral.person.title"
-                    :link="referral.person.link ? referral.person.link : undefined"
-                    :organization="referral?.person?.organization?.name ? referral.person.organization.name : undefined"
-                    :text="referral.text" />
-            </Carousel>
-            <UiTitle :priority="2" class="bd-mw-800">{{ referrals?.description }}</UiTitle>
+
+            <ReferralCarousel :referrals="(referrals as Referral[])"
+                :label="referralsContent?.body.children[2].children[0].value" />
+
+            <UiTitle :priority="2" class="bd-mw-800">{{ referralsContent?.description }}</UiTitle>
             <LogoGrid v-if="DUMMY_CLIENT_LOGOS && DUMMY_CLIENT_LOGOS.length">
                 <LogoGridItem v-for="logo in DUMMY_CLIENT_LOGOS" :key="logo.id" :src="logo.image" :alt="logo.name"
                     :width="logo.width" :height="logo.height" :link="logo.link" />
@@ -21,9 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import { Options } from '@splidejs/splide'
+import Referral from '~~/interfaces/Referral.interface';
+
+const { data: referrals } = await useFetch('/api/referral')
 
-const { data: referrals } = await useAsyncData('homeReferrals', () => queryContent('home', '_referrals').findOne())
+const { data: referralsContent } = await useAsyncData('homeReferrals', () => queryContent('home', '_referrals').findOne())
 
 const DUMMY_CLIENT_LOGOS = [
     {
@@ -59,105 +58,4 @@ const DUMMY_CLIENT_LOGOS = [
         height: 80
     }
 ]
-
-const DUMMY_REFERRALS = [
-    {
-        id: 'r1',
-        person: {
-            name: 'Attila Juhász',
-            link: 'https://www.linkedin.com/in/attila-juhasz-5ab28775/',
-            image: 'https://via.placeholder.com/100x100',
-            title: 'Project coordinator',
-            organization: {
-                name: 'K-Monitor'
-            }
-        },
-        text: 'Tamás is a really proactive member of the Code for Hungary, a volunteer-based community. Communication is easy with him, the deadlines he has set are always clear and I appreciate that he can say no, when a task doesn\'t fit his schedule.'
-    },
-    {
-        id: 'r2',
-        person: {
-            name: 'Iaroslav Semenov',
-            link: 'https://www.linkedin.com/in/iaroslav-semenov-0b5a643a/',
-            image: 'https://via.placeholder.com/100x100',
-            title: 'Director Of Engineering',
-            organization: {
-                name: 'Fernarzt'
-            }
-        },
-        text: '{Waiting for recommendation}'
-    },
-    {
-        id: 'r3',
-        person: {
-            name: 'Arda Diri',
-            link: 'https://www.linkedin.com/in/arda-diri/',
-            image: 'https://via.placeholder.com/100x100',
-            title: 'VP of Engineering',
-            organization: {
-                name: 'Yilu'
-            }
-        },
-        text: '{Waiting for recommendation}'
-    },
-    {
-        id: 'r4',
-        person: {
-            name: 'Arda Diri',
-            link: 'https://www.linkedin.com/in/arda-diri/',
-            image: 'https://via.placeholder.com/100x100',
-            title: 'VP of Engineering',
-            organization: {
-                name: 'Yilu'
-            }
-        },
-        text: '{Waiting for recommendation}'
-    },
-    {
-        id: 'r5',
-        person: {
-            name: 'Emanuel Hoch',
-            link: 'https://www.linkedin.com/in/emanuelhoch/',
-            image: 'https://via.placeholder.com/100x100',
-            title: 'Co-Founder & CPO-CTO',
-            organization: {
-                name: 'Compado'
-            }
-        },
-        text: '{Waiting for recommendation}'
-    },
-    {
-        id: 'r6',
-        person: {
-            name: 'Szymon Madzielewski',
-            link: 'https://www.linkedin.com/in/szymonmadzielewski/',
-            image: 'https://via.placeholder.com/100x100',
-            title: 'CTO',
-        },
-        text: '{Waiting for recommendation}'
-    },
-]
-
-const referralCarouselOptions = {
-    perPage: 1,
-    perMove: 1,
-    breakpoints: {
-        480: {
-            perPage: 2
-        },
-        768: {
-            perPage: 2
-        },
-        992: {
-            perPage: 2,
-            arrows: true,
-            padding: '60px',
-            gap: '20px',
-        },
-        1200: {
-            perPage: 3,
-            gap: '24px',
-        }
-    }
-} as Options
 </script>
diff --git a/components/layout/LayoutFooter.vue b/components/layout/LayoutFooter.vue
@@ -81,7 +81,8 @@
                         </li>
                         <li>
                             <NuxtLink target="_blank" :to="contentLicenseLink"><img alt="Creative Commons License"
-                                    style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" />
+                                    loading="lazy" decoding="async" style="border-width:0"
+                                    src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" />
                             </NuxtLink><br />{{
                                 content?.licenseText
                             }} <NuxtLink target="_blank" :to="contentLicenseLink">{{

diff --git a/components/referral/ReferralCarousel.vue b/components/referral/ReferralCarousel.vue
@@ -0,0 +1,40 @@
+<template>
+  <Carousel :label="props.label" :splide-options="carouselOptions">
+    <ReferralCarouselItem v-for="referral in props.referrals" :key="referral.id" :name="referral.from.name"
+      :image="referral.from.image" :title="referral.from.title" :link="referral.from.link"
+      :organization="referral.from.organization" :text="referral.text" />
+  </Carousel>
+</template>
+
+<script lang="ts" setup>
+import { Options } from '@splidejs/splide'
+import Referral from '@/interfaces/Referral.interface';
+
+const props = defineProps<{
+  label: string,
+  referrals: Referral[]
+}>()
+
+const carouselOptions = {
+  perPage: 1,
+  perMove: 1,
+  breakpoints: {
+    480: {
+      perPage: 2
+    },
+    768: {
+      perPage: 2
+    },
+    992: {
+      perPage: 2,
+      arrows: true,
+      padding: '60px',
+      gap: '20px',
+    },
+    1200: {
+      perPage: 3,
+      gap: '24px',
+    }
+  }
+} as Options
+</script>
diff --git a/components/CarouselItemReferral.vue → components/referral/ReferralCarouselItem.vue b/components/CarouselItemReferral.vue → components/referral/ReferralCarouselItem.vue
@@ -1,10 +1,17 @@
 <template>
     <CarouselCard>
         <header class="header">
-            <img :src="$props.image" :alt="props.name" class="img" />
+            <template v-if="!props.link">
+                <img :src="`${props.image}?w=120&h=120`" :alt="props.name" class="img" loading="lazy" decoding="async"
+                    width="60" height="60" />
+            </template>
+            <NuxtLink v-else :to="props.link" target="_blank">
+                <img :src="`${props.image}?w=120&h=120`" :alt="props.name" class="img" loading="lazy" decoding="async"
+                    width="60" height="60" />
+            </NuxtLink>
             <div class="meta">
                 <template v-if="!props.link">
-                    {{ props.name }}
+                    {{ props.name }}&nbsp;
                 </template>
                 <NuxtLink v-else :to="props.link" target="_blank" class="no-visited">
                     {{ props.name }}&nbsp;
@@ -58,6 +65,7 @@ const props = defineProps<{
         flex: 0;
         width: var(--img-width);
         border-radius: 100%;
+        aspect-ratio: 1 / 1;
     }
 }
 

diff --git a/composables/api.ts b/composables/api.ts
@@ -0,0 +1,26 @@
+// import { useSanityClient } from '@/composables/sanity-client'
+import { createClient } from '@sanity/client'
+
+// const client = useSanityClient()
+
+export async function useGetReferrals() {
+  const config = useRuntimeConfig()
+  console.log(config.public.sanityProjectId)
+  console.log(config.public.sanityDatasetName)
+
+  const client = createClient({
+    projectId: config.public.sanityProjectId,
+    dataset: config.public.sanityDatasetName,
+    useCdn: process.env.NODE_ENV === 'production',
+    apiVersion: '2023-03-24',
+  })
+
+  const fields = `
+    _id,
+    name: from->name,
+    avatar: from->image.asset->url,
+    text,
+  `
+
+  return await client.fetch(`*[_type == 'referral']{${fields}}`)
+}
diff --git a/interfaces/Referral.interface.ts b/interfaces/Referral.interface.ts
@@ -0,0 +1,13 @@
+interface Referral {
+  id: string
+  from: {
+    name: string
+    title: string
+    link?: string
+    image: string
+    organization?: string
+  }
+  text: string
+}
+
+export default Referral
diff --git a/lib/sanity-client.ts b/lib/sanity-client.ts
@@ -0,0 +1,9 @@
+import { createClient } from '@sanity/client'
+
+export default createClient({
+  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.SANITY_DATASET_NAME,
+  token: process.env.SANITY_TOKEN,
+  useCdn: process.env.NODE_ENV === 'production',
+  apiVersion: '2023-03-24',
+})