Merge pull request #345 from vuejs-jp/enhance/namecard-gallery

namecard gallery test

Author: jiyuujin

apps/web/.env.example

@@ -14,6 +14,7 @@ ENABLE_OPERATE_ADMIN=
 ENABLE_SWITCH_LOCALE=
 ENABLE_REGISTER_TICKET=
 ENABLE_REGISTER_NAMECARD=
+SHOW_NAMECARD_GALLERY=
 SHOW_SPEAKER_DETAIL=
 SHOW_TIMETABLE=
 SHOW_EVENT=

apps/web/app/components/namecard/GalleryView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { AttendeeInfo } from '@vuejs-jp/model'
+
+const props = defineProps<{ attendees: AttendeeInfo }>()
+</script>
+
+<template>
+  <div class="gallery">
+    <div class="gallery-namecard-list">
+      <VFNamecard24
+        v-for="attendee in attendees.list"
+        :key="attendee.id"
+        :user="attendee"
+        class="namecard-item"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url('../../assets/base.css');
+@import url('../../assets/media.css');
+
+.gallery {
+  margin: 0 auto;
+  padding: 60px 0 120px;
+  width: 100%;
+  max-width: 1920px;
+  height: 620px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 40px;
+  position: relative;
+  overflow: hidden;
+
+  @media (--tablet) {
+    padding: 20px 0 60px;
+    max-width: 100%;
+  }
+
+  a {
+    border-radius: 12px;
+    overflow: hidden;
+    display: block;
+  }
+}
+
+.gallery-namecard-list {
+  display: flex;
+  gap: 40px;
+  position: absolute;
+  top: 0;
+  transform: translateX(100%);
+  animation: marquee 120s linear infinite;
+
+  @media (--mobile) {
+    gap: 20px;
+  }
+}
+
+.gallery-namecard-list:hover {
+  animation-play-state: paused;
+  cursor: default;
+}
+
+@keyframes marquee {
+  0% {
+    left: -100%;
+    -moz-transform: translateX(0);
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    left: 0;
+    -moz-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+}
+</style>

apps/web/app/layouts/namecard-base.vue

@@ -20,6 +20,7 @@ const { color } = useColor()
     </h1>
     <slot />
   </div>
+  <slot name="large-container" />
 </template>
 
 <style scoped>

apps/web/app/pages/namecard/index.vue

@@ -9,6 +9,13 @@ import { useAuthSession } from '~/composables/useAuthSession'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import MarkDownText from '~/components/MarkDownText.vue'
 import CreationProcess from '~/components/namecard/CreationProcess.vue'
+import { useFetch } from '#imports'
+import type { AttendeeInfo } from '@vuejs-jp/model'
+
+type Attendees = Record<'activatedAttendees', AttendeeInfo>
+
+const { data: attendees } = await useFetch('/api/attendees')
+const { activatedAttendees } = attendees.value as Attendees
 
 const config = useRuntimeConfig()
 
@@ -50,6 +57,9 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
         {{ t('namecard.dialog_message') }}
       </p>
     </VFIntegrationDialog>
+    <template v-if="config.public.showNamecardGallery" #large-container>
+      <NamecardGalleryView :attendees="activatedAttendees" />
+    </template>
     <div class="namecard-root">
       <img
         class="namecard-samples"

apps/web/app/server/api/attendees.get.ts

@@ -0,0 +1,20 @@
+import { defineEventHandler } from 'h3'
+import type { Attendee, AttendeeInfo } from '@vuejs-jp/model'
+import { serverSupabaseClient } from '#supabase/server'
+import { Database } from '~/types/supabase'
+
+export default defineEventHandler(async (event) => {
+  let attendees: Attendee[] = []
+
+  const client = await serverSupabaseClient<Database>(event)
+  const { data: _attendees } = await client.from('attendees').select().not('activated_at', 'is', null) as { data: Attendee[] }
+  attendees = _attendees
+
+  const activatedAttendees: AttendeeInfo = {
+    type: 'activated-attendee',
+    title: 'activated-attendee',
+    list: attendees,
+  }
+
+  return { activatedAttendees }
+})

apps/web/nuxt.config.ts

@@ -194,6 +194,7 @@ export default defineNuxtConfig({
       enableSwitchLocale: process.env.ENABLE_SWITCH_LOCALE,
       enableRegisterTicket: process.env.ENABLE_REGISTER_TICKET,
       enableRegisterNamecard: process.env.ENABLE_REGISTER_NAMECARD,
+      showNamecardGallery: process.env.SHOW_NAMECARD_GALLERY,
       showSpeakerDetail: process.env.SHOW_SPEAKER_DETAIL,
       showTimetable: process.env.SHOW_TIMETABLE,
       showEvent: process.env.SHOW_EVENT,

packages/model/lib/attendee.ts

@@ -33,3 +33,9 @@ export type Attendee = {
 }
 
 export type NamecardUser = Pick<Attendee, 'display_name' | 'avatar_url' | 'role' | 'receipt_id'>
+
+export type AttendeeInfo = {
+  type: 'activated-attendee'
+  title: string
+  list: Attendee[]
+}

turbo.json

@@ -26,6 +26,7 @@
         "ENABLE_OPERATE_ADMIN",
         "ENABLE_REGISTER_TICKET",
         "ENABLE_REGISTER_NAMECARD",
+        "SHOW_NAMECARD_GALLERY",
         "SHOW_SPEAKER_DETAIL",
         "SHOW_TIMETABLE",
         "SHOW_EVENT",