From 55ad5e69d0b92b1499f91fc27b9856a8067d01d8 Mon Sep 17 00:00:00 2001 From: Clark Sell Date: Wed, 16 Mar 2022 11:42:45 -0500 Subject: [PATCH] feat: new hero layout --- src/_components/blog/latest.svelte | 8 +- .../events/thatconference/Upcoming.svelte | 52 ++++++++ .../_components/EventCard.svelte | 52 ++++++++ .../thatconference/_components/Layout.svelte | 42 +++++++ src/_components/newsletter/Wide.svelte | 3 +- src/_components/social/SocialLink.svelte | 15 --- .../api.that.tech/community/queries.js | 53 +++++++- src/_dataSources/local/socials.js | 42 +++++++ src/_elements/links/Action.svelte | 8 +- src/routes/_root/components/cta.svelte | 4 +- src/routes/_root/components/events.svelte | 23 ++-- src/routes/_root/components/index.js | 1 + src/routes/_root/components/newMembers.svelte | 2 +- src/routes/_root/components/stats.svelte | 21 ++-- .../_root/components/testimonials.svelte | 4 +- .../_root/components/thatConferences.svelte | 16 --- src/routes/_root/components/upNext.svelte | 4 +- src/routes/index.svelte | 54 ++++----- .../link-tree/_components/Social.svelte | 59 +++++++++ src/routes/link-tree/index.svelte | 113 ++++++++++++++++++ src/routes/that-conference.svelte | 72 ++--------- static/images/keynote-highlight.jpg | Bin 0 -> 144558 bytes static/images/play.svg | 14 +++ 23 files changed, 498 insertions(+), 164 deletions(-) create mode 100644 src/_components/events/thatconference/Upcoming.svelte create mode 100644 src/_components/events/thatconference/_components/EventCard.svelte create mode 100644 src/_components/events/thatconference/_components/Layout.svelte create mode 100644 src/_dataSources/local/socials.js delete mode 100644 src/routes/_root/components/thatConferences.svelte create mode 100644 src/routes/link-tree/_components/Social.svelte create mode 100644 src/routes/link-tree/index.svelte create mode 100644 static/images/keynote-highlight.jpg create mode 100644 static/images/play.svg diff --git a/src/_components/blog/latest.svelte b/src/_components/blog/latest.svelte index 77599f39e..84d4d6f49 100644 --- a/src/_components/blog/latest.svelte +++ b/src/_components/blog/latest.svelte @@ -10,10 +10,10 @@
-

- THAT BLOG -

-

+

THAT BLOG

+

The Latest Announcements, Updates and Words

diff --git a/src/_components/events/thatconference/Upcoming.svelte b/src/_components/events/thatconference/Upcoming.svelte new file mode 100644 index 000000000..cd29f3b3c --- /dev/null +++ b/src/_components/events/thatconference/Upcoming.svelte @@ -0,0 +1,52 @@ + + +

+
+ +
+ +
+
+ +
+ {#each events as event} +
+ +
+ {/each} +
+ +
+
+
+ + + diff --git a/src/_components/events/thatconference/_components/EventCard.svelte b/src/_components/events/thatconference/_components/EventCard.svelte new file mode 100644 index 000000000..870621299 --- /dev/null +++ b/src/_components/events/thatconference/_components/EventCard.svelte @@ -0,0 +1,52 @@ + + +
+
+
+
+
+
+

+ {`${event.venues[0].city}, ${event.venues[0].state}`} +

+

Conference

+
+ +
+ {dayjs(event.startDate).format('MMMM D, YYYY')} - {dayjs(event.endDate).format( + 'MMMM D, YYYY' + )} +
+ +
+
+
+ Keynotes, Workshops, Sessions, Open Spaces, a pig roast, and even a Waterpark party. + Hurry camp starts soon! +
+ +
+ Tickets are on sale. +

+ + See the full schedule → + +

+
+
+ +
+ Conference Details and Tickets +
+
+
+
+
+
diff --git a/src/_components/events/thatconference/_components/Layout.svelte b/src/_components/events/thatconference/_components/Layout.svelte new file mode 100644 index 000000000..a05f575f7 --- /dev/null +++ b/src/_components/events/thatconference/_components/Layout.svelte @@ -0,0 +1,42 @@ +
+
+

+ By Developers For Developers +

+
+

+ In-Person THAT Conferences +

+
+
+ +
+ +
+ +
+
+ +
+
+
+ THAT Robot Play Button +
+
+

How Fun Is THAT?

+

Watch our Highlight Reel

+
+
+
+ +
+
+
diff --git a/src/_components/newsletter/Wide.svelte b/src/_components/newsletter/Wide.svelte index b5bc8de8b..917205c9e 100644 --- a/src/_components/newsletter/Wide.svelte +++ b/src/_components/newsletter/Wide.svelte @@ -21,8 +21,7 @@ >

Stay in the know diff --git a/src/_components/social/SocialLink.svelte b/src/_components/social/SocialLink.svelte index 0a62e0169..07af8e566 100644 --- a/src/_components/social/SocialLink.svelte +++ b/src/_components/social/SocialLink.svelte @@ -9,9 +9,6 @@ github, youtubePlay, twitch, - dribbble, - medium, - stackOverflow, slack } from '$components/svelte-awesome-icons'; @@ -55,18 +52,6 @@ socialIcon = twitch; ariaLabel = 'Twitch'; break; - case 'DRIBBBLE': - socialIcon = dribbble; - ariaLabel = 'Dribble'; - break; - case 'MEDIUM': - socialIcon = medium; - ariaLabel = 'Medium'; - break; - case 'STACK_OVERFLOW': - socialIcon = stackOverflow; - ariaLabel = 'Stack Overflow'; - break; case 'SLACK': socialIcon = slack; ariaLabel = 'Slack'; diff --git a/src/_dataSources/api.that.tech/community/queries.js b/src/_dataSources/api.that.tech/community/queries.js index f0286d0eb..6bf381486 100644 --- a/src/_dataSources/api.that.tech/community/queries.js +++ b/src/_dataSources/api.that.tech/community/queries.js @@ -104,6 +104,47 @@ export const QUERY_NEXT_COMMUNITY_ACTIVITIES = ` } `; +export const QUERY_ACTIVE_THAT_EVENTS = ` + query QUERY_ACTIVE_THAT_EVENTS { + communities { + community(findBy: {slug: "THAT"}) { + get { + events (filter: ACTIVE) { + id + name + description + type + isActive + slug + logo + startDate + endDate + year + isVotingOpen + voteOpenDate + voteCloseDate + isCallForSpeakersOpen + isCallForOnSpeakersOpen + callForSpeakersOpenDate + callForSpeakersCloseDate + callForOnSpeakersOpenDate + callForOnSpeakersCloseDate + ticketsOnSaleFrom + ticketsOnSaleUntil + venues { + name + address + city + state + zip + } + } + } + } + } + } +`; + export default (fetch) => { const client = fetch ? gFetch(fetch) : gFetch(); @@ -165,12 +206,22 @@ export default (fetch) => { }); }; + const queryActiveThatEvents = () => { + const variables = {}; + return client.query({ query: QUERY_ACTIVE_THAT_EVENTS, variables }).then(({ data, errors }) => { + if (errors) log({ errors, tag: 'QUERY_ACTIVE_THAT_EVENTS' }); + + return data.communities?.community?.get?.events; + }); + }; + return { queryAllCommunities, queryNextAllCommunities, queryCommunityBySlug, queryCommunityActivities, queryNextCommunityActivities, - queryCommunityFollowers + queryCommunityFollowers, + queryActiveThatEvents }; }; diff --git a/src/_dataSources/local/socials.js b/src/_dataSources/local/socials.js new file mode 100644 index 000000000..4ec4be4d5 --- /dev/null +++ b/src/_dataSources/local/socials.js @@ -0,0 +1,42 @@ +export default [ + { + href: 'https://github.com/thatconference', + network: 'GITHUB', + ariaLabel: 'Github Repo' + }, + { + href: 'https://twitter.com/thatconference', + network: 'TWITTER', + ariaLabel: 'Twitter' + }, + { + href: 'https://facebook.com/thatconference', + network: 'FACEBOOK', + ariaLabel: 'Facebook' + }, + { + href: 'https://instagram.com/thatconference', + network: 'INSTAGRAM', + ariaLabel: 'Instagram' + }, + { + href: 'https://linkedin.com/company/that-conference', + network: 'LINKEDIN', + ariaLabel: 'LinkedIn' + }, + { + href: 'https://youtube.com/c/thatconference', + network: 'YOUTUBE', + ariaLabel: 'YouTube' + }, + { + href: 'https://that.live', + network: 'TWITCH', + ariaLabel: 'Twitch' + }, + { + href: '/signup/', + network: 'SLACK', + ariaLabel: 'Join Us on Slack' + } +]; diff --git a/src/_elements/links/Action.svelte b/src/_elements/links/Action.svelte index be9720fc4..52eccb265 100644 --- a/src/_elements/links/Action.svelte +++ b/src/_elements/links/Action.svelte @@ -8,10 +8,10 @@ {reload} {href} class="cursor-pointer rounded-md border-2 border-transparent bg-thatBlue-500 px-8 py-3 - text-base font-medium leading-6 text-white shadow transition duration-150 - ease-in-out hover:bg-thatBlue-400 focus:border-thatBlue-700 focus:outline-none - focus:ring-that-blue md:py-4 - md:px-10 md:text-lg" + text-center text-base font-medium leading-6 text-white shadow transition + duration-150 ease-in-out hover:bg-thatBlue-400 focus:border-thatBlue-700 + focus:outline-none focus:ring-that-blue + md:py-4 md:px-10 md:text-lg" > diff --git a/src/routes/_root/components/cta.svelte b/src/routes/_root/components/cta.svelte index 42e0100b2..725c1109d 100644 --- a/src/routes/_root/components/cta.svelte +++ b/src/routes/_root/components/cta.svelte @@ -4,11 +4,11 @@ lg:justify-between lg:px-8" >

Are you ready to expand your network?
- Get started today, it's free. + Signup today, it's free.

diff --git a/src/routes/_root/components/events.svelte b/src/routes/_root/components/events.svelte index 83c29e08e..eb5d2d416 100644 --- a/src/routes/_root/components/events.svelte +++ b/src/routes/_root/components/events.svelte @@ -33,38 +33,39 @@
-

- Upcoming Events +

+ Upcoming Events

-

- Virtual Events +

+ THAT Conferences

-
    - {#each online as event} + {#each hybrid as event}
    • {/each}
-
-

- THAT Conferences +

+ Virtual Events

+
    - {#each hybrid as event} + {#each online as event}
    • diff --git a/src/routes/_root/components/index.js b/src/routes/_root/components/index.js index ea9de5fec..f2100eff9 100644 --- a/src/routes/_root/components/index.js +++ b/src/routes/_root/components/index.js @@ -1,5 +1,6 @@ export { default as Newsletter } from '$components/newsletter/Wide.svelte'; export { default as BlogLatest } from '$components/blog/latest.svelte'; +export { default as ThatActiveEvents } from '$components/events/thatconference/Upcoming.svelte'; export { default as CTA } from './cta.svelte'; export { default as CtaMembership } from './ctaMembership.svelte'; diff --git a/src/routes/_root/components/newMembers.svelte b/src/routes/_root/components/newMembers.svelte index 552f04955..eecc108a3 100644 --- a/src/routes/_root/components/newMembers.svelte +++ b/src/routes/_root/components/newMembers.svelte @@ -40,7 +40,7 @@

    Welcome to THAT family!

    diff --git a/src/routes/_root/components/stats.svelte b/src/routes/_root/components/stats.svelte index 970da4f6e..e2b002965 100644 --- a/src/routes/_root/components/stats.svelte +++ b/src/routes/_root/components/stats.svelte @@ -3,19 +3,18 @@ export let stats; -
    +

    Trusted by geeks from {countries} countries

    -

    - Every day is a new opportunity to help someone else or level up yourself. +

    + Every day is a new opportunity to help someone or level up yourself.

    -
    Members
    -
    +
    Members
    +
    {stats.totalMembers}
    -
    +
    Activities Completed
    -
    +
    {stats.pastActivities}
    -
    Hours Served
    -
    +
    Hours Served
    +
    {stats.hoursServed}
    diff --git a/src/routes/_root/components/testimonials.svelte b/src/routes/_root/components/testimonials.svelte index d23d3f088..e9945836f 100644 --- a/src/routes/_root/components/testimonials.svelte +++ b/src/routes/_root/components/testimonials.svelte @@ -31,7 +31,7 @@ @@ -57,7 +57,7 @@ />
    -
    +
    {#if !$session.isAuthenticated}

    Our mission is simple, foster a community of geeks who want to help one another be diff --git a/src/routes/_root/components/thatConferences.svelte b/src/routes/_root/components/thatConferences.svelte deleted file mode 100644 index f2b5c5c36..000000000 --- a/src/routes/_root/components/thatConferences.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - -

    -
    -
    -

    By Developers For Developers

    -

    In-Person THAT Conferences

    -
    - -
    -
    asdf
    -
    asdf
    -
    -
    -
    diff --git a/src/routes/_root/components/upNext.svelte b/src/routes/_root/components/upNext.svelte index 470230932..40538df6b 100644 --- a/src/routes/_root/components/upNext.svelte +++ b/src/routes/_root/components/upNext.svelte @@ -15,7 +15,9 @@
    -

    +

    Upcoming Activities

    diff --git a/src/routes/index.svelte b/src/routes/index.svelte index a5f5e2f60..d8d3ef692 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -3,13 +3,15 @@ import eventsApi from '$dataSources/api.that.tech/events/queries'; import statsApi from '$dataSources/api.that.tech/stats/queries'; import sessionsApi from '$dataSources/api.that.tech/sessions'; + import communityQueryApi from '$dataSources/api.that.tech/community/queries'; //blog import { getPosts } from '$blog/getPosts'; export async function load({ fetch }) { + const { queryActiveThatEvents } = communityQueryApi(fetch); const { queryMembers, queryBlogAuthorBySlug } = membersApi(fetch); - const { queryEventsByCommunity, queryEventForCfp } = eventsApi(fetch); + const { queryEventsByCommunity } = eventsApi(fetch); const { queryCommunityStats } = statsApi(fetch); const { querySessionsByDate } = sessionsApi(fetch); @@ -19,12 +21,12 @@ // todo - we could pick off the cfp from the event already queried. // todo - "up next event" should come from somewhere. - const [members, events, stats, nextHybridEvent, activitiesUpNext, blogPosts] = + const [members, events, stats, thatActiveEvents, activitiesUpNext, blogPosts] = await Promise.all([ queryMembers(15), queryEventsByCommunity(), queryCommunityStats(), - queryEventForCfp('tx/2022'), + queryActiveThatEvents(), querySessionsByDate({ pageSize: 6 }), Promise.all( rawPosts.map(async (p) => { @@ -41,12 +43,14 @@ ) ]); + const filteredEvents = thatActiveEvents.filter((x) => x.type === 'HYBRID_MULTI_DAY'); + return { props: { members: members.members, events, stats, - nextHybridEvent, + thatActiveEvents: filteredEvents, activitiesUpNext, blogPosts } @@ -57,13 +61,13 @@ + + diff --git a/src/routes/link-tree/index.svelte b/src/routes/link-tree/index.svelte new file mode 100644 index 000000000..e4c1b5b80 --- /dev/null +++ b/src/routes/link-tree/index.svelte @@ -0,0 +1,113 @@ + + + + + + + +

    +
    + + +
    +
    +
    +

    + Stay In Touch +

    +
    +
    + {#each socials as s} +
    +
    + + + +
    +
    + {/each} +
    +
    + +
    +
    store
    +
    + +
    +
    blog
    +
    + +
    +
    signup
    +
    + +
    +
    signup
    +
    +
    +
    +
    + + + diff --git a/src/routes/that-conference.svelte b/src/routes/that-conference.svelte index f68b3be80..30518e9e2 100644 --- a/src/routes/that-conference.svelte +++ b/src/routes/that-conference.svelte @@ -1,32 +1,29 @@