{pageTitle}

import Notice from '@components/atoms/layout/notice'; import PostsList from '@components/organisms/layout/posts-list'; import LinksListWidget from '@components/organisms/widgets/links-list-widget'; import { getLayout } from '@components/templates/layout/layout'; import PageLayout from '@components/templates/page/page-layout'; import { getArticles, getTotalArticles } from '@services/graphql/articles'; import { getThematicsPreview, getTotalThematics, } from '@services/graphql/thematics'; import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics'; import { type NextPageWithLayout } from '@ts/types/app'; import { EdgesResponse } from '@ts/types/graphql/queries'; import { type RawArticle, type RawThematicPreview, type RawTopicPreview, } from '@ts/types/raw-data'; import { settings } from '@utils/config'; import { loadTranslation, type Messages } from '@utils/helpers/i18n'; import { getLinksListItems, getPageLinkFromRawData, getPostsList, } from '@utils/helpers/pages'; import { getBlogSchema, getSchemaJson, getWebPageSchema, } from '@utils/helpers/schema-org'; import useBreadcrumb from '@utils/hooks/use-breadcrumb'; import usePagination from '@utils/hooks/use-pagination'; import useSettings from '@utils/hooks/use-settings'; import { GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { useIntl } from 'react-intl'; type BlogPageProps = { articles: EdgesResponse; thematicsList: RawThematicPreview[]; topicsList: RawTopicPreview[]; totalArticles: number; translation: Messages; }; /** * Blog index page. */ const BlogPage: NextPageWithLayout = ({ articles, thematicsList, topicsList, totalArticles, }) => { const intl = useIntl(); const title = intl.formatMessage({ defaultMessage: 'Blog', description: 'BlogPage: page title', id: '7TbbIk', }); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, url: '/blog', }); const { blog, website } = useSettings(); const { asPath } = useRouter(); const pageTitle = intl.formatMessage( { defaultMessage: 'Blog: development, open source - {websiteName}', description: 'BlogPage: SEO - Page title', id: '+Y+tLK', }, { websiteName: website.name } ); const pageDescription = intl.formatMessage( { defaultMessage: "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.", description: 'BlogPage: SEO - Meta description', id: '18h/t0', }, { websiteName: website.name } ); const webpageSchema = getWebPageSchema({ description: pageDescription, locale: website.locales.default, slug: asPath, title, }); const blogSchema = getBlogSchema({ isSinglePage: false, locale: website.locales.default, slug: asPath, }); const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]); const { data, error, isLoadingInitialData, isLoadingMore, hasNextPage, setSize, } = usePagination({ fallbackData: [articles], fetcher: getArticles, perPage: blog.postsPerPage, }); /** * Load more posts handler. */ const loadMore = () => { setSize((prevSize) => prevSize + 1); }; const thematicsListTitle = intl.formatMessage({ defaultMessage: 'Thematics', description: 'BlogPage: thematics list widget title', id: 'HriY57', }); const topicsListTitle = intl.formatMessage({ defaultMessage: 'Topics', description: 'BlogPage: topics list widget title', id: '2D9tB5', }); return ( <> {pageTitle}