aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/cv.tsx48
-rw-r--r--src/pages/index.tsx379
-rw-r--r--src/pages/mentions-legales.tsx4
-rw-r--r--src/pages/projets/[slug].tsx16
-rw-r--r--src/pages/projets/index.tsx2
5 files changed, 243 insertions, 206 deletions
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 8b17da0..d938d98 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,5 +1,5 @@
-import Heading from '@components/atoms/headings/heading';
-import Link from '@components/atoms/links/link';
+import Heading, { HeadingProps } from '@components/atoms/headings/heading';
+import Link, { LinkProps } from '@components/atoms/links/link';
import List from '@components/atoms/lists/list';
import ImageWidget from '@components/organisms/widgets/image-widget';
import SocialMedia from '@components/organisms/widgets/social-media';
@@ -26,6 +26,32 @@ import Script from 'next/script';
import React, { ReactNode } from 'react';
import { useIntl } from 'react-intl';
+const ExternalLink = (props: LinkProps) => <Link external={true} {...props} />;
+
+const H1 = (props: Omit<HeadingProps, 'level'>) => {
+ return <Heading level={1} {...props} />;
+};
+
+const H2 = (props: Omit<HeadingProps, 'level'>) => {
+ return <Heading level={2} {...props} />;
+};
+
+const H3 = (props: Omit<HeadingProps, 'level'>) => {
+ return <Heading level={3} {...props} />;
+};
+
+const H4 = (props: Omit<HeadingProps, 'level'>) => {
+ return <Heading level={4} {...props} />;
+};
+
+const H5 = (props: Omit<HeadingProps, 'level'>) => {
+ return <Heading level={5} {...props} />;
+};
+
+const H6 = (props: Omit<HeadingProps, 'level'>) => {
+ return <Heading level={6} {...props} />;
+};
+
/**
* CV page.
*/
@@ -122,15 +148,15 @@ const CVPage: NextPageWithLayout = () => {
const schemaJsonLd = getSchemaJson([webpageSchema, cvSchema]);
const components: NestedMDXComponents = {
- a: (props) => <Link external={true} {...props} />,
- h1: (props) => <Heading level={1} {...props} />,
- h2: (props) => <Heading level={2} {...props} />,
- h3: (props) => <Heading level={3} {...props} />,
- h4: (props) => <Heading level={4} {...props} />,
- h5: (props) => <Heading level={5} {...props} />,
- h6: (props) => <Heading level={6} {...props} />,
- Link: (props) => <Link {...props} />,
- List: (props) => <List {...props} />,
+ a: ExternalLink,
+ h1: H1,
+ h2: H2,
+ h3: H3,
+ h4: H4,
+ h5: H5,
+ h6: H6,
+ Link: Link,
+ List: List,
};
return (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 025bf6d..1e0bf40 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,12 +1,10 @@
import FeedIcon from '@assets/images/icon-feed.svg';
import ButtonLink from '@components/atoms/buttons/button-link';
import Envelop from '@components/atoms/icons/envelop';
-import Column, { type ColumnProps } from '@components/atoms/layout/column';
+import Column from '@components/atoms/layout/column';
import Section, { type SectionProps } from '@components/atoms/layout/section';
import List, { type ListItem } from '@components/atoms/lists/list';
-import ResponsiveImage, {
- type ResponsiveImageProps,
-} from '@components/molecules/images/responsive-image';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
import Columns, {
type ColumnsProps,
} from '@components/molecules/layout/columns';
@@ -29,199 +27,208 @@ import Script from 'next/script';
import { ReactElement } from 'react';
import { useIntl } from 'react-intl';
-type HomeProps = {
- recentPosts: ArticleCard[];
- translation?: Messages;
+/**
+ * Retrieve a list of coding links.
+ *
+ * @returns {JSX.Element} - A list of links.
+ */
+const CodingLinks = (): JSX.Element => {
+ const intl = useIntl();
+ const links: ListItem[] = [
+ {
+ id: 'web-development',
+ value: (
+ <ButtonLink target="/thematique/developpement-web">
+ {intl.formatMessage({
+ defaultMessage: 'Web development',
+ description: 'HomePage: link to web development thematic',
+ id: 'vkF/RP',
+ })}
+ </ButtonLink>
+ ),
+ },
+ {
+ id: 'projects',
+ value: (
+ <ButtonLink target="/projets">
+ {intl.formatMessage({
+ defaultMessage: 'Projects',
+ description: 'HomePage: link to projects',
+ id: 'N44SOc',
+ })}
+ </ButtonLink>
+ ),
+ },
+ ];
+
+ return <List kind="flex" items={links} className={styles.list} />;
};
/**
- * Home page.
+ * Retrieve a list of Coldark repositories.
+ *
+ * @returns {JSX.Element} - A list of links.
*/
-const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
+const ColdarkRepos = (): JSX.Element => {
const intl = useIntl();
- const { schema: breadcrumbSchema } = useBreadcrumb({
- title: '',
- url: `/`,
- });
+ const links: ListItem[] = [
+ {
+ id: 'coldark-github',
+ value: (
+ <ButtonLink
+ target="https://github.com/ArmandPhilippot/coldark"
+ external={true}
+ >
+ {intl.formatMessage({
+ defaultMessage: 'Github',
+ description: 'HomePage: Github link',
+ id: '3f3PzH',
+ })}
+ </ButtonLink>
+ ),
+ },
+ {
+ id: 'coldark-gitlab',
+ value: (
+ <ButtonLink
+ target="https://gitlab.com/ArmandPhilippot/coldark"
+ external={true}
+ >
+ {intl.formatMessage({
+ defaultMessage: 'Gitlab',
+ description: 'HomePage: Gitlab link',
+ id: '7AnwZ7',
+ })}
+ </ButtonLink>
+ ),
+ },
+ ];
- /**
- * Retrieve a list of coding links.
- *
- * @returns {JSX.Element} - A list of links.
- */
- const CodingLinks = (): JSX.Element => {
- const links: ListItem[] = [
- {
- id: 'web-development',
- value: (
- <ButtonLink target="/thematique/developpement-web">
- {intl.formatMessage({
- defaultMessage: 'Web development',
- description: 'HomePage: link to web development thematic',
- id: 'vkF/RP',
- })}
- </ButtonLink>
- ),
- },
- {
- id: 'projects',
- value: (
- <ButtonLink target="/projets">
- {intl.formatMessage({
- defaultMessage: 'Projects',
- description: 'HomePage: link to projects',
- id: 'N44SOc',
- })}
- </ButtonLink>
- ),
- },
- ];
+ return <List kind="flex" items={links} className={styles.list} />;
+};
- return <List kind="flex" items={links} className={styles.list} />;
- };
+/**
+ * Retrieve a list of links related to Free thematic.
+ *
+ * @returns {JSX.Element} - A list of links.
+ */
+const LibreLinks = (): JSX.Element => {
+ const intl = useIntl();
+ const links: ListItem[] = [
+ {
+ id: 'free',
+ value: (
+ <ButtonLink target="/thematique/libre">
+ {intl.formatMessage({
+ defaultMessage: 'Free',
+ description: 'HomePage: link to free thematic',
+ id: 'w8GrOf',
+ })}
+ </ButtonLink>
+ ),
+ },
+ {
+ id: 'linux',
+ value: (
+ <ButtonLink target="/thematique/linux">
+ {intl.formatMessage({
+ defaultMessage: 'Linux',
+ description: 'HomePage: link to Linux thematic',
+ id: 'jASD7k',
+ })}
+ </ButtonLink>
+ ),
+ },
+ ];
- /**
- * Retrieve a list of Coldark repositories.
- *
- * @returns {JSX.Element} - A list of links.
- */
- const ColdarkRepos = (): JSX.Element => {
- const links: ListItem[] = [
- {
- id: 'coldark-github',
- value: (
- <ButtonLink
- target="https://github.com/ArmandPhilippot/coldark"
- external={true}
- >
- {intl.formatMessage({
- defaultMessage: 'Github',
- description: 'HomePage: Github link',
- id: '3f3PzH',
- })}
- </ButtonLink>
- ),
- },
- {
- id: 'coldark-gitlab',
- value: (
- <ButtonLink
- target="https://gitlab.com/ArmandPhilippot/coldark"
- external={true}
- >
- {intl.formatMessage({
- defaultMessage: 'Gitlab',
- description: 'HomePage: Gitlab link',
- id: '7AnwZ7',
- })}
- </ButtonLink>
- ),
- },
- ];
+ return <List kind="flex" items={links} className={styles.list} />;
+};
- return <List kind="flex" items={links} className={styles.list} />;
- };
+/**
+ * Retrieve the Shaarli link.
+ *
+ * @returns {JSX.Element} - A list of links
+ */
+const ShaarliLink = (): JSX.Element => {
+ const intl = useIntl();
+ const links: ListItem[] = [
+ {
+ id: 'shaarli',
+ value: (
+ <ButtonLink target="https://shaarli.armandphilippot.com/">
+ {intl.formatMessage({
+ defaultMessage: 'Shaarli',
+ description: 'HomePage: link to Shaarli',
+ id: 'i5L19t',
+ })}
+ </ButtonLink>
+ ),
+ },
+ ];
- /**
- * Retrieve a list of links related to Free thematic.
- *
- * @returns {JSX.Element} - A list of links.
- */
- const LibreLinks = (): JSX.Element => {
- const links: ListItem[] = [
- {
- id: 'free',
- value: (
- <ButtonLink target="/thematique/libre">
- {intl.formatMessage({
- defaultMessage: 'Free',
- description: 'HomePage: link to free thematic',
- id: 'w8GrOf',
- })}
- </ButtonLink>
- ),
- },
- {
- id: 'linux',
- value: (
- <ButtonLink target="/thematique/linux">
- {intl.formatMessage({
- defaultMessage: 'Linux',
- description: 'HomePage: link to Linux thematic',
- id: 'jASD7k',
- })}
- </ButtonLink>
- ),
- },
- ];
+ return <List kind="flex" items={links} className={styles.list} />;
+};
- return <List kind="flex" items={links} className={styles.list} />;
- };
+/**
+ * Retrieve the additional links.
+ *
+ * @returns {JSX.Element} - A list of links.
+ */
+const MoreLinks = (): JSX.Element => {
+ const intl = useIntl();
+ const links: ListItem[] = [
+ {
+ id: 'contact-me',
+ value: (
+ <ButtonLink target="/contact">
+ <Envelop aria-hidden={true} className={styles.icon} />
+ {intl.formatMessage({
+ defaultMessage: 'Contact me',
+ description: 'HomePage: contact button text',
+ id: 'sO/Iwj',
+ })}
+ </ButtonLink>
+ ),
+ },
+ {
+ id: 'rss-feed',
+ value: (
+ <ButtonLink target="/feed">
+ <FeedIcon
+ aria-hidden={true}
+ className={`${styles.icon} ${styles['icon--feed']}`}
+ />
+ {intl.formatMessage({
+ defaultMessage: 'Subscribe',
+ description: 'HomePage: RSS feed subscription text',
+ id: 'T4YA64',
+ })}
+ </ButtonLink>
+ ),
+ },
+ ];
- /**
- * Retrieve the Shaarli link.
- *
- * @returns {JSX.Element} - A list of links
- */
- const ShaarliLink = (): JSX.Element => {
- const links: ListItem[] = [
- {
- id: 'shaarli',
- value: (
- <ButtonLink target="https://shaarli.armandphilippot.com/">
- {intl.formatMessage({
- defaultMessage: 'Shaarli',
- description: 'HomePage: link to Shaarli',
- id: 'i5L19t',
- })}
- </ButtonLink>
- ),
- },
- ];
+ return <List kind="flex" items={links} className={styles.list} />;
+};
- return <List kind="flex" items={links} className={styles.list} />;
- };
+const StyledColumns = (props: ColumnsProps) => {
+ return <Columns className={styles.columns} {...props} />;
+};
- /**
- * Retrieve the additional links.
- *
- * @returns {JSX.Element} - A list of links.
- */
- const MoreLinks = (): JSX.Element => {
- const links: ListItem[] = [
- {
- id: 'contact-me',
- value: (
- <ButtonLink target="/contact">
- <Envelop aria-hidden={true} className={styles.icon} />
- {intl.formatMessage({
- defaultMessage: 'Contact me',
- description: 'HomePage: contact button text',
- id: 'sO/Iwj',
- })}
- </ButtonLink>
- ),
- },
- {
- id: 'rss-feed',
- value: (
- <ButtonLink target="/feed">
- <FeedIcon
- aria-hidden={true}
- className={`${styles.icon} ${styles['icon--feed']}`}
- />
- {intl.formatMessage({
- defaultMessage: 'Subscribe',
- description: 'HomePage: RSS feed subscription text',
- id: 'T4YA64',
- })}
- </ButtonLink>
- ),
- },
- ];
+type HomeProps = {
+ recentPosts: ArticleCard[];
+ translation?: Messages;
+};
- return <List kind="flex" items={links} className={styles.list} />;
- };
+/**
+ * Home page.
+ */
+const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
+ const intl = useIntl();
+ const { schema: breadcrumbSchema } = useBreadcrumb({
+ title: '',
+ url: `/`,
+ });
/**
* Get a cards list of recent posts.
@@ -278,11 +285,9 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
const components: NestedMDXComponents = {
CodingLinks: CodingLinks,
ColdarkRepos: ColdarkRepos,
- Column: (props: ColumnProps) => <Column {...props} />,
- Columns: (props: ColumnsProps) => (
- <Columns className={styles.columns} {...props} />
- ),
- Image: (props: ResponsiveImageProps) => <ResponsiveImage {...props} />,
+ Column: Column,
+ Columns: StyledColumns,
+ Image: ResponsiveImage,
LibreLinks: LibreLinks,
MoreLinks: MoreLinks,
RecentPosts: getRecentPosts,
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index a58a850..413f409 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -42,8 +42,8 @@ const LegalNoticePage: NextPageWithLayout = () => {
};
const components: NestedMDXComponents = {
- Image: (props) => <ResponsiveImage {...props} />,
- Link: (props) => <Link {...props} />,
+ Image: ResponsiveImage,
+ Link: Link,
};
const { website } = useSettings();
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 7539b55..79c3760 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -3,7 +3,9 @@ import SocialLink, {
type SocialWebsite,
} from '@components/atoms/links/social-link';
import Spinner from '@components/atoms/loaders/spinner';
-import ResponsiveImage from '@components/molecules/images/responsive-image';
+import ResponsiveImage, {
+ ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
import Code from '@components/molecules/layout/code';
import Gallery from '@components/organisms/images/gallery';
import Overview, {
@@ -40,6 +42,10 @@ import Script from 'next/script';
import { ComponentType } from 'react';
import { useIntl } from 'react-intl';
+const BorderedImage = (props: ResponsiveImageProps) => {
+ return <ResponsiveImage withBorders={true} {...props} />;
+};
+
type ProjectPageProps = {
project: ProjectPreview;
translation: Messages;
@@ -65,10 +71,10 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
);
const components: NestedMDXComponents = {
- Code: (props) => <Code {...props} />,
- Gallery: (props) => <Gallery {...props} />,
- Image: (props) => <ResponsiveImage withBorders={true} {...props} />,
- Link: (props) => <Link {...props} />,
+ Code: Code,
+ Gallery: Gallery,
+ Image: BorderedImage,
+ Link: Link,
};
const { website } = useSettings();
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index dbca019..aaf37e9 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -53,7 +53,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
);
const components: NestedMDXComponents = {
- Links: (props) => <Link {...props} />,
+ Links: Link,
};
const { website } = useSettings();
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 02:41:55 +0000