fix: responsive on blog post with code blocks and katex

.eslintrc.json

@@ -4,12 +4,7 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "env": {
-    "node": true,
-    "browser": true
-  },
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": "error"
-    "@next/next/no-img-element": "off"
   }
 }

components/Header/index.tsx

@@ -21,6 +21,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
             height={60}
             src='/images/divlo_icon_small.png'
             alt='Divlo'
+            priority
           />
           <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
             Divlo
@@ -37,7 +38,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
             Blog
           </Link>
         </div>
-        {showLanguage && <Language />}
+        {showLanguage ? <Language /> : null}
         <SwitchTheme />
       </div>
     </header>

components/Profile/ProfileDescriptionBottom.tsx

@@ -6,7 +6,7 @@ export const ProfileDescriptionBottom: React.FC = () => {
   return (
     <p className='mb-8 mt-8 text-base font-normal text-gray dark:text-gray-dark'>
       {t('home:about.description-bottom')}
-      {lang === 'fr' && (
+      {lang === 'fr' ? (
         <>
           <br />
           <br />
@@ -17,7 +17,7 @@ export const ProfileDescriptionBottom: React.FC = () => {
             Curriculum vitæ
           </a>
         </>
-      )}
+      ) : null}
     </p>
   )
 }

components/design/Section/index.tsx

@@ -23,7 +23,9 @@ export const Section: React.FC<SectionProps> = (props) => {
       <div className='w-full px-3'>
         <ShadowContainer style={{ marginTop: 50 }}>
           <section {...rest}>
-            {heading != null && <SectionHeading>{heading}</SectionHeading>}
+            {heading != null ? (
+              <SectionHeading>{heading}</SectionHeading>
+            ) : null}
             <div className='w-full px-3'>{children}</div>
           </section>
         </ShadowContainer>
@@ -34,7 +36,7 @@ export const Section: React.FC<SectionProps> = (props) => {
   if (withoutShadowContainer) {
     return (
       <section {...rest}>
-        {heading != null && <SectionHeading>{heading}</SectionHeading>}
+        {heading != null ? <SectionHeading>{heading}</SectionHeading> : null}
         <div className='w-full px-3'>{children}</div>
       </section>
     )
@@ -42,16 +44,18 @@ export const Section: React.FC<SectionProps> = (props) => {
 
   return (
     <section {...rest}>
-      {heading != null && (
+      {heading != null ? (
-        <SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
+        <SectionHeading
+          style={{ ...(description != null ? { margin: 0 } : {}) }}
+        >
           {heading}
         </SectionHeading>
-      )}
+      ) : null}
-      {description != null && (
+      {description != null ? (
         <p style={{ marginTop: 7 }} className='text-center'>
           {description}
         </p>
-      )}
+      ) : null}
       <div className='w-full px-3'>
         <ShadowContainer>
           <div className='w-full px-16 py-4 leading-8'>{children}</div>

pages/blog/[slug].tsx

@@ -1,4 +1,5 @@
 import type { GetStaticProps, GetStaticPaths, NextPage } from 'next'
+import Image from 'next/image'
 import { MDXRemote } from 'next-mdx-remote'
 import date from 'date-and-time'
 import Giscus from '@giscus/react'
@@ -29,51 +30,58 @@ const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
       />
 
       <Header />
-      <main className='flex flex-1 flex-col flex-wrap items-center'>
+      <main className='break-wrap-words flex flex-1 flex-col flex-wrap items-center'>
-        <div className='my-10 flex flex-col items-center'>
+        <div className='my-10 flex flex-col items-center text-center'>
           <h1 className='text-3xl font-semibold'>{post.frontmatter.title}</h1>
           <p className='mt-2' data-cy='blog-post-date'>
             {date.format(new Date(post.frontmatter.publishedOn), 'DD/MM/YYYY')}
           </p>
         </div>
-        <div className='prose mb-10 px-8'>
+        <div className='prose mb-10'>
-          <MDXRemote
+          <div className='px-8'>
-            {...post.source}
+            <MDXRemote
-            components={{
+              {...post.source}
-              img: (properties) => {
+              components={{
-                const { src, alt, ...props } = properties
+                img: (properties) => {
-                let source = src
+                  const { src = '', alt = 'Blog Image' } = properties
-                source = src?.replace('../public/', '/')
+                  const source = src.replace('../public/', '/')
-                return (
+                  return (
-                  <span className='flex flex-col items-center justify-center'>
+                    <span className='flex flex-col items-center justify-center'>
-                    <img src={source} alt={alt} {...props} />
+                      <Image
-                  </span>
+                        src={source}
-                )
+                        alt={alt}
-              },
+                        width={1000}
-              a: (props) => {
+                        height={1000}
-                if (props.href?.startsWith('#') ?? false) {
+                        className='h-auto w-auto'
-                  return <a {...props} />
+                      />
+                    </span>
+                  )
+                },
+                a: (props) => {
+                  if (props.href?.startsWith('#') ?? false) {
+                    return <a {...props} />
+                  }
+                  return (
+                    <a target='_blank' rel='noopener noreferrer' {...props} />
+                  )
                 }
-                return (
+              }}
-                  <a target='_blank' rel='noopener noreferrer' {...props} />
+            />
-                )
+            <Giscus
-              }
+              id='comments'
-            }}
+              repo='Divlo/Divlo'
-          />
+              repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
-          <Giscus
+              category='General'
-            id='comments'
+              categoryId='DIC_kwDOFWUewM4CQ_WK'
-            repo='Divlo/Divlo'
+              mapping='pathname'
-            repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
+              reactionsEnabled='1'
-            category='General'
+              emitMetadata='0'
-            categoryId='DIC_kwDOFWUewM4CQ_WK'
+              inputPosition='top'
-            mapping='pathname'
+              theme={theme}
-            reactionsEnabled='1'
+              lang='en'
-            emitMetadata='0'
+              loading='lazy'
-            inputPosition='top'
+            />
-            theme={theme}
+          </div>
-            lang='en'
-            loading='lazy'
-          />
         </div>
       </main>
       <Footer version={version} />

styles/global.css

@@ -2,8 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+.break-wrap-words {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
 .prose {
-  @apply !max-w-4xl text-gray dark:text-gray-300;
+  @apply !max-w-5xl text-gray dark:text-gray-300;
 }
 
 .prose a,
@@ -28,8 +33,6 @@
 }
 .shiki {
   white-space: pre-wrap !important;
-  word-break: normal !important;
-  word-wrap: normal;
 }
 code {
   counter-reset: step;
@@ -43,4 +46,12 @@ code .line::before {
   display: inline-block;
   text-align: right;
   color: rgba(133, 133, 133, 0.8);
+  word-wrap: normal;
+  word-break: normal;
+}
+
+.katex .base {
+  display: inline !important;
+  white-space: normal !important;
+  width: 100% !important;
 }