feat: add content and style (撰寫參與指南內容)

app/assets/css/main.css

@@ -0,0 +1,14 @@
+.prose :where(:not(pre) > code) {
+  color: #1f2937;
+  font-size: 0.875em;
+  font-weight: 600;
+  padding: 0.125rem 0.35rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  background: #f3f4f6;
+}
+
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+  content: '';
+}

app/components/content/Danger.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <aside class="text-sm text-red-950 my-4 px-4 py-3 border-l-4 border-red-500 rounded bg-red-50">
+    <p
+      v-if="title"
+      class="font-bold my-0"
+    >
+      {{ title }}
+    </p>
+    <div class="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <slot />
+    </div>
+  </aside>
+</template>

app/components/content/Info.vue

@@ -4,13 +4,16 @@ defineProps<{
 }>()
 </script>
 
-<!-- TODO use theme colors -->
-
 <template>
-  <div class="text-sm my-4 px-4 pb-2 pt-4 rounded-md bg-gray-200">
-    <p class="font-bold my-0">
+  <aside class="text-sm text-primary-800 my-4 px-4 py-3 border-l-4 border-primary-400 rounded bg-primary-50">
+    <p
+      v-if="title"
+      class="font-bold my-0"
+    >
       {{ title }}
     </p>
-    <slot />
-  </div>
+    <div class="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <slot />
+    </div>
+  </aside>
 </template>

app/components/content/Tip.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <aside class="text-sm text-green-900 my-4 px-4 py-3 border-l-4 border-cp-green rounded bg-green-50">
+    <p
+      v-if="title"
+      class="font-bold my-0"
+    >
+      {{ title }}
+    </p>
+    <div class="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <slot />
+    </div>
+  </aside>
+</template>

app/components/content/Warning.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <aside class="text-sm text-yellow-950 my-4 px-4 py-3 border-l-4 border-yellow-500 rounded bg-yellow-50">
+    <p
+      v-if="title"
+      class="font-bold my-0"
+    >
+      {{ title }}
+    </p>
+    <div class="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <slot />
+    </div>
+  </aside>
+</template>

app/components/shared/CpDropdown.vue

@@ -33,7 +33,7 @@ onClickOutside(containerRef, () => {
       />
     </button>
     <ul
-      v-if="open"
+      v-show="open"
       class="mt-1 py-1 border border-gray-200 rounded-md bg-white min-w-32 shadow-md left-0 absolute z-dropdown"
     >
       <li

app/components/shared/CpNavbar.vue

@@ -7,6 +7,7 @@ const switchLocalePath = useSwitchLocalePath()
 type MenuItem = {
   key: string
   external?: boolean
+  newPage?: boolean
 } & (
   | { path: string, children?: never } |
   { path?: never, children: { label: string, path: string }[] }
@@ -20,9 +21,18 @@ const menu = computed<MenuItem[]>(() => [
   {
     key: 'participate',
     children: [
+      { label: t('menu.participate_index'), path: '/participate' },
+      { label: t('menu.participate_first_time'), path: '/participate/first-time' },
+      { label: t('menu.participate_activity'), path: '/participate/activity' },
+      { label: t('menu.participate_speaker_participation'), path: '/participate/speaker-participation' },
+      { label: t('menu.participate_welcome_party'), path: '/participate/welcome-party' },
+      { label: t('menu.participate_oversea'), path: '/participate/oversea' },
+      { label: t('menu.participate_open_source_community'), path: '/participate/open-source-community' },
+      { label: t('menu.participate_sponsor_partner'), path: '/participate/sponsor-partner' },
       { label: t('menu.invitation_letter_guide'), path: '/participate/invitation-letter-guide' },
     ],
   },
+  { key: 'bof', path: 'https://docs.google.com/document/d/1ZerJ-5QYcEJ5guhxtK-SBW2BA6RMHtVJnqNIWxRCz18/edit?tab=t.0', external: true, newPage: true },
   { key: 'blog', path: 'https://blog.coscup.org/', external: true },
   { key: 'coc', path: `https://hackmd.io/@coscup/cococo-${locale.value}`, external: true },
 ])
@@ -61,6 +71,8 @@ function closeMenu() {
           v-if="!item.children"
           class="flex gap-1 whitespace-nowrap items-center"
           :external="item.external"
+          :rel="item.newPage ? 'noopener noreferrer' : undefined"
+          :target="item.newPage ? '_blank' : undefined"
           :to="item.path"
         >
           {{ t(`menu.${item.key}`) }}
@@ -125,6 +137,8 @@ function closeMenu() {
             <NuxtLinkLocale
               class="px-4 py-3 flex gap-1 items-center hover:bg-gray-50"
               :external="item.external"
+              :rel="item.newPage ? 'noopener noreferrer' : undefined"
+              :target="item.newPage ? '_blank' : undefined"
               :to="item.path"
               @click="closeMenu"
             >
@@ -189,8 +203,17 @@ en:
     about: "About"
     transportation: "Transportation"
     participate: "Participate"
+    participate_index: "Participate Guide"
+    participate_first_time: "First Timer"
+    participate_activity: "Activity"
+    participate_speaker_participation: "Speaker Participation"
+    participate_welcome_party: "Welcome Party"
+    participate_oversea: "For Overseas Visitors"
+    participate_open_source_community: "Open Source Communities"
+    participate_sponsor_partner: "Sponsorship Partners"
     invitation_letter_guide: "Invitation Letter Guide"
     sponsors: "Sponsors"
+    bof: "Fringe Events / BoF"
     blog: "Blog"
     coc: "CoC"
 zh:
@@ -201,7 +224,16 @@ zh:
     about: "關於我們"
     transportation: "交通"
     participate: "參與指南"
+    participate_index: "參與指南"
+    participate_first_time: "第一次參與"
+    participate_activity: "活動參與"
+    participate_speaker_participation: "講者參與"
+    participate_welcome_party: "前夜派對"
+    participate_oversea: "海外參與者"
+    participate_open_source_community: "開源社群、攤位及議程軌"
+    participate_sponsor_partner: "贊助夥伴"
     sponsors: "贊助夥伴"
+    bof: "周邊活動 / BoF"
     invitation_letter_guide: "邀請函申請指南"
     blog: "部落格"
     coc: "社群守則"

content/en/participate/activity.md

@@ -0,0 +1,180 @@
+---
+title: "Activity"
+description: "Plan your COSCUP days: venue navigation, schedule, session formats, attendee services, and surveys."
+---
+
+# Activity
+
+This page summarizes information from a participant's point of view, including attendees, speakers, general community partners, overseas communities, temporary activity organizers, and anyone who wants to meet more open source communities In-Person. If this is your first time participating, we recommend reading [First Timer](/en/participate/first-time) first, then returning to this page to plan transportation, Sessions, meals, and onsite activities.
+
+## Getting There
+
+COSCUP's main venue is at National Taiwan University of Science and Technology (Taiwan Tech / NTUST). Recommended routes:
+
+1. MRT: Take the Green Line to Gongguan Station, then walk or ride a YouBike through the NTU campus to Taiwan Tech.
+2. Bus: Get off at "NTU Cancer Center (Keelung Rd.)" and walk to the venue.
+3. Walking: You can walk from Gongguan Station, but summer weather is hot. Leave enough time and stay hydrated.
+4. Driving: The campus parking lot is operated by an external company. For detailed parking fees, search for "CITY PARKING at National Taiwan University of Science and Technology (NTUST Station)".
+
+## Venue and Floors
+
+COSCUP is usually spread across multiple buildings. Using the 2025 layout as an example, RB hosted the opening and closing ceremonies as well as Sessions. TR 2F to 5F and AU included Session Tracks, Community Booths, attendee services, and rest areas.
+
+You can move between the three venue areas through the basketball court, tennis court, and campus paths. If you get lost, follow the onsite signs or ask staff for help.
+
+:::info{title="Conference Information"}
+
+- Venue map information: <span style="color:#000;background:#ff0;">[Coming soon. Stay tuned 07/25]</span>
+
+:::
+
+## Schedule
+
+COSCUP Sessions and open source topics are hosted by open source communities, so more than 20 Session Tracks may run at the same time. We recommend browsing the schedule before the event, bookmarking Sessions you want to attend, and accepting that you will not be able to join everything.
+
+WiFi is not provided onsite. If you need internet access to look up information, sync notes, show projects, or join Remote discussions, please prepare your own mobile network.
+
+You can plan in the following way:
+
+- Choose 2 to 3 Sessions each day that you definitely want to attend.
+- Keep some open time each day for Community Booths or rest.
+- If a room is full or your interests change, switch to another Session Track, BoF, or Hacking Corner.
+- If you have language needs, pay attention to Session language, slide language, and whether translation support is available.
+
+## Prime Session
+
+After the opening on the morning of the first day, the program continues with Prime Session. This is usually an important moment for the conference, often followed by several Prime Session talks. If you want to understand this year's themes, direction, and community perspectives, we recommend adding this block to your schedule.
+
+<figure style="margin:16px 0;width:100%;max-width:none;">
+  <iframe title="Closing Prime Session speaker on stage" src="https://www.flickr.com/photos/coscup/54866092769/player/" width="100%" height="458" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+</figure>
+
+<p style="margin-top:0;text-align:center;font-size:0.85em;color:#666;">The closing Prime Session speaker in 2025: Yukihiro Matsumoto, creator of Ruby</p>
+
+## BoF
+
+BoF stands for Birds of a Feather. It is an informal discussion gathering where participants with similar interests, technologies, community experiences, or project needs can meet and talk. It does not require a full presentation. It can be used to exchange experience, find collaborators, discuss governance topics, or hold a temporary meetup.
+
+<figure style="margin:16px 0;width:100%;max-width:none;">
+  <iframe title="BoF discussion gathering" src="https://www.flickr.com/photos/coscup/54866086543/player/" width="100%" height="458" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+</figure>
+
+You are welcome to reserve or check current BoF and Hacking Corner activities in [this document](https://docs.google.com/document/d/1ZerJ-5QYcEJ5guhxtK-SBW2BA6RMHtVJnqNIWxRCz18/edit?tab=t.0).
+
+Examples of BoFs you can start:
+
+- Open source project user exchange.
+- Practical discussion for a specific language, framework, or tool.
+- Exchange between overseas communities and Taiwan communities.
+- Sticker, souvenir, or PGP key-signing exchange.
+- Sharing experience in community governance, event organization, or contributor development.
+
+## Hacking Corner
+
+Hacking Corner is an open onsite space where attendees can spontaneously gather for co-creation, development, technical exchange, or documentation work. In most cases, no prior application is needed. You can use it if space is available.
+
+<figure style="margin:16px 0;width:100%;max-width:none;">
+  <iframe title="Hacking Corner collaboration space" src="https://www.flickr.com/photos/coscup/54865942518/player/" width="100%" height="458" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+</figure>
+
+You are welcome to reserve or check current BoF and Hacking Corner activities in [this document](https://docs.google.com/document/d/1ZerJ-5QYcEJ5guhxtK-SBW2BA6RMHtVJnqNIWxRCz18/edit?tab=t.0).
+
+Please note:
+
+- Multiple discussions may happen at the same time. Please respect other users.
+- It is suitable for collaborative programming, documentation fixes, extended Session discussion, or opening source code and studying it together.
+- If you want more people to join, use the onsite digital bulletin board or tag `#COSCUP` and `#COSCUP2026` on social media.
+
+## Lightning Talk
+
+Lightning Talk is usually a short-format sharing session. In 3 minutes, you can introduce a small topic, project, community activity, research, advocacy issue, or even a newly started idea. It is a bit like a small performance: fast-paced, high-pressure, and often full of laughter and applause. Many attendees look forward to it every year as a closing highlight.
+
+If you are interested, you can watch this sample video first: [https://www.youtube.com/watch?v=jpXGf476Upg](https://www.youtube.com/watch?v=jpXGf476Upg)
+
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:16px 0;width:100%;">
+  <figure style="margin:0;width:100%;max-width:none;">
+    <iframe title="Lightning Talk speaker presenting" src="https://www.flickr.com/photos/coscup/54047601765/player/" width="100%" height="375" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+  </figure>
+  <figure style="margin:0;width:100%;max-width:none;">
+    <iframe title="Lightning Talk audience view" src="https://www.flickr.com/photos/coscup/54047429329/player/" width="100%" height="375" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+  </figure>
+</div>
+
+## Attendee Services
+
+Besides Sessions, COSCUP provides a variety of attendee services so participants can rest, recover, and care for companions during a dense event.
+
+Examples include:
+
+- Welcome Party: an informal gathering on the evening before the event.
+- Pause Room: a space combining rest, massage station, childcare service, and related arrangements.
+- Massage Station: a place for attendees to relax while supporting a partner charity.
+- Childcare Service: helps participants attending with children arrange their event time.
+- Nitro coffee Booth or beverage service.
+- Mind-body balance talks, an inclusive participation guide, and emergency response resources.
+- Professional portrait photography: a photo studio built by the Documentation Team for personal portraits.
+
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:16px 0;width:100%;">
+  <figure style="margin:0;width:100%;max-width:none;">
+    <iframe title="Attendee service area" src="https://www.flickr.com/photos/coscup/54711253529/player/" width="100%" height="375" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+  </figure>
+  <figure style="margin:0;width:100%;max-width:none;">
+    <iframe title="Attendee portrait photography service" src="https://www.flickr.com/photos/coscup/54865693871/player/" width="100%" height="375" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+  </figure>
+</div>
+
+## Social Stickers
+
+COSCUP prepares social stickers onsite so participants can express their interaction status, language abilities, or preferred conversation topics in a relaxed way. Pick stickers that fit your situation and place them on your badge, clothing, or somewhere visible so new conversations can start more easily.
+
+<span style="color:#000;background:#ff0;">Social sticker / sticker exchange table location: Coming soon. Stay tuned (07/25).</span>
+
+<figure style="margin:16px 0;width:100%;max-width:none;">
+  <iframe title="Social stickers at COSCUP" src="https://www.flickr.com/photos/coscup/54047128426/player/" width="100%" height="459" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+</figure>
+
+## Translation Tools
+
+Many languages appear at COSCUP. Besides Chinese and English, Sessions or conversations may also use other languages. To make onsite content easier to understand, we are preparing translation tools this year. Please scan the QR Code at the front of the classroom to view real-time translation.
+
+## Food Information
+
+During the event, you can refer to campus restaurants, nearby restaurants, and delivery platforms. COSCUP 2025 collected information about restaurants open in the Taiwan Tech student cafeteria. For 2026, this can be updated according to actual store operation.
+
+- Student cafeteria reference: [https://github.com/COSCUP/NTUST-Foodlist](https://github.com/COSCUP/NTUST-Foodlist)
+- Overseas visitors can also refer to the Taiwan Tourism Administration: [https://www.taiwan.net.tw/](https://www.taiwan.net.tw/)
+
+## OPass and Onsite Interaction
+
+[OPass](https://opass.app) can be used to view Sessions, bookmark Sessions, and join onsite activities. If there are Booth Reward Activities, Community Booth stamp collection, attendee surveys, or souvenir redemption, please follow the conference announcements.
+
+Download OPass: https://opass.app/
+
+## Event Highlights
+
+If you want to see past COSCUP photos or videos, refer to:
+
+- [COSCUP Flickr](https://www.flickr.com/photos/coscup/)
+- [COSCUP YouTube](https://www.youtube.com/c/coscup)
+
+## COSCUP Official Souvenir Booth
+
+<span style="color:#000;background:#ff0;">Souvenir booth and items will be announced soon (07/25).</span>
+
+<figure style="margin:16px 0;width:100%;max-width:none;">
+  <iframe title="COSCUP official souvenir booth" src="https://www.flickr.com/photos/coscup/54865856825/player/" width="100%" height="458" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+</figure>
+
+## One Day Volunteers and Individual Contributions
+
+During the two conference days, COSCUP may provide a "One Day Volunteers" mechanism in addition to the core preparation team. If you want to learn how the COSCUP team organizes the annual conference and provides conference services to communities and attendees, watch for the One Day Volunteers task list.
+
+COSCUP is fully staff-organized, does not sell tickets, and is open to everyone for free. If you want to support the event's continuation, you can also watch for individual sponsorship, staff recruitment, and participation opportunities for next year.
+
+<figure style="margin:16px 0;width:100%;max-width:none;">
+  <iframe title="One Day Volunteers and attendees" src="https://www.flickr.com/photos/coscup/54864852852/player/" width="100%" height="387" frameborder="0" allowfullscreen style="border:0;display:block;width:100%;max-width:none;"></iframe>
+</figure>
+
+## Attendee Survey
+
+<span style="color:#000;background:#ff0;">The attendee survey form will be published on the first day of the event (08/08).</span>