From 8c12b1c619b0d6bc79cdca8ea302b87bcadccca3 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:55:49 +0200 Subject: [PATCH] wip --- .../src/client/index.ts | 125 ++---------------- .../src/index.ts | 7 +- .../src/lifecycle/contentLoaded.ts | 8 +- .../src/options.ts | 2 + .../src/plugin-content-showcase.d.ts | 3 +- .../src/tags.ts | 18 ++- .../src/theme-classic.d.ts | 6 +- .../theme/Showcase/ClearAllButton/index.tsx | 8 +- .../src/theme/Showcase/FavoriteIcon/index.tsx | 1 - .../theme/Showcase/OperatorButton/index.tsx | 22 ++- .../src/theme/Showcase/ShowcaseCard/index.tsx | 26 ++-- .../theme/Showcase/ShowcaseCards/index.tsx | 37 +++--- .../theme/Showcase/ShowcaseFilters/index.tsx | 18 +-- .../Showcase/ShowcaseTagSelect/index.tsx | 1 - .../src/theme/Showcase/index.tsx | 4 +- .../src/contexts/showcase.tsx | 33 +++-- 16 files changed, 126 insertions(+), 193 deletions(-) diff --git a/packages/docusaurus-plugin-content-showcase/src/client/index.ts b/packages/docusaurus-plugin-content-showcase/src/client/index.ts index 823f0a6840..552e32011e 100644 --- a/packages/docusaurus-plugin-content-showcase/src/client/index.ts +++ b/packages/docusaurus-plugin-content-showcase/src/client/index.ts @@ -19,27 +19,27 @@ import type { ShowcaseItem, } from '@docusaurus/plugin-content-showcase'; -export function filterUsers({ - users, +export function filterItems({ + items, tags, operator, searchName, }: { - users: ShowcaseItem[]; + items: ShowcaseItem[]; tags: TagType[]; operator: Operator; searchName: string | undefined | null; }): ShowcaseItem[] { if (searchName) { // eslint-disable-next-line no-param-reassign - users = users.filter((user) => + items = items.filter((user) => user.title.toLowerCase().includes(searchName.toLowerCase()), ); } if (tags.length === 0) { - return users; + return items; } - return users.filter((user) => { + return items.filter((user) => { if (user.tags.length === 0) { return false; } @@ -71,19 +71,19 @@ export function useOperator(): [Operator, () => void] { return [operator, toggleOperator]; } -export function useFilteredUsers(users: ShowcaseItem[]): ShowcaseItem[] { +export function useFilteredItems(items: ShowcaseItem[]): ShowcaseItem[] { const [tags] = useTags(); const [searchName] = useSearchName() ?? ['']; const [operator] = useOperator(); return useMemo( () => - filterUsers({ - users, + filterItems({ + items, tags: tags as TagType[], operator, searchName, }), - [users, tags, operator, searchName], + [items, tags, operator, searchName], ); } @@ -122,108 +122,7 @@ export type Tag = { color: string; }; -export const Tags: {[type in TagType]: Tag} = { - favorite: { - label: translate({message: 'Favorite'}), - description: translate({ - message: - 'Our favorite Docusaurus sites that you must absolutely check out!', - id: 'showcase.tag.favorite.description', - }), - color: '#e9669e', - }, - - opensource: { - label: translate({message: 'Open-Source'}), - description: translate({ - message: 'Open-Source Docusaurus sites can be useful for inspiration!', - id: 'showcase.tag.opensource.description', - }), - color: '#39ca30', - }, - - product: { - label: translate({message: 'Product'}), - description: translate({ - message: 'Docusaurus sites associated to a commercial product!', - id: 'showcase.tag.product.description', - }), - color: '#dfd545', - }, - - design: { - label: translate({message: 'Design'}), - description: translate({ - message: - 'Beautiful Docusaurus sites, polished and standing out from the initial template!', - id: 'showcase.tag.design.description', - }), - color: '#a44fb7', - }, - - i18n: { - label: translate({message: 'I18n'}), - description: translate({ - message: - 'Translated Docusaurus sites using the internationalization support with more than 1 locale.', - id: 'showcase.tag.i18n.description', - }), - color: '#127f82', - }, - - versioning: { - label: translate({message: 'Versioning'}), - description: translate({ - message: - 'Docusaurus sites using the versioning feature of the docs plugin to manage multiple versions.', - id: 'showcase.tag.versioning.description', - }), - color: '#fe6829', - }, - - large: { - label: translate({message: 'Large'}), - description: translate({ - message: - 'Very large Docusaurus sites, including many more pages than the average!', - id: 'showcase.tag.large.description', - }), - color: '#8c2f00', - }, - - meta: { - label: translate({message: 'Meta'}), - description: translate({ - message: 'Docusaurus sites of Meta (formerly Facebook) projects', - id: 'showcase.tag.meta.description', - }), - color: '#4267b2', // Facebook blue - }, - - personal: { - label: translate({message: 'Personal'}), - description: translate({ - message: - 'Personal websites, blogs and digital gardens built with Docusaurus', - id: 'showcase.tag.personal.description', - }), - color: '#14cfc3', - }, - - rtl: { - label: translate({message: 'RTL Direction'}), - description: translate({ - message: - 'Docusaurus sites using the right-to-left reading direction support.', - id: 'showcase.tag.rtl.description', - }), - color: '#ffcfc3', - }, -}; - -export const TagList = Object.keys(Tags) as TagType[]; - -export function sortUsers(params: ShowcaseItem[]): ShowcaseItem[] { +export function sortItems(params: ShowcaseItem[]): ShowcaseItem[] { let result = params; // Sort by site name result = sortBy(result, (user) => user.title.toLowerCase()); @@ -231,5 +130,3 @@ export function sortUsers(params: ShowcaseItem[]): ShowcaseItem[] { result = sortBy(result, (user) => !user.tags.includes('favorite')); return result; } - -// export const sortedUsers = sortUsers(); diff --git a/packages/docusaurus-plugin-content-showcase/src/index.ts b/packages/docusaurus-plugin-content-showcase/src/index.ts index 8dc1952ec5..0cbc27c158 100644 --- a/packages/docusaurus-plugin-content-showcase/src/index.ts +++ b/packages/docusaurus-plugin-content-showcase/src/index.ts @@ -37,17 +37,17 @@ export default async function pluginContentShowcase( contentPath: path.resolve(siteDir, sitePath), contentPathLocalized: getPluginI18nPath({ localizationDir, - pluginName: 'docusaurus-plugin-content-pages', + pluginName: 'docusaurus-plugin-content-showcase', pluginId: id, }), }; - const tagList = await getTagsList({ + const {tags: validatedTags, tagkeys} = await getTagsList({ configTags: tags, configPath: contentPaths.contentPath, }); - const showcaseItemSchema = createShowcaseItemSchema(tagList); + const showcaseItemSchema = createShowcaseItemSchema(tagkeys); return { name: 'docusaurus-plugin-content-showcase', @@ -80,6 +80,7 @@ export default async function pluginContentShowcase( await processContentLoaded({ content, + tags: validatedTags, routeBasePath, addRoute, }); diff --git a/packages/docusaurus-plugin-content-showcase/src/lifecycle/contentLoaded.ts b/packages/docusaurus-plugin-content-showcase/src/lifecycle/contentLoaded.ts index cea61c5e40..b44877242b 100644 --- a/packages/docusaurus-plugin-content-showcase/src/lifecycle/contentLoaded.ts +++ b/packages/docusaurus-plugin-content-showcase/src/lifecycle/contentLoaded.ts @@ -5,16 +5,21 @@ * LICENSE file in the root directory of this source tree. */ -import type {ShowcaseItems} from '@docusaurus/plugin-content-showcase'; +import type { + ShowcaseItems, + TagsOption, +} from '@docusaurus/plugin-content-showcase'; import type {PluginContentLoadedActions} from '@docusaurus/types'; export async function processContentLoaded({ content, + tags, routeBasePath, addRoute, }: { content: ShowcaseItems; routeBasePath: string; + tags: TagsOption; addRoute: PluginContentLoadedActions['addRoute']; }): Promise { addRoute({ @@ -22,6 +27,7 @@ export async function processContentLoaded({ component: '@theme/Showcase', props: { items: content.items, + tags, }, exact: true, }); diff --git a/packages/docusaurus-plugin-content-showcase/src/options.ts b/packages/docusaurus-plugin-content-showcase/src/options.ts index c92ad6fbd0..a9181cef82 100644 --- a/packages/docusaurus-plugin-content-showcase/src/options.ts +++ b/packages/docusaurus-plugin-content-showcase/src/options.ts @@ -17,6 +17,7 @@ export const DEFAULT_OPTIONS: PluginOptions = { include: ['**/*.{yml,yaml}'], // TODO exclude won't work if user pass a custom file name exclude: [...GlobExcludeDefault, 'tags.*'], + screenshotApi: 'https://slorber-api-screenshot.netlify.app', tags: 'tags.yml', }; @@ -28,6 +29,7 @@ const PluginOptionSchema = Joi.object({ tags: Joi.alternatives() .try(Joi.string().default(DEFAULT_OPTIONS.tags), tagSchema) .default(DEFAULT_OPTIONS.tags), + screenshotApi: Joi.string().default(DEFAULT_OPTIONS.screenshotApi), }); export function validateOptions({ diff --git a/packages/docusaurus-plugin-content-showcase/src/plugin-content-showcase.d.ts b/packages/docusaurus-plugin-content-showcase/src/plugin-content-showcase.d.ts index 703031d06d..b303c0a643 100644 --- a/packages/docusaurus-plugin-content-showcase/src/plugin-content-showcase.d.ts +++ b/packages/docusaurus-plugin-content-showcase/src/plugin-content-showcase.d.ts @@ -32,7 +32,7 @@ declare module '@docusaurus/plugin-content-showcase' { | 'rtl'; export type TagsOption = { - [tagName: string]: Tag; + [type in TagType]: Tag; }; export type PluginOptions = { @@ -42,6 +42,7 @@ declare module '@docusaurus/plugin-content-showcase' { include: string[]; exclude: string[]; tags: string | TagsOption; + screenshotApi: string; }; export type ShowcaseItem = { diff --git a/packages/docusaurus-plugin-content-showcase/src/tags.ts b/packages/docusaurus-plugin-content-showcase/src/tags.ts index 6804c071b4..756175cb7c 100644 --- a/packages/docusaurus-plugin-content-showcase/src/tags.ts +++ b/packages/docusaurus-plugin-content-showcase/src/tags.ts @@ -9,7 +9,10 @@ import fs from 'fs-extra'; import path from 'path'; import Yaml from 'js-yaml'; import {Joi} from '@docusaurus/utils-validation'; -import type {PluginOptions} from '@docusaurus/plugin-content-showcase'; +import type { + PluginOptions, + TagsOption, +} from '@docusaurus/plugin-content-showcase'; export const tagSchema = Joi.object().pattern( Joi.string(), @@ -35,7 +38,7 @@ export async function getTagsList({ }: { configTags: PluginOptions['tags']; configPath: PluginOptions['path']; -}): Promise { +}): Promise<{tagkeys: string[]; tags: TagsOption}> { if (typeof configTags === 'object') { const tags = tagSchema.validate(configTags); if (tags.error) { @@ -44,7 +47,10 @@ export async function getTagsList({ {cause: tags}, ); } - return Object.keys(tags.value); + return { + tagkeys: Object.keys(tags.value), + tags: tags.value, + }; } const tagsPath = path.resolve(configPath, configTags); @@ -61,8 +67,10 @@ export async function getTagsList({ ); } - const tagLabels = Object.keys(tags.value); - return tagLabels; + return { + tagkeys: Object.keys(tags.value), + tags: tags.value, + }; } catch (error) { throw new Error(`Failed to read tags file for showcase`, {cause: error}); } diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 11dc7667e0..e1dee49472 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -248,10 +248,14 @@ declare module '@theme/BlogPostItems' { } declare module '@theme/Showcase' { - import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase'; + import type { + ShowcaseItem, + TagsOption, + } from '@docusaurus/plugin-content-showcase'; export type Props = { items: ShowcaseItem[]; + tags: TagsOption; }; export default function Showcase(props: Props): JSX.Element; diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ClearAllButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ClearAllButton/index.tsx index 372706062e..48208c0224 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ClearAllButton/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ClearAllButton/index.tsx @@ -7,16 +7,20 @@ import React, {type ReactNode} from 'react'; import {useClearQueryString} from '@docusaurus/theme-common'; +import Translate from '@docusaurus/Translate'; export default function ClearAllButton(): ReactNode { const clearQueryString = useClearQueryString(); - // TODO translate return ( ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/FavoriteIcon/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/FavoriteIcon/index.tsx index 4ce2b57242..9b880ca3ee 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/FavoriteIcon/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/FavoriteIcon/index.tsx @@ -7,7 +7,6 @@ import React from 'react'; import clsx from 'clsx'; - import type {Props} from '@theme/Showcase/FavoriteIcon'; import styles from './styles.module.css'; diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/OperatorButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/OperatorButton/index.tsx index 7ed3f4eb0c..d58b194a58 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/OperatorButton/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/OperatorButton/index.tsx @@ -8,13 +8,12 @@ import React, {useId} from 'react'; import clsx from 'clsx'; import {useOperator} from '@docusaurus/plugin-content-showcase/client'; - +import Translate from '@docusaurus/Translate'; import styles from './styles.module.css'; export default function OperatorButton(): JSX.Element { const id = useId(); const [operator, toggleOperator] = useOperator(); - // TODO add translations return ( <> + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} ); diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx index c5c64ca9d0..e465817791 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx @@ -9,12 +9,8 @@ import React from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; -// import Image from '@theme/IdealImage'; -import { - sortBy, - Tags, - TagList, -} from '@docusaurus/plugin-content-showcase/client'; +import {sortBy} from '@docusaurus/plugin-content-showcase/client'; +import {useShowcase} from '@docusaurus/theme-common/internal'; import Heading from '@theme/Heading'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import type {ShowcaseItem, TagType} from '@docusaurus/plugin-content-showcase'; @@ -26,11 +22,14 @@ function TagItem({ color, }: { label: string; - description: string; + description: { + message: string; + id: string; + }; color: string; }) { return ( -
  • +
  • {label.toLowerCase()}
    • @@ -38,6 +37,9 @@ function TagItem({ } function ShowcaseCardTag({tags}: {tags: TagType[]}) { + const {tags: Tags} = useShowcase(); + const TagList = Object.keys(Tags) as TagType[]; + const tagObjects = tags.map((tag) => ({tag, ...Tags[tag]})); // Keep same order for all tags @@ -54,23 +56,21 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) { ); } -function getCardImage(user: ShowcaseItem): string { +function getCardImage(item: ShowcaseItem): string { return ( - user.preview ?? + item.preview ?? // TODO make it configurable `https://slorber-api-screenshot.netlify.app/${encodeURIComponent( - user.website, + item.website, )}/showcase` ); } function ShowcaseCard({item}: {item: ShowcaseItem}) { - console.log('ShowcaseCard user:', item); const image = getCardImage(item); return (
  • - {/* TODO change back to ideal image */} {item.title}
    diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx index 2fc3ddc0ae..664ebc80ac 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx @@ -9,21 +9,20 @@ import type {ReactNode} from 'react'; import clsx from 'clsx'; import Translate from '@docusaurus/Translate'; import { - useFilteredUsers, - sortUsers, + useFilteredItems, + sortItems, } from '@docusaurus/plugin-content-showcase/client'; import {useShowcase} from '@docusaurus/theme-common/internal'; import Heading from '@theme/Heading'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import ShowcaseCard from '@theme/Showcase/ShowcaseCard'; import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase'; - import styles from './styles.module.css'; function HeadingNoResult() { return ( - No result + No result ); } @@ -40,7 +39,7 @@ function HeadingFavorites() { function HeadingAllSites() { return ( - All sites + All sites ); } @@ -52,7 +51,6 @@ function CardList({ heading?: ReactNode; items: ShowcaseItem[]; }) { - console.log('CardList items:', items); return (
    {heading} @@ -76,40 +74,37 @@ function NoResultSection() { } export default function ShowcaseCards(): JSX.Element { - const users = useShowcase().items; - console.log('ShowcaseCards users:', users); + const {showcaseItems: items} = useShowcase(); - const filteredUsers = useFilteredUsers(users); + const filteredItems = useFilteredItems(items); - if (filteredUsers.length === 0) { + if (filteredItems.length === 0) { return ; } - const sortedUsers = sortUsers(users); + const sortedItems = sortItems(items); - const favoriteUsers = sortedUsers.filter((user: ShowcaseItem) => - user.tags.includes('favorite'), + const favoriteItems = sortedItems.filter((item: ShowcaseItem) => + item.tags.includes('favorite'), ); - console.log('favoriteUsers:', favoriteUsers); - const otherUsers = sortedUsers.filter( - (user: ShowcaseItem) => !user.tags.includes('favorite'), + const otherItems = sortedItems.filter( + (item: ShowcaseItem) => !item.tags.includes('favorite'), ); - console.log('otherUsers:', otherUsers); return (
    - {filteredUsers.length === sortedUsers.length ? ( + {filteredItems.length === sortedItems.length ? ( <>
    - } items={favoriteUsers} /> + } items={favoriteItems} />
    - } items={otherUsers} /> + } items={otherItems} />
    ) : ( - + )}
    ); diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx index d07971cae0..ac6159c9ca 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx @@ -9,10 +9,8 @@ import type {ReactNode, CSSProperties} from 'react'; import clsx from 'clsx'; import Translate from '@docusaurus/Translate'; import { - useFilteredUsers, + useFilteredItems, useSiteCountPlural, - Tags, - TagList, } from '@docusaurus/plugin-content-showcase/client'; import {useShowcase} from '@docusaurus/theme-common/internal'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; @@ -21,7 +19,6 @@ import ShowcaseTagSelect from '@theme/Showcase/ShowcaseTagSelect'; import OperatorButton from '@theme/Showcase/OperatorButton'; import ClearAllButton from '@theme/Showcase/ClearAllButton'; import type {TagType} from '@docusaurus/plugin-content-showcase'; - import styles from './styles.module.css'; function TagCircleIcon({color, style}: {color: string; style?: CSSProperties}) { @@ -39,13 +36,14 @@ function TagCircleIcon({color, style}: {color: string; style?: CSSProperties}) { } function ShowcaseTagListItem({tag}: {tag: TagType}) { - const {label, description, color} = Tags[tag]; + const {tags} = useShowcase(); + const {label, description, color} = tags[tag]; return (
  • @@ -65,6 +63,8 @@ function ShowcaseTagListItem({tag}: {tag: TagType}) { } function ShowcaseTagList() { + const {tags} = useShowcase(); + const TagList = Object.keys(tags) as TagType[]; return (
      {TagList.map((tag) => { @@ -75,15 +75,15 @@ function ShowcaseTagList() { } function HeadingText() { - const users = useShowcase().items; - const filteredUsers = useFilteredUsers(users); + const {showcaseItems: items} = useShowcase(); + const filteredItems = useFilteredItems(items); const siteCountPlural = useSiteCountPlural(); return (
      Filters - {siteCountPlural(filteredUsers.length)} + {siteCountPlural(filteredItems.length)}
      ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTagSelect/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTagSelect/index.tsx index 3b10d3db50..c47c88451b 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTagSelect/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseTagSelect/index.tsx @@ -8,7 +8,6 @@ import React, {useCallback, type ReactNode, useId} from 'react'; import {useTags} from '@docusaurus/plugin-content-showcase/client'; import type {Props} from '@theme/Showcase/ShowcaseTagSelect'; - import styles from './styles.module.css'; function useTagState(tag: string) { diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx index b34c8518ed..403e6f5bae 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx @@ -6,12 +6,10 @@ */ import Translate, {translate} from '@docusaurus/Translate'; - import Link from '@docusaurus/Link'; import {ShowcaseProvider} from '@docusaurus/theme-common/internal'; import Layout from '@theme/Layout'; import Heading from '@theme/Heading'; - import ShowcaseSearchBar from '@theme/Showcase/ShowcaseSearchBar'; import ShowcaseCards from '@theme/Showcase/ShowcaseCards'; import ShowcaseFilters from '@theme/Showcase/ShowcaseFilters'; @@ -39,7 +37,7 @@ function ShowcaseHeader() { export default function Showcase(props: Props): JSX.Element { return ( - +
      diff --git a/packages/docusaurus-theme-common/src/contexts/showcase.tsx b/packages/docusaurus-theme-common/src/contexts/showcase.tsx index 85ffe61c90..26f13617fe 100644 --- a/packages/docusaurus-theme-common/src/contexts/showcase.tsx +++ b/packages/docusaurus-theme-common/src/contexts/showcase.tsx @@ -7,31 +7,40 @@ import React, {useMemo, type ReactNode, useContext} from 'react'; import {ReactContextError} from '../utils/reactUtils'; -import type {ShowcaseItems} from '@docusaurus/plugin-content-showcase'; +import type { + ShowcaseItem, + TagsOption, +} from '@docusaurus/plugin-content-showcase'; -const Context = React.createContext(null); +const Context = React.createContext<{ + showcaseItems: ShowcaseItem[]; + tags: TagsOption; +} | null>(null); -function useContextValue(content: ShowcaseItems): ShowcaseItems { - return useMemo( - () => ({ - items: content.items, - }), - [content], - ); +function useContextValue( + content: ShowcaseItem[], + tags: TagsOption, +): {showcaseItems: ShowcaseItem[]; tags: TagsOption} { + return useMemo(() => ({showcaseItems: content, tags}), [content, tags]); } export function ShowcaseProvider({ children, content, + tags, }: { children: ReactNode; - content: ShowcaseItems; + content: ShowcaseItem[]; + tags: TagsOption; }): JSX.Element { - const contextValue = useContextValue(content); + const contextValue = useContextValue(content, tags); return {children}; } -export function useShowcase(): ShowcaseItems { +export function useShowcase(): { + showcaseItems: ShowcaseItem[]; + tags: TagsOption; +} { const showcase = useContext(Context); if (showcase === null) { throw new ReactContextError('ShowcaseProvider');