From 86184406ccd0a8803189838f25cfc10d9d10bbbe Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Wed, 28 Apr 2021 14:31:06 -0400 Subject: [PATCH 1/9] start --- .../instructors/stephanie-eckles/index.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/search/instructors/stephanie-eckles/index.tsx diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx new file mode 100644 index 000000000..1825ebbc8 --- /dev/null +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import SearchInstructorEssential from '../instructor-essential' +import LaurieBarthPageData from './laurie-barth-page-data' +import ResourceCta from 'components/search/instructors/resource-cta' +import find from 'lodash/find' + +export default function SearchLaurieBarth({instructor}: {instructor: any}) { + const instructorData: any = find(LaurieBarthPageData, { + id: 'instructor-data', + }) + + const combinedInstructor = {...instructor, ...instructorData} + + return ( + } + /> + ) +} From 782882e06efb26935987f2ed36424707f3fa0c93 Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Wed, 28 Apr 2021 18:26:18 -0400 Subject: [PATCH 2/9] source instructor data from sanity for instructor page --- src/components/search/index.tsx | 7 +- src/components/search/instructors/index.tsx | 2 + .../instructors/instructor-essential.tsx | 1 - .../instructors/stephanie-eckles/index.tsx | 298 +++++++++++++++++- src/lib/instructors.ts | 3 +- src/pages/q/[[...all]].tsx | 34 ++ 6 files changed, 329 insertions(+), 16 deletions(-) diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 54d191f0b..577af5d5c 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -34,6 +34,7 @@ type SearchProps = { searchClient?: any searchState?: any instructor?: any + sanityInstructor?: any topic?: any } @@ -42,6 +43,7 @@ const Search: FunctionComponent = ({ searchClient, searchState, instructor, + sanityInstructor, topic, ...rest }) => { @@ -191,7 +193,10 @@ const Search: FunctionComponent = ({ {!isEmpty(instructor) && (
{shouldDisplayLandingPageForInstructor(instructor.slug) && ( - + )}
)} diff --git a/src/components/search/instructors/index.tsx b/src/components/search/instructors/index.tsx index daf5f936a..9b4c02c90 100644 --- a/src/components/search/instructors/index.tsx +++ b/src/components/search/instructors/index.tsx @@ -5,6 +5,7 @@ import SearchLaurieBarth from './laurie-barth' import SearchFlavioCorpa from './flavio-corpa' import SearchHirokoNishimura from './hiroko-nishimura' import SearchChrisBiscardi from './chris-biscardi' +import SearchStephanieEckles from './stephanie-eckles' const InstructorsIndex: any = { 'dan-abramov': SearchDanAbramov, @@ -14,6 +15,7 @@ const InstructorsIndex: any = { 'flavio-corpa': SearchFlavioCorpa, 'hiro-nishimura': SearchHirokoNishimura, 'chris-biscardi': SearchChrisBiscardi, + 'stephanie-eckles': SearchStephanieEckles, } export default InstructorsIndex diff --git a/src/components/search/instructors/instructor-essential.tsx b/src/components/search/instructors/instructor-essential.tsx index c5448658f..406ea39a7 100644 --- a/src/components/search/instructors/instructor-essential.tsx +++ b/src/components/search/instructors/instructor-essential.tsx @@ -131,7 +131,6 @@ const SearchInstructorEssential: FunctionComponent = ({ {CTAComponent ? CTAComponent : } - {children} ) diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index 1825ebbc8..fd01d5ba0 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -1,20 +1,292 @@ -import * as React from 'react' +import React, {FunctionComponent} from 'react' import SearchInstructorEssential from '../instructor-essential' -import LaurieBarthPageData from './laurie-barth-page-data' -import ResourceCta from 'components/search/instructors/resource-cta' -import find from 'lodash/find' +import Image from 'next/image' +import {get} from 'lodash' +import Link from 'next/link' +import groq from 'groq' +import Markdown from 'react-markdown' -export default function SearchLaurieBarth({instructor}: {instructor: any}) { - const instructorData: any = find(LaurieBarthPageData, { - id: 'instructor-data', - }) +import Card, {CardResource} from 'components/pages/home/card' - const combinedInstructor = {...instructor, ...instructorData} +import {bpMinMD} from 'utils/breakpoints' +import {track} from 'utils/analytics' +import ExternalTrackedLink from 'components/external-tracked-link' +export default function SearchStephanieEckles({ + instructor, + sanityInstructor, +}: { + instructor: any + sanityInstructor: any +}) { + const combinedInstructor = {...instructor} + + console.log({sanityInstructor}) + + const {projects, courses} = sanityInstructor + const [ + primaryCourse, + secondCourse, + thirdCourse, + fourthCourse, + ] = courses.resources + + console.log({primaryCourse}) + + return ( +
+ + } + /> +
+ +
+ + + +
+
+
+ ) +} + +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 + }, + } + }, +}` + +type CardProps = { + data: CardResource + className?: string + memberTitle?: string +} + +const ProjectStack: FunctionComponent = ({data, className}) => { + return ( + + <> +

+ Stephanie's Projects +

+
+ + + + ) +} + +export const CardHorizontal: FunctionComponent<{ + resource: CardResource + className?: string + location?: string +}> = ({resource, className = 'border-none my-4', location = 'home'}) => { + return ( + + <> + + + + ) +} + +const CssFormStyling: React.FC<{location: string; resource: any}> = ({ + location, + resource, +}) => { + const {path, title, byline, description, image, background} = resource return ( - } - /> + +
+ + ) } diff --git a/src/lib/instructors.ts b/src/lib/instructors.ts index 38ec85e8d..30181dc7f 100644 --- a/src/lib/instructors.ts +++ b/src/lib/instructors.ts @@ -1,4 +1,5 @@ import {request} from 'graphql-request' +import groq from 'groq' import config from './config' export type Instructor = { @@ -35,4 +36,4 @@ export async function loadInstructor(slug: string) { const {instructor} = await request(config.graphQLEndpoint, query, {slug}) return instructor -} +} \ No newline at end of file diff --git a/src/pages/q/[[...all]].tsx b/src/pages/q/[[...all]].tsx index 7614b6a84..02ca90f20 100644 --- a/src/pages/q/[[...all]].tsx +++ b/src/pages/q/[[...all]].tsx @@ -11,6 +11,10 @@ import {createUrl, parseUrl, titleFromPath} from 'lib/search-url-builder' import {isEmpty, get, first, isArray} from 'lodash' import queryParamsPresent from 'utils/query-params-present' +import {sanityClient} from 'utils/sanity-client' +import groq from 'groq' +import {stephanieEcklesQuery} from 'components/search/instructors/stephanie-eckles' + import {loadInstructor} from 'lib/instructors' import nameToSlug from 'lib/name-to-slug' @@ -57,6 +61,7 @@ type SearchIndexProps = { pageTitle: string noIndexInitial: boolean initialInstructor: any + sanityInstructor: any initialTopic: any } @@ -66,6 +71,7 @@ const SearchIndex: any = ({ pageTitle, noIndexInitial, initialInstructor, + sanityInstructor, initialTopic, }: SearchIndexProps) => { const [searchState, setSearchState] = React.useState(initialSearchState) @@ -143,6 +149,7 @@ const SearchIndex: any = ({ {...defaultProps} {...customProps} instructor={instructor} + sanityInstructor={sanityInstructor} topic={topic} />
@@ -181,6 +188,7 @@ export const getServerSideProps: GetServerSideProps = async function ({ }) let initialInstructor = null + let sanityInstructor = null let initialTopic = null const {rawResults, state} = resultsState @@ -211,6 +219,8 @@ export const getServerSideProps: GetServerSideProps = async function ({ ) try { initialInstructor = await loadInstructor(instructorSlug) + + sanityInstructor = await loadSanityInstructor(instructorSlug) } catch (error) { console.error(error) } @@ -223,7 +233,31 @@ export const getServerSideProps: GetServerSideProps = async function ({ pageTitle, noIndexInitial, initialInstructor, + sanityInstructor, ...(!!initialTopic && {initialTopic}), }, } } + +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) +} + +const loadSanityInstructor = async (selectedInstructor: string) => { + if (!canLoadSanityInstructor(selectedInstructor)) return + + const query = sanityInstructorHash[selectedInstructor] + if (!query) return + + return await sanityClient.fetch(query) +} From 79c8f54b66b4f8e95c557c5f5e978d3b3275c1c7 Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Wed, 28 Apr 2021 18:44:38 -0400 Subject: [PATCH 3/9] extract items into lib folder --- src/lib/instructors.ts | 27 ++++++++++++++++++++++++++- src/pages/q/[[...all]].tsx | 29 +---------------------------- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/src/lib/instructors.ts b/src/lib/instructors.ts index 30181dc7f..fd05879f2 100644 --- a/src/lib/instructors.ts +++ b/src/lib/instructors.ts @@ -1,5 +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,4 +38,27 @@ export async function loadInstructor(slug: string) { const {instructor} = await request(config.graphQLEndpoint, query, {slug}) return instructor -} \ No newline at end of file +} + +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) +} diff --git a/src/pages/q/[[...all]].tsx b/src/pages/q/[[...all]].tsx index 02ca90f20..cfa4dbc6b 100644 --- a/src/pages/q/[[...all]].tsx +++ b/src/pages/q/[[...all]].tsx @@ -11,11 +11,7 @@ import {createUrl, parseUrl, titleFromPath} from 'lib/search-url-builder' import {isEmpty, get, first, isArray} from 'lodash' import queryParamsPresent from 'utils/query-params-present' -import {sanityClient} from 'utils/sanity-client' -import groq from 'groq' -import {stephanieEcklesQuery} from 'components/search/instructors/stephanie-eckles' - -import {loadInstructor} from 'lib/instructors' +import {loadInstructor, loadSanityInstructor} from 'lib/instructors' import nameToSlug from 'lib/name-to-slug' import getTracer from 'utils/honeycomb-tracer' @@ -238,26 +234,3 @@ export const getServerSideProps: GetServerSideProps = async function ({ }, } } - -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) -} - -const loadSanityInstructor = async (selectedInstructor: string) => { - if (!canLoadSanityInstructor(selectedInstructor)) return - - const query = sanityInstructorHash[selectedInstructor] - if (!query) return - - return await sanityClient.fetch(query) -} From d9e2f5bee57b95e68b0f43036dbc3d1b4dc1986b Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Wed, 28 Apr 2021 19:33:16 -0400 Subject: [PATCH 4/9] add darkmode support for text --- .../search/instructors/stephanie-eckles/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index fd01d5ba0..d8eb23a23 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -227,7 +227,7 @@ const CssFormStyling: React.FC<{location: string; resource: any}> = ({ href={path} >
= ({
From 131f3d12ab68de3d8fca4ab309c2b05b51b5cdfb Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Wed, 28 Apr 2021 19:38:03 -0400 Subject: [PATCH 5/9] remove console logs --- src/components/search/instructors/stephanie-eckles/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index d8eb23a23..c09f4fe08 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -21,8 +21,6 @@ export default function SearchStephanieEckles({ }) { const combinedInstructor = {...instructor} - console.log({sanityInstructor}) - const {projects, courses} = sanityInstructor const [ primaryCourse, @@ -31,8 +29,6 @@ export default function SearchStephanieEckles({ fourthCourse, ] = courses.resources - console.log({primaryCourse}) - return (
Date: Thu, 29 Apr 2021 11:55:00 -0400 Subject: [PATCH 6/9] merge sanity data with graphql --- src/components/search/index.tsx | 7 +------ .../search/instructors/stephanie-eckles/index.tsx | 10 ++-------- src/pages/q/[[...all]].tsx | 9 +++++---- 3 files changed, 8 insertions(+), 18 deletions(-) diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 577af5d5c..54d191f0b 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -34,7 +34,6 @@ type SearchProps = { searchClient?: any searchState?: any instructor?: any - sanityInstructor?: any topic?: any } @@ -43,7 +42,6 @@ const Search: FunctionComponent = ({ searchClient, searchState, instructor, - sanityInstructor, topic, ...rest }) => { @@ -193,10 +191,7 @@ const Search: FunctionComponent = ({ {!isEmpty(instructor) && (
{shouldDisplayLandingPageForInstructor(instructor.slug) && ( - + )}
)} diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index c09f4fe08..d618612bd 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -12,16 +12,10 @@ import {bpMinMD} from 'utils/breakpoints' import {track} from 'utils/analytics' import ExternalTrackedLink from 'components/external-tracked-link' -export default function SearchStephanieEckles({ - instructor, - sanityInstructor, -}: { - instructor: any - sanityInstructor: any -}) { +export default function SearchStephanieEckles({instructor}: {instructor: any}) { const combinedInstructor = {...instructor} - const {projects, courses} = sanityInstructor + const {projects, courses} = instructor const [ primaryCourse, secondCourse, diff --git a/src/pages/q/[[...all]].tsx b/src/pages/q/[[...all]].tsx index cfa4dbc6b..262d29aed 100644 --- a/src/pages/q/[[...all]].tsx +++ b/src/pages/q/[[...all]].tsx @@ -57,7 +57,6 @@ type SearchIndexProps = { pageTitle: string noIndexInitial: boolean initialInstructor: any - sanityInstructor: any initialTopic: any } @@ -67,7 +66,6 @@ const SearchIndex: any = ({ pageTitle, noIndexInitial, initialInstructor, - sanityInstructor, initialTopic, }: SearchIndexProps) => { const [searchState, setSearchState] = React.useState(initialSearchState) @@ -145,7 +143,6 @@ const SearchIndex: any = ({ {...defaultProps} {...customProps} instructor={instructor} - sanityInstructor={sanityInstructor} topic={topic} />
@@ -217,6 +214,11 @@ export const getServerSideProps: GetServerSideProps = async function ({ initialInstructor = await loadInstructor(instructorSlug) sanityInstructor = await loadSanityInstructor(instructorSlug) + + initialInstructor = { + ...initialInstructor, + ...sanityInstructor, + } } catch (error) { console.error(error) } @@ -229,7 +231,6 @@ export const getServerSideProps: GetServerSideProps = async function ({ pageTitle, noIndexInitial, initialInstructor, - sanityInstructor, ...(!!initialTopic && {initialTopic}), }, } From 69b01a28ba1296f691f04433c9d5e0b0635632c9 Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Tue, 4 May 2021 11:26:27 -0400 Subject: [PATCH 7/9] style cards --- .../instructors/stephanie-eckles/index.tsx | 84 ++++++++++++++++--- 1 file changed, 71 insertions(+), 13 deletions(-) diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index d618612bd..bf6e367af 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -1,6 +1,7 @@ import React, {FunctionComponent} from 'react' import SearchInstructorEssential from '../instructor-essential' import Image from 'next/image' +import Textfit from 'react-textfit' import {get} from 'lodash' import Link from 'next/link' import groq from 'groq' @@ -34,12 +35,15 @@ export default function SearchStephanieEckles({instructor}: {instructor: any}) { /> } /> -
- -
+
+ +
- - + +
@@ -90,7 +94,7 @@ const ProjectStack: FunctionComponent = ({data, className}) => { const {description, title, image, path} = item return (
  • -
    +
    {path && ( = ({data, className}) => { 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" + className="flex lg:flex-row flex-col flex-shrink-0 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} >
    - {image && ( + {/* {image && ( {`illustration - )} + )} */}
    -
    -

    +
    +

    {title}

    -

    + {/*

    {description} -

    +

    */}
    @@ -137,6 +141,60 @@ const ProjectStack: FunctionComponent = ({data, className}) => { ) } +const CardVerticalLarge: FunctionComponent = ({data}) => { + const {path, image, title, name, byline} = data + return ( + + <> + {image && ( + + { + track('clicked home page resource', { + resource: path, + linkType: 'image', + }) + }} + className="mb-2 mx-auto w-32" + tabIndex={-1} + > + {`illustration + + + )} +

    + {name} +

    + + { + track('clicked home page resource', { + resource: path, + linkType: 'text', + }) + }} + className="hover:text-blue-600 dark:hover:text-blue-300" + > +

    + + {title} + +

    +     + +
    + {byline} +
    + +     + ) +} + export const CardHorizontal: FunctionComponent<{ resource: CardResource className?: string From 02e682c3a48bd94abc9693528789cb6bf1220632 Mon Sep 17 00:00:00 2001 From: Lauro Date: Tue, 4 May 2021 08:48:37 -0700 Subject: [PATCH 8/9] fix grid --- src/components/search/instructors/stephanie-eckles/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index bf6e367af..9b2c423c5 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -35,9 +35,9 @@ export default function SearchStephanieEckles({instructor}: {instructor: any}) { /> } /> -
    +
    From 44cc2c1e6f474f9f2467652c2b29362222977d57 Mon Sep 17 00:00:00 2001 From: Lauro Date: Tue, 4 May 2021 09:21:20 -0700 Subject: [PATCH 9/9] Fix flex --- .../instructors/stephanie-eckles/index.tsx | 62 +++++++++---------- 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/src/components/search/instructors/stephanie-eckles/index.tsx b/src/components/search/instructors/stephanie-eckles/index.tsx index 9b2c423c5..39514b2d1 100644 --- a/src/components/search/instructors/stephanie-eckles/index.tsx +++ b/src/components/search/instructors/stephanie-eckles/index.tsx @@ -35,12 +35,12 @@ export default function SearchStephanieEckles({instructor}: {instructor: any}) { /> } /> -
    +
    -
    +
    @@ -88,49 +88,47 @@ const ProjectStack: FunctionComponent = ({data, className}) => { Stephanie's Projects

    -