From 2110cf4fb39671e15f494b840c2e998d3b81f77a Mon Sep 17 00:00:00 2001 From: Patrick Heneise Date: Sat, 11 Nov 2023 17:28:53 -0500 Subject: [PATCH] feat: add team page, unify layouts --- src/components/SimpleLayout.jsx | 19 ++++ src/graphql/organization.query.js | 14 +++ src/routes/about.jsx | 125 +++++++++++++-------- src/routes/events/[id].jsx | 178 +++++++++++++++--------------- src/routes/events/index.jsx | 17 +-- src/routes/faq.jsx | 39 +++++++ src/routes/groups.jsx | 72 +++--------- src/routes/speakers/[id].jsx | 0 src/routes/speakers/index.jsx | 84 +++++++++++++- 9 files changed, 352 insertions(+), 196 deletions(-) create mode 100644 src/components/SimpleLayout.jsx create mode 100644 src/routes/faq.jsx create mode 100644 src/routes/speakers/[id].jsx diff --git a/src/components/SimpleLayout.jsx b/src/components/SimpleLayout.jsx new file mode 100644 index 0000000..ecb0266 --- /dev/null +++ b/src/components/SimpleLayout.jsx @@ -0,0 +1,19 @@ +import { Container } from '~/components/Container' +import { splitProps } from 'solid-js' + +export function SimpleLayout(props) { + const [local] = splitProps(props, ['title', 'intro', 'children']) + return ( + +
+

+ {local.title} +

+

+ {local.intro} +

+
+ {local.children &&
{local.children}
} + + ) +} diff --git a/src/graphql/organization.query.js b/src/graphql/organization.query.js index 6636ab0..fa1d016 100644 --- a/src/graphql/organization.query.js +++ b/src/graphql/organization.query.js @@ -11,6 +11,20 @@ export default { membersWithRole { totalCount } + teams(first: 1, query: "Advocates") { + nodes { + name + members(first: 100, orderBy: { field: LOGIN, direction: ASC }) { + nodes { + name + login + url + avatarUrl + bio + } + } + } + } } repository(owner: $organization, name: $repository) { issues(labels: ["Approved :white_check_mark:", "Event :sparkles:"]) { diff --git a/src/routes/about.jsx b/src/routes/about.jsx index 989179b..0a49221 100644 --- a/src/routes/about.jsx +++ b/src/routes/about.jsx @@ -1,11 +1,12 @@ import { A } from 'solid-start' -import { Container } from '~/components/Container' -import Logo from '~/assets/cdc-logo.png' import { GitHubIcon, LinkedInIcon } from '~/components/SocialIcons' import clsx from 'clsx' import organizationQuery from '~/graphql/organization.query.js' import graphql from '~/lib/graphql.server.js' import { useRouteData } from 'solid-start' +import { SimpleLayout } from '~/components/SimpleLayout' +import { For } from 'solid-js' +import { H2, H3 } from '~/components/Atomic' function SocialLink(props) { return ( @@ -41,52 +42,88 @@ export default function About() { const data = useRouteData() return ( - -
-
-
- -
+ +
+
+ CDC Logo
-
-

- {data()?.organization?.name} -

-
- {data()?.organization?.description} -
+
    + + Follow on GitHub + + + Follow on LinkedIn + + + contact@cdc.cy + +
+
+ +
+
+

Meet the team

+

+ We’re a dynamic group of individuals who are passionate about what + we do. +

-
-
    - - Follow on GitHub - - - Follow on LinkedIn - - - contact@cdc.cy - +
    +
      + + {(person) => ( +
    • + {person.name} +

      + {person.name} +

      +

      + {data()?.organization.teams.name} +

      + +
      • + )} +
- + ) } diff --git a/src/routes/events/[id].jsx b/src/routes/events/[id].jsx index 5e6d688..e492398 100644 --- a/src/routes/events/[id].jsx +++ b/src/routes/events/[id].jsx @@ -1,7 +1,6 @@ import graphql from '~/lib/graphql.server.js' import issueQuery from '~/graphql/issue.query.js' import { useParams, useRouteData } from 'solid-start' -import { Container } from '~/components/Container' import { Match, Show, Switch, createMemo, createResource } from 'solid-js' import bodyParser from '@zentered/issue-forms-body-parser' import { SolidMarkdown } from 'solid-markdown' @@ -9,6 +8,7 @@ import { Prose } from '~/components/Prose' import { formatDate } from '~/lib/formatDate' import fileQuery from '~/graphql/file.query.js' import { A } from '@solidjs/router' +import { SimpleLayout } from '~/components/SimpleLayout' export function routeData() { const params = useParams() @@ -47,106 +47,104 @@ export default function Event() { const { data, issueData, location } = useRouteData() return ( - -
-
-
- - - {issueData()['featured-image']?.images?.[0]?.alt} - - - CDC logo - - -
-
-
-
- -
-
- {location.name}, {location.city} -
- - - {location.what3words} - - -
-
- Where -
-
- -
-
+ + + + {issueData()['featured-image']?.images?.[0]?.alt} + + + CDC logo + + +
+
+
- {formatDate(issueData()?.['date'].date)} -{' '} - {issueData()?.['time'].time} + {location.name}, {location.city}
- Duration: {issueData()?.['duration'].text} + + + {location.what3words} + +
- When + Where
-
-
- -
-
- - {issueData()['code-of-conduct'].list[0].text} - -
-
- Code of Conduct -
-
- -
-
- -
-
+
+
+
{formatDate(issueData()?.['date'].date)} -{' '} - {issueData()['time'].time} - -

- {data()?.repository.issue.title} -

-
- + {issueData()?.['time'].time} +
+ Duration: {issueData()?.['duration'].text} +
+
+ When +
+
+
+
+ +
+
- {issueData()?.['event-description'].text} + {issueData()['code-of-conduct'].list[0].text} - +
+
+ Code of Conduct +
-
- + +
- + +
+ +

+ {data()?.repository.issue.title} +

+
+ + + {issueData()?.['event-description'].text} + + +
+
+ + ) } diff --git a/src/routes/events/index.jsx b/src/routes/events/index.jsx index 06f1c66..ec59526 100644 --- a/src/routes/events/index.jsx +++ b/src/routes/events/index.jsx @@ -5,6 +5,7 @@ import graphql from '~/lib/graphql.server.js' import { useRouteData } from 'solid-start' import { For, createResource } from 'solid-js' import bodyParser from '@zentered/issue-forms-body-parser' +import { SimpleLayout } from '~/components/SimpleLayout' function EventLine(props) { const [issueData] = createResource(async () => { @@ -46,12 +47,14 @@ export default function Event() { const data = useRouteData() return ( -
-
- - {(event) => } - -
-
+ + + {(event) => } + + ) } diff --git a/src/routes/faq.jsx b/src/routes/faq.jsx new file mode 100644 index 0000000..37848c9 --- /dev/null +++ b/src/routes/faq.jsx @@ -0,0 +1,39 @@ +import { For } from 'solid-js' +import { SimpleLayout } from '~/components/SimpleLayout' + +const faqs = [ + { + id: 1, + question: "What's the best thing about Switzerland?", + answer: + "I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat." + } + // More questions... +] + +export default function Example() { + return ( + +
+
+ + {(faq) => ( +
+
+ {faq.question} +
+
+ {faq.answer} +
+
+ )} + +
+
+ + ) +} diff --git a/src/routes/groups.jsx b/src/routes/groups.jsx index 1b2e9f2..4414e17 100644 --- a/src/routes/groups.jsx +++ b/src/routes/groups.jsx @@ -1,21 +1,20 @@ import { A } from 'solid-start' -import { Container } from '~/components/Container' import fileQuery from '~/graphql/file.query.js' import graphql from '~/lib/graphql.server.js' import { useRouteData } from 'solid-start' -import { For, createMemo } from 'solid-js' -import { H2 } from '~/components/Atomic' +import { For, createResource } from 'solid-js' +import { SimpleLayout } from '~/components/SimpleLayout' +import { Icon } from 'solid-heroicons' +import { globeAlt } from 'solid-heroicons/solid' export function routeData() { - const [locationsFile] = graphql(fileQuery.gql('groups.json'), { + const [groupsFile] = graphql(fileQuery.gql('groups.json'), { ...fileQuery.vars, repository: 'home' }) - const groups = createMemo(() => { - if (locationsFile()) { - return JSON.parse(locationsFile().repository.object.text) - } + const [groups] = createResource(groupsFile, () => { + return JSON.parse(groupsFile().repository.object.text) }) return { @@ -27,20 +26,12 @@ export default function Groups() { const data = useRouteData() return ( - -
-

- Participating Groups -

-

- The Cyprus Developer Community hosts a number of Meet & Greet events - that are open to everyone. We also host special cross-technology - events called "CDCx". The participating groups are responsible for - their own events and content. A list and calendar of all events from - participating groups in Cyprus will be coming soon. -

-
- + - + ) } diff --git a/src/routes/speakers/[id].jsx b/src/routes/speakers/[id].jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/speakers/index.jsx b/src/routes/speakers/index.jsx index 286da5d..22e67ae 100644 --- a/src/routes/speakers/index.jsx +++ b/src/routes/speakers/index.jsx @@ -1,3 +1,85 @@ +import { For } from 'solid-js' +import { SimpleLayout } from '~/components/SimpleLayout' + +const people = [ + { + name: 'Leslie Alexander', + role: 'Co-Founder / CEO', + imageUrl: + 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80', + bio: 'Ultricies massa malesuada viverra cras lobortis. Tempor orci hac ligula dapibus mauris sit ut eu. Eget turpis urna maecenas cras. Nisl dictum.', + twitterUrl: '#', + linkedinUrl: '#' + } + // More people... +] + export default function Speakers() { - return <>Speakers + return ( + + + + ) }