import FeedIcon from '@assets/images/icon-feed.svg'; import { ButtonLink } from '@components/Buttons'; import { ContactIcon } from '@components/Icons'; import Layout from '@components/Layouts/Layout'; import { ResponsiveImage } from '@components/MDX'; import { RecentPosts } from '@components/Widgets'; import HomePageContent from '@content/pages/homepage.mdx'; import { getPublishedPosts } from '@services/graphql/queries'; import styles from '@styles/pages/Home.module.scss'; import { NextPageWithLayout, ResponsiveImageProps } from '@ts/types/app'; import { PostsList } from '@ts/types/blog'; import { settings } from '@utils/config'; import { loadTranslation } from '@utils/helpers/i18n'; import { NestedMDXComponents } from 'mdx/types'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import Script from 'next/script'; import type { ReactElement } from 'react'; import { useIntl } from 'react-intl'; import { Graph, WebPage } from 'schema-dts'; type HomePageProps = { recentPosts: PostsList; }; const Home: NextPageWithLayout = ({ recentPosts, }: { recentPosts: PostsList; }) => { const intl = useIntl(); const CodingLinks = () => { return ( ); }; const ColdarkRepos = () => { return ( ); }; const LibreLinks = () => { return ( ); }; const ShaarliLink = () => { return ( ); }; const MoreLinks = () => { return ( ); }; const getRecentPosts = () => { return ; }; const components: NestedMDXComponents = { CodingLinks: CodingLinks, ColdarkRepos: ColdarkRepos, Image: (props: ResponsiveImageProps) => ResponsiveImage({ ...props }), LibreLinks: LibreLinks, MoreLinks: MoreLinks, RecentPosts: getRecentPosts, ShaarliLink: ShaarliLink, }; const pageTitle = intl.formatMessage( { defaultMessage: '{websiteName} | Front-end developer: WordPress/React', description: 'HomePage: SEO - Page title', id: 'PXp2hv', }, { websiteName: settings.name } ); const pageDescription = intl.formatMessage( { defaultMessage: '{websiteName} is a front-end developer located in France. He codes and he writes mostly about web development and open-source.', description: 'HomePage: SEO - Meta description', id: 'tMuNTy', }, { websiteName: settings.name } ); const webpageSchema: WebPage = { '@id': `${settings.url}/#home`, '@type': 'WebPage', name: pageTitle, description: pageDescription, author: { '@id': `${settings.url}/#branding` }, creator: { '@id': `${s
import { Toggle } from '@components/Form';
import { LocalStorage } from '@services/local-storage';
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';

const ReduceMotion = () => {
  const intl = useIntl();
  const [isDeactivated, setIsDeactivated] = useState<boolean>(false);

  useEffect(() => {
    const initialState = LocalStorage.get('reduced-motion');
    if (initialState) setIsDeactivated(initialState === 'true' ? true : false);
  }, []);

  useEffect(() => {
    document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
    LocalStorage.set('reduced-motion', `${isDeactivated}`);
  }, [isDeactivated]);

  const updateState = () => {
    setIsDeactivated(!isDeactivated);
  };

  return (
    <Toggle
      id="reduced-motion"
      label={intl.formatMessage({
        defaultMessage: 'Animations:',
        description: 'ReduceMotion: toggle label',
      })}
      leftChoice={intl.formatMessage({
        defaultMessage: 'On',
        description: 'ReduceMotion: toggle on label',
      })}
      rightChoice={intl.formatMessage({
        defaultMessage: 'Off',
        description: 'ReduceMotion: toggle off label',
      })}
      value={isDeactivated}
      changeHandler={updateState}
    />
  );
};

export default ReduceMotion;
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-31 13:12:44 +0000