mateonunez · mateonunez · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/README.md b/README.md
@@ -7,10 +7,22 @@
 
 ## Getting Started
 
-Run `yarn` to install the necessary dependencies and `yarn dev` to start the local server.
+Activate corepack:
+
+```bash
+corepack enable
+```
+
+Install dependencies:
+
+```bash
+yarn install
+```
 
 Open [http://localhost:3000/](http://localhost:3000/). Pages will live-refresh when source files are changed.
 
+> Note: remember to set your environment variables in a `.env.local` file.
+
 ## License
 
 Site content is licensed under the [CC-BY-4.0](LICENSE), which means that you can copy, redistribute, remix, transform, and build upon the content for any purpose as long as you give appropriate credit.

diff --git a/app/api/spotify/currently-listening/route.js b/app/api/spotify/currently-listening/route.js
@@ -5,8 +5,6 @@ import { normalizeCurrentlyListening } from 'lib/utils/normalizers';
 export async function GET() {
   const response = await getCurrentlyListening();
 
-  console.log('response', response);
-
   if (!response) {
     return NextResponse.json({ error: 'Spotify not available' }, { status: 503 });
   }

diff --git a/app/error.jsx b/app/error.jsx
@@ -4,9 +4,7 @@ import { useEffect } from 'react';
 import s from 'styles/pages/404.module.css';
 
 export default function Eror({ error, reset }) {
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
+  useEffect(() => {}, [error]);
 
   return (
     <>

diff --git a/app/loading.jsx b/app/loading.jsx
@@ -1,7 +1,7 @@
 export default function Loading() {
   return (
-    <div className="flex items-center justify-center h-screen">
-      <div className="w-32 h-32 border-b-2 border-gray-300 rounded-full animate-spin" />
+    <div className="flex h-screen items-center justify-center">
+      <div className="h-32 w-32 animate-spin rounded-full border-gray-300 border-b-2" />
     </div>
   );
 }
diff --git a/app/open-source/page.jsx b/app/open-source/page.jsx
@@ -45,7 +45,7 @@ export default async function OpenSourcePage() {
       <Container clean name="you">
         <div className={s.thanksContainer}>
           <Fade direction="left" clean className="w-full">
-            <h2 className="text-4xl font-bold text-center">Thank you.</h2>
+            <h2 className="text-center font-bold text-4xl">Thank you.</h2>
 
             <Sponsors sponsors={sponsors} />
           </Fade>
@@ -56,7 +56,7 @@ export default async function OpenSourcePage() {
       <Container clean name="people">
         <div className={s.genericContainer}>
           <Fade direction="left" delay={0.5} className="w-full">
-            <h2 className="text-4xl font-bold text-center">Still You</h2>
+            <h2 className="text-center font-bold text-4xl">Still You</h2>
 
             <Followers followers={followers} />
           </Fade>
@@ -67,7 +67,7 @@ export default async function OpenSourcePage() {
       <Container clean name="passion">
         <div className={s.genericContainer}>
           <Fade direction="left" delay={0.5} className="w-full">
-            <h2 className="text-4xl font-bold text-center">About me</h2>
+            <h2 className="text-center font-bold text-4xl">About me</h2>
 
             <GitHubProfile {...profile} />
           </Fade>

diff --git a/app/sitemap.jsx b/app/sitemap.jsx
@@ -1,6 +1,6 @@
-import fs from 'fs';
+import fs from 'node:fs';
 import config from 'lib/config';
-import path from 'path';
+import path from 'node:path';
 
 function generateArticlesSitemap() {
   const result = [];

diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -9,11 +9,16 @@
       "recommended": true,
       "nursery": {
         "all": true,
-        "noDefaultExport": "off"
+        "noReactSpecificProps": "off",
+        "noUndeclaredDependencies": "off",
+        "noNodejsModules": "off"
       },
       "correctness": {
         "all": true,
         "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off"
       }
     },
     "ignore": [".next/", "node_modules/", "./**/*.json"]

diff --git a/components/about/about.jsx b/components/about/about.jsx
@@ -61,7 +61,7 @@ const About = ({ ...props }) => {
                       <div className={cn(s.profileQuote, 'text-right')}>”</div>
                     </div>
                     <div className="w-full">
-                      <p className="font-bold text-center text-amber-500 text-md">@mateonunez</p>
+                      <p className="text-center font-bold text-amber-500 text-md">@mateonunez</p>
                     </div>
                   </div>
                 </Fade>
@@ -79,8 +79,7 @@ const About = ({ ...props }) => {
                       </div>
                       <div className={s.bio}>
                         <span className={s.bioYear}>2009</span>
-                        Move to Milan, Italy. <br />
-                        I started a new life. Known new friends. Learned how to cook.
+                        Move to Milan, Italy. <br />I started a new life. Known new friends. Learned how to cook.
                       </div>
                       <div className={s.bio}>
                         <span className={s.bioYear}>2015</span>

diff --git a/components/animations/word-animator.jsx b/components/animations/word-animator.jsx
@@ -44,7 +44,7 @@ const WordAnimator = ({ words, clickable }, ref) => {
       <Wrapper {...wrapperProps} ref={ref}>
         <span
           ref={wordRef}
-          className={cn(s.wordAnimator, `transition-opacity duration-500 ${opacity}`, clickable && 'cursor-pointer')}
+          className={cn(s.wordAnimator, `transition-opacity duration-500${opacity}`, clickable && 'cursor-pointer')}
         >
           {currentWord}
         </span>

diff --git a/components/articles/mdx/heading/index.jsx b/components/articles/mdx/heading/index.jsx
@@ -10,7 +10,7 @@ const extractName = (title) => {
 
 const CopyToClipboard = ({ id, title, children }) => (
   <button
-    className="hover:text-amber-700 hover:scale-105 transform transition-all duration-500 hover:underline text-amber-500"
+    className="transform text-amber-500 transition-all duration-500 hover:scale-105 hover:text-amber-700 hover:underline"
     title={`Copy "${title}" to clipboard`}
     onClick={(event) => {
       const fullUrl = `${window.location.origin}${window.location.pathname}#${id}`;

diff --git a/components/articles/mdx/image/index.jsx b/components/articles/mdx/image/index.jsx
@@ -5,7 +5,7 @@ import Link from 'next/link';
 
 export default function MDXImage({ src, width, height, alt, quality, priority, href, target = '_self', ...rest }) {
   const ImageWrapper = (
-    <div className="w-full h-full">
+    <div className="h-full w-full">
       <Image
         src={src}
         width={width}

diff --git a/components/articles/mdx/row/index.jsx b/components/articles/mdx/row/index.jsx
@@ -1,3 +1,3 @@
-const Row = ({ children }) => <div className="flex flex-wrap -mx-4">{children}</div>;
+const Row = ({ children }) => <div className="-mx-4 flex flex-wrap">{children}</div>;
 
 export default Row;
diff --git a/components/articles/preview/index.js b/components/articles/preview/index.js
@@ -18,8 +18,6 @@ export default function ArticlePreview({
 }) {
   return (
     <div className={s.root}>
-
-
       <Link as={`/blog/${slug}`} rel="canonical" href={`/blog/${slug}`} title={title}>
         <div className={s.body}>
           <div className={s.imagePreview}>

diff --git a/components/common/circular-progress/circular-progress.jsx b/components/common/circular-progress/circular-progress.jsx
@@ -6,7 +6,7 @@ const CircularProgress = ({ progress = 50, ...props }) => {
 
   return (
     <div>
-      <svg alt="circular-progress" className="w-8 h-8 rotate-90" {...props}>
+      <svg alt="circular-progress" className="h-8 w-8 rotate-90" {...props}>
         <title>Circular Progress</title>
         {/* Gray  */}
         <circle

diff --git a/components/common/footer/footer.jsx b/components/common/footer/footer.jsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="p-4 mt-auto text-right text-white sm:text-center">
+    <footer className="mt-auto p-4 text-right text-white sm:text-center">
       <p className="absolute left-0 ml-2 text-xs">
         Made with{' '}
         <span role="img" aria-label="heart">

diff --git a/components/common/social-links/social-links.jsx b/components/common/social-links/social-links.jsx
@@ -1,7 +1,7 @@
 import s from './social-links.module.css';
 
 import Link from 'next/link';
-import { Github, LinkedIn, Instagram, Spotify, Twitter } from 'components/icons';
+import { Github, LinkedIn, Spotify, Twitter } from 'components/icons';
 
 export default function SocialLinks() {
   return (

diff --git a/components/github/followers/followers.jsx b/components/github/followers/followers.jsx
@@ -22,11 +22,11 @@ export default function Followers({ followers }) {
                 <Image
                   src={follower.avatar}
                   alt={follower.username}
-                  className="w-32 h-32 rounded-full shadow-lg"
+                  className="h-32 w-32 rounded-full shadow-lg"
                   width={128}
                   height={128}
                 />
-                <span className="mt-2 text-sm text-center text-caption">@{follower.username}</span>
+                <span className="mt-2 text-center text-caption text-sm">@{follower.username}</span>
               </Link>
             </div>
           ))}
@@ -37,10 +37,10 @@ export default function Followers({ followers }) {
             href="https://github.com/mateonunez?tab=followers"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-sm font-black text-center"
+            className="text-center font-black text-sm"
           >
             and {followers.length - followersShown.length} more...{' '}
-            <span className="text-xs text-emoji">(thank you ❤️)</span>
+            <span className="text-emoji text-xs">(thank you ❤️)</span>
           </a>
         </div>
 

diff --git a/components/github/last-activity/last-activity.jsx b/components/github/last-activity/last-activity.jsx
@@ -2,8 +2,7 @@
 
 import s from './last-activity.module.css';
 
-export default function LastActivity({ contributions }) {
-  console.log({ contributions });
+export default function LastActivity() {
   return (
     <>
       <div className={s.root}>

diff --git a/components/github/repositories/preview/preview.jsx b/components/github/repositories/preview/preview.jsx
@@ -50,7 +50,7 @@ export default function RepositoryPreview({
                 title={`${name} stars`}
                 className="flex"
               >
-                <Star className="w-5 h-5" />
+                <Star className="h-5 w-5" />
                 <span className={s.starsCount}>{stars}</span>
               </Link>
             </div>
@@ -65,7 +65,7 @@ export default function RepositoryPreview({
                 title={`${name} forks`}
                 className="flex"
               >
-                <Fork className="w-5 h-5" />
+                <Fork className="h-5 w-5" />
                 <div className={s.forksCount}>{forks}</div>
               </Link>
             </div>

diff --git a/components/github/sponsors/sponsors.jsx b/components/github/sponsors/sponsors.jsx
@@ -22,7 +22,7 @@ export default function Sponsors({ sponsors }) {
                 <Image
                   src={sponsor.avatar}
                   alt={sponsor.username}
-                  className="w-64 h-64 rounded-full shadow-lg"
+                  className="h-64 w-64 rounded-full shadow-lg"
                   width={512}
                   height={512}
                 />
@@ -42,23 +42,23 @@ export default function Sponsors({ sponsors }) {
 
         {/* Consider sposoring me section */}
         <div className={s.considerSponsoringContainer}>
-          <h2 className="text-4xl font-bold text-center">You love my work?</h2>
+          <h2 className="text-center font-bold text-4xl">You love my work?</h2>
 
           <article className={s.description}>
             If you like my work and want to support me, consider sponsoring me on GitHub.
           </article>
 
-          <div className="flex flex-col items-center justify-center w-1/2 p-4 m-4" style={{ margin: 'auto' }}>
+          <div className="m-4 flex w-1/2 flex-col items-center justify-center p-4" style={{ margin: 'auto' }}>
             <Link
               href="https://github.com/sponsors/mateonunez"
               target="_blank"
               rel="noopener noreferrer"
-              className="mt-4 text-lg font-bold text-center"
+              className="mt-4 text-center font-bold text-lg"
             >
               <Image
                 src="https://github.githubassets.com/images/modules/site/sponsors/pixel-mona-heart.gif"
                 alt="Sponsor me"
-                className="w-24 h-24 shadow-lg"
+                className="h-24 w-24 shadow-lg"
                 width={128}
                 height={128}
               />

diff --git a/components/header/header.jsx b/components/header/header.jsx
@@ -17,7 +17,7 @@ const ActiveLink = ({ href, children, title }) => {
     <Link
       href={href}
       as={href}
-      className={`${s.link} ${pathname.split('/')[1] === href.split('/')[1] ? s.active : ''}`}
+      className={`${s.link}${pathname.split('/')[1] === href.split('/')[1] ? s.active : ''}`}
       rel="canonical"
       title={title}
     >
@@ -62,7 +62,7 @@ export default function Header() {
 
         <button
           type="button"
-          className={cn(s.toggle, 'transform ease-linear duration-300', mobileNavShown && 'rotate-90')}
+          className={cn(s.toggle, 'transform duration-300 ease-linear', mobileNavShown && 'rotate-90')}
           onClick={toggle}
           aria-label="Toggle Menu"
         >

diff --git a/components/hero/hero.jsx b/components/hero/hero.jsx
@@ -45,7 +45,7 @@ export default function Hero({ article, ...props }) {
           {/* Last Article */}
           <div className={s.lastArticle}>
             <Fade>
-              <h2 className="text-center subtitle">
+              <h2 className="subtitle text-center">
                 <Link href="/blog" title="Blog" aria-label="Blog" rel="canonical">
                   From the Blog
                 </Link>

diff --git a/components/icons/ChevronDown.jsx b/components/icons/ChevronDown.jsx
@@ -3,7 +3,7 @@ export default function ChevronDown({ ...props }) {
     <>
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="w-6 h-6"
+        className="h-6 w-6"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"

diff --git a/components/icons/ChevronUp.jsx b/components/icons/ChevronUp.jsx
@@ -4,7 +4,7 @@ export default function ChevronUp({ ...props }) {
       <svg
         alt="up"
         xmlns="http://www.w3.org/2000/svg"
-        className="w-6 h-6"
+        className="h-6 w-6"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"

diff --git a/components/icons/Clock.jsx b/components/icons/Clock.jsx
@@ -5,7 +5,7 @@ export default function Clock({ ...props }) {
         <svg
           alt="clock"
           xmlns="http://www.w3.org/2000/svg"
-          className="w-6 h-6"
+          className="h-6 w-6"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"

diff --git a/components/icons/Close.jsx b/components/icons/Close.jsx
@@ -4,7 +4,7 @@ const Close = ({ ...props }) => {
       <svg
         alt="close"
         xmlns="http://www.w3.org/2000/svg"
-        className="w-6 h-6"
+        className="h-6 w-6"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"

diff --git a/components/icons/Fork.jsx b/components/icons/Fork.jsx
@@ -5,7 +5,7 @@ export default function Fork({ ...props }) {
         <svg
           alt="fork"
           xmlns="http://www.w3.org/2000/svg"
-          className="w-6 h-6"
+          className="h-6 w-6"
           fill="none"
           viewBox="0 0 16 16"
           stroke="currentColor"

diff --git a/components/icons/Github.jsx b/components/icons/Github.jsx
@@ -6,7 +6,7 @@ export default function Github({ ...props }) {
         fill="#fff"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        className="w-6 h-6"
+        className="h-6 w-6"
         {...props}
       >
         <title>GitHub</title>

diff --git a/components/icons/Instagram.jsx b/components/icons/Instagram.jsx
@@ -6,7 +6,7 @@ export default function Instagram({ ...props }) {
         fill="#fff"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        className="w-6 h-6"
+        className="h-6 w-6"
         {...props}
       >
         <title>Instagram</title>

diff --git a/components/icons/LinkedIn.jsx b/components/icons/LinkedIn.jsx
@@ -6,7 +6,7 @@ export default function LinkedIn({ ...props }) {
         fill="#fff"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 30 30"
-        className="w-6 h-6"
+        className="h-6 w-6"
         {...props}
       >
         <title>LinkedIn</title>