diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 | 
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/pages/article | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff) | |
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
Diffstat (limited to 'src/pages/article')
| -rw-r--r-- | src/pages/article/[slug].tsx | 291 | 
1 files changed, 0 insertions, 291 deletions
| diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx deleted file mode 100644 index 27a6f7b..0000000 --- a/src/pages/article/[slug].tsx +++ /dev/null @@ -1,291 +0,0 @@ -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 { PrismDefaultPlugins, PrismPlugins } from '@ts/types/prism'; -import { settings } from '@utils/config'; -import { getFormattedPaths } from '@utils/helpers/format'; -import { loadTranslation } from '@utils/helpers/i18n'; -import { addPrismClasses } from '@utils/helpers/prism'; -import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; -import Head from 'next/head'; -import { useRouter } from 'next/router'; -import Script from 'next/script'; -import Prism from 'prismjs'; -import { ParsedUrlQuery } from 'querystring'; -import { useCallback, useEffect, useMemo } from 'react'; -import { useIntl } from 'react-intl'; -import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts'; - -const SingleArticle: NextPageWithLayout<ArticleProps> = ({ -  comments, -  post, -}) => { -  const intl = useIntl(); -  const router = useRouter(); - -  const loadPrismPlugins = useCallback( -    async (prismPlugins: (PrismDefaultPlugins | PrismPlugins)[]) => { -      for (const plugin of prismPlugins) { -        try { -          if (plugin === 'color-scheme') { -            await import(`@utils/plugins/prism-${plugin}`); -          } else { -            await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`); - -            if (plugin === 'autoloader') -              Prism.plugins.autoloader.languages_path = '/prism/'; -          } -        } catch (error) { -          console.error('Article: an error occurred with Prism.'); -          console.error(error); -        } -      } -    }, -    [] -  ); - -  const plugins: (PrismDefaultPlugins | PrismPlugins)[] = useMemo( -    () => [ -      'autoloader', -      'toolbar', -      'show-language', -      'copy-to-clipboard', -      'color-scheme', -      'command-line', -      'line-numbers', -      'match-braces', -      'normalize-whitespace', -    ], -    [] -  ); - -  useEffect(() => { -    loadPrismPlugins(plugins).then(() => { -      addPrismClasses(); -      Prism.highlightAll(); -    }); -  }, [plugins, loadPrismPlugins]); - -  if (router.isFallback) return <Spinner />; - -  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)', -    id: '/ly3AC', -  }); -  const copiedText = intl.formatMessage({ -    defaultMessage: 'Copied!', -    description: 'Prism: copy button text (clicked)', -    id: 'OV9r1K', -  }); -  const errorText = intl.formatMessage({ -    defaultMessage: 'Use Ctrl+c to copy', -    description: 'Prism: error text', -    id: 'z9qkcQ', -  }); -  const darkTheme = intl.formatMessage({ -    defaultMessage: 'Dark Theme 🌙', -    description: 'Prism: toggle dark theme button text', -    id: 'nFMdWI', -  }); -  const lightTheme = intl.formatMessage({ -    defaultMessage: 'Light Theme 🌞', -    description: 'Prism: toggle light theme button text', -    id: 'Ua2g2p', -  }); - -  return ( -    <> -      <Head> -        <title>{seo.title}</title> -        <meta name="description" content={seo.metaDesc} /> -        <meta property="og:url" content={`${articleUrl}`} /> -        <meta property="og:type" content="article" /> -        <meta property="og:title" content={title} /> -        <meta property="og:description" content={intro} /> -        <meta property="og:image" content={featuredImage?.sourceUrl} /> -        <meta property="og:image:alt" content={featuredImage?.altText} /> -      </Head> -      <Script -        id="schema-article" -        type="application/ld+json" -        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} -      /> -      <article -        id="article" -        className={styles.article} -        data-prismjs-copy={copyText} -        data-prismjs-copy-success={copiedText} -        data-prismjs-copy-error={errorText} -        data-prismjs-color-scheme-dark={darkTheme} -        data-prismjs-color-scheme-light={lightTheme} -      > -        <PostHeader intro={intro} meta={meta} title={title} /> -        <Sidebar -          position="left" -          ariaLabel={intl.formatMessage({ -            defaultMessage: 'Table of Contents', -            description: 'ArticlePage: ToC sidebar aria-label', -            id: '9nhYRA', -          })} -        > -          <ToC /> -        </Sidebar> -        <div -          className={styles.body} -          dangerouslySetInnerHTML={{ __html: content }} -        ></div> -        <PostFooter topics={topics} /> -        <Sidebar -          position="right" -          ariaLabel={intl.formatMessage({ -            defaultMessage: 'Sidebar', -            description: 'ArticlePage: right sidebar aria-label', -            id: 'JeYOeA', -          })} -        > -          <Sharing title={title} excerpt={intro} /> -        </Sidebar> -        <section id="comments" className={styles.comments}> -          <CommentsList articleId={databaseId} comments={comments} /> -          <CommentForm articleId={databaseId} /> -        </section> -      </article> -    </> -  ); -}; - -SingleArticle.getLayout = getLayout; - -interface PostParams extends ParsedUrlQuery { -  slug: string; -} - -export const getStaticProps: GetStaticProps = async ( -  context: GetStaticPropsContext -) => { -  const { locale } = context; -  const translation = await loadTranslation(locale); -  const { slug } = context.params as PostParams; -  const post = await getPostBySlug(slug); -  const comments = await getCommentsByPostId(post.databaseId); -  const breadcrumbTitle = post.title; - -  return { -    props: { -      breadcrumbTitle, -      comments, -      post, -      translation, -    }, -  }; -}; - -export const getStaticPaths: GetStaticPaths = async () => { -  const allSlugs = await getAllPostsSlug(); -  const paths = getFormattedPaths(allSlugs); - -  return { -    paths, -    fallback: true, -  }; -}; - -export default SingleArticle; | 
