Merge pull request #15 from GoCon/feat/session-component

feat: add sessions page
GoCon · May 13, 2024 · 384da8a · 384da8a
2 parents 4211830 + ca21c97
commit 384da8a
Show file tree

Hide file tree

Showing 10 changed files with 910 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.5.10",
+    "@astropub/md": "^0.4.0",
     "@fontsource/poppins": "^5.0.12",
     "astro": "4.4.0",
     "sharp": "^0.33.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Header/index.astro b/src/components/Header/index.astro
@@ -22,7 +22,8 @@ import { concatWithBase } from "@utils/concatWithBase";
     <nav id="navigation" class="collapsed">
       <ul>
         <li><a href={concatWithBase()}>Home</a></li>
-        <li><a href="#sponsors">Sponsors</a></li>
+        <li><a href={concatWithBase("sessions")}>Sessions</a></li>
+        <li><a href={concatWithBase("#sponsors")}>Sponsors</a></li>
         <li>
           <a
             class="with-icon"
@@ -39,8 +40,6 @@ import { concatWithBase } from "@utils/concatWithBase";
             ></a
           >
         </li>
-        <!-- ページの準備ができ次第コメントアウトを外す -->
-        <!-- <li><a href="#">Sessions</a></li> -->
         <li>
           <a
             class="with-icon"

diff --git a/src/components/Session.astro b/src/components/Session.astro
@@ -0,0 +1,156 @@
+---
+import { Image } from "astro:assets";
+import { type CollectionEntry } from "astro:content";
+import { Markdown } from "@astropub/md";
+import {
+  getLevelLabel,
+  getTrackClass,
+  getTrackLabel,
+  getTypeLabel,
+} from "@utils/session";
+import { concatWithBase } from "@utils/concatWithBase";
+
+interface Props {
+  session: CollectionEntry<"sessions">["data"][number];
+}
+
+const { session } = Astro.props;
+---
+
+<div class="container">
+  <div class:list={["session", getTrackClass(session.track)]}>
+    <div class="info">
+      <p class="track">{getTrackLabel(session.track)}</p>
+      <p class="attr">{getLevelLabel(session.level)}</p>
+      <p class="attr">{getTypeLabel(session.type)}</p>
+    </div>
+    <div class="description">
+      <Markdown of={session.description} />
+    </div>
+    <div class="speaker">
+      <div class="speaker-upper">
+        <Image
+          src={session.speaker.avatar}
+          width="58"
+          height="58"
+          loading="lazy"
+          alt={session.speaker.name}
+          class="speaker-avatar"
+        />
+        <div class="speaker-name-and-company">
+          <p class="speaker-name">{session.speaker.name}</p>
+          <p class="speaker-company">{session.speaker.company}</p>
+        </div>
+        {
+          session.speaker.twitter && (
+            <div class="speaker-twitter">
+              <a href={session.speaker.twitter}>
+                <Image
+                  src={concatWithBase("ic_x.svg")}
+                  width={18}
+                  height={18}
+                  alt="X/Twitter"
+                />
+              </a>
+            </div>
+          )
+        }
+      </div>
+      <p class="speaker-lower">{session.speaker.bio}</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .session {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .track {
+    display: inline-block;
+    font-size: 16px;
+    line-height: 1;
+    text-align: center;
+    color: #222;
+    padding: 4px 12px;
+
+    .session.room-1 & {
+      background-color: #6fd4c2;
+    }
+
+    .session.room-2 & {
+      background-color: #6fd4c2;
+    }
+  }
+
+  .attr {
+    font-size: 12px;
+    color: #666;
+    flex-shrink: 0;
+  }
+
+  .description {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    ol,
+    ul {
+      padding-left: 1em;
+    }
+
+    #footnote-label {
+      display: none;
+    }
+  }
+
+  .speaker {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 32px;
+    border-radius: 12px;
+    background-color: #ebf5fa;
+  }
+
+  .speaker-upper {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  .speaker-avatar {
+    object-fit: contain;
+    border-radius: 100%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .speaker-name-and-company {
+    flex-grow: 1;
+  }
+
+  .speaker-name {
+    font-weight: bold;
+  }
+
+  .speaker-company {
+    font-size: 14px;
+    color: #666;
+  }
+
+  .speaker-twitter {
+    align-self: flex-start;
+  }
+</style>
diff --git a/src/components/Sessions.astro b/src/components/Sessions.astro
@@ -0,0 +1,185 @@
+---
+import { Image } from "astro:assets";
+import { getEntry } from "astro:content";
+import { concatWithBase } from "@utils/concatWithBase";
+import {
+  getLevelLabel,
+  getTrackClass,
+  getTrackLabel,
+  getTypeLabel,
+} from "@utils/session";
+
+const sessions = await getEntry("sessions", "data");
+---
+
+<div class="container">
+  <div class="sessions">
+    {
+      sessions.data.map((session) => (
+        <a
+          href={concatWithBase(`sessions/${session.id}`)}
+          class:list={["session", getTrackClass(session.track)]}
+        >
+          <p class="title">{session.title}</p>
+          <p>
+            <span class="room">{getTrackLabel(session.track)}</span>
+          </p>
+          <p class="description">{session.description}</p>
+          <div class="info">
+            <div class="speaker">
+              <Image
+                src={session.speaker.avatar}
+                width="40"
+                height="40"
+                loading="lazy"
+                alt={session.speaker.name}
+                class="speaker-avatar"
+              />
+              <div>
+                <p class="speaker-name">{session.speaker.name}</p>
+                <p class="speaker-company">{session.speaker.company}</p>
+              </div>
+            </div>
+            <ul class="attrs">
+              <li class="attr">{getLevelLabel(session.level)}</li>
+              <li class="attr">{getTypeLabel(session.type)}</li>
+            </ul>
+          </div>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .sessions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  .session {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 342px;
+    text-decoration: none;
+    color: #222;
+    padding: 16px;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #fff;
+    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    @media screen and (max-width: 1185px) {
+      width: calc(50% - 16px);
+    }
+
+    @media screen and (max-width: 768px) {
+      width: auto;
+    }
+  }
+
+  .title {
+    --max-lines: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--max-lines);
+    overflow: hidden;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1.25;
+    min-height: calc(var(--max-lines) * 1.25em);
+
+    @media screen and (max-width: 768px) {
+      --max-lines: 1;
+    }
+  }
+
+  .room {
+    display: inline-block;
+    font-size: 16px;
+    line-height: 1;
+    text-align: center;
+    color: #222;
+    padding: 4px 12px;
+
+    .session.room-1 & {
+      background-color: #6fd4c2;
+    }
+
+    .session.room-2 & {
+      background-color: #6fd4c2;
+    }
+  }
+
+  .description {
+    --max-lines: 7;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--max-lines);
+    overflow: hidden;
+    font-size: 16px;
+    line-height: 1.25;
+    min-height: calc(var(--max-lines) * 1.25em);
+
+    @media screen and (max-width: 768px) {
+      --max-lines: 5;
+    }
+  }
+
+  .info {
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+  }
+
+  .speaker {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  .speaker-avatar {
+    object-fit: contain;
+    border-radius: 100%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .speaker-name {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    font-weight: bold;
+  }
+
+  .speaker-company {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .attrs {
+    flex-shrink: 0;
+    list-style: none;
+  }
+
+  .attr {
+    font-size: 12px;
+    color: #666;
+    flex-shrink: 0;
+  }
+</style>