✨ Update header and writings style (#1600)

* ✨ Update Biography * 🏷️ Update next types * 💄 Adjust Writings `Post` font-size
carloscuesta · Jan 15, 2025 · 30130f6 · 30130f6
1 parent 276b8c7
commit 30130f6
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 26 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/home/components/Biography/__tests__/__snapshots__/biography.spec.tsx.snap b/src/app/home/components/Biography/__tests__/__snapshots__/biography.spec.tsx.snap
@@ -73,7 +73,17 @@ exports[`Biography should match Biography component 1`] = `
               >
                 write
               </a>
-               and build stuff on internet.
+               and run
+               
+              <a
+                class="underline-offset-2 underline"
+                href="https://bueno.studio"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                bueno.studio
+              </a>
+              .
             </p>
             <p
               class="sm:max-w-md"

diff --git a/src/app/home/components/Biography/index.tsx b/src/app/home/components/Biography/index.tsx
@@ -43,7 +43,8 @@ const Biography = () => (
             <p className="sm:max-w-md">
               I'm a Front End Engineer based in Barcelona. I{' '}
               <Link href="https://github.com/carloscuesta" label="code" />,{' '}
-              <Link href="/blog" label="write" /> and build stuff on internet.
+              <Link href="/blog" label="write" /> and run{' '}
+              <Link href="https://bueno.studio" label="bueno.studio" />.
             </p>
 
             <p className="sm:max-w-md">

diff --git a/src/app/home/components/Writings/BlogPost/__tests__/__snapshots__/blogPost.spec.tsx.snap b/src/app/home/components/Writings/BlogPost/__tests__/__snapshots__/blogPost.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`BlogPost should match BlogPost component 1`] = `
     class="-mx-1.5"
   >
     <a
-      class="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-sm"
+      class="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-[15px]"
       href="/blog/post-slug"
       tabindex="0"
       title="Post Title"
@@ -16,7 +16,7 @@ exports[`BlogPost should match BlogPost component 1`] = `
       >
         <time
           aria-label="Written 15/12/2019 10:00"
-          class="opacity-60 sm:w-24"
+          class="opacity-60 sm:w-[6.25rem]"
           datetime="2019-12-15 10:00"
         >
           15 Dec, 2019
@@ -25,12 +25,12 @@ exports[`BlogPost should match BlogPost component 1`] = `
           class="grid flex-1 grid-flow-col items-baseline justify-between gap-10 md:items-center"
         >
           <header
-            class="font-medium text-sm"
+            class="font-medium"
           >
             Post Title
           </header>
           <p
-            class="font-mono opacity-60"
+            class="font-mono opacity-60 text-sm"
           >
             1,000 views
           </p>

diff --git a/src/app/home/components/Writings/BlogPost/index.tsx b/src/app/home/components/Writings/BlogPost/index.tsx
@@ -6,29 +6,28 @@ import { type PostPreview } from 'src/utils/api/blog/mutators'
 
 type Props = {
   post: PostPreview
-  isImageLoadedWithPriority: boolean
 }
 
 const BlogPost = (props: Props) => (
   <li className="-mx-1.5">
     <Link
       href={`/blog/${props.post.slug}`}
       title={props.post.title}
-      className="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-sm"
+      className="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-[15px]"
       tabIndex={0}
     >
       <article className="flex flex-col-reverse sm:flex-row sm:items-baseline sm:gap-3">
         <time
-          className="opacity-60 sm:w-24"
+          className="opacity-60 sm:w-[6.25rem]"
           dateTime={props.post.datePublished.value}
           aria-label={`Written ${props.post.datePublished.formatDate}`}
         >
           {`${props.post.datePublished.formatMonthDay}, ${new Date(props.post.datePublished.value).getFullYear()}`}
         </time>
 
         <div className="grid flex-1 grid-flow-col items-baseline justify-between gap-10 md:items-center">
-          <header className="font-medium text-sm">{props.post.title}</header>
-          <p className="font-mono opacity-60">
+          <header className="font-medium">{props.post.title}</header>
+          <p className="font-mono opacity-60 text-sm">
             <Suspense>
               <ViewsCount slug={props.post.slug} views={props.post.views} />
             </Suspense>

diff --git a/src/app/home/components/Writings/__tests__/__snapshots__/writings.spec.tsx.snap b/src/app/home/components/Writings/__tests__/__snapshots__/writings.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`Writings should match Writings component 1`] = `
           class="-mx-1.5"
         >
           <a
-            class="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-sm"
+            class="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-[15px]"
             href="/blog/post-slug"
             tabindex="0"
             title="Post Title"
@@ -38,7 +38,7 @@ exports[`Writings should match Writings component 1`] = `
             >
               <time
                 aria-label="Written 15/12/2019 10:00"
-                class="opacity-60 sm:w-24"
+                class="opacity-60 sm:w-[6.25rem]"
                 datetime="2019-12-15 10:00"
               >
                 15 Dec, 2019
@@ -47,12 +47,12 @@ exports[`Writings should match Writings component 1`] = `
                 class="grid flex-1 grid-flow-col items-baseline justify-between gap-10 md:items-center"
               >
                 <header
-                  class="font-medium text-sm"
+                  class="font-medium"
                 >
                   Post Title
                 </header>
                 <p
-                  class="font-mono opacity-60"
+                  class="font-mono opacity-60 text-sm"
                 >
                   1,000 views
                 </p>
@@ -64,7 +64,7 @@ exports[`Writings should match Writings component 1`] = `
           class="-mx-1.5"
         >
           <a
-            class="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-sm"
+            class="block p-1.5 h-full w-full rounded-md transition-all focus-within:bg-neutral-100 hover:bg-neutral-100 dark:focus-within:bg-neutral-900 dark:hover:bg-neutral-900 outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 text-[15px]"
             href="/blog/post-blog-slug"
             tabindex="0"
             title="A post"
@@ -74,7 +74,7 @@ exports[`Writings should match Writings component 1`] = `
             >
               <time
                 aria-label="Written 17/12/2019 10:00"
-                class="opacity-60 sm:w-24"
+                class="opacity-60 sm:w-[6.25rem]"
                 datetime="2019-12-17 10:00"
               >
                 17 Dec, 2019
@@ -83,12 +83,12 @@ exports[`Writings should match Writings component 1`] = `
                 class="grid flex-1 grid-flow-col items-baseline justify-between gap-10 md:items-center"
               >
                 <header
-                  class="font-medium text-sm"
+                  class="font-medium"
                 >
                   A post
                 </header>
                 <p
-                  class="font-mono opacity-60"
+                  class="font-mono opacity-60 text-sm"
                 >
                   1,000 views
                 </p>

diff --git a/src/app/home/components/Writings/index.tsx b/src/app/home/components/Writings/index.tsx
@@ -14,12 +14,8 @@ const Writings = (props: Props) => {
         <SectionTitle title="Writings" href="/blog" viewAll />
 
         <ul className="grid gap-3 sm:gap-1">
-          {props.posts.map((post, index) => (
-            <BlogPost
-              isImageLoadedWithPriority={[0, 1, 2].includes(index)}
-              key={post.slug}
-              post={post}
-            />
+          {props.posts.map((post) => (
+            <BlogPost key={post.slug} post={post} />
           ))}
         </ul>
       </Wrapper>