{page.title}

/* eslint-disable max-statements */ import type { GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { useIntl } from 'react-intl'; import { getLayout, Heading, LinksListWidget, type MetaItemData, Notice, PageLayout, PostsList, } from '../../components'; import { getArticles, getThematicsPreview, getTopicsPreview, getTotalArticles, getTotalThematics, getTotalTopics, } from '../../services/graphql'; import type { EdgesResponse, NextPageWithLayout, RawArticle, RawThematicPreview, RawTopicPreview, } from '../../types'; import { settings } from '../../utils/config'; import { ROUTES } from '../../utils/constants'; import { getBlogSchema, getLinksListItems, getPageLinkFromRawData, getPostsList, getSchemaJson, getWebPageSchema, } from '../../utils/helpers'; import { loadTranslation, type Messages } from '../../utils/helpers/server'; import { useBreadcrumb, usePagination, useSettings } from '../../utils/hooks'; 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: ROUTES.BLOG, }); const { blog, website } = useSettings(); const { asPath } = useRouter(); const page = { title: intl.formatMessage( { defaultMessage: 'Blog: development, open source - {websiteName}', description: 'BlogPage: SEO - Page title', id: '+Y+tLK', }, { websiteName: website.name } ), url: `${website.url}${asPath}`, }; 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, isLoading, isLoadingMore, isRefreshing, hasNextPage, loadMore, } = usePagination({ fallback: [articles], fetcher: getArticles, perPage: blog.postsPerPage, }); 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', }); const postsListBaseUrl = `${ROUTES.BLOG}/page/`; const headerMeta: MetaItemData[] = totalArticles ? [ { id: 'posts-count', label: intl.formatMessage({ defaultMessage: 'Total:', description: 'Page: total label', id: 'kNBXyK', }), value: intl.formatMessage( { defaultMessage: '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', description: 'Page: posts count meta', id: 'RvGb2c', }, { postsCount: totalArticles } ), }, ] : []; return ( <> {page.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}