aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-01-06 17:55:24 +0100
committerArmand Philippot <git@armandphilippot.com>2022-01-06 18:14:42 +0100
commitb9c1953c79688fc3f536b7927692309c9780b5da (patch)
tree673a26c0b0a9cc587f89d1eea9af739c3f17daf2 /src/pages
parent544f8cd400f888464a18ee30836f63d4b93a0822 (diff)
refactor: reuse PostMeta components on single articles/pages
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/article/[slug].tsx25
-rw-r--r--src/pages/contact.tsx8
-rw-r--r--src/pages/cv.tsx24
-rw-r--r--src/pages/mentions-legales.tsx28
-rw-r--r--src/pages/sujet/[slug].tsx34
-rw-r--r--src/pages/thematique/[slug].tsx6
6 files changed, 74 insertions, 51 deletions
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 493f061..e8df85e 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -9,7 +9,7 @@ import { config } from '@config/website';
import { t } from '@lingui/macro';
import { getAllPostsSlug, getPostBySlug } from '@services/graphql/queries';
import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleProps } from '@ts/types/articles';
+import { ArticleMeta, ArticleProps } from '@ts/types/articles';
import { loadTranslation } from '@utils/helpers/i18n';
import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism';
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
@@ -32,6 +32,13 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
title,
} = post;
+ const meta: ArticleMeta = {
+ author,
+ commentCount: comments.length,
+ dates,
+ thematics,
+ };
+
const router = useRouter();
const locale = router.locale ? router.locale : config.defaultLocale;
@@ -51,17 +58,15 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
<meta name="description" content={seo.metaDesc} />
</Head>
<article>
- <PostHeader
- author={author}
- dates={dates}
- intro={intro}
- title={title}
- thematics={thematics}
- />
- <ToC />
+ <PostHeader intro={intro} meta={meta} title={title} />
+ <aside>
+ <ToC />
+ </aside>
<div dangerouslySetInnerHTML={{ __html: content }}></div>
<PostFooter subjects={subjects} />
- <Sharing title={title} excerpt={intro} />
+ <aside>
+ <Sharing title={title} excerpt={intro} />
+ </aside>
<section>
<h2>{t`Comments`}</h2>
<CommentsList comments={comments} />
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 3ce6098..ca82f5b 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -9,6 +9,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
import { FormEvent, useState } from 'react';
+import PostHeader from '@components/PostHeader/PostHeader';
const ContactPage: NextPageWithLayout = () => {
const [name, setName] = useState('');
@@ -48,6 +49,9 @@ const ContactPage: NextPageWithLayout = () => {
}
};
+ const title = t`Contact`;
+ const intro = t`Please fill the form to contact me.`;
+
return (
<>
<Head>
@@ -55,9 +59,7 @@ const ContactPage: NextPageWithLayout = () => {
<meta name="description" content={seo.contact.description} />
</Head>
<article>
- <header>
- <h1>{t`Contact`}</h1>
- </header>
+ <PostHeader title={title} intro={intro} />
<div>
<p>{t`All fields marked with * are required.`}</p>
{status && <p>{status}</p>}
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 5107f6a..3faa941 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -6,8 +6,19 @@ import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
import CVContent, { intro, meta } from '@content/pages/cv.mdx';
+import PostHeader from '@components/PostHeader/PostHeader';
+import { ArticleMeta } from '@ts/types/articles';
const CV: NextPageWithLayout = () => {
+ const dates = {
+ publication: meta.publishedOn,
+ update: meta.updatedOn,
+ };
+
+ const pageMeta: ArticleMeta = {
+ dates,
+ };
+
return (
<>
<Head>
@@ -15,12 +26,13 @@ const CV: NextPageWithLayout = () => {
<meta name="description" content={seo.cv.description} />
</Head>
<article>
- <header>
- <h1>{meta.title}</h1>
- <div dangerouslySetInnerHTML={{ __html: intro }}></div>
- </header>
- <ToC />
- <CVContent />
+ <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
+ <aside>
+ <ToC />
+ </aside>
+ <div>
+ <CVContent />
+ </div>
</article>
</>
);
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 6bb1a55..d8dfe49 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -5,9 +5,23 @@ import { NextPageWithLayout } from '@ts/types/app';
import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
-import LegalNoticeContent, { meta } from '@content/pages/legal-notice.mdx';
+import LegalNoticeContent, {
+ intro,
+ meta,
+} from '@content/pages/legal-notice.mdx';
+import PostHeader from '@components/PostHeader/PostHeader';
+import { ArticleMeta } from '@ts/types/articles';
const LegalNotice: NextPageWithLayout = () => {
+ const dates = {
+ publication: meta.publishedOn,
+ update: meta.updatedOn,
+ };
+
+ const pageMeta: ArticleMeta = {
+ dates,
+ };
+
return (
<>
<Head>
@@ -15,11 +29,13 @@ const LegalNotice: NextPageWithLayout = () => {
<meta name="description" content={seo.legalNotice.description} />
</Head>
<article>
- <header>
- <h1>{meta.title}</h1>
- </header>
- <ToC />
- <LegalNoticeContent />
+ <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
+ <aside>
+ <ToC />
+ </aside>
+ <div>
+ <LegalNoticeContent />
+ </div>
</article>
</>
);
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 527d529..bcea544 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -5,13 +5,14 @@ import { NextPageWithLayout } from '@ts/types/app';
import { SubjectProps } from '@ts/types/taxonomies';
import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Image from 'next/image';
import { ParsedUrlQuery } from 'querystring';
import styles from '@styles/pages/Subject.module.scss';
import {
getAllSubjectsSlug,
getSubjectBySlug,
} from '@services/graphql/queries';
+import PostHeader from '@components/PostHeader/PostHeader';
+import { ArticleMeta } from '@ts/types/articles';
const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
const getPostsList = () => {
@@ -22,29 +23,18 @@ const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
));
};
+ const meta: ArticleMeta = {
+ website: subject.officialWebsite,
+ };
+
return (
<article>
- <header>
- <h1 className={styles.title}>
- {subject.featuredImage && (
- <span className={styles.cover}>
- <Image
- src={subject.featuredImage.sourceUrl}
- alt={subject.featuredImage.altText}
- layout="fill"
- />
- </span>
- )}
- {subject.title}
- </h1>
- {subject.officialWebsite && (
- <dl>
- <dt>{t`Official website:`}</dt>
- <dd>{subject.officialWebsite}</dd>
- </dl>
- )}
- <div dangerouslySetInnerHTML={{ __html: subject.intro }}></div>
- </header>
+ <PostHeader
+ cover={subject.featuredImage}
+ intro={subject.intro}
+ meta={meta}
+ title={subject.title}
+ />
<div dangerouslySetInnerHTML={{ __html: subject.content }}></div>
{subject.posts.length > 0 && (
<div>
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 74c2212..dca8f25 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -11,6 +11,7 @@ import {
getAllThematicsSlug,
getThematicBySlug,
} from '@services/graphql/queries';
+import PostHeader from '@components/PostHeader/PostHeader';
const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
const getPostsList = () => {
@@ -23,10 +24,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
return (
<article>
- <header>
- <h1>{thematic.title}</h1>
- <div dangerouslySetInnerHTML={{ __html: thematic.intro }}></div>
- </header>
+ <PostHeader intro={thematic.intro} title={thematic.title} />
<div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
{thematic.posts.length > 0 && (
<div>