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,24 +30,30 @@ 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'>
+          <div className='px-8'>
             <MDXRemote
               {...post.source}
               components={{
                 img: (properties) => {
-                const { src, alt, ...props } = properties
+                  const { src = '', alt = 'Blog Image' } = properties
-                let source = src
+                  const source = src.replace('../public/', '/')
-                source = src?.replace('../public/', '/')
                   return (
                     <span className='flex flex-col items-center justify-center'>
-                    <img src={source} alt={alt} {...props} />
+                      <Image
+                        src={source}
+                        alt={alt}
+                        width={1000}
+                        height={1000}
+                        className='h-auto w-auto'
+                      />
                     </span>
                   )
                 },
@@ -75,6 +82,7 @@ const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
               loading='lazy'
             />
           </div>
+        </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;
 }