Merge pull request #358 from 1chooo/refactor/improve-config-structure

refactor(web): improve config structure

apps/web/src/components/about/github-stats.tsx

@@ -17,7 +17,9 @@ const yellowTheme: ThemeInput = {
   dark: ['hsl(0, 0%, 22%)', '#FFDA6B'],
 };
 
-const { socialMedia } = config;
+const { about } = config;
+
+const { socialMedia } = about;
 const { githubUsername } = socialMedia;
 
 const subHeaderText = '$ ls -al GitHub Stats';

apps/web/src/components/side-bar/avatar-box.tsx

@@ -12,6 +12,7 @@ const {
   firstName,
   lastName,
   middleName,
+  preferredName
 } = about;
 
 type AvatarBoxProps = {
@@ -26,7 +27,7 @@ const AvatarBox: React.FC<AvatarBoxProps> = ({ avatar }) => {
       <Image
         id="profile-img"
         src={avatar}
-        alt={`${firstName} (${middleName}) ${lastName}`}
+        alt={`${firstName} (${preferredName}) ${lastName}`}
         width={imageSize.width}
         height={imageSize.height}
         loading="lazy"

apps/web/src/components/side-bar/info-content.tsx

@@ -6,15 +6,16 @@ const { about } = config;
 const {
   firstName,
   lastName,
-  middleName,
+  middleName,   // TODO: Research how to render this in the UI
+  preferredName
 } = about;
 
 const InfoContent: React.FC = () => (
   <div className="info-content">
     <h1
       className="name"
-      title={`${firstName} (${middleName}) ${lastName}`}
-    >{firstName} ({middleName}) {lastName}
+      title={`${firstName} (${preferredName}) ${lastName}`}
+    >{firstName} ({preferredName}) {lastName}
     </h1>
     <p className="title">
       <strong>{status}</strong>

apps/web/src/components/side-bar/social-list.tsx

@@ -6,7 +6,9 @@ import { MdAttachment, MdOutlineSignpost } from "react-icons/md";
 
 import config from "@/config";
 
-const { socialMedia } = config;
+const { about } = config;
+
+const { socialMedia } = about;
 const { githubUsername, twitterUsername, linkedinUsername, mediumUsername } = socialMedia;
 
 const socialLinks = [

apps/web/src/config/index.ts

@@ -20,19 +20,20 @@ const config: Config = {
     { path: '/blog', label: 'Blog' },
     { path: '/contact', label: 'Contact' }
   ],
-  socialMedia: {
-    "githubUsername": "1chooo",
-    "mediumUsername": "1chooo",
-    "twitterUsername": "1chooo___",
-    "linkedinUsername": "1chooo"
-  },
   about: {
     "subHeader": "$ ls -al Hugo 👨🏻‍💻",
     "firstName": 'Chun-Ho',
     "lastName": 'Lin',
-    "middleName": 'Hugo' || '',
-    "preferredName": 'Hugo' || '',
+    "middleName": "",
+    "preferredName": "Hugo",
+    "additionalName": "Hugo",
     "pronouns": 'He/Him',
+    "socialMedia": {
+      "githubUsername": "1chooo",
+      "mediumUsername": "1chooo",
+      "twitterUsername": "1chooo___",
+      "linkedinUsername": "1chooo"
+    },
     "introductions": [
       // "#### $ ls -al Hugo 👨🏻‍💻 (He/Him)",
       "I obtained my Bachelor's degree from [National Central University 🐿️](https://www.ncu.edu.tw/), driven by a *sincere passion* for **Software Engineering 💻.**",

apps/web/src/tests/social-list.test.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import SocialList from '../components/side-bar/social-list';
-import { abouts } from '../config/about';
+import config from '@/config';
+
+const { about } = config;
+
+
 
 describe('SocialList', () => {
   it('should render the correct number of social links', () => {
@@ -12,7 +16,7 @@ describe('SocialList', () => {
 
   it('should render the correct social links', () => {
     render(<SocialList />);
-    const { socialMedia } = abouts;
+    const { socialMedia } = about;
     const { githubUsername, twitterUsername, linkedinUsername, mediumUsername } = socialMedia;
 
     expect(screen.getByRole('link', { name: 'GitHub' })).toHaveAttribute('href', `https://github.com/${githubUsername}`);

apps/web/src/types/about.d.ts

@@ -12,21 +12,38 @@ export type TechStack = {
   alt: string;
 }
 
+export type SocialMedia = {
+  githubUsername: string;
+  mediumUsername: string;
+  twitterUsername: string;
+  linkedinUsername: string;
+}
+
 /**
  * Type definition for the About component.
  *
- * @param {Readonly<Options>} options
- *   Props.
- * @returns {JSX.Element}
- *   React element.
+ * @example
+ * about: {
+ *   "subHeader": "$ ls -al Hugo 👨🏻‍💻",
+ *   "firstName": 'Chun-Ho',
+ *   "lastName": 'Lin',
+ *   "middleName": "",
+ *   "preferredName": "Hugo",
+ *   "additionalName": "Hugo",
+ *   "pronouns": 'He/Him',
+ *   ...
+ * }
+ * @returns {About} The About component.
  */
 export type About = {
   subHeader: string;
   firstName: string;
   lastName: string;
   middleName: string;
   preferredName: string;
+  additionalName: string;
   pronouns: string;
+  socialMedia: SocialMedia;
   introductions: string[];
   lifestyles: LifeStyle[];
   programmingLanguage: TechStack[];

apps/web/src/types/config.d.ts

@@ -1,12 +1,10 @@
 import type { About } from "@/types/about";
-import type { SocialMedia } from "@/types/social-media";
 import type { Resume } from "@/types/resume";
 import type { NavItem } from "@/types/nav-bar";
 
 /**
  * Type definition for the Web app configuration.
  * 
- * @param {SocialMedia} socialMedia
  * @param {About} about
  * @param {Resume} resume
  */
@@ -19,7 +17,6 @@ export type Config = {
   keywords: string[];
   status: string;
   navItems: NavItem[];
-  socialMedia: SocialMedia;
   about: About;
   resume: Resume;
 }