Merge pull request #186 from OUCC/add_OUTechsInfo_to_freshman_lesson

講習会ページにOUTechsへの参加リンクの追加と、講習会主催団体情報の追加

Author: Rui-32

src/@types/ou-techs-members.ts

@@ -0,0 +1,12 @@
+/**
+ * @description OUTechsに参加している団体を表す型
+ */
+export type OUTechsCirclesName =
+  | 'OUCC'
+  | 'ToolBox'
+  | 'RAINBOU'
+  | '再履バス同好会 技術部'
+  | 'GDG on Campus Osaka'
+  | 'GGC'
+  | 'Wani Hackase'
+  | 'Robohan'

src/components/common/button/OUTechsDiscordJoinLink.astro

@@ -0,0 +1,15 @@
+---
+import Icon from '@/components/common/Icon.astro'
+import LinkButton from './LinkButton.astro'
+---
+
+<LinkButton
+  href="https://discord.gg/gmhPgAGAGx"
+  target="_blank"
+  variant="discord"
+>
+  <span class="flex items-center gap-2.5">
+    <Icon name="discord" alt="Discord" class="w-7" />
+    <span>講習会に参加</span>
+  </span>
+</LinkButton>

src/components/ou-techs/CircleList.astro

@@ -10,7 +10,7 @@ import GgcLogo from '@/assets/ggc-logo.png'
 import WanihackaseLogo from '@/assets/wanihackase-logo.png'
 import RobohanLogo from '@/assets/robohan-logo.png'
 
-const circles: ComponentProps<typeof CircleListItem>[] = [
+export const circles: ComponentProps<typeof CircleListItem>[] = [
   {
     name: 'OUCC',
     description:

src/components/ou-techs/CircleListItem.astro

@@ -5,12 +5,13 @@ import GithubIcon from '@fortawesome/fontawesome-free/svgs/brands/github.svg'
 import XtwitterIcon from '@fortawesome/fontawesome-free/svgs/brands/x-twitter.svg'
 import InstagramIcon from '@fortawesome/fontawesome-free/svgs/brands/instagram.svg'
 import { Image } from 'astro:assets'
+import type { OUTechsCirclesName } from '@/@types/ou-techs-members'
 
 type SvgComponent = typeof import('*.svg').default
 
 interface Props {
   logo: ImageMetadata | SvgComponent
-  name: string
+  name: OUTechsCirclesName
   description: string
   homepage: string
   github?: string

src/components/workshop/Workshop2025Section.astro

@@ -1,14 +1,12 @@
 ---
 import Section from '@/components/common/Section.astro'
 import WorkshopCard from './WorkshopCard.astro'
+import type { ComponentProps } from 'astro/types'
 
-export interface Item {
+export interface Item
+  extends Omit<ComponentProps<typeof WorkshopCard>, 'date'> {
   date: Date
-  title: string
-  description: string
-  place?: string
 }
-
 export function date(
   month: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12,
   date: number,
@@ -67,34 +65,39 @@ export const items: Item[] = [
 export const items2: Item[] = [
   {
     date: date(4, 17),
-    title: 'Python (1日目)',
+    title: 'Python',
     place: 'C301',
+    circleNames: ['Wani Hackase'],
     description:
       'Pythonの基礎を学びます。PythonはAIやデータ分析に使用されます。',
   },
   {
     date: date(4, 18),
-    title: 'HTML, CSS (1日目)',
+    title: 'HTML, CSS',
     place: 'C105',
+    circleNames: ['再履バス同好会 技術部'],
     description:
       'HTML, CSSの基礎を学びます。HTML, CSSはwebページの作成に使用されます。',
   },
   {
     date: date(4, 19),
-    title: 'ハードウェア入門 (1日目)',
+    title: 'ハードウェア入門',
     place: 'C104',
+    circleNames: ['ToolBox', 'Robohan'],
     description:
       'ハードウェアの基礎を学びます。電子回路、センサ、 メカ機構などを扱います。',
   },
   {
     date: date(4, 22),
-    title: 'TypeScript (1日目)',
+    title: 'TypeScript',
+    circleNames: ['GGC'],
     description:
       'TypeScriptの基礎を学びます。TypeScriptはwebサイトの作成に使用されます。',
   },
   {
     date: date(4, 23),
-    title: 'C/C++ (1日目)',
+    title: 'C/C++',
+    circleNames: ['RAINBOU'],
     description:
       'C/C++の基礎を学びます。C/C++は組み込み用途やゲーム開発に使用されます。',
   },
@@ -128,10 +131,6 @@ const dateFormat = new Intl.DateTimeFormat('ja-JP', {
 <Section background="secondary">
   <Fragment slot="title">2025年度の他団体の講習会</Fragment>
   <div class="flex flex-col gap-5">
-    <p>
-      2025年度の他団体による講習会について情報をまとめています。開始時刻や開催場所などの詳細や他の講習会については随時更新します。是非お気軽にご参加ください！
-    </p>
-    <p>各回1～3時間程度の予定となっています。途中退室も可能です。</p>
     <ul class="grid grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] gap-5">
       {
         items2.map(({ date, ...item }) => (

src/components/workshop/WorkshopCard.astro

@@ -1,19 +1,46 @@
 ---
 import Icon from '@/components/common/Icon.astro'
+import type { OUTechsCirclesName } from '@/@types/ou-techs-members'
+import { circles } from '../ou-techs/CircleList.astro'
 interface Props {
   title: string
   date: string
   description: string
   place?: string
+  circleNames?: OUTechsCirclesName[]
 }
 
-const { title, date, description, place } = Astro.props
+const { title, date, description, place, circleNames } = Astro.props
+const clubInfos = circles.filter((c) => circleNames?.includes(c.name))
 ---
 
 <li
   class="flex flex-1 flex-col gap-2 rounded-xl border border-slate-300 bg-white p-5 drop-shadow"
 >
   <h2 class="text-xl font-bold">{title}</h2>
+  <p class="flex items-center gap-2 text-slate-600">
+    {
+      circleNames && clubInfos ? (
+        <span class="flex items-center gap-1">
+          <span>
+            by
+            {clubInfos
+              .map((c) => (
+                <a
+                  href={c.homepage}
+                  target="_blank"
+                  class="aspect-square rounded-full p-1 hover:bg-gray-200/100"
+                  title={`${c.name}公式サイト`}
+                >
+                  {c.name}
+                </a>
+              ))
+              .reduce((prev, curr) => [prev, ' & ', curr])}
+          </span>
+        </span>
+      ) : null
+    }
+  </p>
   <p class="flex items-center gap-2 text-slate-600">
     <Icon name="clock" alt="開催日時" class="w-4" />
     <span>{date}</span>

src/components/workshop/WorkshopSection.astro

@@ -1,11 +1,19 @@
 ---
 import Section from '@/components/common/Section.astro'
+import OUTechsDiscordJoinLink from '@/components/common/button/OUTechsDiscordJoinLink.astro'
 ---
 
 <Section background="white">
   <div class="flex flex-col gap-5">
     <p>
       新歓イベントの一環として部員や外部講師による講習会を開催しています。様々な技術について未経験者向けに解説しながら実際に使えるようになることを目指します。講習会内で必要なソフトウェアのインストールから説明しますので、事前準備は必要ありません。
     </p>
+    <div class="flex justify-center">
+      <OUTechsDiscordJoinLink />
+    </div>
+    <p>
+      こちらから講習会の資料や連絡を受け取れます。
+      どなたでも無料で参加できます。是非お気軽にご参加ください！
+    </p>
   </div>
 </Section>