From a864f6958423efb3180ee9a926397351c4c03f7c Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:20:43 +0000 Subject: [PATCH 1/7] [CARE-6533] Bumped theme-kit version --- next-env.d.ts | 2 +- package-lock.json | 31 ++++++++++++++++--------------- package.json | 2 +- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..40c3d6809 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/package-lock.json b/package-lock.json index 7fc69987f..58f233b12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@prezly/content-renderer-react-js": "0.39.2", "@prezly/sdk": "21.12.0", "@prezly/story-content-format": "0.65.1", - "@prezly/theme-kit-nextjs": "9.7.2", + "@prezly/theme-kit-nextjs": "9.8.1", "@prezly/uploadcare": "2.5.0", "@prezly/uploadcare-image": "0.3.2", "@react-hookz/web": "14.7.1", @@ -3137,9 +3137,9 @@ } }, "node_modules/@prezly/theme-kit-core": { - "version": "9.7.1", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-9.7.1.tgz", - "integrity": "sha512-53N+22cIsc9qM+8JLbTw2g63UsaR1ljy7adgrB3mCpVvfN/2G2YRXBMU7O6tmjxsWBRafbOzUjlm/TXayEUlsg==", + "version": "9.8.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-9.8.1.tgz", + "integrity": "sha512-jIJgJTIUg4x5zbSInzwiVbSGlBZHaweSGzGEfW8vrpw2U54IQ2rW3QgnhtkmsAMFfQXWFghHijNan8rsZx5cnQ==", "license": "MIT", "dependencies": { "@prezly/theme-kit-intl": "^9.6.0", @@ -3192,11 +3192,12 @@ } }, "node_modules/@prezly/theme-kit-nextjs": { - "version": "9.7.2", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-9.7.2.tgz", - "integrity": "sha512-YFFg8zYV7dXZTAbfBNvIEvVfOTlgsVsX3eAdQFJXm8n2tksZThtjvnMpCRMMtJG/WsibHOw0svIDmUWyGfl4jQ==", + "version": "9.8.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-9.8.1.tgz", + "integrity": "sha512-aEscCFL+R2CwNK2BTyrfTzK94qV5mUB7duzn38Dy37/TSoEvdhJuIW1h2ahZjOg+C5e78PibQg825T8T3Sk9yA==", + "license": "MIT", "dependencies": { - "@prezly/theme-kit-core": "^9.7.1", + "@prezly/theme-kit-core": "^9.8.1", "@prezly/theme-kit-intl": "^9.6.0", "@prezly/theme-kit-react": "^9.6.0", "@technically/is-not-undefined": "^1.0.0", @@ -20854,9 +20855,9 @@ } }, "@prezly/theme-kit-core": { - "version": "9.7.1", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-9.7.1.tgz", - "integrity": "sha512-53N+22cIsc9qM+8JLbTw2g63UsaR1ljy7adgrB3mCpVvfN/2G2YRXBMU7O6tmjxsWBRafbOzUjlm/TXayEUlsg==", + "version": "9.8.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-9.8.1.tgz", + "integrity": "sha512-jIJgJTIUg4x5zbSInzwiVbSGlBZHaweSGzGEfW8vrpw2U54IQ2rW3QgnhtkmsAMFfQXWFghHijNan8rsZx5cnQ==", "requires": { "@prezly/theme-kit-intl": "^9.6.0", "@prezly/uploadcare": "2.4.4", @@ -20897,11 +20898,11 @@ } }, "@prezly/theme-kit-nextjs": { - "version": "9.7.2", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-9.7.2.tgz", - "integrity": "sha512-YFFg8zYV7dXZTAbfBNvIEvVfOTlgsVsX3eAdQFJXm8n2tksZThtjvnMpCRMMtJG/WsibHOw0svIDmUWyGfl4jQ==", + "version": "9.8.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-9.8.1.tgz", + "integrity": "sha512-aEscCFL+R2CwNK2BTyrfTzK94qV5mUB7duzn38Dy37/TSoEvdhJuIW1h2ahZjOg+C5e78PibQg825T8T3Sk9yA==", "requires": { - "@prezly/theme-kit-core": "^9.7.1", + "@prezly/theme-kit-core": "^9.8.1", "@prezly/theme-kit-intl": "^9.6.0", "@prezly/theme-kit-react": "^9.6.0", "@technically/is-not-undefined": "^1.0.0", diff --git a/package.json b/package.json index d9bfa97ce..4888fdf5d 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@prezly/content-renderer-react-js": "0.39.2", "@prezly/sdk": "21.12.0", "@prezly/story-content-format": "0.65.1", - "@prezly/theme-kit-nextjs": "9.7.2", + "@prezly/theme-kit-nextjs": "9.8.1", "@prezly/uploadcare": "2.5.0", "@prezly/uploadcare-image": "0.3.2", "@react-hookz/web": "14.7.1", From b0d1d9014474147602308ee2038423de6c880183 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:21:34 +0000 Subject: [PATCH 2/7] [CARE-6533] Added tag page to theme routing --- adapters/server/routing.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/adapters/server/routing.ts b/adapters/server/routing.ts index 8ee15c644..d97ffa98a 100644 --- a/adapters/server/routing.ts +++ b/adapters/server/routing.ts @@ -27,6 +27,7 @@ export function configureAppRouter() { return Router.create({ index: route('/(:localeSlug)', '/:localeCode'), category: route('(/:localeSlug)/category/:slug', '/:localeCode/category/:slug'), + tag: route('(/:localeSlug)/tag/:tag', '/:localeCode/tag/:tag'), media: route('(/:localeSlug)/media', '/:localeCode/media'), mediaGallery: route('(/:localeSlug)/media/album/:uuid', '/:localeCode/media/album/:uuid'), search: route('(/:localeSlug)/search', '/:localeCode/search'), From fd5e9786a5b32582ab72deab6e29c4b8f9c46cb1 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:25:34 +0000 Subject: [PATCH 3/7] [CARE-6533] Added tag support in fetch stories API --- app/api/stories/route.ts | 2 ++ modules/InfiniteStories/InfiniteStories.tsx | 8 ++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/api/stories/route.ts b/app/api/stories/route.ts index b12a4e973..ff606e16c 100644 --- a/app/api/stories/route.ts +++ b/app/api/stories/route.ts @@ -13,12 +13,14 @@ export async function GET(request: NextRequest) { const limit = parseNumber(params.get('limit')) ?? DEFAULT_LIMIT; const locale = params.get('locale') as Locale.Code | null; const categoryId = parseNumber(params.get('category')); + const tag = params.get('tag'); const { stories, pagination } = await app().stories({ offset, limit, category: categoryId ? { id: categoryId } : undefined, locale: locale ? { code: locale } : undefined, + tags: tag ? [tag] : undefined, }); return NextResponse.json({ data: stories, total: pagination.matched_records_number }); diff --git a/modules/InfiniteStories/InfiniteStories.tsx b/modules/InfiniteStories/InfiniteStories.tsx index 99deec501..a99c5421a 100644 --- a/modules/InfiniteStories/InfiniteStories.tsx +++ b/modules/InfiniteStories/InfiniteStories.tsx @@ -17,6 +17,7 @@ import styles from './InfiniteStories.module.scss'; type Props = { categories?: Category[]; category?: Pick; + tag?: string; excludedStoryUuids?: Story['uuid'][]; fullWidthFeaturedStory?: boolean; initialStories: ListStory[]; @@ -36,6 +37,7 @@ function fetchStories( limit: number, category: Props['category'], excludedStoryUuids: Story['uuid'][] | undefined, + tag: Props['tag'], ) { return http.get<{ data: ListStory[]; total: number }>('/api/stories', { limit, @@ -43,12 +45,14 @@ function fetchStories( locale: localeCode, category: category?.id, query: excludedStoryUuids && JSON.stringify({ uuid: { $nin: excludedStoryUuids } }), + tag, }); } export function InfiniteStories({ categories, category, + tag, excludedStoryUuids, fullWidthFeaturedStory = false, initialStories, @@ -64,8 +68,8 @@ export function InfiniteStories({ const locale = useLocale(); const { load, loading, data, done } = useInfiniteLoading( useCallback( - (offset) => fetchStories(locale, offset, pageSize, category, excludedStoryUuids), - [category, excludedStoryUuids, locale, pageSize], + (offset) => fetchStories(locale, offset, pageSize, category, excludedStoryUuids, tag), + [category, excludedStoryUuids, locale, pageSize, tag], ), { data: initialStories, total }, ); From f2eba4189755bf6a68b5834f916755ff019ebd9c Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:26:07 +0000 Subject: [PATCH 4/7] [CARE-6533] Added Tag index page component --- modules/Tag/Tag.module.scss | 5 ++++ modules/Tag/Tag.tsx | 56 +++++++++++++++++++++++++++++++++++++ modules/Tag/index.ts | 1 + 3 files changed, 62 insertions(+) create mode 100644 modules/Tag/Tag.module.scss create mode 100644 modules/Tag/Tag.tsx create mode 100644 modules/Tag/index.ts diff --git a/modules/Tag/Tag.module.scss b/modules/Tag/Tag.module.scss new file mode 100644 index 000000000..219beaf32 --- /dev/null +++ b/modules/Tag/Tag.module.scss @@ -0,0 +1,5 @@ +.pageTitle { + > h1 { + text-transform: capitalize; + } +} diff --git a/modules/Tag/Tag.tsx b/modules/Tag/Tag.tsx new file mode 100644 index 000000000..8e3405da9 --- /dev/null +++ b/modules/Tag/Tag.tsx @@ -0,0 +1,56 @@ +import type { Locale } from '@prezly/theme-kit-nextjs'; + +import { app } from '@/adapters/server'; +import { PageTitle } from '@/components/PageTitle'; +import type { ThemeSettings } from 'theme-settings'; + +import { InfiniteStories } from '../InfiniteStories'; + +import styles from './Tag.module.scss'; + +interface Props { + tag: string; + locale: Locale.Code; + layout: ThemeSettings['layout']; + pageSize: number; + showDate: boolean; + showSubtitle: boolean; + storyCardVariant: ThemeSettings['story_card_variant']; +} + +export async function Tag({ + tag, + locale, + layout, + pageSize, + showDate, + showSubtitle, + storyCardVariant, +}: Props) { + const { stories, pagination } = await app().stories({ + limit: pageSize, + locale: { code: locale }, + tags: [tag], + }); + + const newsroom = await app().newsroom(); + const languageSettings = await app().languageOrDefault(locale); + + return ( + <> + + + + ); +} diff --git a/modules/Tag/index.ts b/modules/Tag/index.ts new file mode 100644 index 000000000..ba2338b7b --- /dev/null +++ b/modules/Tag/index.ts @@ -0,0 +1 @@ +export { Tag } from './Tag'; From 93b1be44afe43bb9b139b919e14e35527a9805f1 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:26:23 +0000 Subject: [PATCH 5/7] [CARE-6533] Added tag page to theme --- app/[localeCode]/tag/[tag]/page.tsx | 42 +++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 app/[localeCode]/tag/[tag]/page.tsx diff --git a/app/[localeCode]/tag/[tag]/page.tsx b/app/[localeCode]/tag/[tag]/page.tsx new file mode 100644 index 000000000..f1bb3683d --- /dev/null +++ b/app/[localeCode]/tag/[tag]/page.tsx @@ -0,0 +1,42 @@ +import type { Locale } from '@prezly/theme-kit-nextjs'; +import type { Metadata } from 'next'; + +import { app, generatePageMetadata, routing } from '@/adapters/server'; +import { Tag as TagIndexPage } from '@/modules/Tag'; +import { getStoryListPageSize, parsePreviewSearchParams } from 'utils'; + +interface Props { + params: { + localeCode: Locale.Code; + tag: NonNullable; + }; + searchParams: Record; +} + +export async function generateMetadata({ params }: Props): Promise { + const { generateUrl } = await routing(); + const { localeCode, tag } = params; + + return generatePageMetadata({ + locale: localeCode, + title: tag, + generateUrl: (locale) => generateUrl('tag', { localeCode: locale, tag }), + }); +} + +export default async function TagPage({ params, searchParams }: Props) { + const themeSettings = await app().themeSettings(); + const settings = parsePreviewSearchParams(searchParams, themeSettings); + + return ( + + ); +} From d08d648725706d30a8f48e0e3272e04e2b1ed7a0 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:52:13 +0000 Subject: [PATCH 6/7] [CARE-6533] Passed params as object --- modules/InfiniteStories/InfiniteStories.tsx | 27 ++++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/modules/InfiniteStories/InfiniteStories.tsx b/modules/InfiniteStories/InfiniteStories.tsx index a99c5421a..89eb09a18 100644 --- a/modules/InfiniteStories/InfiniteStories.tsx +++ b/modules/InfiniteStories/InfiniteStories.tsx @@ -31,14 +31,15 @@ type Props = { total: number; }; -function fetchStories( - localeCode: Locale.Code, - offset: number, - limit: number, - category: Props['category'], - excludedStoryUuids: Story['uuid'][] | undefined, - tag: Props['tag'], -) { +function fetchStories(props: { + localeCode: Locale.Code; + offset: number; + limit: number; + category: Props['category']; + excludedStoryUuids: Story['uuid'][] | undefined; + tag: Props['tag']; +}) { + const { localeCode, offset, limit, category, excludedStoryUuids, tag } = props; return http.get<{ data: ListStory[]; total: number }>('/api/stories', { limit, offset, @@ -68,7 +69,15 @@ export function InfiniteStories({ const locale = useLocale(); const { load, loading, data, done } = useInfiniteLoading( useCallback( - (offset) => fetchStories(locale, offset, pageSize, category, excludedStoryUuids, tag), + (offset) => + fetchStories({ + localeCode: locale, + offset, + limit: pageSize, + category, + excludedStoryUuids, + tag, + }), [category, excludedStoryUuids, locale, pageSize, tag], ), { data: initialStories, total }, From 139b5919829c5d329e2b308e6b9ee33aea18f9c9 Mon Sep 17 00:00:00 2001 From: Francis Gyimah Date: Tue, 5 Nov 2024 09:55:14 +0000 Subject: [PATCH 7/7] [CARE-6533] Capitalize tag in page title --- app/[localeCode]/tag/[tag]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[localeCode]/tag/[tag]/page.tsx b/app/[localeCode]/tag/[tag]/page.tsx index f1bb3683d..08e75f526 100644 --- a/app/[localeCode]/tag/[tag]/page.tsx +++ b/app/[localeCode]/tag/[tag]/page.tsx @@ -19,7 +19,7 @@ export async function generateMetadata({ params }: Props): Promise { return generatePageMetadata({ locale: localeCode, - title: tag, + title: tag.charAt(0).toUpperCase() + tag.slice(1), generateUrl: (locale) => generateUrl('tag', { localeCode: locale, tag }), }); }