Pull sanity data for curated instructor pages #602
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,284 @@ | ||
| import React, {FunctionComponent} from 'react' | ||
| import SearchInstructorEssential from '../instructor-essential' | ||
| import Image from 'next/image' | ||
| import {get} from 'lodash' | ||
| import Link from 'next/link' | ||
| import groq from 'groq' | ||
| import Markdown from 'react-markdown' | ||
|
|
||
| import Card, {CardResource} from 'components/pages/home/card' | ||
|
|
||
| import {bpMinMD} from 'utils/breakpoints' | ||
| import {track} from 'utils/analytics' | ||
| import ExternalTrackedLink from 'components/external-tracked-link' | ||
|
|
||
| export default function SearchStephanieEckles({instructor}: {instructor: any}) { | ||
| const combinedInstructor = {...instructor} | ||
|
There was a problem hiding this comment. this could actually be combined at a higher level |
||
|
|
||
| const {projects, courses} = instructor | ||
| const [ | ||
| primaryCourse, | ||
| secondCourse, | ||
| thirdCourse, | ||
| fourthCourse, | ||
| ] = courses.resources | ||
|
|
||
| return ( | ||
| <div> | ||
| <SearchInstructorEssential | ||
| instructor={combinedInstructor} | ||
| CTAComponent={ | ||
| <CssFormStyling | ||
| resource={primaryCourse} | ||
| location="Stephanie Eckles instructor page" | ||
| /> | ||
| } | ||
| /> | ||
| <section className="grid grid-cols-4 gap-3 -mt-10 mb-10 pb-10 xl:px-0 px-5 max-w-screen-xl mx-auto dark:bg-gray-900 w-full"> | ||
| <ProjectStack className="col-span-1" data={projects.resources} /> | ||
| <div className="col-span-3 grid grid-cols-2 gap-3"> | ||
| <CardHorizontal className="col-span-2" resource={secondCourse} /> | ||
| <CardHorizontal className="col-span-1" resource={thirdCourse} /> | ||
| <CardHorizontal className="col-span-1" resource={fourthCourse} /> | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
There was a problem hiding this comment. display courses and projects on page There was a problem hiding this comment. This layout needs work at all breakpoints. Using the
|
||
| ) | ||
| } | ||
|
|
||
| export const stephanieEcklesQuery = groq`*[_type == 'resource' && slug.current == "stephanie-eckles-landing-page"][0]{ | ||
| 'projects': resources[slug.current == 'instructor-landing-page-projects'][0]{ | ||
| resources[]{ | ||
| title, | ||
| 'path': url, | ||
| description, | ||
| image | ||
| } | ||
| }, | ||
| 'courses': resources[slug.current == 'instructor-landing-page-featured-courses'][0]{ | ||
| resources[]->{ | ||
| title, | ||
| 'description': summary, | ||
| path, | ||
| byline, | ||
| image, | ||
| 'background': images[label == 'feature-card-background'][0].url, | ||
| 'instructor': collaborators[]->[role == 'instructor'][0]{ | ||
| 'name': person->.name | ||
| }, | ||
| } | ||
| }, | ||
| }` | ||
|
Comment on lines
+53
to
+75
|
||
|
|
||
| type CardProps = { | ||
| data: CardResource | ||
| className?: string | ||
| memberTitle?: string | ||
| } | ||
|
|
||
| const ProjectStack: FunctionComponent<any> = ({data, className}) => { | ||
| return ( | ||
| <Card className={className}> | ||
| <> | ||
| <h2 className="uppercase font-semibold text-xs mb-1 text-gray-700 dark:text-gray-300"> | ||
| Stephanie's Projects | ||
| </h2> | ||
| <hr /> | ||
| <div> | ||
| <ul> | ||
| {data.map((item: any) => { | ||
| const {description, title, image, path} = item | ||
| return ( | ||
| <li key={path}> | ||
| <div className="space-y-3"> | ||
| {path && ( | ||
| <Link href={path}> | ||
| <a | ||
| onClick={() => { | ||
| track('clicked instructor project resource', { | ||
| resource: path, | ||
| linkType: 'image', | ||
| location, | ||
| }) | ||
| }} | ||
| className="flex sm:flex-row flex-col sm:space-x-5 space-x-0 space-y-5 sm:space-y-5 items-center sm:text-left text-center overflow-x-scroll" | ||
| tabIndex={-1} | ||
| > | ||
| <div className="block flex-shrink-0 sm:w-auto"> | ||
| {image && ( | ||
| <Image | ||
| src={get(image, 'src', image)} | ||
| width="40" | ||
| height="40" | ||
| alt={`illustration for ${title}`} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="flex flex-col justify-center sm:items-start items-center space-y-1"> | ||
| <h2 className="text-lg font-bold leading-tighter"> | ||
| {title} | ||
| </h2> | ||
| <p className="prose dark:prose-dark dark:prose-dark-sm prose-sm max-w-none"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| </a> | ||
| </Link> | ||
| )} | ||
|
There was a problem hiding this comment. The description is awkward and lacks legibility. I would consider exploring expanding the project section or a smaller font.
|
||
| <hr /> | ||
| </div> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| </div> | ||
| </> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export const CardHorizontal: FunctionComponent<{ | ||
| resource: CardResource | ||
| className?: string | ||
| location?: string | ||
| }> = ({resource, className = 'border-none my-4', location = 'home'}) => { | ||
| return ( | ||
| <Card className={className}> | ||
| <> | ||
| <div className="flex sm:flex-row flex-col sm:space-x-5 space-x-0 sm:space-y-0 space-y-5 items-center sm:text-left text-center"> | ||
| {resource.image && ( | ||
| <Link href={resource.path}> | ||
| <a | ||
| onClick={() => { | ||
| track('clicked resource', { | ||
| resource: resource.path, | ||
| linkType: 'image', | ||
| location, | ||
| }) | ||
| }} | ||
| className="block flex-shrink-0 sm:w-auto m:w-24 w-36" | ||
| tabIndex={-1} | ||
| > | ||
| <Image | ||
| src={get(resource.image, 'src', resource.image)} | ||
| width={160} | ||
| height={160} | ||
| layout="fixed" | ||
| className="object-cover rounded-md" | ||
| alt={`illustration for ${resource.title}`} | ||
| /> | ||
| </a> | ||
| </Link> | ||
| )} | ||
| <div className="flex flex-col justify-center sm:items-start items-center"> | ||
| <h2 className=" uppercase font-semibold text-xs tracking-tight text-gray-700 dark:text-gray-300 mb-1"> | ||
| {resource.name} | ||
| </h2> | ||
| <Link href={resource.path}> | ||
| <a | ||
| onClick={() => { | ||
| track('clicked resource', { | ||
| resource: resource.path, | ||
| linkType: 'text', | ||
| location, | ||
| }) | ||
| }} | ||
| className="hover:text-blue-600 dark:hover:text-blue-300" | ||
| > | ||
| <h3 className="text-xl font-bold leading-tighter"> | ||
| {resource.title} | ||
| </h3> | ||
| </a> | ||
| </Link> | ||
| <div className="text-xs text-gray-600 dark:text-gray-300 mb-2 mt-1"> | ||
| {resource.byline} | ||
| </div> | ||
| <Markdown | ||
| source={resource.description || ''} | ||
| className="prose dark:prose-dark dark:prose-dark-sm prose-sm max-w-none" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| const CssFormStyling: React.FC<{location: string; resource: any}> = ({ | ||
| location, | ||
| resource, | ||
| }) => { | ||
| const {path, title, byline, description, image, background} = resource | ||
| return ( | ||
| <ExternalTrackedLink | ||
| eventName="clicked CSS page CTA" | ||
| params={{location}} | ||
| className="block md:col-span-4 rounded-md w-full h-full overflow-hidden border-0 border-gray-100 relative text-center" | ||
| href={path} | ||
| > | ||
| <div | ||
| className="md:-mt-5 flex items-center justify-center bg-white dark:bg-gray-900 text-white overflow-hidden rounded-b-lg md:rounded-t-none rounded-t-lg shadow-sm" | ||
| css={{ | ||
| [bpMinMD]: { | ||
| minHeight: 477, | ||
| }, | ||
| }} | ||
| > | ||
| <div className="absolute top-0 left-0 bg-gradient-to-r from-yellow-500 to-lightBlue-500 w-full h-2 z-20" /> | ||
| <div className="relative z-10 px-5 sm:py-16 py-10 sm:text-left text-center"> | ||
| <div className="space-y-5 mx-auto flex items-center justify-center max-w-screen-xl"> | ||
| <div className="flex flex-col items-center justify-center sm:space-x-5 sm:space-y-0 space-y-5"> | ||
| <div className="flex-shrink-0"> | ||
| <Link href={path}> | ||
| <a | ||
| tabIndex={-1} | ||
| onClick={() => | ||
| track('clicked jumbotron resource', { | ||
| resource: path, | ||
| linkType: 'image', | ||
| }) | ||
| } | ||
| > | ||
| <Image | ||
| quality={100} | ||
| src={get(image, 'src', image)} | ||
| width={250} | ||
| height={250} | ||
| alt={get(image, 'alt', `illustration for ${title}`)} | ||
| /> | ||
| </a> | ||
| </Link> | ||
| </div> | ||
| <div className="flex flex-col sm:items-start items-center"> | ||
| <h2 className="text-xs text-gray-900 dark:text-white uppercase font-semibold mb-2"> | ||
| {byline} | ||
| </h2> | ||
| <Link href={path}> | ||
| <a | ||
| className="text-xl font-extrabold leading-tighter text-gray-900 dark:text-white hover:text-blue-300" | ||
| onClick={() => | ||
| track('clicked jumbotron resource', { | ||
| resource: path, | ||
| linkType: 'text', | ||
| }) | ||
| } | ||
| > | ||
| <h1>{title}</h1> | ||
| </a> | ||
| </Link> | ||
| <p className="mt-4 text-gray-900 dark:text-white"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <img | ||
| className="absolute top-0 left-0 z-0 w-full" | ||
| src={background} | ||
| alt="" | ||
| /> | ||
| </div> | ||
| </ExternalTrackedLink> | ||
| ) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,7 @@ | ||
| import {request} from 'graphql-request' | ||
| import {sanityClient} from 'utils/sanity-client' | ||
| import groq from 'groq' | ||
| import {stephanieEcklesQuery} from 'components/search/instructors/stephanie-eckles' | ||
| import config from './config' | ||
|
|
||
| export type Instructor = { | ||
|
|
@@ -36,3 +39,26 @@ export async function loadInstructor(slug: string) { | |
|
|
||
| return instructor | ||
| } | ||
|
|
||
| const sanityInstructorHash = { | ||
| 'stephanie-eckles': stephanieEcklesQuery, | ||
|
|
||
| } | ||
|
|
||
| type SelectedInstructor = keyof typeof sanityInstructorHash | ||
|
|
||
| const canLoadSanityInstructor = ( | ||
| selectedInstructor: string, | ||
| ): selectedInstructor is SelectedInstructor => { | ||
| const keyNames = Object.keys(sanityInstructorHash) | ||
|
|
||
| return keyNames.includes(selectedInstructor) | ||
| } | ||
|
|
||
| export const loadSanityInstructor = async (selectedInstructor: string) => { | ||
| if (!canLoadSanityInstructor(selectedInstructor)) return | ||
|
|
||
| const query = sanityInstructorHash[selectedInstructor] | ||
| if (!query) return | ||
|
|
||
| return await sanityClient.fetch(query) | ||
| } | ||
|
Comment on lines
+42
to
+64
There was a problem hiding this comment. @theianjones helped me implement this.
This makes sure that we are only querying for instructor data on the pages that we want to load sanity data onto. |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add stephanie to the instructors index for curated pages