From 3fae938e86353ea451e1e2ae36ceec86705754d1 Mon Sep 17 00:00:00 2001 From: Malin J Date: Wed, 26 Jul 2023 12:31:28 +0200 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8Add=20more=20aspectratios=20on=20f?= =?UTF-8?q?ullwidthimage=20#1756?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/objects/fullWidthImage.tsx | 14 +++++++++++++ web/lib/queries/common/pageContentFields.ts | 5 ++++- .../topicPages/FullWidthImage.tsx | 20 +++++++++++-------- web/types/types.ts | 6 +++++- 4 files changed, 35 insertions(+), 10 deletions(-) diff --git a/sanityv3/schemas/objects/fullWidthImage.tsx b/sanityv3/schemas/objects/fullWidthImage.tsx index 5f5c06fe2..1c7da4ed4 100644 --- a/sanityv3/schemas/objects/fullWidthImage.tsx +++ b/sanityv3/schemas/objects/fullWidthImage.tsx @@ -17,6 +17,20 @@ export default { type: 'imageWithAltAndCaption', validation: (Rule: Rule) => Rule.required(), }, + { + name: 'aspectRatio', + type: 'string', + title: 'Aspect ratio', + options: { + list: [ + { title: '10:3', value: '10:3' }, + { title: '2:1', value: '2:1' }, + ], + layout: 'dropdown', + }, + initialValue: '10:3', + validation: (Rule: Rule) => Rule.required(), + }, ], preview: { select: { diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 3893d7fe2..2c0692188 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -65,7 +65,10 @@ const pageContentFields = /* groq */ ` _type == "fullWidthImage"=>{ "type": _type, "id": _key, - image + image, + "designOptions": { + "aspectRatio": coalesce(aspectRatio, '10:3'), + }, }, _type == "fullWidthVideo"=>{ "type": _type, diff --git a/web/pageComponents/topicPages/FullWidthImage.tsx b/web/pageComponents/topicPages/FullWidthImage.tsx index 171d23145..4c9268bdc 100644 --- a/web/pageComponents/topicPages/FullWidthImage.tsx +++ b/web/pageComponents/topicPages/FullWidthImage.tsx @@ -1,6 +1,7 @@ import type { FullWidthImageData } from '../../types/types' import Image, { Ratios } from '../shared/SanityImage' import { StyledCaption } from '../shared/image/StyledCaption' +import useWindowSize from '../../lib/hooks/useWindowSize' type TeaserProps = { data: FullWidthImageData @@ -9,17 +10,20 @@ type TeaserProps = { const FullWidthImage = ({ data, anchor }: TeaserProps) => { const { image, attribution, caption } = data.image + const { aspectRatio } = data.designOptions + const { width } = useWindowSize() + + const ratio = + width && width < 750 + ? Ratios.ONE_TO_TWO + : aspectRatio === String(Ratios.ONE_TO_TWO) + ? Ratios.ONE_TO_TWO + : Ratios.THREE_TO_TEN + if (!image) return null return ( <> - {image.alt} + {image.alt} {image.asset && } ) diff --git a/web/types/types.ts b/web/types/types.ts index 23ef801ee..f34356f76 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -321,6 +321,9 @@ export type FullWidthImageData = { type: string id: string image: ImageWithCaptionData + designOptions: { + aspectRatio: FullWidthImageRatio + } } export type FullWidthVideoData = { @@ -340,6 +343,8 @@ export type FullWidthVideoData = { } } +export type FullWidthImageRatio = '10:3' | '2:1' + export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1' export type FigureData = { @@ -701,7 +706,6 @@ export type VideoPlayerCarouselData = { title?: PortableTextBlock[] } - export type LoopingVideoRatio = '1:2' | 'narrow' export type LoopingVideoData = { From 4ce2d8df78d6bdf0dca2ac60c22f2d2dfc227840 Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Mon, 14 Aug 2023 13:48:16 +0530 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=90=9B=20Fix=20rarios=20#1791?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/objects/fullWidthImage.tsx | 8 ++++---- web/pageComponents/topicPages/FullWidthImage.tsx | 2 +- web/types/types.ts | 4 +--- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/sanityv3/schemas/objects/fullWidthImage.tsx b/sanityv3/schemas/objects/fullWidthImage.tsx index 1c7da4ed4..e88369585 100644 --- a/sanityv3/schemas/objects/fullWidthImage.tsx +++ b/sanityv3/schemas/objects/fullWidthImage.tsx @@ -19,16 +19,16 @@ export default { }, { name: 'aspectRatio', - type: 'string', + type: 'number', title: 'Aspect ratio', options: { list: [ - { title: '10:3', value: '10:3' }, - { title: '2:1', value: '2:1' }, + { title: '10:3', value: 0.3 }, + { title: '2:1', value: 0.5 }, ], layout: 'dropdown', }, - initialValue: '10:3', + initialValue: '0.3', validation: (Rule: Rule) => Rule.required(), }, ], diff --git a/web/pageComponents/topicPages/FullWidthImage.tsx b/web/pageComponents/topicPages/FullWidthImage.tsx index 4c9268bdc..7a998cdd0 100644 --- a/web/pageComponents/topicPages/FullWidthImage.tsx +++ b/web/pageComponents/topicPages/FullWidthImage.tsx @@ -16,7 +16,7 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => { const ratio = width && width < 750 ? Ratios.ONE_TO_TWO - : aspectRatio === String(Ratios.ONE_TO_TWO) + : aspectRatio === Ratios.ONE_TO_TWO ? Ratios.ONE_TO_TWO : Ratios.THREE_TO_TEN diff --git a/web/types/types.ts b/web/types/types.ts index f34356f76..005416e9f 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -322,7 +322,7 @@ export type FullWidthImageData = { id: string image: ImageWithCaptionData designOptions: { - aspectRatio: FullWidthImageRatio + aspectRatio: number } } @@ -343,8 +343,6 @@ export type FullWidthVideoData = { } } -export type FullWidthImageRatio = '10:3' | '2:1' - export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1' export type FigureData = { From f8c431934ee9a12e7037d8f30c65f7c5ea7dc171 Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Thu, 17 Aug 2023 19:07:01 +0530 Subject: [PATCH 3/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Simplify=20check=20#17?= =?UTF-8?q?56?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pageComponents/topicPages/FullWidthImage.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/web/pageComponents/topicPages/FullWidthImage.tsx b/web/pageComponents/topicPages/FullWidthImage.tsx index 7a998cdd0..8cd90f075 100644 --- a/web/pageComponents/topicPages/FullWidthImage.tsx +++ b/web/pageComponents/topicPages/FullWidthImage.tsx @@ -13,12 +13,7 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => { const { aspectRatio } = data.designOptions const { width } = useWindowSize() - const ratio = - width && width < 750 - ? Ratios.ONE_TO_TWO - : aspectRatio === Ratios.ONE_TO_TWO - ? Ratios.ONE_TO_TWO - : Ratios.THREE_TO_TEN + const ratio = (width && width < 750) || aspectRatio === Ratios.ONE_TO_TWO ? Ratios.ONE_TO_TWO : Ratios.THREE_TO_TEN if (!image) return null return ( From d33af234e9e13c729c6c0c2964ec078840779f2f Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:30:43 +0530 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=94=A8=20Migration=20scripts=20for=20?= =?UTF-8?q?adjusting=20aspectRatio=20#1756?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/scripts/README.md | 6 ++ sanityv3/scripts/aspectRatioDefaults.mjs | 55 ++++++++++++++++ sanityv3/scripts/automateScripts.mjs | 7 +++ sanityv3/scripts/convertToPortableText.mjs | 73 ++++++++++++++++++++++ sanityv3/scripts/getSanityClients.mjs | 12 ++++ sanityv3/scripts/migrateFullWidthImage.mjs | 60 ++++++++++++++++++ 6 files changed, 213 insertions(+) create mode 100644 sanityv3/scripts/README.md create mode 100644 sanityv3/scripts/aspectRatioDefaults.mjs create mode 100644 sanityv3/scripts/automateScripts.mjs create mode 100644 sanityv3/scripts/convertToPortableText.mjs create mode 100644 sanityv3/scripts/getSanityClients.mjs create mode 100644 sanityv3/scripts/migrateFullWidthImage.mjs diff --git a/sanityv3/scripts/README.md b/sanityv3/scripts/README.md new file mode 100644 index 000000000..921e27ecb --- /dev/null +++ b/sanityv3/scripts/README.md @@ -0,0 +1,6 @@ +# Description + +This folder contains scripts used to migrate content. + +- Change the target scripts array with the desired migration scripts. +- `npx sanity exec 'automateScripts.mjs'` to run the migration scripts. diff --git a/sanityv3/scripts/aspectRatioDefaults.mjs b/sanityv3/scripts/aspectRatioDefaults.mjs new file mode 100644 index 000000000..35f338ac5 --- /dev/null +++ b/sanityv3/scripts/aspectRatioDefaults.mjs @@ -0,0 +1,55 @@ +/* eslint-disable no-console */ +import { sanityClients } from './getSanityClients.mjs' + +// Replace figure with fullWidthImage and set aspectRatio to 0.3 +const fetchDocuments = (client) => + client.fetch( + /* groq */ `*[_type in ['page','magazine'] && length(content[_type == 'figure' && aspectRatio == null])>0][0..100]{ _id,"images":content[_type == 'figure'&& aspectRatio == null]} `, + ) + +const buildPatches = (docs) => + docs + .map((doc) => + doc.images.map((image) => ({ + id: doc._id, + patch: { + set: { + [`content[_key =="${image._key}"].aspectRatio`]: 'original', + }, + // this will cause the migration to fail if any of the documents has been + // modified since it was fetched. + ifRevisionID: doc._rev, + }, + })), + ) + .flat() + +const createTransaction = (patches, client) => + patches.reduce((tx, patch) => tx.patch(patch.id, patch.patch), client.transaction()) + +const commitTransaction = (tx) => tx.commit() + +const migrateNextBatch = async (client) => { + const documents = await fetchDocuments(client) + const patches = buildPatches(documents, client) + if (patches.length === 0) { + console.log('No more documents to migrate!') + return null + } + console.log( + `Migrating batch:\n %s`, + patches.map((patch) => `${patch.id} => ${JSON.stringify(patch.patch)}`).join('\n'), + ) + const transaction = createTransaction(patches, client) + await commitTransaction(transaction) + return migrateNextBatch(client) +} + +export default function script() { + sanityClients.map((client) => + migrateNextBatch(client).catch((err) => { + console.error(err) + process.exit(1) + }), + ) +} diff --git a/sanityv3/scripts/automateScripts.mjs b/sanityv3/scripts/automateScripts.mjs new file mode 100644 index 000000000..f2a581577 --- /dev/null +++ b/sanityv3/scripts/automateScripts.mjs @@ -0,0 +1,7 @@ +const targetScripts = ['aspectRatioDefaults.mjs'] + +targetScripts.map(async (script) => { + const migrationScript = await import(`./${script}`) + const runScript = migrationScript.default + runScript() +}) diff --git a/sanityv3/scripts/convertToPortableText.mjs b/sanityv3/scripts/convertToPortableText.mjs new file mode 100644 index 000000000..e01a87f46 --- /dev/null +++ b/sanityv3/scripts/convertToPortableText.mjs @@ -0,0 +1,73 @@ +/* eslint-disable no-console */ + +import { customAlphabet } from 'nanoid' +import { sanityClients } from './getSanityClients.mjs' + +const nanoid = customAlphabet('1234567890abcdef', 12) + +const fetchDocuments = (client) => + client.fetch( + /* groq */ `*[_type in ['page','magazine'] && length(content[_type == "promoTileArray"].group[count(title)==null])>0][0..100] {_id, _rev, "promotileArray":content[_type == "promoTileArray"].group[count(title)==null] }`, + ) + +const buildPatches = (docs) => + docs + .map((doc) => + doc.promotileArray.map((promoTile) => ({ + id: doc._id, + patch: { + set: { + [`content..[_key =="${promoTile._key}"].title`]: [ + { + style: 'normal', + _type: 'block', + _key: nanoid(), + children: [ + { + _type: 'span', + marks: [], + _key: nanoid(), + text: `${promoTile.title}`, + }, + ], + markDefs: [], + }, + ], + }, + // this will cause the migration to fail if any of the documents has been + // modified since it was fetched. + ifRevisionID: doc._rev, + }, + })), + ) + .flat() + +const createTransaction = (patches, client) => + patches.reduce((tx, patch) => tx.patch(patch.id, patch.patch), client.transaction()) + +const commitTransaction = (tx) => tx.commit() + +const migrateNextBatch = async (client) => { + const documents = await fetchDocuments(client) + const patches = buildPatches(documents, client) + if (patches.length === 0) { + console.log('No more documents to migrate!') + return null + } + console.log( + `Migrating batch:\n %s`, + patches.map((patch) => `${patch.id} => ${JSON.stringify(patch.patch)}`).join('\n'), + ) + const transaction = createTransaction(patches, client) + await commitTransaction(transaction) + return migrateNextBatch(client) +} + +export default function script() { + sanityClients.map((client) => + migrateNextBatch(client).catch((err) => { + console.error(err) + process.exit(1) + }), + ) +} diff --git a/sanityv3/scripts/getSanityClients.mjs b/sanityv3/scripts/getSanityClients.mjs new file mode 100644 index 000000000..2135fdb3c --- /dev/null +++ b/sanityv3/scripts/getSanityClients.mjs @@ -0,0 +1,12 @@ +//eslint-disable-next-line +import { createClient } from '@sanity/client' + +const datasets = ['global-development'] +export const sanityClients = datasets.map((dataset) => { + return createClient({ + apiVersion: '2023-08-29', + projectId: process.env.SANITY_STUDIO_API_PROJECT_ID || 'h61q9gi9', + token: process.env.SANITY_STUDIO_MUTATION_TOKEN, + dataset: dataset, + }) +}) diff --git a/sanityv3/scripts/migrateFullWidthImage.mjs b/sanityv3/scripts/migrateFullWidthImage.mjs new file mode 100644 index 000000000..0e4982824 --- /dev/null +++ b/sanityv3/scripts/migrateFullWidthImage.mjs @@ -0,0 +1,60 @@ +/** + * This script replaces FullWidthImage from imageWithAlt to imageWithAltAndCaption + */ +/* eslint-disable no-console */ +import { sanityClients } from './getSanityClients' + +const fetchDocuments = (client) => + client.fetch( + /* groq */ `*[_type in ['page','magazine'] && count(content[_type=="fullWidthImage" && image._type == "imageWithAlt"])>0][0..100]{_id,"images":content[_type=="fullWidthImage" && image._type == "imageWithAlt"]}`, + ) + +const buildPatches = (docs) => + docs + .map((doc) => + doc.images.map((image) => ({ + id: doc._id, + patch: { + set: { + [`content[_key =="${image._key}"].image`]: { + _type: 'imageWithAltAndCaption', + image: image.image, + }, + }, + // this will cause the migration to fail if any of the documents has been + // modified since it was fetched. + ifRevisionID: doc._rev, + }, + })), + ) + .flat() + +const createTransaction = (patches, client) => + patches.reduce((tx, patch) => tx.patch(patch.id, patch.patch), client.transaction()) + +const commitTransaction = (tx) => tx.commit() + +const migrateNextBatch = async (client) => { + const documents = await fetchDocuments(client) + const patches = buildPatches(documents, client) + if (patches.length === 0) { + console.log('No more documents to migrate!') + return null + } + console.log( + `Migrating batch:\n %s`, + patches.map((patch) => `${patch.id} => ${JSON.stringify(patch.patch)}`).join('\n'), + ) + const transaction = createTransaction(patches, client) + await commitTransaction(transaction) + return migrateNextBatch(client) +} + +export default function script() { + sanityClients.map((client) => + migrateNextBatch(client).catch((err) => { + console.error(err) + process.exit(1) + }), + ) +} From ce3307c88b9629b98f1e95e779572ca5f4f2452c Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:41:19 +0530 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20Aspect=20ratio=20default=20#?= =?UTF-8?q?1756?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/objects/fullWidthImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sanityv3/schemas/objects/fullWidthImage.tsx b/sanityv3/schemas/objects/fullWidthImage.tsx index e88369585..4deb362e2 100644 --- a/sanityv3/schemas/objects/fullWidthImage.tsx +++ b/sanityv3/schemas/objects/fullWidthImage.tsx @@ -28,7 +28,7 @@ export default { ], layout: 'dropdown', }, - initialValue: '0.3', + initialValue: 0.3, validation: (Rule: Rule) => Rule.required(), }, ],