perf: blog some improvements (#394)

* perf(blog): some improvements

Signed-off-by: mateonunez <[email protected]>

* perf(article-preview): little improvements

Signed-off-by: mateonunez <[email protected]>

---------

Signed-off-by: mateonunez <[email protected]>

app/blog/[slug]/page.jsx

@@ -1,6 +1,6 @@
 import s from 'styles/pages/blog/[slug].module.css';
 
-import { cache } from 'react';
+import { Suspense, cache } from 'react';
 import dynamic from 'next/dynamic';
 import { getArticle } from 'lib/articles/parser';
 import config from 'lib/config';
@@ -55,10 +55,10 @@ export default async function BlogArticle({ params }) {
   const { frontMatter, source } = await fetchArticle({ slug });
 
   return (
-    <>
+    <Suspense fallback={<div>Loading...</div>}>
       <div className={s.root}>
         <Article frontMatter={frontMatter} source={source} />
       </div>
-    </>
+    </Suspense>
   );
 }

components/articles/mdx/heading/index.jsx

@@ -1,12 +1,12 @@
-import { kebapCase } from "lib/helpers/string";
+import { kebapCase } from 'lib/helpers/string';
 
 const extractTitle = (children) => {
   return typeof children === 'object' ? children.props?.title : children;
 };
 
 const extractName = (title) => {
   return title ? kebapCase(title) : null;
-}
+};
 
 const CopyToClipboard = ({ id, title, children }) => (
   <button

components/articles/preview/index.js

@@ -17,37 +17,29 @@ export default function ArticlePreview({
   // readingTime
 }) {
   return (
-    <>
-      <div className={s.root}>
-        {/* Heading  */}
-        <div className={s.heading}>
-          {/* Author image  */}
-          <Image src={author.image} alt={author.name} width={32} height={32} className={s.authorImage} />
-          {/* Author Name */}
-          <span className={s.simpleText}>Written by: </span>
-          <span className={s.authorName}>{author.name}</span>
-          {/* Separator */}
-          <span className={s.simpleText}>at</span>
-          {/* Date */}
-          <span className={s.date}>{dateForHumans(date)}</span>
-        </div>
+    <div className={s.root}>
+
 
-        {/* Body */}
-        <Link as={`/blog/${slug}`} rel="canonical" href={`/blog/${slug}`} title={title}>
-          <div className={s.body}>
-            {/* Image */}
-            <div className={s.imagePreview}>
-              <Image src={image} alt={title} width={1280} height={720} className={s.image} priority />
-            </div>
+      <Link as={`/blog/${slug}`} rel="canonical" href={`/blog/${slug}`} title={title}>
+        <div className={s.body}>
+          <div className={s.imagePreview}>
+            <Image src={image} alt={title} width={1280} height={720} className={s.image} priority />
+          </div>
 
-            {/* Title and Description */}
-            <div className={s.textPreview}>
-              <h2 className={s.title}>{title}</h2>
-              <p className={s.description}>{description}</p>
-            </div>
+          <div className={s.textPreview}>
+            <h2 className={s.title}>{title}</h2>
+            <p className={s.description}>{description}</p>
           </div>
-        </Link>
+        </div>
+      </Link>
+
+      <div className={s.heading}>
+        <Image src={author.image} alt={author.name} width={32} height={32} className={s.authorImage} />
+        <span className={s.simpleText}>Written by: </span>
+        <span className={s.authorName}>{author.name}</span>
+        <span className={s.simpleText}>at</span>
+        <span className={s.date}>{dateForHumans(date)}</span>
       </div>
-    </>
+    </div>
   );
 }

components/articles/preview/preview.module.css

@@ -1,5 +1,5 @@
 .root {
-  margin: 1rem auto 2rem auto;
+  margin: 2rem auto 3rem auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -9,16 +9,17 @@
 .heading {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
+  margin-top: 1rem;
 }
 
 .body {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  align-items: start;
   transition: 0.5s;
-  margin-top: 0.3rem;
+  margin-top: 0.5rem;
 }
 
 .body:hover {
@@ -32,8 +33,10 @@
 }
 
 .imagePreview {
-  width: 15rem;
+  width: 100%;
+  max-width: 15em;
   margin-right: 1rem;
+  overflow: hidden;
 }
 
 .authorImage {

styles/global.css

@@ -14,7 +14,7 @@
   font-family: 'Incompleeta';
   font-weight: 'normal';
   font-display: block;
-  src: url('~/assets/fonts/IncompleetaRegular.woff2') format('woff2');
+  src: url('/fonts/IncompleetaRegular.woff2') format('woff2');
 }
 
 :root {