Skip to content

Commit

Permalink
WIP:주요 연사 컴포넌트 작업
Browse files Browse the repository at this point in the history
  • Loading branch information
sukso96100 committed Feb 11, 2024
1 parent 11d6e9b commit 234c85b
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 106 deletions.
51 changes: 51 additions & 0 deletions src/components/FeaturedSpeakers.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
import { config } from "../config";
import { Strip, Col, Row } from "@canonical/react-components";
import eventLogo from "@assets/logo.svg";
import { useTranslations, getLangFromUrl } from "@i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const indicoResponse = await fetch(config.featuredSpeakers.indicoExportUrl);
const indicoResJson = await indicoResponse.json();
const sessions = indicoResJson.results
? indicoResJson.results[0].contributions
: null;
const featuredSessions = sessions.filter((session: any) =>
config.featuredSpeakers.contributionIds.includes(session.friendly_id),
);
---

<Strip bordered>
<h4>{t("featured.title")}</h4>
<Row>
{
featuredSessions.map((session: any) => (
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={eventLogo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<a href={session.url}>
<h4 class="p-media-object__title">
{session.speakers[0].fullName}
</h4>
</a>
<p class="p-media-object__content">
{session.title}
</p>
<ul class="p-media-object__meta-list" />
</div>
</div>
</Col>
))
}
</Row>
<Row>
<Col size={12}>
<a href="" class="p-button">{t("featured.more")}</a>
</Col>
</Row>
</Strip>
4 changes: 4 additions & 0 deletions src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export const config = {
rssFeedUrl: "https://blog.ubucon.asia/tags/uca24/index.xml",
viewMoreUrl: "https://blog.ubucon.asia/tags/uca24"
},
featuredSpeakers: {
indicoExportUrl: "https://events.canonical.com/export/event/32.json?detail=contributions&occ=yes&pretty=yes",
contributionIds: [22, 5, 19, 16, 8, 4]
},
cityBanner: {
title: "cityBanner.title",
description: 'cityBanner.description',
Expand Down
4 changes: 4 additions & 0 deletions src/i18n/ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export const languages = {
'footer.otherevents': 'Other events of Ubuntu Korea',
'cityBanner.title': 'Let\'s meet at Microsoft Korea near Gwanghwamoon Gate!',
'cityBanner.description': 'Learn how to get to the venue, Available facilities and our event floor plan',
'featured.title': 'Featured Speakers',
'featured.more': 'See all sessions',
'nav.venue': 'Venue & Safety',
'nav.about': 'About',
'nav.sponsors': 'Sponsors/Patrons',
Expand All @@ -31,6 +33,8 @@ export const languages = {
'footer.otherevents': '우분투한국커뮤니티의 다른 행사',
'cityBanner.title': '광화문 근처에 위치한 한국마이크로소프트에서 만나요!',
'cityBanner.description': '행사장 오시는 길, 내부 이용 가능 시설 및 행사 당일 행사장 구성 등에 대해 알아보세요',
'featured.title': '주요 연사',
'featured.more': '모든 세션 보기',
'nav.venue': '행사장 & 안전정보',
'nav.about': '소개',
'nav.sponsors': '후원사/개인후원',
Expand Down
108 changes: 2 additions & 106 deletions src/pages/[lang]/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import Shell from "@layouts/Shell.astro";
import BlogFeed from "@components/BlogFeed.astro";
import Sponsors from "@components/Sponsors.astro";
import FeaturedSpeakers from "@components/FeaturedSpeakers.astro";
import { config } from "../../config";
import { Strip, Col, Row, Card, Button } from "@canonical/react-components";
import uca24logo from "@assets/logo.svg";
Expand Down Expand Up @@ -49,112 +50,7 @@ const t = useTranslations(lang);
</Row>
</Strip>
<BlogFeed />
<Strip bordered>
<h4>Featured speakers</h4>
<Row>
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={uca24logo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<h2 class="p-media-object__title">John Doe</h2>
<p class="p-media-object__content">
Lorem ipsum dolor sit amet
</p>
<ul class="p-media-object__meta-list"></ul>
</div>
</div>
</Col>
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={uca24logo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<h2 class="p-media-object__title">John Doe</h2>
<p class="p-media-object__content">
Lorem ipsum dolor sit amet
</p>
<ul class="p-media-object__meta-list"></ul>
</div>
</div>
</Col>
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={uca24logo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<h2 class="p-media-object__title">John Doe</h2>
<p class="p-media-object__content">
Lorem ipsum dolor sit amet
</p>
<ul class="p-media-object__meta-list"></ul>
</div>
</div>
</Col>
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={uca24logo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<h2 class="p-media-object__title">John Doe</h2>
<p class="p-media-object__content">
Lorem ipsum dolor sit amet
</p>
<ul class="p-media-object__meta-list"></ul>
</div>
</div>
</Col>
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={uca24logo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<h2 class="p-media-object__title">John Doe</h2>
<p class="p-media-object__content">
Lorem ipsum dolor sit amet
</p>
<ul class="p-media-object__meta-list"></ul>
</div>
</div>
</Col>
<Col size={4} medium={3}>
<div class="p-media-object--large">
<img
src={uca24logo.src}
class="p-media-object__image"
alt=""
/>
<div class="p-media-object__details">
<h2 class="p-media-object__title">John Doe</h2>
<p class="p-media-object__content">
Lorem ipsum dolor sit amet
</p>
<ul class="p-media-object__meta-list"></ul>
</div>
</div>
</Col>
</Row>
<Row>
<Col size={12}>
<a href="" class="p-button">View more speakers</a>
</Col>
</Row>
</Strip>
<FeaturedSpeakers />
<section
class="p-strip--image is-light"
style={{
Expand Down

0 comments on commit 234c85b

Please sign in to comment.