import CommentForm from '@components/CommentForm/CommentForm'; import CommentsList from '@components/CommentsList/CommentsList'; import { getLayout } from '@components/Layouts/Layout'; import PostFooter from '@components/PostFooter/PostFooter'; import PostHeader from '@components/PostHeader/PostHeader'; import Sidebar from '@components/Sidebar/Sidebar'; import Spinner from '@components/Spinner/Spinner'; import { Sharing, ToC } from '@components/Widgets'; import { getAllPostsSlug, getCommentsByPostId, getPostBySlug, } from '@services/graphql/queries'; import styles from '@styles/pages/Page.module.scss'; import { NextPageWithLayout } from '@ts/types/app'; import { ArticleMeta, ArticleProps } from '@ts/types/articles'; import { settings } from '@utils/config'; import { getFormattedPaths } from '@utils/helpers/format'; import { loadTranslation } from '@utils/helpers/i18n'; import { addPrismClasses } from '@utils/helpers/prism'; import { usePrismTheme } from '@utils/providers/prism'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Prism from 'prismjs'; import { ParsedUrlQuery } from 'querystring'; import { useEffect } from 'react'; import { useIntl } from 'react-intl'; import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts'; import '@utils/plugins/prism-color-scheme'; import Script from 'next/script'; const SingleArticle: NextPageWithLayout = ({ comments, post, }) => { const intl = useIntl(); const router = useRouter(); useEffect(() => { addPrismClasses(); Prism.highlightAll(); }); const { setCodeBlocks } = usePrismTheme(); useEffect(() => { const allPre: NodeListOf = document.querySelectorAll( 'pre[data-prismjs-color-scheme-current]' ); setCodeBlocks(allPre); }, [setCodeBlocks, router.asPath]); if (router.isFallback) return ; const { author, commentCount, content, databaseId, dates, featuredImage, info, intro, seo, topics, thematics, title, } = post; const meta: ArticleMeta = { author, commentCount: commentCount || undefined, dates, readingTime: info.readingTime, thematics, wordsCount: info.wordsCount, }; const articleUrl = `${settings.url}${router.asPath}`; const webpageSchema: WebPage = { '@id': `${articleUrl}`, '@type': 'WebPage', breadcrumb: { '@id': `${settings.url}/#breadcrumb` }, lastReviewed: dates.update, name: seo.title, description: seo.metaDesc, reviewedBy: { '@id': `${settings.url}/#branding` }, url: `${articleUrl}`, isPartOf: { '@id': `${settings.url}`, }, }; const blogSchema: Blog = { '@id': `${settings.url}/#blog`, '@type': 'Blog', blogPost: { '@id': `${settings.url}/#article` }, isPartOf: { '@id': `${articleUrl}`, }, license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', }; const publicationDate = new Date(dates.publication); const updateDate = new Date(dates.update); const blogPostSchema: BlogPosting = { '@id': `${settings.url}/#article`, '@type': 'BlogPosting', name: title, description: intro, articleBody: content, author: { '@id': `${settings.url}/#branding` }, commentCount: commentCount || undefined, copyrightYear: publicationDate.getFullYear(), creator: { '@id': `${settings.url}/#branding` }, dateCreated: publicationDate.toISOString(), dateModified: updateDate.toISOString(), datePublished: publicationDate.toISOString(), discussionUrl: `${articleUrl}/#comments`, editor: { '@id': `${settings.url}/#branding` }, headline: title, image: featuredImage?.sourceUrl, inLanguage: settings.locales.defaultLocale, isPartOf: { '@id': `${settings.url}/blog`, }, license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', mainEntityOfPage: { '@id': `${articleUrl}` }, thumbnailUrl: featuredImage?.sourceUrl, }; const schemaJsonLd: Graph = { '@context': 'https://schema.org', '@graph': [webpageSchema, blogSchema, blogPostSchema], }; const copyText = intl.formatMessage({ defaultMessage: 'Copy', description: 'Prism: copy button text (no clicked)', }); const copiedText = intl.formatMessage({ defaultMessage: 'Copied!', description: 'Prism: copy button text (clicked)', }); const errorText = intl.formatMessage({ defaultMessage: 'Use Ctrl+c to copy', description: 'Prism: error text', }); const darkTheme = intl.formatMessage({ defaultMessage: 'Dark Theme 🌙', description: 'Prism: toggle dark theme button text', }); const lightTheme = intl.formatMessage({ de

!(function (e) {
  (e.languages.crystal = e.languages.extend('ruby', {
    keyword: [
      /\b(?:__DIR__|__END_LINE__|__FILE__|__LINE__|abstract|alias|annotation|as|asm|begin|break|case|class|def|do|else|elsif|end|ensure|enum|extend|for|fun|if|ifdef|include|instance_sizeof|lib|macro|module|next|of|out|pointerof|private|protected|ptr|require|rescue|return|select|self|sizeof|struct|super|then|type|typeof|undef|uninitialized|union|unless|until|when|while|with|yield)\b/,
      { pattern: /(\.\s*)(?:is_a|responds_to)\?/, lookbehind: !0 },
    ],
    number:
      /\b(?:0b[01_]*[01]|0o[0-7_]*[0-7]|0x[\da-fA-F_]*[\da-fA-F]|(?:\d(?:[\d_]*\d)?)(?:\.[\d_]*\d)?(?:[eE][+-]?[\d_]*\d)?)(?:_(?:[uif](?:8|16|32|64))?)?\b/,
    operator: [/->/, e.languages.ruby.operator],
    punctuation: /[(){}[\].,;\\]/,
  })),
    e.languages.insertBefore('crystal', 'string-literal', {
      attribute: {
        pattern: /@\[.*?\]/,
        inside: {
          delimiter: { pattern: /^@\[|\]$/, alias: 'punctuation' },
          attribute: {
            pattern: /^(\s*)\w+/,
            lookbehind: !0,
            alias: 'class-name',
          },
          args: { pattern: /\S(?:[\s\S]*\S)?/, inside: e.languages.crystal },
        },
      },
      expansion: {
        pattern: /\{(?:\{.*?\}|%.*?%)\}/,
        inside: {
          content: {
            pattern: /^(\{.)[\s\S]+(?=.\}$)/,
            lookbehind: !0,
            inside: e.languages.crystal,
          },
          delimiter: { pattern: /^\{[\{%]|[\}%]\}$/, alias: 'operator' },
        },
      },
      char: {
        pattern:
          /'(?:[^\\\r\n]{1,2}|\\(?:.|u(?:[A-Fa-f0-9]{1,4}|\{[A-Fa-f0-9]{1,6}\})))'/,
        greedy: !0,
      },
    });
})(Prism);