Merge pull request #383 from vuejs-jp/enhance/archive-slide

[登壇スライドあれば、その動線を追加] update archive

Author: jiyuujin

apps/web/app/components/time-table/TimeTableCard.vue

@@ -89,6 +89,16 @@ const { range } = useRange()
         >
           {{ currentLocale === 'en' ? session.name_en : session.name_ja }}
         </p>
+        <div class="session-archives">
+          <VFIconButton
+            v-if="session.session_doc_url"
+            :href="session.session_doc_url"
+            target-blank
+            color="vue-blue"
+            name="slide"
+            class="session-archive-slide"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -196,4 +206,15 @@ const { range } = useRange()
   font-weight: 700;
   line-height: 1.5;
 }
+.session-archives {
+  display: flex;
+  gap: var(calc(var(--unit) * 1.5));
+}
+.session-archive-slide {
+  margin-top: 5px;
+}
+.session-archive-slide:hover {
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
 </style>

apps/web/app/components/time-table/TimeTableRow.vue

@@ -84,6 +84,16 @@ const { range } = useRange()
         >
           {{ currentLocale === 'en' ? session.name_en : session.name_ja }}
         </p>
+        <div class="session-archives">
+          <VFIconButton
+            v-if="session.session_doc_url"
+            :href="session.session_doc_url"
+            target-blank
+            color="vue-blue"
+            name="slide"
+            class="session-archive-slide"
+          />
+        </div>
       </div>
     </div>
   </VFSessionContent>
@@ -182,4 +192,15 @@ const { range } = useRange()
   font-size: 18px;
   font-weight: 700;
 }
+.session-archives {
+  display: flex;
+  gap: var(calc(var(--unit) * 1.5));
+}
+.session-archive-slide {
+  margin-top: 5px;
+}
+.session-archive-slide:hover {
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
 </style>

apps/web/app/lang/en.json

@@ -25,7 +25,8 @@
     "end_hour": "12",
     "end_minute": "00",
     "end_ampm": "pm",
-    "lt_description": "A 5-minute lightning talk! As a special feature of this event, we will be distributing glow sticks to all participants. When you feel a \"thumbs up!\" moment, resonate with the content, or gain new insights during the LT, please wave your glow stick in response! Let's all create an exciting atmosphere for the LT together!"
+    "lt_description": "A 5-minute lightning talk! As a special feature of this event, we will be distributing glow sticks to all participants. When you feel a \"thumbs up!\" moment, resonate with the content, or gain new insights during the LT, please wave your glow stick in response! Let's all create an exciting atmosphere for the LT together!",
+    "archive_slide": "Archive Slide:"
   },
   "event": {
     "title": "Event",

apps/web/app/lang/ja.json

@@ -32,7 +32,8 @@
     "end_date": "7.21",
     "end_hour": "24",
     "end_minute": "00",
-    "lt_description": "制限時間5分のライトニングトーク！　今回の特別企画として、参加者全員にサイリウムをお配りします。LTの内容に「いいね！」と思ったときや、共感したり、新たな気づきを得たりしたときに、サイリウムを振ってリアクションをお願いします！　みなさんでLTを盛り上げていきましょう！"
+    "lt_description": "制限時間5分のライトニングトーク！　今回の特別企画として、参加者全員にサイリウムをお配りします。LTの内容に「いいね！」と思ったときや、共感したり、新たな気づきを得たりしたときに、サイリウムを振ってリアクションをお願いします！　みなさんでLTを盛り上げていきましょう！",
+    "archive_slide": "登壇スライド:"
   },
   "volunteer": {
     "title": "当日ボランティア募集",

apps/web/app/pages/sessions/[id]/index.vue

@@ -65,6 +65,18 @@ useHead({
         {{ currentLocale === 'ja' ? (speakerData[0].session_description_ja ?? 'TBD') : (speakerData[0].session_description_en ?? 'TBD') }}
       </div>
 
+      <div v-if="speakerData[0].session_doc_url" class="detailbody-archives">
+        <span>{{ $t('speaker.archive_slide') }}</span>
+        <VFTextLink
+          :href="speakerData[0].session_doc_url"
+          target="_blank"
+          color="vue-blue"
+          class="detailbody-archive-slide"
+        >
+          {{ currentLocale === 'ja' ? speakerData[0].session_doc_title_ja : speakerData[0].session_doc_title_en }}
+        </VFTextLink>
+      </div>
+
       <div class="detailbody-persons">
         <VFSpeaker
           :image="speakerData[0].image_url"
@@ -199,6 +211,31 @@ useHead({
     transition: 0.2s;
   }
 
+  .detailbody-archives {
+    margin-top: calc(var(--unit) * 5);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: calc(var(--unit) * 1.5);
+    @media (--tablet) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+    }
+  }
+
+  .detailbody-archives span {
+    color: var(--color-vue-blue);
+  }
+
+  .detailbody-archive-slide {
+    --body-font-size: 1.125rem;
+
+    font-size: var(--body-font-size);
+    line-height: 1.8;
+    white-space: pre-wrap;
+  }
+
   .detailbody-persons {
     font-size: 18px;
     display: grid;

packages/model/lib/icon.ts

@@ -15,3 +15,4 @@ export type IconName =
   | 'external'
   | 'alert'
   | 'translation'
+  | 'slide'

packages/ui/assets/icon/slide_icon.svg

@@ -61,6 +61,9 @@ const svgComponent = match<IconName>(props.name)
   .with('translation', () =>
     defineAsyncComponent(() => import('../../assets/icon/translation.svg?component')),
   )
+  .with('slide', () =>
+    defineAsyncComponent(() => import('../../assets/icon/slide_icon.svg?component')),
+  )
   .exhaustive()
 
 const { color: fillColor } = useColor()