wip: speaker profiles

cyprus-developer-community · Nov 11, 2023 · 8f6749d · 8f6749d
1 parent 54f4508
commit 8f6749d
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 66 deletions.
diff --git a/src/components/Speaker.jsx b/src/components/Speaker.jsx
@@ -0,0 +1,65 @@
+import speakerQuery from '~/graphql/speaker.query'
+import graphql from '~/lib/graphql.server'
+
+export default function Speaker(props) {
+  const [data] = graphql(speakerQuery.gql, {
+    login: props.person
+  })
+  console.log(data())
+
+  const { person } = props
+  return (
+    <>
+      <img
+        class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover"
+        src={person.imageUrl}
+        alt=""
+      />
+      <div class="max-w-xl flex-auto">
+        <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">
+          {person.name}
+        </h3>
+        <p class="text-base leading-7 text-gray-600">{person.role}</p>
+        <p class="mt-6 text-base leading-7 text-gray-600">{person.bio}</p>
+        <ul role="list" class="mt-6 flex gap-x-6">
+          <li>
+            <a
+              href={person.twitterUrl}
+              class="text-gray-400 hover:text-gray-500"
+            >
+              <span class="sr-only">Twitter</span>
+              <svg
+                class="h-5 w-5"
+                aria-hidden="true"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href={person.linkedinUrl}
+              class="text-gray-400 hover:text-gray-500"
+            >
+              <span class="sr-only">LinkedIn</span>
+              <svg
+                class="h-5 w-5"
+                aria-hidden="true"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+}
diff --git a/src/graphql/speaker.query.js b/src/graphql/speaker.query.js
@@ -0,0 +1,26 @@
+import { gql } from '@solid-primitives/graphql'
+
+export default {
+  gql: gql`
+    query ($login: String!) {
+      user(login: $login) {
+        login
+        avatarUrl
+        status {
+          message
+          emoji
+        }
+        bio
+        repository(name: $login) {
+          id
+          name
+          object(expression: "main:README.md") {
+            ... on Blob {
+              text
+            }
+          }
+        }
+      }
+    }
+  `
+}
diff --git a/src/graphql/talks.query.js b/src/graphql/talks.query.js
@@ -0,0 +1,29 @@
+import { gql } from '@solid-primitives/graphql'
+
+export default {
+  gql: gql`
+    query ($organization: String!, $repository: String!) {
+      repository(owner: $organization, name: $repository) {
+        issues(
+          first: 100
+          orderBy: { field: CREATED_AT, direction: DESC }
+          labels: "Approved :white_check_mark:"
+        ) {
+          nodes {
+            id
+            number
+            title
+            url
+            author {
+              login
+            }
+          }
+        }
+      }
+    }
+  `,
+  vars: {
+    organization: process.env.GH_ORG,
+    repository: 'talks'
+  }
+}
diff --git a/src/routes/speakers/index.jsx b/src/routes/speakers/index.jsx
@@ -1,81 +1,30 @@
 import { For } from 'solid-js'
+import { useRouteData } from 'solid-start'
 import { SimpleLayout } from '~/components/SimpleLayout'
+import Speaker from '~/components/Speaker'
+import talksQuery from '~/graphql/talks.query'
+import graphql from '~/lib/graphql.server'
 
-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: '#'
+export function routeData() {
+  const [data] = graphql(talksQuery.gql, talksQuery.vars)
+  const authors = data()?.repository?.issues?.nodes.map((t) => t.author.login)
+  return {
+    authors
   }
-  // More people...
-]
+}
 
 export default function Speakers() {
+  const data = useRouteData()
   return (
     <SimpleLayout title="Meet the speakers" intro="">
       <ul
         role="list"
         class="-mt-12 space-y-12 divide-y divide-gray-200 xl:col-span-3"
       >
-        <For each={people}>
+        <For each={data.authors}>
           {(person) => (
             <li class="flex flex-col gap-10 pt-12 sm:flex-row">
-              <img
-                class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover"
-                src={person.imageUrl}
-                alt=""
-              />
-              <div class="max-w-xl flex-auto">
-                <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">
-                  {person.name}
-                </h3>
-                <p class="text-base leading-7 text-gray-600">{person.role}</p>
-                <p class="mt-6 text-base leading-7 text-gray-600">
-                  {person.bio}
-                </p>
-                <ul role="list" class="mt-6 flex gap-x-6">
-                  <li>
-                    <a
-                      href={person.twitterUrl}
-                      class="text-gray-400 hover:text-gray-500"
-                    >
-                      <span class="sr-only">Twitter</span>
-                      <svg
-                        class="h-5 w-5"
-                        aria-hidden="true"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                      >
-                        <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
-                      </svg>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      href={person.linkedinUrl}
-                      class="text-gray-400 hover:text-gray-500"
-                    >
-                      <span class="sr-only">LinkedIn</span>
-                      <svg
-                        class="h-5 w-5"
-                        aria-hidden="true"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </a>
-                  </li>
-                </ul>
-              </div>
+              <Speaker person={person} />
             </li>
           )}
         </For>

diff --git a/vite.config.js b/vite.config.js
@@ -3,7 +3,7 @@ import solid from 'solid-start/vite'
 import devtools from 'solid-devtools/vite'
 import solidSvg from 'vite-plugin-solid-svg'
 // import cloudflare from 'solid-start-cloudflare-workers'
-import cloudflare from 'solid-start-cloudflare-pages'
+// import cloudflare from 'solid-start-cloudflare-pages'
 
 export default defineConfig({
   plugins: [
@@ -17,7 +17,7 @@ export default defineConfig({
     }),
     solidSvg(),
     solid({
-      adapter: cloudflare({})
+      // adapter: cloudflare({})
     })
   ],
   server: {