fix: mobile css issues

package.json

@@ -90,12 +90,15 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-figure": "^1.0.1",
     "rehype-image-placeholder": "^1.0.1",
+    "rehype-parse": "^8.0.4",
     "rehype-prism-plus": "1.5.1",
     "rehype-slug": "5.1.0",
+    "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "swr": "2.1.5",
     "ts-node": "^10.9.1",
     "typescript": "4.7.4",
+    "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0"
   }
 }

public/rss/feed.xml

@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Sun, 11 Jun 2023 15:24:24 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 11 Jun 2023 15:34:22 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

public/rss/fr/feed.xml

@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Sun, 11 Jun 2023 15:24:24 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 11 Jun 2023 15:34:22 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>

src/components/BlogPost/BlogPost.tsx

@@ -16,7 +16,7 @@ export const BlogPost: React.FC<BlogPostProps> = ({ post, isCategoryPage }) => {
   const { t } = useTranslation('common')
 
   return (
-    <article className="pt-6 pb-6 border-t border-gray-200 dark:border-gray-700" key={post.slug}>
+    <article className="md:pt-6 pb-6 border-t border-gray-200 dark:border-gray-700" key={post.slug}>
       <div className="flex flex-col-reverse lg:flex-row-reverse gap-5">
         <div className="max-w-[44rem] w-full">
           {!isCategoryPage && (
@@ -26,7 +26,7 @@ export const BlogPost: React.FC<BlogPostProps> = ({ post, isCategoryPage }) => {
                   href={`${t('category.path')}/${slugify(post.frontMatter.categories[0], {
                     lower: true,
                   })}`}
-                  className="block !font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 uppercase text-x"
+                  className="block pb-2 !font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 uppercase text-x"
                 >
                   <span className="sr-only">Category: </span>
                   {post.frontMatter.categories[0]}

src/components/Header/Header.tsx

@@ -35,7 +35,7 @@ export const Header: React.FC<HeaderProps> = ({ pathname }) => {
   return (
     <header className="dark:text-gray-100 transition-colors duration-200 ">
       {userLocale === ('fr' || 'fr-FR' || 'fr-CA') ? <BannerLang /> : null}
-      <div className="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 py-3 top-0 mb-5 lg:mb-12">
+      <div className="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 py-3 top-0 lg:mb-12">
         <div className="relative flex justify-between h-16">
           <div className="flex-1 flex items-center sm:justify-between align-middle">
             {isHomepage ? (

src/components/LatestPostsSection/LatestPostsSection.tsx

@@ -14,7 +14,7 @@ export const LatestPostsSection: React.FC<LatestPostsSection> = ({ articles }) =
   const { t } = useTranslation('common')
 
   return (
-    <section className="grid grid-cols-1 gap-y-10 border-none  mb-10">
+    <section className="grid grid-cols-1 gap-y-5 md:gap-y-10 border-none mb-10">
       <header>
         <H5 as="h2">{t('articles.sections.latest-posts')}</H5>
       </header>

src/components/MdxComponents/custom-link.tsx

@@ -10,12 +10,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({ href, children }) => {
   if (external) {
     return (
       <span className="not-prose">
-        <a
-          href={href}
-          rel="noopener noreferrer"
-          target="_blank"
-          className="text-indigo-600 dark:text-indigo-400 underline hover:text-indigo-800 dark:hover:text-indigo-500 hover:no-underline transition-colors duration-200"
-        >
+        <a href={href} rel="noopener noreferrer" target="_blank" className="external-link">
           {children}
         </a>
       </span>

src/components/MdxComponents/responsive-image.tsx

@@ -1,6 +1,7 @@
 import Image, { ImageProps } from 'next/image'
 
 import { CustomLink } from '../CustomLink'
+import { extractLinks } from '@/utils/extract-links'
 
 export const ResponsiveImage: React.FC<ImageProps> = ({
   src,
@@ -10,6 +11,8 @@ export const ResponsiveImage: React.FC<ImageProps> = ({
   width,
   ...rest
 }) => {
+  const updatedFigcaption = title && extractLinks(title)
+
   return (
     <div className="my-3">
       <CustomLink href={src as string} aria-label="Click to enlarge the image">
@@ -32,7 +35,7 @@ export const ResponsiveImage: React.FC<ImageProps> = ({
       </CustomLink>
       {title && (
         <figcaption className="z-10 mt-4 text-sm italic text-gray-600 text-center dark:text-gray-300">
-          <span dangerouslySetInnerHTML={{ __html: title }} />
+          <span dangerouslySetInnerHTML={{ __html: updatedFigcaption ?? title }} />
         </figcaption>
       )}
     </div>

src/components/Paragraph/Paragraph.tsx

@@ -9,7 +9,7 @@ type ParagraphProps = {
 export const Paragraph = ({ className, prose = true, as = 'p', ...rest }: ParagraphProps) => {
   return React.createElement(as, {
     className: `${prose && 'prose'} max-w-full text-lg my-3 leading-relaxed dark:text-gray-300 ${
-      className && className
+      className ? className : ''
     }`,
     ...rest,
   })

src/pages/articles/[slug].tsx

@@ -236,7 +236,7 @@ const BlogPostPage: NextPage<BlogPostPageProps> = ({
                 {title}
               </span>
               <span className="sr-only"> — </span>
-              <div className="font-body text-lg sm:text-xl text-gray-600 dark:text-gray-400 mt-3 mb-6 tracking-wide font-light">
+              <div className="font-body text-base sm:text-xl text-gray-600 dark:text-gray-300 mt-3 mb-6 tracking-wide font-light">
                 {description}
               </div>
             </H1>

src/pages/index.tsx

@@ -82,7 +82,7 @@ const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects, fallback }) =>
           sameAs={listSocialUrl(social)}
         />
         <main id="main" data-skip-link="main content">
-          <section className="pb-20 pt-0 flex justify-between">
+          <section className="pb-10 md:pb-20 pt-0 flex justify-between">
             <div className="text-left">
               <h1 className="block mb-4 dark:text-white transition-colors">
                 <p className="text-3xl p-0 font-light uppercase">{t('home.hero.greetings1')}</p>

src/styles/globals.css

@@ -75,3 +75,7 @@ input:-webkit-autofill:focus {
 .goodreads-shelf img {
   @apply rounded-lg object-cover h-36;
 }
+
+.external-link {
+  @apply text-indigo-600 dark:text-indigo-400 underline hover:text-indigo-800 dark:hover:text-indigo-500 hover:no-underline transition-colors duration-200;
+}

src/utils/extract-links.ts

@@ -0,0 +1,25 @@
+import { unified } from 'unified'
+import rehypeParse from 'rehype-parse'
+import rehypeStringify from 'rehype-stringify'
+import { Parent, visit } from 'unist-util-visit'
+
+export const extractLinks = (html: string) => {
+  const processor = unified()
+    .use(rehypeParse, { fragment: true }) // Parse as fragment, not full HTML document
+    .use(
+      () => (tree: Parent) =>
+        visit(tree, 'element', (node: any) => {
+          if (node.tagName === 'a') {
+            node.properties = node.properties || {}
+            node.properties.className = 'external-link'
+            node.properties.rel = 'noopener noreferrer'
+            node.properties.target = '_blank'
+          }
+        })
+    )
+    .use(rehypeStringify)
+
+  const result = processor.processSync(html).toString()
+
+  return result
+}