From 4f768afe543bbf9e1857c41d03804f8e37ab3512 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 29 Sep 2023 21:29:45 +0200 Subject: refactor(components): rewrite List component * change `items` prop to children * replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props * add `hideMarker` prop * add `spacing` prop to control item spacing * move lists styles to Sass placeholders to avoid repeats because of headless WordPress --- src/pages/cv.tsx | 23 ++++++++- src/pages/index.tsx | 115 +++++++++++++++++-------------------------- src/pages/projets/[slug].tsx | 23 +++++++++ 3 files changed, 89 insertions(+), 72 deletions(-) (limited to 'src/pages') diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index 3910d61..5882ff6 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -19,6 +19,7 @@ import { PageLayout, SocialMedia, type MetaData, + ListItem, } from '../components'; import CVContent, { data, meta } from '../content/pages/cv.mdx'; import styles from '../styles/pages/cv.module.scss'; @@ -96,6 +97,24 @@ const H6 = ({ ); +const OrderedList = ({ + children, + ...props +}: HTMLAttributes) => ( + + {children} + +); + +const UnorderedList = ({ + children, + ...props +}: HTMLAttributes) => ( + + {children} + +); + const components: MDXComponents = { a: ExternalLink, h1: H1, @@ -104,8 +123,10 @@ const components: MDXComponents = { h4: H4, h5: H5, h6: H6, + li: ListItem, Link, - List, + ol: OrderedList, + ul: UnorderedList, }; /** diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 662ae81..1f1c9f3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -14,7 +14,7 @@ import { getLayout, Icon, List, - type ListItem, + ListItem, ResponsiveImage, Section, type SectionProps, @@ -90,10 +90,10 @@ const H6 = ({ */ const CodingLinks: FC = () => { const intl = useIntl(); - const links: ListItem[] = [ - { - id: 'web-development', - value: ( + + return ( + + {intl.formatMessage({ defaultMessage: 'Web development', @@ -101,11 +101,8 @@ const CodingLinks: FC = () => { id: 'vkF/RP', })} - ), - }, - { - id: 'projects', - value: ( + + {intl.formatMessage({ defaultMessage: 'Projects', @@ -113,12 +110,9 @@ const CodingLinks: FC = () => { id: 'N44SOc', })} - ), - }, - ]; - - // eslint-disable-next-line react/jsx-no-literals -- Kind config allowed - return ; + + + ); }; /** @@ -132,10 +126,10 @@ const ColdarkRepos: FC = () => { github: 'https://github.com/ArmandPhilippot/coldark', gitlab: 'https://gitlab.com/ArmandPhilippot/coldark', }; - const links: ListItem[] = [ - { - id: 'coldark-github', - value: ( + + return ( + + {intl.formatMessage({ defaultMessage: 'Github', @@ -143,11 +137,8 @@ const ColdarkRepos: FC = () => { id: '3f3PzH', })} - ), - }, - { - id: 'coldark-gitlab', - value: ( + + {intl.formatMessage({ defaultMessage: 'Gitlab', @@ -155,12 +146,9 @@ const ColdarkRepos: FC = () => { id: '7AnwZ7', })} - ), - }, - ]; - - // eslint-disable-next-line react/jsx-no-literals -- Kind config allowed - return ; + + + ); }; /** @@ -170,10 +158,10 @@ const ColdarkRepos: FC = () => { */ const LibreLinks: FC = () => { const intl = useIntl(); - const links: ListItem[] = [ - { - id: 'free', - value: ( + + return ( + + {intl.formatMessage({ defaultMessage: 'Free', @@ -181,11 +169,8 @@ const LibreLinks: FC = () => { id: 'w8GrOf', })} - ), - }, - { - id: 'linux', - value: ( + + {intl.formatMessage({ defaultMessage: 'Linux', @@ -193,12 +178,9 @@ const LibreLinks: FC = () => { id: 'jASD7k', })} - ), - }, - ]; - - // eslint-disable-next-line react/jsx-no-literals -- Kind config allowed - return ; + + + ); }; /** @@ -209,10 +191,10 @@ const LibreLinks: FC = () => { const ShaarliLink: FC = () => { const intl = useIntl(); const shaarliUrl = PERSONAL_LINKS.SHAARLI; - const links: ListItem[] = [ - { - id: 'shaarli', - value: ( + + return ( + + {intl.formatMessage({ defaultMessage: 'Shaarli', @@ -220,12 +202,9 @@ const ShaarliLink: FC = () => { id: 'i5L19t', })} - ), - }, - ]; - - // eslint-disable-next-line react/jsx-no-literals -- Kind config allowed - return ; + + + ); }; /** @@ -235,10 +214,10 @@ const ShaarliLink: FC = () => { */ const MoreLinks: FC = () => { const intl = useIntl(); - const links: ListItem[] = [ - { - id: 'contact-me', - value: ( + + return ( + + {intl.formatMessage({ @@ -247,11 +226,8 @@ const MoreLinks: FC = () => { id: 'sO/Iwj', })} - ), - }, - { - id: 'rss-feed', - value: ( + + {intl.formatMessage({ @@ -260,12 +236,9 @@ const MoreLinks: FC = () => { id: 'T4YA64', })} - ), - }, - ]; - - // eslint-disable-next-line react/jsx-no-literals -- Kind config allowed - return ; + + + ); }; const StyledColumns = (props: ColumnsProps) => ( diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx index 717ae13..89891b3 100644 --- a/src/pages/projets/[slug].tsx +++ b/src/pages/projets/[slug].tsx @@ -23,6 +23,8 @@ import { Spinner, type MetaData, Heading, + List, + ListItem, } from '../../components'; import styles from '../../styles/pages/project.module.scss'; import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types'; @@ -99,6 +101,24 @@ const H6 = ({ ); +const OrderedList = ({ + children, + ...props +}: HTMLAttributes) => ( + + {children} + +); + +const UnorderedList = ({ + children, + ...props +}: HTMLAttributes) => ( + + {children} + +); + const components: MDXComponents = { Code, Gallery, @@ -109,7 +129,10 @@ const components: MDXComponents = { h5: H5, h6: H6, Image: BorderedImage, + li: ListItem, Link, + ol: OrderedList, + ul: UnorderedList, }; type ProjectPageProps = { -- cgit v1.2.3