Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ng/new ogimage conf 2025 #1773

Closed
wants to merge 4 commits into from
Closed

Ng/new ogimage conf 2025 #1773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df285ad
feat(conf): update venue details and add promotional video
nicollguarnizo Nov 14, 2024
05338aa
fix(events): update conference link to point to 2024
nicollguarnizo Nov 14, 2024
57d9232
fix(events): update event slug to point to 2024
nicollguarnizo Nov 14, 2024
e2ebda6
fix(conf): update OG image URL for 2025 conference
nicollguarnizo Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added apps/epic-web/public/assets/conf/hilton-hotel.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/epic-web/public/assets/conf/map-venue-2025.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/epic-web/src/lib/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export const getEventConf = async (
slug: string = 'conf',
): Promise<EventConf | null> => {
const eventConf = await sanityClient.fetch(
groq`*[_type == "event" && slug.current == "conf"][0] {
groq`*[_type == "event" && slug.current == "conf/2024"][0] {
_id,
_type,
title,
Expand Down
134 changes: 127 additions & 7 deletions apps/epic-web/src/pages/conf/2025/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {DocumentIcon, StarIcon} from '@heroicons/react/outline'
import {type Talk} from 'lib/talks'
import {useMeasure} from 'react-use'
import {cn} from '@skillrecordings/ui/utils/cn'
import MuxPlayer from '@mux/mux-player-react'

export const IS_PAST_CONF_25 = false
const CONF_25_TITO_URL = 'https://ti.to/epicweb/epicweb-conf-2025'
Expand Down Expand Up @@ -78,7 +79,7 @@ const ConfPage: React.FC = () => {
description:
'The Full Stack Web Development Conference of Epic proportions.',
ogImage: {
url: 'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1728407319/epic-web/epic-web-conf-2025-v1.png',
url: 'https://res.cloudinary.com/epic-web/image/upload/v1731634005/ogImage-2025.jpg',
},
}}
>
Expand All @@ -87,7 +88,7 @@ const ConfPage: React.FC = () => {
startDate="2025-04-10T08:00:00-07:00"
endDate="2025-04-11T17:00:00-07:00"
location={{
name: 'Prospector Square Theatre',
name: 'Hilton Salt Lake City Center',
address: {
streetAddress: '2175 Sidewinder Dr',
addressLocality: 'Park City',
Expand Down Expand Up @@ -208,8 +209,19 @@ const Body = () => {
)
}

const promoVideo = 'deoAaA7OUZDPrLjXc013MQaTcTwC9kAY3Pmf2JmF01TOs'

return (
<div className="mx-auto flex w-full max-w-screen-lg flex-col gap-16 sm:gap-32">
<div className="col-span-4 flex w-full items-center justify-center p-5 sm:p-8 md:pl-0">
<MuxPlayer
playbackId={promoVideo}
className="w-full rounded shadow-xl"
accentColor="#3b82f6"
poster={`https://image.mux.com/${promoVideo}/thumbnail.jpg?time=3`}
/>
</div>
{!IS_PAST_CONF_25 && <Location />}
<Section
position={0}
title="Become a Speaker"
Expand Down Expand Up @@ -287,19 +299,19 @@ const Header = () => {
<div className="font-mono text-sm uppercase tracking-wide text-[#93A1D7]">
Conference Day
</div>
<div className="text-lg text-[#D6DEFF]">Feb/March 2025</div>
<div className="text-lg text-[#D6DEFF]">March 26, 2025</div>
</div>
{/* <div>
<div>
<div className="font-mono text-sm uppercase tracking-wide text-[#93A1D7]">
Workshop Day
</div>
<div className="text-lg text-[#D6DEFF]">Feb/Mar 2025</div>
</div> */}
<div className="text-lg text-[#D6DEFF]">March 25, 2025</div>
</div>
<div>
<div className="font-mono text-sm uppercase tracking-wide text-[#93A1D7]">
Location
</div>
<div className="text-lg text-[#D6DEFF]">Utah</div>
<div className="text-lg text-[#D6DEFF]">Salt Lake, Utah</div>
</div>
</div>
<Button
Expand Down Expand Up @@ -523,3 +535,111 @@ const EarlyBirdMarquee = () => {
</Link>
)
}

const Location = () => {
return (
<section className="mx-auto flex w-full max-w-screen-lg flex-col items-center justify-center px-5 pb-16 pt-10 sm:pt-16">
<div className="flex flex-col items-center rounded border border-[#313646] bg-[#1E212C] lg:flex-row">
<div className="flex max-w-md flex-col gap-5 py-6 pl-6 pr-6 sm:py-8 sm:pl-10 sm:pr-0 lg:py-14 lg:pl-16 [&_p]:text-lg [&_p]:leading-relaxed [&_p]:text-[#D6DEFF]">
<svg
className=""
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z"
stroke="#3FACFF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z"
stroke="#3FACFF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>
The event is set in the heart of{' '}
<strong>
<Link
href="https://maps.app.goo.gl/dpCVp2TtT9iNf6FKA"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Salt Lake City, Utah
</Link>
</strong>
{
', and the free livestream will be available to reach even the most distant Epic web developers.'
}
</p>
<p>
You'll want to be here in Salt Lake City to rub shoulders with some
of the best developers working on the web, just like you.
</p>
</div>
<div className="relative flex flex-col items-center justify-center">
<div className="relative">
<div
className="absolute left-0 top-0 hidden h-full w-56 bg-gradient-to-r from-[#1E212C] to-transparent lg:block"
aria-hidden="true"
/>
<div
className="absolute left-0 top-0 block h-40 w-full bg-gradient-to-b from-[#1E212C] to-transparent lg:hidden"
aria-hidden="true"
/>
<Image
width={554}
height={424}
src={require('../../../../public/assets/conf/map-venue-2025.png')}
loading="eager"
alt="Map showing Hilton Salt Lake City Center location"
quality={100}
/>
</div>
<Link
href="https://maps.app.goo.gl/dpCVp2TtT9iNf6FKA"
target="_blank"
onClick={() => {
track('clicked venue', {
title: 'conf2025',
type: 'venue',
location: 'map',
})
}}
rel="noopener noreferrer"
className="group absolute -bottom-16 flex scale-[0.8] items-center justify-center rounded bg-white text-gray-900 before:absolute before:-top-1.5 before:-ml-7 before:h-3 before:w-3 before:rotate-45 before:bg-white before:content-[''] sm:-bottom-10 sm:scale-100"
>
<div className="overflow-hidden rounded-l">
<Image
src={require('../../../../public/assets/conf/hilton-hotel.png')}
alt="Hilton Salt Lake City Center"
width={152}
height={233}
loading="eager"
className="transition duration-300 ease-in-out group-hover:scale-105"
/>
</div>
<div className="px-4 py-2 pr-5 sm:px-5 sm:py-5 sm:pr-7">
<h3 className="text-lg font-semibold leading-tight sm:text-xl sm:leading-tight">
Hilton Salt Lake City Center
</h3>
<div className="mt-3 inline-flex text-sm hover:underline">
255 S W Temple St
<br />
Salt Lake City, UT 84101
</div>
</div>
</Link>
</div>
</div>
</section>
)
}
2 changes: 1 addition & 1 deletion apps/epic-web/src/pages/events/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ const Events: React.FC<{events: Event[]; confEvent: Event | null}> = ({
<article>
<h2 className="py-4 text-3xl font-semibold">Conferences</h2>
<Link
href={`/conf`}
href={`/conf/2024`}
passHref
className="group relative flex h-full w-full flex-col overflow-hidden transition hover:bg-gray-100/80 dark:hover:bg-gray-900/40"
>
Expand Down
Loading