.quality improvements

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["numso.prettier-standard-vscode"]
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "albert.lol",
-  "version": "4.0",
+  "version": "4.20",
   "private": true,
   "scripts": {
     "dev": "next dev",

readme.md

@@ -17,6 +17,7 @@ yarn dev
 Create a `.env` file similar to [`.env.example`](https://github.com/skidoodle/albert.lol/blob/master/.env.example).
 
 ### Prerequisites
+
 1. Create an application in the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/)
    - Click on the `Edit settings` button
    - Set the `Redirect URIs` to a convenient location <sup>_(doesn't matter)_</sup>
@@ -37,4 +38,5 @@ Create a `.env` file similar to [`.env.example`](https://github.com/skidoodle/al
 5. Save `refresh_token` in your `.env` file as well as your `client_id` and `client_secret`.
 
 ## License
+
 [GPL-3.0](https://github.com/skidoodle/albert.lol/blob/master/license)

src/components/Icon.tsx

@@ -1,3 +1,4 @@
+import { socials } from '@/components/data/Socials';
 import Link from 'next/link';
 import toast from 'react-hot-toast';
 import copy from 'copy-to-clipboard';
@@ -25,6 +26,9 @@ export const Icon = ({ children, reference, copyValue }: Icon) => {
       <Link
         href={''}
         className={`cursor-pointer`}
+        aria-label={
+          socials.find((social) => social.ref === reference)?.ariaLabel
+        }
         onClick={() => {
           notify(), copy(reference);
         }}
@@ -35,7 +39,12 @@ export const Icon = ({ children, reference, copyValue }: Icon) => {
   }
 
   return (
-    <Link href={reference} target='_blank' className={'cursor-pointer'}>
+    <Link
+      href={reference}
+      target='_blank'
+      className={'cursor-pointer'}
+      aria-label={socials.find((social) => social.ref === reference)?.ariaLabel}
+    >
       {children}
     </Link>
   );

src/components/MainLayout.tsx

@@ -1,30 +0,0 @@
-import { ThemeSwitcher } from '@/components/ThemeSwitcher';
-import { NowPlayingCard } from '@/components/SpotifyCard';
-import { SocialLayout } from '@/components/SocialLayout';
-import { Toaster } from 'react-hot-toast';
-import FadeIn from 'react-fade-in';
-
-export const MainLayout = () => {
-  return (
-    <>
-      <ThemeSwitcher />
-      <FadeIn>
-        <div className='ml-[10%] mr-[10%]'>
-          <div className='flex flex-col max-w-3xl mx-auto mb-16 mt-32'>
-            <h1 className='text-7xl font-bold'>albert</h1>
-            <p className='text-2xl text-gray-600 dark:text-gray-400 mt-2 font-semibold'>
-              {Math.floor(
-                (new Date().getTime() - new Date('2004-07-22').getTime()) /
-                  (1000 * 60 * 60 * 24 * 365.25)
-              )}
-              -year-old system administrator
-            </p>
-            <SocialLayout />
-            <NowPlayingCard />
-            <Toaster position='bottom-center' reverseOrder={false} />
-          </div>
-        </div>
-      </FadeIn>
-    </>
-  );
-};

src/components/SocialLayout.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 export const SocialLayout = () => {
   return (
-    <>
     <div className='grid grid-flow-col w-48 mt-3 text-2xl space-x-8'>
       {socials.map((social) => (
         <Icon
@@ -16,6 +15,5 @@ export const SocialLayout = () => {
         </Icon>
       ))}
     </div>
-    </>
   );
 };

src/components/SpotifyCard.tsx

@@ -1,9 +1,9 @@
 import { truncate } from '@/utils/truncate';
-import FadeIn from 'react-fade-in';
+import { HiMusicNote } from 'react-icons/hi';
 import Image from 'next/image';
-import useSWR from 'swr';
-import SongImage from '@/public/song.webp';
 import Link from 'next/link';
+import FadeIn from 'react-fade-in';
+import useSWR from 'swr';
 
 export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
 
@@ -24,21 +24,17 @@ export const NowPlayingCard = () => {
             src={spotify.song?.image}
           />
         ) : (
-          <Image height={45} width={45} alt='Song cover art' src={SongImage} />
+          <HiMusicNote size={45} className='p-2.5' />
         )}
         <div className='my-auto ml-4'>
           <div className='font-semibold text-l sm:text-regular'>
             Listening to{' '}
             {spotify.song ? (
-              <Link
+              <Link href={`${spotify.song.url}`} target='_blank'>
-                href={`${spotify.song.url}`}
-                target='_blank'
-                className='text-[#32a866]'
-              >
                 {truncate(`${spotify.song.title}`, 20)}
               </Link>
             ) : (
-              <span className='text-[#32a866]'>nothing</span>
+              <span>nothing</span>
             )}
           </div>
         </div>

src/components/data/Socials.ts

@@ -12,6 +12,7 @@ type Socials = {
   ref: string;
   icon: IconType;
   copyValue?: boolean;
+  ariaLabel?: string;
 };
 
 export const socials: Array<Socials> = [
@@ -19,27 +20,32 @@ export const socials: Array<Socials> = [
     id: 1,
     ref: 'https://github.com/skidoodle',
     icon: FaGithub,
+    ariaLabel: 'GitHub',
   },
   {
     id: 2,
     ref: 'https://steamcommunity.com/id/_albert',
     icon: FaSteam,
+    ariaLabel: 'Steam',
   },
   {
     id: 3,
     ref: 'contact@albert.lol',
     icon: FaEnvelope,
     copyValue: true,
+    ariaLabel: 'Email',
   },
   {
     id: 4,
     ref: 'https://www.instagram.com/albertadam_/',
     icon: FaInstagram,
+    ariaLabel: 'Instagram',
   },
   {
     id: 5,
     ref: 'albert#8838',
     icon: FaDiscord,
     copyValue: true,
+    ariaLabel: 'Discord',
   },
 ];

src/pages/index.tsx

@@ -1,9 +1,27 @@
-import { MainLayout } from '@/components/MainLayout';
+import { ThemeSwitcher } from '@/components/ThemeSwitcher';
+import { NowPlayingCard } from '@/components/SpotifyCard';
+import { SocialLayout } from '@/components/SocialLayout';
+import { Toaster } from 'react-hot-toast';
+import age from '@/utils/age';
+import FadeIn from 'react-fade-in';
 
 export default function Home () {
   return (
     <>
-      <MainLayout />
+      <ThemeSwitcher />
+      <FadeIn>
+        <div className='ml-[10%] mr-[10%]'>
+          <div className='flex flex-col max-w-3xl mx-auto mb-16 mt-32'>
+            <h1 className='text-7xl font-bold'>albert</h1>
+            <p className='text-2xl text-gray-600 mt-2 font-semibold'>
+              {age()}-year-old system administrator
+            </p>
+            <SocialLayout />
+            <NowPlayingCard />
+            <Toaster position='top-left' />
+          </div>
+        </div>
+      </FadeIn>
     </>
   );
 }

src/utils/age.ts

@@ -0,0 +1,6 @@
+export default function age () {
+  return Math.floor(
+    (new Date().getTime() - new Date('2004-07-22').getTime()) /
+      (1000 * 60 * 60 * 24 * 365.25),
+  );
+}