diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-16 19:40:23 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-16 19:40:23 +0200 |
| commit | c77c58e18143233be042c4980a6ed08ae9beac52 (patch) | |
| tree | 94f7d828571a86470ae299fff7dffd32fb38de7c /src/pages/article | |
| parent | 2155550fa36a3bc3c8f66e0926530123b4018cd4 (diff) | |
chore: adjust and complete missing styles
* add logo to topics pages and links
* add Prism styles to articles
* and a few other adjustements
Diffstat (limited to 'src/pages/article')
| -rw-r--r-- | src/pages/article/[slug].tsx | 43 |
1 files changed, 39 insertions, 4 deletions
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index 5eeabd9..995e3a9 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -1,5 +1,6 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Link from '@components/atoms/links/link'; +import ResponsiveImage from '@components/molecules/images/responsive-image'; import Sharing from '@components/organisms/widgets/sharing'; import PageLayout, { type PageLayoutProps, @@ -9,15 +10,20 @@ import { getArticleBySlug, } from '@services/graphql/articles'; import { getPostComments } from '@services/graphql/comments'; +import styles from '@styles/pages/article.module.scss'; import { type Article, type Comment } from '@ts/types/app'; import { loadTranslation, type Messages } from '@utils/helpers/i18n'; +import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr'; import useBreadcrumb from '@utils/hooks/use-breadcrumb'; +import usePrismPlugins, { PrismPlugin } from '@utils/hooks/use-prism-plugins'; import useSettings from '@utils/hooks/use-settings'; import { GetStaticPaths, GetStaticProps, NextPage } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { ParsedUrlQuery } from 'querystring'; +import { HTMLAttributes } from 'react'; +import { useIntl } from 'react-intl'; import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts'; import useSWR from 'swr'; @@ -54,16 +60,31 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => { )), }; + const intl = useIntl(); + const footerMetaLabel = intl.formatMessage({ + defaultMessage: 'Read more articles about:', + description: 'ArticlePage: footer topics list label', + id: '50xc4o', + }); + const footerMeta: PageLayoutProps['footerMeta'] = { - topics: - topics && - topics.map((topic) => { + custom: topics && { + label: footerMetaLabel, + value: topics.map((topic) => { return ( - <ButtonLink key={topic.id} target={`/sujet/${topic.slug}`}> + <ButtonLink + key={topic.id} + target={`/sujet/${topic.slug}`} + className={styles.btn} + > + {topic.logo && ( + <ResponsiveImage className={styles.btn__icon} {...topic.logo} /> + )}{' '} {topic.name} </ButtonLink> ); }), + }, }; const { website } = useSettings(); @@ -156,6 +177,15 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => { }); }; + const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers']; + const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins); + useAddPrismClassAttr({ + attributes: { + 'data-filter-output': '#output#"', + }, + classNames: pluginsClassName, + }); + return ( <> <Head> @@ -173,6 +203,10 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => { /> <PageLayout allowComments={true} + bodyAttributes={{ + ...(pluginsAttribute as HTMLAttributes<HTMLDivElement>), + }} + bodyClassName={styles.body} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} comments={data && getCommentsList(data)} @@ -185,6 +219,7 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => { widgets={[ <Sharing key="sharing-widget" + className={styles.widget} data={{ excerpt: intro, title, url: pageUrl }} media={[ 'diaspora', |