From 6d9439af3509b3379f5b7b95217b415483a9ab26 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 14 Jan 2020 19:41:56 +0300 Subject: [PATCH] Add feature: pass settings to fetching script --- README.md | 9 +++++ package.json | 2 +- src/content.stories.js | 20 ++++++----- src/fetch-committee.js | 29 +++++++--------- src/fetch-mc.js | 10 ++++-- src/fetch-performance.js | 10 ++++-- src/fetch-speakers.js | 20 ++++++----- src/fetch-workshops.js | 10 ++++-- src/fragments.js | 12 +++---- src/index.js | 16 ++++++--- src/utils.js | 71 ++++++++++++++++++++++------------------ 11 files changed, 126 insertions(+), 83 deletions(-) diff --git a/README.md b/README.md index 8ec1e89..49ad87e 100755 --- a/README.md +++ b/README.md @@ -1,3 +1,12 @@ # GitNation Content package for fetching conference content from GraphCMS + + +## List of specific things that should behave differently + +**Image transformations** + +Can have various dimensions for different sections / sites + +To check: can we set 500x500 as default for all images? diff --git a/package.json b/package.json index a0850d0..07a55a5 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@focus-reactive/graphql-content-layer", - "version": "1.0.0", + "version": "1.0.1", "private": false, "main": "dist/index.js", "scripts": { diff --git a/src/content.stories.js b/src/content.stories.js index b82974f..12e4644 100644 --- a/src/content.stories.js +++ b/src/content.stories.js @@ -47,15 +47,17 @@ const TagColor = ({ title, tag }) => ( */ const contentPromise = getContent(); -queriesData.forEach(({ queryPages, getData, story }) => { - allStories[story] = Query({ - name: story, - query: queryPages, - vars: { conferenceTitle, eventYear }, - searchVars: { search: '' }, - getData, - }); -}); +queriesData.forEach( + ({ queryPages, getData, story, vars }) => { + allStories[story] = Query({ + name: story, + query: queryPages, + vars: { conferenceTitle, eventYear, ...vars }, + searchVars: { search: '' }, + getData, + }); + }, +); module.exports = { default: { diff --git a/src/fetch-committee.js b/src/fetch-committee.js index 311393e..2d4f8ce 100644 --- a/src/fetch-committee.js +++ b/src/fetch-committee.js @@ -1,7 +1,13 @@ -const { prepareSpeakers } = require('./utils'); +const { prepareSpeakers, trySelectSettings } = require('./utils'); +const { personFragment } = require('./fragments'); + +const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, { + avatarWidth: 500, + avatarHeight: 500, +}); const queryPages = /* GraphQL */ ` - query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) { + query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) { conf: conferenceBrand(where: { title: $conferenceTitle }) { id status @@ -9,25 +15,13 @@ const queryPages = /* GraphQL */ ` id status committee { - id - name - company - country - bio - githubUrl - twitterUrl - avatar { - url( - transformation: { - image: { resize: { width: 500, height: 500, fit: crop } } - document: { output: { format: jpg } } - } - ) - } + ...person } } } } + +${personFragment} `; const fetchData = async (client, vars) => { @@ -46,6 +40,7 @@ const fetchData = async (client, vars) => { module.exports = { fetchData, + selectSettings, queryPages, getData: data => data.conf.year[0].committee, story: 'Programme Committee', diff --git a/src/fetch-mc.js b/src/fetch-mc.js index 5ae8552..32d4cad 100644 --- a/src/fetch-mc.js +++ b/src/fetch-mc.js @@ -1,8 +1,13 @@ -const { prepareSpeakers } = require('./utils'); +const { prepareSpeakers, trySelectSettings } = require('./utils'); const { personFragment } = require('./fragments'); +const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, { + avatarWidth: 500, + avatarHeight: 500, +}); + const queryPages = /* GraphQL */ ` - query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) { + query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) { conf: conferenceBrand(where: { title: $conferenceTitle }) { id status @@ -36,6 +41,7 @@ const fetchData = async(client, vars) => { module.exports = { fetchData, + selectSettings, queryPages, getData: data => data.conf.year[0].mcs, story: 'MCs', diff --git a/src/fetch-performance.js b/src/fetch-performance.js index 4ac2473..cdbf237 100644 --- a/src/fetch-performance.js +++ b/src/fetch-performance.js @@ -1,8 +1,13 @@ -const { prepareSpeakers } = require('./utils'); +const { prepareSpeakers, trySelectSettings } = require('./utils'); const { personFragment } = require('./fragments'); +const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, { + avatarWidth: 500, + avatarHeight: 500, +}); + const queryPages = /* GraphQL */ ` - query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) { + query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) { conf: conferenceBrand(where: { title: $conferenceTitle }) { id status @@ -35,6 +40,7 @@ const fetchData = async (client, vars) => { module.exports = { fetchData, + selectSettings, queryPages, getData: data => data.conf.year[0].performanceTeam, story: 'performance', diff --git a/src/fetch-speakers.js b/src/fetch-speakers.js index e11f75a..23ca9af 100644 --- a/src/fetch-speakers.js +++ b/src/fetch-speakers.js @@ -1,8 +1,13 @@ -const { prepareSpeakers } = require('./utils'); +const { prepareSpeakers, trySelectSettings } = require('./utils'); const { speakerInfoFragment } = require('./fragments'); +const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, { + avatarWidth: 500, + avatarHeight: 500, +}); + const queryPages = /* GraphQL */ ` - query($conferenceTitle: ConferenceTitle, $eventYear: EventYear) { + query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) { conf: conferenceBrand(where: { title: $conferenceTitle }) { id status @@ -21,12 +26,10 @@ const queryPages = /* GraphQL */ ` `; const fetchData = async (client, vars) => { - const data = await client - .request(queryPages, vars) - .then(res => ({ - speakers: res.conf.year[0].speakers, - openForTalks: res.conf.year[0].openForTalks, - })); + const data = await client.request(queryPages, vars).then(res => ({ + speakers: res.conf.year[0].speakers, + openForTalks: res.conf.year[0].openForTalks, + })); const { openForTalks } = data; @@ -40,6 +43,7 @@ const fetchData = async (client, vars) => { module.exports = { fetchData, + selectSettings, queryPages, getData: data => data.conf.year[0].speakers, story: 'speakers', diff --git a/src/fetch-workshops.js b/src/fetch-workshops.js index 3916980..6f3d3f6 100644 --- a/src/fetch-workshops.js +++ b/src/fetch-workshops.js @@ -1,9 +1,14 @@ const { markdownToHtml } = require('./markdown'); -const { prepareSpeakers } = require('./utils'); +const { prepareSpeakers, trySelectSettings } = require('./utils'); const { speakerInfoFragment } = require('./fragments'); +const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, { + avatarWidth: 500, + avatarHeight: 500, +}); + const queryPages = /* GraphQL */ ` - query ($conferenceTitle: ConferenceTitle, $eventYear: EventYear) { + query ($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) { conf: conferenceBrand(where: {title: $conferenceTitle}) { id status @@ -78,6 +83,7 @@ const fetchData = async (client, vars) => { module.exports = { fetchData, + selectSettings, queryPages, getData: data => data.conf.year[0].schedule, story: 'schedule/workshops', diff --git a/src/fragments.js b/src/fragments.js index 86d5623..653b0e4 100644 --- a/src/fragments.js +++ b/src/fragments.js @@ -1,12 +1,12 @@ const personAvatarFragment = /* GraphQL */ ` fragment avatarUrl on Speaker { avatar { - url #( - # transformation: { - # image: { resize: { width: 500, height: 500, fit: crop } } - # document: { output: { format: jpg } } - # } - #) + url ( + transformation: { + image: { resize: { width: $avatarWidth, height: $avatarHeight, fit: crop } } + document: { output: { format: jpg } } + } + ) } } `; diff --git a/src/index.js b/src/index.js index ecb285c..b19991d 100644 --- a/src/index.js +++ b/src/index.js @@ -26,15 +26,16 @@ const createClient = ({ endpoint, token }) => { const client = createClient(credentials); const queriesData = []; -const getQueriesData = content => { +const getQueriesData = (content, conferenceSettings) => { try { - const { fetchData, ...data } = content; + const { fetchData, selectSettings = () => undefined, ...data } = content; if (!Object.keys(data).length) return; + data.vars = selectSettings(conferenceSettings); queriesData.push(data); } catch (err) {} }; -const getContent = async () => { +const getContent = async conferenceSettings => { const fetchAll = [ textContent, pageContent, @@ -51,8 +52,13 @@ const getContent = async () => { committeeContent, ].map(async content => { try { - getQueriesData(content); - return await content.fetchData(client, { conferenceTitle, eventYear }); + getQueriesData(content, conferenceSettings); + const getVarsFromSettings = content.selectSettings || (() => undefined); + return await content.fetchData(client, { + conferenceTitle, + eventYear, + ...getVarsFromSettings(conferenceSettings), + }); } catch (err) { console.error(err); } diff --git a/src/utils.js b/src/utils.js index 9a8d4f2..db4024d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,42 +1,42 @@ const { markdownToHtml } = require('./markdown'); const tagColors = { - 'NodeJS': { + NodeJS: { tagBG: '#7AB464', color: '#fff', }, - 'WebGL': { + WebGL: { tagBG: '#ff7302', - color: '#ffffff' + color: '#ffffff', }, - 'Ecosystem': { + Ecosystem: { tagBG: '#fff40d', - color: '#ae4f01' + color: '#ae4f01', }, - 'Language': { + Language: { tagBG: '#fff40d', - color: '#ae4f01' + color: '#ae4f01', }, - 'GraphQL': { + GraphQL: { tagBG: '#f200fa', color: '#400042', }, - 'VueJS': { + VueJS: { tagBG: '#4EBA87', color: '#fff', }, - 'Performance': { + Performance: { tagBG: '#00ed24', color: '#00410a', }, - 'TypeScript': { + TypeScript: { tagBG: '#61DAFB', - color: '#030303' + color: '#030303', }, default: { tagBG: 'black', - color: 'white' - } + color: 'white', + }, }; const getSocials = speaker => { @@ -47,8 +47,14 @@ const getSocials = speaker => { ownSite: 'site', }; const { githubUrl, twitterUrl, mediumUrl, ownSite, companySite } = speaker; - const socials = Object.entries({ githubUrl, twitterUrl, mediumUrl, ownSite, companySite }) - .map(([key, val]) => (val && { link: val, icon: ICONS[key] })) + const socials = Object.entries({ + githubUrl, + twitterUrl, + mediumUrl, + ownSite, + companySite, + }) + .map(([key, val]) => val && { link: val, icon: ICONS[key] }) .filter(Boolean); return socials; }; @@ -58,30 +64,33 @@ const getLabelColor = label => { return colors; }; -const prepareSpeakers = speakers => speakers - .map(item => ({ - ...item.speaker, - ...item, - avatar: item.speaker.avatar || {}, - })) - .map( - async ({ - bio, - speaker, - avatar, - ...item - }) => ({ +const prepareSpeakers = speakers => + speakers + .map(item => ({ + ...item.speaker, + ...item, + avatar: item.speaker.avatar || {}, + })) + .map(async ({ bio, speaker, avatar, ...item }) => ({ ...item, company: `${item.company}, ${item.country}`, avatar: avatar.url, bio: await markdownToHtml(bio), socials: getSocials(item), ...getLabelColor(item.label), - }) - ); + })); + +const trySelectSettings = (selector, defaultSettings) => settings => { + try { + return selector(settings) || defaultSettings; + } catch { + return defaultSettings; + } +}; module.exports = { getLabelColor, prepareSpeakers, tagColors, + trySelectSettings, };