Skip to content

Commit 384da8a

Browse files
sago35sago35
authored
Merge pull request #15 from GoCon/feat/session-component
feat: add sessions page
2 parents 4211830 + ca21c97 commit 384da8a

File tree

10 files changed

+910
-5
lines changed

10 files changed

+910
-5
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@astrojs/check": "^0.5.10",
24+
"@astropub/md": "^0.4.0",
2425
"@fontsource/poppins": "^5.0.12",
2526
"astro": "4.4.0",
2627
"sharp": "^0.33.3",

‎pnpm-lock.yaml

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Header/index.astro

+2-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import { concatWithBase } from "@utils/concatWithBase";
2222
<nav id="navigation" class="collapsed">
2323
<ul>
2424
<li><a href={concatWithBase()}>Home</a></li>
25-
<li><a href="#sponsors">Sponsors</a></li>
25+
<li><a href={concatWithBase("sessions")}>Sessions</a></li>
26+
<li><a href={concatWithBase("#sponsors")}>Sponsors</a></li>
2627
<li>
2728
<a
2829
class="with-icon"
@@ -39,8 +40,6 @@ import { concatWithBase } from "@utils/concatWithBase";
3940
></a
4041
>
4142
</li>
42-
<!-- ページの準備ができ次第コメントアウトを外す -->
43-
<!-- <li><a href="#">Sessions</a></li> -->
4443
<li>
4544
<a
4645
class="with-icon"

‎src/components/Session.astro

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import { type CollectionEntry } from "astro:content";
4+
import { Markdown } from "@astropub/md";
5+
import {
6+
getLevelLabel,
7+
getTrackClass,
8+
getTrackLabel,
9+
getTypeLabel,
10+
} from "@utils/session";
11+
import { concatWithBase } from "@utils/concatWithBase";
12+
13+
interface Props {
14+
session: CollectionEntry<"sessions">["data"][number];
15+
}
16+
17+
const { session } = Astro.props;
18+
---
19+
20+
<div class="container">
21+
<div class:list={["session", getTrackClass(session.track)]}>
22+
<div class="info">
23+
<p class="track">{getTrackLabel(session.track)}</p>
24+
<p class="attr">{getLevelLabel(session.level)}</p>
25+
<p class="attr">{getTypeLabel(session.type)}</p>
26+
</div>
27+
<div class="description">
28+
<Markdown of={session.description} />
29+
</div>
30+
<div class="speaker">
31+
<div class="speaker-upper">
32+
<Image
33+
src={session.speaker.avatar}
34+
width="58"
35+
height="58"
36+
loading="lazy"
37+
alt={session.speaker.name}
38+
class="speaker-avatar"
39+
/>
40+
<div class="speaker-name-and-company">
41+
<p class="speaker-name">{session.speaker.name}</p>
42+
<p class="speaker-company">{session.speaker.company}</p>
43+
</div>
44+
{
45+
session.speaker.twitter && (
46+
<div class="speaker-twitter">
47+
<a href={session.speaker.twitter}>
48+
<Image
49+
src={concatWithBase("ic_x.svg")}
50+
width={18}
51+
height={18}
52+
alt="X/Twitter"
53+
/>
54+
</a>
55+
</div>
56+
)
57+
}
58+
</div>
59+
<p class="speaker-lower">{session.speaker.bio}</p>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<style>
65+
.session {
66+
display: flex;
67+
flex-direction: column;
68+
gap: 32px;
69+
max-width: 1000px;
70+
margin: 0 auto;
71+
}
72+
73+
.info {
74+
display: flex;
75+
align-items: center;
76+
gap: 8px;
77+
}
78+
79+
.track {
80+
display: inline-block;
81+
font-size: 16px;
82+
line-height: 1;
83+
text-align: center;
84+
color: #222;
85+
padding: 4px 12px;
86+
87+
.session.room-1 & {
88+
background-color: #6fd4c2;
89+
}
90+
91+
.session.room-2 & {
92+
background-color: #6fd4c2;
93+
}
94+
}
95+
96+
.attr {
97+
font-size: 12px;
98+
color: #666;
99+
flex-shrink: 0;
100+
}
101+
102+
.description {
103+
display: flex;
104+
flex-direction: column;
105+
gap: 8px;
106+
107+
ol,
108+
ul {
109+
padding-left: 1em;
110+
}
111+
112+
#footnote-label {
113+
display: none;
114+
}
115+
}
116+
117+
.speaker {
118+
display: flex;
119+
flex-direction: column;
120+
gap: 8px;
121+
padding: 32px;
122+
border-radius: 12px;
123+
background-color: #ebf5fa;
124+
}
125+
126+
.speaker-upper {
127+
display: flex;
128+
gap: 8px;
129+
align-items: center;
130+
flex-grow: 1;
131+
}
132+
133+
.speaker-avatar {
134+
object-fit: contain;
135+
border-radius: 100%;
136+
overflow: hidden;
137+
flex-shrink: 0;
138+
}
139+
140+
.speaker-name-and-company {
141+
flex-grow: 1;
142+
}
143+
144+
.speaker-name {
145+
font-weight: bold;
146+
}
147+
148+
.speaker-company {
149+
font-size: 14px;
150+
color: #666;
151+
}
152+
153+
.speaker-twitter {
154+
align-self: flex-start;
155+
}
156+
</style>

‎src/components/Sessions.astro

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import { getEntry } from "astro:content";
4+
import { concatWithBase } from "@utils/concatWithBase";
5+
import {
6+
getLevelLabel,
7+
getTrackClass,
8+
getTrackLabel,
9+
getTypeLabel,
10+
} from "@utils/session";
11+
12+
const sessions = await getEntry("sessions", "data");
13+
---
14+
15+
<div class="container">
16+
<div class="sessions">
17+
{
18+
sessions.data.map((session) => (
19+
<a
20+
href={concatWithBase(`sessions/${session.id}`)}
21+
class:list={["session", getTrackClass(session.track)]}
22+
>
23+
<p class="title">{session.title}</p>
24+
<p>
25+
<span class="room">{getTrackLabel(session.track)}</span>
26+
</p>
27+
<p class="description">{session.description}</p>
28+
<div class="info">
29+
<div class="speaker">
30+
<Image
31+
src={session.speaker.avatar}
32+
width="40"
33+
height="40"
34+
loading="lazy"
35+
alt={session.speaker.name}
36+
class="speaker-avatar"
37+
/>
38+
<div>
39+
<p class="speaker-name">{session.speaker.name}</p>
40+
<p class="speaker-company">{session.speaker.company}</p>
41+
</div>
42+
</div>
43+
<ul class="attrs">
44+
<li class="attr">{getLevelLabel(session.level)}</li>
45+
<li class="attr">{getTypeLabel(session.type)}</li>
46+
</ul>
47+
</div>
48+
</a>
49+
))
50+
}
51+
</div>
52+
</div>
53+
54+
<style>
55+
.sessions {
56+
display: flex;
57+
flex-wrap: wrap;
58+
justify-content: center;
59+
gap: 10px;
60+
max-width: 1400px;
61+
margin: 0 auto;
62+
}
63+
64+
.session {
65+
display: flex;
66+
flex-direction: column;
67+
gap: 8px;
68+
width: 342px;
69+
text-decoration: none;
70+
color: #222;
71+
padding: 16px;
72+
border-radius: 8px;
73+
overflow: hidden;
74+
background-color: #fff;
75+
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
76+
77+
&:hover {
78+
opacity: 0.7;
79+
}
80+
81+
@media screen and (max-width: 1185px) {
82+
width: calc(50% - 16px);
83+
}
84+
85+
@media screen and (max-width: 768px) {
86+
width: auto;
87+
}
88+
}
89+
90+
.title {
91+
--max-lines: 2;
92+
display: -webkit-box;
93+
-webkit-box-orient: vertical;
94+
-webkit-line-clamp: var(--max-lines);
95+
overflow: hidden;
96+
font-size: 28px;
97+
font-weight: bold;
98+
line-height: 1.25;
99+
min-height: calc(var(--max-lines) * 1.25em);
100+
101+
@media screen and (max-width: 768px) {
102+
--max-lines: 1;
103+
}
104+
}
105+
106+
.room {
107+
display: inline-block;
108+
font-size: 16px;
109+
line-height: 1;
110+
text-align: center;
111+
color: #222;
112+
padding: 4px 12px;
113+
114+
.session.room-1 & {
115+
background-color: #6fd4c2;
116+
}
117+
118+
.session.room-2 & {
119+
background-color: #6fd4c2;
120+
}
121+
}
122+
123+
.description {
124+
--max-lines: 7;
125+
display: -webkit-box;
126+
-webkit-box-orient: vertical;
127+
-webkit-line-clamp: var(--max-lines);
128+
overflow: hidden;
129+
font-size: 16px;
130+
line-height: 1.25;
131+
min-height: calc(var(--max-lines) * 1.25em);
132+
133+
@media screen and (max-width: 768px) {
134+
--max-lines: 5;
135+
}
136+
}
137+
138+
.info {
139+
display: flex;
140+
gap: 8px;
141+
align-items: flex-end;
142+
}
143+
144+
.speaker {
145+
display: flex;
146+
gap: 8px;
147+
align-items: center;
148+
flex-grow: 1;
149+
}
150+
151+
.speaker-avatar {
152+
object-fit: contain;
153+
border-radius: 100%;
154+
overflow: hidden;
155+
flex-shrink: 0;
156+
}
157+
158+
.speaker-name {
159+
display: -webkit-box;
160+
-webkit-box-orient: vertical;
161+
-webkit-line-clamp: 1;
162+
overflow: hidden;
163+
font-weight: bold;
164+
}
165+
166+
.speaker-company {
167+
display: -webkit-box;
168+
-webkit-box-orient: vertical;
169+
-webkit-line-clamp: 1;
170+
overflow: hidden;
171+
font-size: 14px;
172+
color: #666;
173+
}
174+
175+
.attrs {
176+
flex-shrink: 0;
177+
list-style: none;
178+
}
179+
180+
.attr {
181+
font-size: 12px;
182+
color: #666;
183+
flex-shrink: 0;
184+
}
185+
</style>

0 commit comments

Comments
 (0)