OU Techsの 紹介ページを追加

package.json

@@ -25,6 +25,7 @@
     "@astrojs/mdx": "^4.0.2",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@pagefind/default-ui": "^1.2.0",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "^5.0.5",

src/components/layout/nav/Navigation.astro

@@ -13,6 +13,7 @@ import DrWani from './DrWani.astro'
     <NavigationListItem to="/join/">Join OUCC!</NavigationListItem>
     <NavigationListItem to="/activity/">活動紹介</NavigationListItem>
     <NavigationListItem to="/workshop/">講習会</NavigationListItem>
+    <NavigationListItem to="/ou-techs/">OU Techs</NavigationListItem>
     <NavigationListItem to="/faq/">FAQ</NavigationListItem>
     <NavigationListItem to="/contact/">お問い合わせ</NavigationListItem>
     <NavigationListItem to="/blog/">ブログ</NavigationListItem>

src/components/ou-techs/CircleList.astro

@@ -0,0 +1,92 @@
+---
+import type { ComponentProps } from 'astro/types'
+import CircleListItem from './CircleListItem.astro'
+import OuccLogo from '@/assets/oucc.svg'
+import ToolBoxLogo from '@/assets/tool-box-logo.jpg'
+import RainbouLogo from '@/assets/rainbou-logo.png'
+import SairibasuLogo from '@/assets/sairibasu-logo.png'
+import GdscOsakaLogo from '@/assets/gdsc-osaka-logo.jpg'
+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>[] = [
+  {
+    name: 'OUCC',
+    description:
+      'OUCC（大阪大学コンピュータクラブ）は、コンピュータを使ったものづくりに関心を持つ学生が交流するサークルです。最近はゲーム制作やアプリ制作を行っています。',
+    logo: OuccLogo,
+    homepage: 'https://oucc.org',
+    github: 'https://github.com/OUCC',
+    x: 'https://x.com/OUCC',
+  },
+  {
+    name: 'ToolBox',
+    description:
+      '「自由なモノづくり」をテーマにモットーに個性的な作品を製作している、大阪大学公認団体です。電子工作、プログラミングなどをメインに，ハードウェアからソフトウェアまで幅広く自由に活動しています。',
+    logo: ToolBoxLogo,
+    homepage: 'https://outoolbox.wixsite.com/tool',
+    x: 'https://x.com/OuToolbox',
+  },
+  {
+    name: 'RAINBOU',
+    description:
+      'RAINBOUは、大阪大学の競技プログラミング部で、ICPCなど国内外のコンテストで活躍する学生が集まるサークルです。部内では定期的な勉強会やイベントを通じて技術を磨き、初心者から経験者までが互いに切磎琢磨できる環境が整っています。',
+    logo: RainbouLogo,
+    homepage: 'https://rainbou.org',
+    github: 'https://github.com/rainbou-kpr',
+    x: 'https://x.com/rainbou_kpr',
+  },
+  {
+    name: '再履バス同好会 技術部',
+    description:
+      '再履バス同好会とは、再履バス (阪大のキャンパス間連絡バス) を愛でながら様々な企画・提案を行っている大阪大学非公認団体です。技術部では条項人数計測装置の開発などを行っています。',
+    logo: SairibasuLogo,
+    homepage: 'https://sairibus.com/',
+    x: 'https://x.com/sairi_doukoukai',
+    instagram: 'https://www.instagram.com/sairi_doukoukai/',
+  },
+  {
+    name: 'GDG on Campus Osaka',
+    description:
+      'Google Developersのサポートのもと活動をしている大阪大学支部です。現在GDSCは世界の2100以上の大学に展開しています。',
+    logo: GdscOsakaLogo,
+    homepage: 'https://gdsc-osaka.jp/',
+    github: 'https://github.com/gdsc-osaka',
+    x: 'https://x.com/GDSC_osaka',
+    instagram: 'https://www.instagram.com/gdgoc_osaka/',
+  },
+  {
+    name: 'GGC',
+    description:
+      '大阪大学の箕面キャンパスと豊中キャンパスを拠点に活動している言語サークルです。名前のGGCは、語学・言語学サークル（Gogaku Gengogaku Circle）の略です。現在約90名のメンバーが所属しています。',
+    logo: GgcLogo,
+    homepage: 'https://oulcggc.org/',
+    github: 'https://github.com/oulcggc',
+    x: 'https://x.com/oulcggc',
+    instagram: 'https://www.instagram.com/oulcggc/',
+  },
+  {
+    name: 'Wani Hackase',
+    description:
+      'Wani Hackaseは、大阪大学のCTFサークルで、初心者～中級者向けのJeopardy形式CTFや勉強会を通じてサイバーセキュリティ技術を磨く活動を行っています。新入生も年間を通して歓迎されており、興味があれば気軽に参加してスキルアップを目指せる環境が整っています。',
+    logo: WanihackaseLogo,
+    homepage: 'https://wanictf.org/about/',
+    github: 'https://github.com/wani-hackase',
+    x: 'https://x.com/wanictf',
+  },
+  {
+    name: 'Robohan',
+    description:
+      'Robohanは、大阪大学公認のロボット製作団体で、NHK学生ロボコンへの出場や特別賞の受賞などの実績を持ち、優勝を目指して日々ロボット製作に取り組んでいます。新入生も参加できる環境が整っており、実践的な技術やチームワークを学びながら、自らの創造性を活かせる絶好の機会です。',
+    logo: RobohanLogo,
+    homepage: 'https://www.robohan.net/',
+    github: 'https://github.com/RobohanOU',
+    x: 'https://x.com/Robohan_',
+  },
+]
+---
+
+<ul class="grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-5">
+  {circles.map((c) => <CircleListItem {...c} />)}
+</ul>

src/components/ou-techs/CircleListItem.astro

@@ -0,0 +1,109 @@
+---
+import type { ImageMetadata } from 'astro'
+import HouseIcon from '@fortawesome/fontawesome-free/svgs/solid/house.svg'
+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'
+
+type SvgComponent = typeof import('*.svg').default
+
+interface Props {
+  logo: ImageMetadata | SvgComponent
+  name: string
+  description: string
+  homepage: string
+  github?: string
+  x?: string
+  instagram?: string
+}
+
+const {
+  logo: CircleLogo,
+  name,
+  description,
+  homepage,
+  github,
+  x,
+  instagram,
+} = Astro.props
+---
+
+<li
+  class="row-span-2 grid grid-rows-subgrid gap-2 rounded-xl border border-slate-300 bg-white p-5 drop-shadow"
+>
+  <div class="flex items-center gap-x-2">
+    {
+      typeof CircleLogo === 'function' ? (
+        <CircleLogo
+          class="m-1"
+          height={48}
+          width={(CircleLogo.width * 48) / CircleLogo.height}
+        />
+      ) : (
+        <Image
+          class="m-1"
+          src={CircleLogo}
+          height={48}
+          width={(CircleLogo.width * 48) / CircleLogo.height}
+          alt={`${name}のアイコン`}
+        />
+      )
+    }
+    <div>
+      <h2 class="text-xl font-bold">{name}</h2>
+      <div class="flex gap-1 align-middle">
+        {
+          (
+            <a
+              href={homepage}
+              target="_blank"
+              class="aspect-square rounded-full p-1 hover:bg-gray-200/100"
+              title={`${name}公式サイト`}
+            >
+              <HouseIcon size={18} />
+            </a>
+          )
+        }
+        {
+          github && (
+            <a
+              href={github}
+              target="_blank"
+              class="aspect-square rounded-full p-1 hover:bg-gray-200/100"
+              title={`${name}のGitHub Organization`}
+            >
+              <GithubIcon size={18} />
+            </a>
+          )
+        }
+        {
+          x && (
+            <a
+              href={x}
+              target="_blank"
+              class="aspect-square rounded-full p-1 hover:bg-gray-200/100"
+              title={`${name}のX`}
+            >
+              <XtwitterIcon size={18} />
+            </a>
+          )
+        }
+        {
+          instagram && (
+            <a
+              href={instagram}
+              target="_blank"
+              class="aspect-square rounded-full p-1 hover:bg-gray-200/100"
+              title={`${name}のInstagram`}
+            >
+              <InstagramIcon size={18} />
+            </a>
+          )
+        }
+      </div>
+    </div>
+  </div>
+
+  <p class="text-justify-ja">{description}</p>
+</li>

src/components/ou-techs/OutechsCirclesSection.astro

@@ -0,0 +1,12 @@
+---
+import Section from '../common/Section.astro'
+import CircleList from './CircleList.astro'
+---
+
+<Section background="white">
+  <Fragment slot="title">参加団体</Fragment>
+  <p class="text-justify-ja pb-2">
+    OU Techsに参加している団体について紹介します。
+  </p>
+  <CircleList />
+</Section>

src/components/ou-techs/OutechsIntroSection.astro

@@ -0,0 +1,7 @@
+---
+import Section from '../common/Section.astro'
+---
+
+<Section background="secondary"
+  >OU&nbsp;Techsは阪大の技術系サークルのつながりを深めるため設立されました。勉強資料の共有や交流イベントを行っています。</Section
+>

src/pages/ou-techs.astro

@@ -0,0 +1,18 @@
+---
+import Hero from '@/components/common/Hero.astro'
+import OutechsCirclesSection from '@/components/ou-techs/OutechsCirclesSection.astro'
+import OutechsIntroSection from '@/components/ou-techs/OutechsIntroSection.astro'
+import Layout from '@/layouts/Layout.astro'
+---
+
+<Layout
+  title="OU Techs"
+  description="阪大の技術系サークルでイベントを開催する団体です"
+  showJoinLink
+>
+  <Hero title="OU Techs" copy="OU Techs とは？" compact />
+  <main>
+    <OutechsIntroSection />
+    <OutechsCirclesSection />
+  </main>
+</Layout>