refactor: replace script tags with next/script (#10)

* refactor: replace script tags with next/script

Since next.js v12.1.0 some warnings was displayed because I was using
some script tags.

* build(deps): bump next-themes to v0.1.1

10 files changed, 60 insertions, 40 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 2fd1850..6d0ad5a 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -28,6 +28,7 @@ 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<ArticleProps> = ({
   comments,
@@ -168,11 +169,12 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({
         <meta property="og:description" content={intro} />
         <meta property="og:image" content={featuredImage?.sourceUrl} />
         <meta property="og:image:alt" content={featuredImage?.altText} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-article"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="article"
         className={styles.article}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index e725ea8..543fad9 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -20,6 +20,7 @@ import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
@@ -157,11 +158,12 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({
         <meta property="og:type" content="website" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={pageDescription} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-blog"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="blog"
         className={`${styles.article} ${styles['article--no-comments']}`}
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 176d130..9f8ec0f 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -10,6 +10,7 @@ import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
 
@@ -82,11 +83,12 @@ const ContactPage: NextPageWithLayout = () => {
         <meta property="og:type" content="article" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={intro} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-contact"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="contact"
         className={`${styles.article} ${styles['article--no-comments']}`}
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index e77c586..39dfeed 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -11,6 +11,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import { AboutPage, Graph, WebPage } from 'schema-dts';
 
@@ -100,11 +101,12 @@ const CV: NextPageWithLayout = () => {
         <meta property="og:description" content={intro} />
         <meta property="og:image" content={image} />
         <meta property="og:image:alt" content={title} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-cv"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="cv"
         className={`${styles.article} ${styles['article--no-comments']}`}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5621d58..0045996 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,6 +12,7 @@ import { settings } from '@utils/config';
 import { loadTranslation } from '@utils/helpers/i18n';
 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';
@@ -193,11 +194,12 @@ const Home: NextPageWithLayout<HomePageProps> = ({
         <meta property="og:url" content={`${settings.url}`} />
         <meta property="og:title" content={pageTitle} />
         <meta property="og:description" content={pageDescription} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-homepage"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <div id="home">
         <HomePageContent components={components} />
       </div>
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 0b92294..67c4a97 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -14,6 +14,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
@@ -97,11 +98,12 @@ const LegalNotice: NextPageWithLayout = () => {
         <meta property="og:type" content="article" />
         <meta property="og:title" content={pageTitle} />
         <meta property="og:description" content={intro} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-legal-notice"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="legal-notice"
         className={`${styles.article} ${styles['article--no-comments']}`}
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index fe62f0e..51f3d0b 100644
--- a/src/pages/projet/[slug].tsx
+++ b/src/pages/projet/[slug].tsx
@@ -20,6 +20,7 @@ import { MDXComponents, NestedMDXComponents } from 'mdx/types';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { ComponentType } from 'react';
 import { useIntl } from 'react-intl';
@@ -100,11 +101,12 @@ const Project: NextPageWithLayout<ProjectProps> = ({
         <meta property="og:type" content="article" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={intro} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-project"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="project"
         className={`${styles.article} ${styles['article--no-comments']}`}
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
index 998c67f..7fb7187 100644
--- a/src/pages/projets.tsx
+++ b/src/pages/projets.tsx
@@ -10,6 +10,7 @@ import { getSortedProjects } from '@utils/helpers/projects';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
@@ -86,11 +87,12 @@ const Projects = ({ projects }: { projects: Project[] }) => {
         <meta property="og:type" content="article" />
         <meta property="og:title" content={meta.title} />
         <meta property="og:description" content={pageDescription} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-projects"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article id="projects" className={styles.article}>
         <PostHeader title={meta.title} intro={<PageContent />} />
         <div className={styles.body}>
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index dc5ee7e..bb22a88 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -19,6 +19,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { useRef } from 'react';
 import { useIntl } from 'react-intl';
@@ -116,11 +117,12 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic, allTopics }) => {
         <meta property="og:description" content={topic.intro} />
         <meta property="og:image" content={topic.featuredImage?.sourceUrl} />
         <meta property="og:image:alt" content={topic.featuredImage?.altText} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-subject"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="topic"
         className={`${styles.article} ${styles['article--no-comments']}`}
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index a8cb478..edc4296 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -19,6 +19,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { useRef } from 'react';
 import { useIntl } from 'react-intl';
@@ -111,11 +112,12 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({
         <meta property="og:type" content="article" />
         <meta property="og:title" content={thematic.title} />
         <meta property="og:description" content={thematic.intro} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-        ></script>
       </Head>
+      <Script
+        id="schema-thematic"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
       <article
         id="thematic"
         className={`${styles.article} ${styles['article--no-comments']}`}