fix(prettier): run on all layout and component files

components/Article.js

@@ -55,7 +55,7 @@ const Article = ({ slug, date, title, summary, tags, authors, border = true }) =
           <Link href={`/articles/${slug}`}>
             <h2 className="teaser-title mb-2 text-3xl">{<MarkdownRenderer markdown={title} />}</h2>
             <div className="mb-3 hidden md:block">
-              <h3 className="hyphens-auto line-clamp-3">
+              <h3 className="line-clamp-3 hyphens-auto">
                 {<MarkdownRenderer markdown={summary} />}
               </h3>
             </div>

components/EventCalendar.js

@@ -11,9 +11,9 @@ const EventCalendar = ({ events }) => {
           }`}
           key={event.id}
         >
-          <h3 className="m-0 text-lg font-medium line-clamp-2">{event.title}</h3>
-          <p className="m-0 text-sm line-clamp-2">{event.description}</p>
-          <p className="m-0 mt-auto pt-6 text-xs line-clamp-2">
+          <h3 className="m-0 line-clamp-2 text-lg font-medium">{event.title}</h3>
+          <p className="m-0 line-clamp-2 text-sm">{event.description}</p>
+          <p className="m-0 mt-auto line-clamp-2 pt-6 text-xs">
             <time
               className={`font-bold ${isFutureEvent(event.dateTime) ? 'text-io_blue-600' : ''}`}
               dateTime={new Intl.DateTimeFormat('en-US', {
@@ -34,7 +34,7 @@ const EventCalendar = ({ events }) => {
             href={event.eventUrl}
             target="_blank"
             rel="noreferrer"
-            className="absolute top-0 right-0 bottom-0 left-0 text-0"
+            className="absolute bottom-0 left-0 right-0 top-0 text-0"
           >
             Go to page for {event.title}
           </Link>

components/EventCarousel.js

@@ -14,11 +14,11 @@ const EventCarousel = ({ events }) => {
         >
           <div className="relative flex h-full flex-col  bg-gray-100 p-8">
             <header>
-              <h3 className="mb-2 text-3xl font-medium line-clamp-2">{event.title}</h3>
+              <h3 className="mb-2 line-clamp-2 text-3xl font-medium">{event.title}</h3>
 
-              <p className="hyphens-auto text-lg line-clamp-3 ">{event.description}</p>
+              <p className="line-clamp-3 hyphens-auto text-lg ">{event.description}</p>
             </header>
-            <p className="m-0 mt-auto pt-6 text-xs line-clamp-2">
+            <p className="m-0 mt-auto line-clamp-2 pt-6 text-xs">
               <time
                 className={`font-bold ${isFutureEvent(event.dateTime) ? 'text-io_blue-600' : ''}`}
                 dateTime={new Intl.DateTimeFormat('en-US', {
@@ -39,7 +39,7 @@ const EventCarousel = ({ events }) => {
               href={event.eventUrl}
               target="_blank"
               rel="noreferrer"
-              className="absolute top-0 right-0 bottom-0 left-0 text-0"
+              className="absolute bottom-0 left-0 right-0 top-0 text-0"
             >
               Go to page for {event.title}
             </Link>

components/Experiment.js

@@ -60,7 +60,7 @@ const Experiment = ({ title, images, demo, code, authors, content, border = true
           <div className="flex space-x-4">
             <Link
               href={demo}
-              className={`relative inline-flex rounded-full border border-black py-4 px-9 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white`}
+              className={`relative inline-flex rounded-full border border-black px-9 py-4 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white`}
             >
               <Arrow className="mr-4 w-6" /> Demo
             </Link>

components/Footer.js

@@ -20,7 +20,7 @@ export default function Footer() {
             <div>{` • `}</div>
             <Link href="/">{siteMetadata.title}</Link>
           </div>
-          <div className="mb-4 flex flex-col space-y-2 text-center md:flex-row md:space-y-0 md:space-x-2">
+          <div className="mb-4 flex flex-col space-y-2 text-center md:flex-row md:space-x-2 md:space-y-0">
             {siteMetadata.legal.map((link, index) => {
               return (
                 <div key={link.title}>

components/Pagination.js

@@ -9,7 +9,7 @@ export default function Pagination({ totalPages, currentPage, subpath = 'article
   const btnClassesDisabled = `${btnClasses} cursor-auto disabled:opacity-50`
 
   return (
-    <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+    <div className="space-y-2 pb-8 pt-6 md:space-y-5">
       <nav className="flex justify-between">
         {!prevPage && (
           <button rel="previous" className={btnClassesDisabled} disabled={!prevPage}>

components/ScrollTop.js

@@ -21,7 +21,7 @@ const ScrollTop = () => {
 
   return (
     <div
-      className={`fixed right-8 bottom-8 hidden flex-col gap-3 ${show ? 'md:flex' : 'md:hidden'}`}
+      className={`fixed bottom-8 right-8 hidden flex-col gap-3 ${show ? 'md:flex' : 'md:hidden'}`}
     >
       <button
         aria-label="Scroll To Top"

components/SectionTitle.js

@@ -1,7 +1,7 @@
 export default function SectionTitle({ children, id }) {
   return (
     <div className="container mx-auto">
-      <div className="pt-20 pb-8 xl:grid xl:grid-cols-4">
+      <div className="pb-8 pt-20 xl:grid xl:grid-cols-4">
         <h2
           id={id}
           className="pt-8 text-3xl font-medium text-gray-900 sm:text-4xl md:text-7xl xl:col-span-3 xl:col-start-2"

components/TOCInline.js

@@ -51,7 +51,7 @@ const TOCInline = ({
     <>
       {asDisclosure ? (
         <details open>
-          <summary className="ml-6 pt-2 pb-2 text-xl font-bold">Table of Contents</summary>
+          <summary className="ml-6 pb-2 pt-2 text-xl font-bold">Table of Contents</summary>
           <div className="ml-6">{tocList}</div>
         </details>
       ) : (

components/Talk.js

@@ -29,7 +29,7 @@ const Talk = ({ title, summary, authors, tags, video, slides, slug }) => {
 
         <div className="flex flex-grow flex-col justify-end">
           {authors?.map((author) => (
-            <div className="mt-2 mb-3 flex items-center text-lg" key={author.name}>
+            <div className="mb-3 mt-2 flex items-center text-lg" key={author.name}>
               <div className="flex-0 relative mr-3 inline-block h-10 w-10 overflow-hidden rounded-full">
                 <Image
                   key={author.name}

components/VideoCard.js

@@ -6,10 +6,10 @@ const VideoCard = ({ video, playButton = true }) => {
     <article className="relative flex flex-col-reverse items-center bg-gray-100 p-8">
       <div>
         <header>
-          <h3 className="mb-2 text-3xl font-medium line-clamp-2">
+          <h3 className="mb-2 line-clamp-2 text-3xl font-medium">
             <span dangerouslySetInnerHTML={{ __html: video.title }}></span>
           </h3>
-          <p className="hyphens-auto text-lg line-clamp-3 ">{video.description}</p>
+          <p className="line-clamp-3 hyphens-auto text-lg ">{video.description}</p>
         </header>
       </div>
 
@@ -25,7 +25,7 @@ const VideoCard = ({ video, playButton = true }) => {
         />
 
         {playButton && (
-          <div className="absolute top-1/2 left-1/2 flex h-28 w-28 -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center rounded-full bg-io_blue-600 align-middle text-white shadow-lg">
+          <div className="absolute left-1/2 top-1/2 flex h-28 w-28 -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center rounded-full bg-io_blue-600 align-middle text-white shadow-lg">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="11"
@@ -43,7 +43,7 @@ const VideoCard = ({ video, playButton = true }) => {
           </div>
         )}
       </div>
-      <Link href={`/videos/${video.id}`} className="absolute top-0 right-0 bottom-0 left-0 text-0">
+      <Link href={`/videos/${video.id}`} className="absolute bottom-0 left-0 right-0 top-0 text-0">
         Go to page for {video.title}
       </Link>
     </article>

components/Workshop.js

@@ -29,7 +29,7 @@ const Workshop = ({ title, summary, authors, tags, video, slides, slug }) => {
 
         <div className="flex flex-grow flex-col justify-end">
           {authors?.map((author) => (
-            <div className="mt-2 mb-3 flex items-center text-lg" key={author.name}>
+            <div className="mb-3 mt-2 flex items-center text-lg" key={author.name}>
               <div className="flex-0 relative mr-3 inline-block h-10 w-10 overflow-hidden rounded-full">
                 <Image
                   key={author.name}

layouts/AuthorLayout.js

@@ -17,7 +17,7 @@ export default function AuthorLayout({ children, frontMatter, posts, talks, work
       <PageSEO title={`Author - ${name}`} description={`About me - ${name}`} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-12">
+        <div className="container mx-auto pb-12 pt-8">
           <div className="grid grid-cols-12">
             <div className="col-start-1 col-end-12 mb-8 md:col-start-9 md:col-end-13 md:row-start-1 md:row-end-4 md:mb-0 xl:col-start-9 xl:row-start-1">
               <Image
@@ -30,7 +30,7 @@ export default function AuthorLayout({ children, frontMatter, posts, talks, work
               />
             </div>
 
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="mb-2 text-4xl md:text-5xl xl:text-7xl">{name}</h1>
               <p className="mb-4 text-2xl">{occupation}</p>
               <div className="flex flex-wrap gap-4">

layouts/ListLayout.js

@@ -25,9 +25,9 @@ export default function ListLayout({
   return (
     <>
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto mb-12 pt-0 pb-24">
+        <div className="container mx-auto mb-12 pb-24 pt-0">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 <span className="block">{title}</span>
               </h1>

layouts/PostLayout.js

@@ -79,7 +79,7 @@ export default function PostLayout({
           className="container mx-auto pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
           style={{ gridTemplateRows: 'auto 1fr' }}
         >
-          <dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
+          <dl className="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
             <dt className="sr-only">Authors</dt>
             <dd>
               <ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
@@ -164,7 +164,7 @@ export default function PostLayout({
           </dl>
           <div className="xl:col-span-3 xl:row-span-3 xl:grid xl:grid-cols-3">
             <div className="xl:col-span-2 xl:pb-0">
-              <div className="container prose mx-auto pt-10 pb-8 dark:prose-dark ">
+              <div className="container prose mx-auto pb-8 pt-10 dark:prose-dark ">
                 {children}
 
                 <hr className="my-24" />
@@ -235,7 +235,7 @@ export default function PostLayout({
             <div className="pt-4 xl:pt-8">
               <Link
                 href="/articles"
-                className={`relative inline-flex rounded-full border border-black py-4 px-9 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white`}
+                className={`relative inline-flex rounded-full border border-black px-9 py-4 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white`}
               >
                 <Arrow className="mr-4 w-6 rotate-180" /> Back to all articles
               </Link>

layouts/PostSimple.js

@@ -35,7 +35,7 @@ export default function PostLayout({ frontMatter, next, prev, children }) {
             style={{ gridTemplateRows: 'auto 1fr' }}
           >
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
+              <div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
             </div>
             <footer>
               <div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">

layouts/SerieLayout.js

@@ -80,7 +80,7 @@ export default function PostLayout({
           className="container mx-auto pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
           style={{ gridTemplateRows: 'auto 1fr' }}
         >
-          <dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
+          <dl className="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
             <dt className="sr-only">Authors</dt>
             <dd>
               <ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
@@ -156,7 +156,7 @@ export default function PostLayout({
           <div className="xl:col-span-3 xl:row-span-3 xl:grid xl:grid-cols-3">
             <div className="xl:col-span-2 xl:pb-0">
               {Children.count > 0 && (
-                <div className="container prose mx-auto pt-10 pb-8 dark:prose-dark ">
+                <div className="container prose mx-auto pb-8 pt-10 dark:prose-dark ">
                   {children}
                   <hr className="my-24" />
                   <div>
@@ -241,7 +241,7 @@ export default function PostLayout({
             <div className="pt-4 xl:pt-8">
               <Link
                 href="/series"
-                className={`relative inline-flex rounded-full border border-black py-4 px-9 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white`}
+                className={`relative inline-flex rounded-full border border-black px-9 py-4 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white`}
               >
                 <Arrow className="mr-4 w-6 rotate-180" /> Back to all series
               </Link>

layouts/SeriesLayout.js

@@ -25,9 +25,9 @@ export default function ListLayout({
   return (
     <>
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto mb-12 pt-0 pb-24">
+        <div className="container mx-auto mb-12 pb-24 pt-0">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 <span className="block">{title}</span>
               </h1>

layouts/StaticPageLayout.js

@@ -9,7 +9,7 @@ export default function StaticPageLayout({ frontMatter, children }) {
     <>
       <PageSEO {...frontMatter} />
       <ScrollTop />
-      <article className="container mx-auto mx-auto mb-72 pt-8 pb-14 xl:pt-32">
+      <article className="container mx-auto mx-auto mb-72 pb-14 pt-8 xl:pt-32">
         <div>
           <div
             className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0 "
@@ -19,7 +19,7 @@ export default function StaticPageLayout({ frontMatter, children }) {
               {<MarkdownRenderer markdown={title} />}
             </h1>
             <div className="mx-auto max-w-xl divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
+              <div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
             </div>
           </div>
         </div>

next.config.js

@@ -73,16 +73,6 @@ module.exports = withBundleAnalyzer({
       use: ['@svgr/webpack'],
     })
 
-    if (!dev && !isServer) {
-      // Replace React with Preact only in client production build
-      Object.assign(config.resolve.alias, {
-        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
-        react: 'preact/compat',
-        'react-dom/test-utils': 'preact/test-utils',
-        'react-dom': 'preact/compat',
-      })
-    }
-
     return config
   },
 })