From c77c58e18143233be042c4980a6ed08ae9beac52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 16 May 2022 19:40:23 +0200 Subject: chore: adjust and complete missing styles * add logo to topics pages and links * add Prism styles to articles * and a few other adjustements --- src/pages/article/[slug].tsx | 43 +++++++++++++++++++++++++++++++++++++++---- src/pages/blog/index.tsx | 12 +----------- src/pages/cv.tsx | 19 +++++++++++++++++-- src/pages/recherche/index.tsx | 12 +----------- src/pages/sujet/[slug].tsx | 35 ++++++++++++++++++++++++++++------- 5 files changed, 86 insertions(+), 35 deletions(-) (limited to 'src/pages') 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 = ({ 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 ( - + + {topic.logo && ( + + )}{' '} {topic.name} ); }), + }, }; const { website } = useSettings(); @@ -156,6 +177,15 @@ const ArticlePage: NextPage = ({ comments, post }) => { }); }; + const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers']; + const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins); + useAddPrismClassAttr({ + attributes: { + 'data-filter-output': '#output#"', + }, + classNames: pluginsClassName, + }); + return ( <> @@ -173,6 +203,10 @@ const ArticlePage: NextPage = ({ comments, post }) => { /> ), + }} + bodyClassName={styles.body} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} comments={data && getCommentsList(data)} @@ -185,6 +219,7 @@ const ArticlePage: NextPage = ({ comments, post }) => { widgets={[ = ({ '@graph': [webpageSchema, blogSchema], }; - const postsCount = intl.formatMessage( - { - defaultMessage: - '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', - id: 'OF5cPz', - description: 'BlogPage: posts count meta', - }, - { postsCount: totalArticles } - ); - /** * Retrieve the formatted meta. * @@ -231,7 +221,7 @@ const BlogPage: NextPage = ({ title={title} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} - headerMeta={{ total: postsCount }} + headerMeta={{ total: totalArticles }} widgets={[ { '@graph': [webpageSchema, cvSchema], }; + const components: NestedMDXComponents = { + a: (props) => , + h1: (props) => , + h2: (props) => , + h3: (props) => , + h4: (props) => , + h5: (props) => , + h6: (props) => , + Link: (props) => , + List: (props) => , + }; + return ( { type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> - + ); }; diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx index 0a7dc60..d88a293 100644 --- a/src/pages/recherche/index.tsx +++ b/src/pages/recherche/index.tsx @@ -140,16 +140,6 @@ const SearchPage: NextPage = ({ getTotalArticles(query.s as string) ); - const postsCount = intl.formatMessage( - { - defaultMessage: - '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', - id: 'LtsVOx', - description: 'SearchPage: posts count meta', - }, - { postsCount: totalArticles || 0 } - ); - /** * Retrieve the formatted meta. * @@ -244,7 +234,7 @@ const SearchPage: NextPage = ({ title={title} breadcrumb={breadcrumbItems} breadcrumbSchema={breadcrumbSchema} - headerMeta={{ total: postsCount }} + headerMeta={{ total: totalArticles }} widgets={[ = ({ currentTopic, topics }) => { const { content, intro, meta, slug, title } = currentTopic; - const { articles, dates, seo, thematics } = meta; + const { + articles, + cover, + dates, + seo, + thematics, + website: officialWebsite, + } = meta; const intl = useIntl(); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, @@ -45,6 +54,8 @@ const TopicPage: NextPage = ({ currentTopic, topics }) => { const headerMeta: PageLayoutProps['headerMeta'] = { publication: { date: dates.publication }, update: dates.update ? { date: dates.update } : undefined, + website: officialWebsite, + total: articles ? articles.length : undefined, }; const { website } = useSettings(); @@ -98,10 +109,10 @@ const TopicPage: NextPage = ({ currentTopic, topics }) => { ...remainingData } = article; - const { cover, ...remainingMeta } = articleMeta; + const { cover: articleCover, ...remainingMeta } = articleMeta; return { - cover, + cover: articleCover, excerpt: articleIntro, meta: getPostMeta(remainingMeta), url: `/article/${articleSlug}`, @@ -122,6 +133,15 @@ const TopicPage: NextPage = ({ currentTopic, topics }) => { id: '/sRqPT', }); + const getPageHeading = () => { + return ( + <> + {cover && } + {title} + + ); + }; + return ( <> @@ -140,7 +160,7 @@ const TopicPage: NextPage = ({ currentTopic, topics }) => { = async ({ const allTopics = allTopicsEdges.edges.map((edge) => getPageLinkFromRawData(edge.node) ); + const topicsLinks = allTopics.filter( + (topic) => topic.slug !== (params!.slug as TopicParams['slug']) + ); const translation = await loadTranslation(locale); return { props: { currentTopic: JSON.parse(JSON.stringify(currentTopic)), - topics: allTopics.filter( - (topic) => topic.slug !== (params!.slug as TopicParams['slug']) - ), + topics: JSON.parse(JSON.stringify(topicsLinks)), translation, }, }; -- cgit v1.2.3