feat(component): added more customization

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Alexandre Mogère
+Copyright (c) 2023-2024 Alexandre Mogère
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -18,6 +18,8 @@ Linkfolio is an elegant, minimalist landing page that connects your audience to
 
 📱 Responsive design for all devices
 
+🔧 Customizable components for maximum flexibility
+
 ## Installation
 
 There are two methods to get started with Linkfolio:
@@ -32,7 +34,7 @@ Using this method, you can quickly deploy a Linkfolio page with Vercel using the
 
 ### 2. Integrating into an existing Next.js project
 
-Install `linkfolio` package in your Next.js / Tailwind project:
+Install the `linkfolio` package in your Next.js / Tailwind project:
 
 ```bash
 npm install linkfolio
@@ -48,29 +50,30 @@ yarn add linkfolio
 pnpm add linkfolio
 ```
 
-Import and utilize the `LinkFolio` component in your project:
+## Usage
 
-```javascript
-import { LinkFolio } from "linkfolio";
-```
+### Basic Usage
 
-Add your configuration:
+Here's a simple example of how to use the `<LinkFolio />` component with just the `userConfig`:
 
 ```javascript
+import { LinkFolio } from "linkfolio";
+
 const userConfig = {
   avatarSrc: "/assets/avatar.webp",
   avatarAlt: "Avatar",
   fullName: "Your Name",
   alias: "@your_alias",
-  metaTitle: "Linkfolio",
-  metaDescription: "Linkfolio",
+  metaTitle: "LinkFolio",
+  metaDescription: "A Hub for all your online links 🔗",
   socialNetworks: [
     {
       url: "https://github.com/{your_alias}",
       iconSrc: githubIcon,
       title: "GitHub",
       description: "Open-source contributions",
     },
+    // Add more social networks here
   ],
 };
 
@@ -79,6 +82,38 @@ function MyPage() {
 }
 ```
 
+This basic setup will create a Linkfolio page using the default components and styles.
+
+### Customization Options
+
+For more advanced customization, you can use the optional component props. Here's an example showing how to use custom components and add additional content:
+
+```jsx
+import { LinkFolio } from "linkfolio";
+import MyCustomFooter from "./MyCustomFooter";
+
+function MyPage() {
+  return (
+    <LinkFolio
+      userConfig={userConfig}
+      BeforeSocialLinksComponent={() => (
+        <div className="mb-8 text-center">
+          <h2>Welcome to my page!</h2>
+          <p>Check out my social links below:</p>
+        </div>
+      )}
+      AfterSocialLinksComponent={() => (
+        <div className="mt-8 text-center">
+          <h2>Thanks for visiting!</h2>
+          <p>Feel free to connect with me on any platform.</p>
+        </div>
+      )}
+      FooterComponent={MyCustomFooter}
+    />
+  );
+}
+```
+
 ## Configuration
 
 The `user.config.ts` file allows you to customize your Linkfolio. Here are the main available options:

app/page.tsx

@@ -3,5 +3,21 @@ import { LinkFolio } from "@/index";
 import userConfig from "~/user.config";
 
 export default function Home() {
-  return <LinkFolio userConfig={userConfig} />;
+  return (
+    <LinkFolio
+      userConfig={userConfig}
+      BeforeSocialLinksComponent={() => (
+        <div className="mb-8 text-center">
+          <h2>Welcome to my page!</h2>
+          <p>Check out my social links below:</p>
+        </div>
+      )}
+      AfterSocialLinksComponent={() => (
+        <div className="mt-8 text-center">
+          <h2>Thanks for visiting!</h2>
+          <p>Feel free to connect with me on any platform.</p>
+        </div>
+      )}
+    />
+  );
 }

config/user.config.ts

@@ -17,8 +17,8 @@ import {
 const userConfig: UserConfigType = {
   avatarSrc: "/assets/avatar.webp",
   avatarAlt: "Avatar",
-  fullName: "Your Name",
-  alias: "@your_alias",
+  fullName: "Linkfolio",
+  alias: "demo",
   metaTitle: "Linkfolio",
   metaDescription: "A Hub for all your online links 🔗",
   enableTypingAlias: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkfolio",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Minimalist web page that acts as a hub for all your online presence",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -56,11 +56,11 @@
     "@playwright/test": "^1.47.2",
     "@swc/core": "^1.7.28",
     "@types/node": "^22.6.1",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.13",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.30.0",

src/components/LinkFolio.tsx

@@ -3,20 +3,30 @@ import { UserProfile, SocialLinks, Footer } from "..";
 import { LinkFolioProps } from "../types";
 import defaultConfig from "../default.config";
 
-const LinkFolio = ({
+const LinkFolio: React.FC<LinkFolioProps> = ({
   userConfig,
-  additionalContent,
-  footerContent,
-}: LinkFolioProps) => {
+  UserProfileComponent,
+  BeforeSocialLinksComponent,
+  SocialLinksComponent,
+  AfterSocialLinksComponent,
+  FooterComponent,
+}) => {
+  const config = userConfig || defaultConfig;
+  const UserProfileToRender = UserProfileComponent || UserProfile;
+  const SocialLinksToRender = SocialLinksComponent || SocialLinks;
+  const FooterToRender = FooterComponent || Footer;
+
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-neutral-100 p-10 md:p-16 lg:px-15% lg:py-10 max-w-screen-lg lg:mx-auto font-roboto rounded-lg sm:m-4 m-2 shadow-lg">
-      <UserProfile userConfig={userConfig || defaultConfig} />
+      <UserProfileToRender userConfig={config} />
+
+      {BeforeSocialLinksComponent && <BeforeSocialLinksComponent />}
 
-      <SocialLinks userConfig={userConfig || defaultConfig} />
+      <SocialLinksToRender userConfig={config} />
 
-      {additionalContent ? additionalContent : null}
+      {AfterSocialLinksComponent && <AfterSocialLinksComponent />}
 
-      <Footer>{{ defaultContent: footerContent }}</Footer>
+      <FooterToRender />
     </div>
   );
 };

src/components/SocialNetwork.tsx

@@ -41,7 +41,7 @@ const SocialNetwork: React.FC<SocialNetworkProps> = ({
   return (
     <div
       ref={ref}
-      className="network flex items-start justify-center p-2 w-full md:w-1/4 rounded-lg hover:bg-neutral-300/20 transition duration-300 ease-in-out opacity-0"
+      className="network flex flex-col items-center p-2 w-full md:w-1/3 lg:w-1/4 rounded-lg hover:bg-neutral-300/20 transition duration-300 ease-in-out opacity-0"
       style={{ animationDelay: `${delay}ms` }}
     >
       <Link
@@ -51,17 +51,20 @@ const SocialNetwork: React.FC<SocialNetworkProps> = ({
         className="group w-full"
       >
         <div className="group-hover:animate-bounce flex justify-center">
-          <Image
-            src={config.iconSrc}
-            alt={config.title}
-            width={300}
-            height={100}
-            className="object-cover w-64 h-24 rounded-lg overflow-hidden shadow-lg"
-            priority
-          />
+          <div className="relative w-full h-24 overflow-hidden rounded-lg shadow-lg">
+            <Image
+              src={config.iconSrc}
+              alt={config.title}
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              quality={100}
+              priority
+            />
+          </div>
         </div>
 
-        <div className="data px-2 py-4">
+        <div className="data px-2 py-4 text-center">
           <h2 className="text-xl font-bold mb-2">{config.title}</h2>
           <p className="description text-neutral-600 text-sm truncate">
             {config.description}

src/components/UserProfile.tsx

@@ -5,7 +5,7 @@ import { UserProfileProps } from "../types";
 import { defaultAvatarIcon } from "../assets";
 
 const UserProfile: React.FC<UserProfileProps> = ({ userConfig }) => {
-  const aliasText = userConfig.alias ?? "@your_alias";
+  const aliasText = userConfig.alias;
 
   const [isMounted, setIsMounted] = useState(false);
   const [typing, setTyping] = useState(false);
@@ -17,6 +17,8 @@ const UserProfile: React.FC<UserProfileProps> = ({ userConfig }) => {
   }, []);
 
   const typeAlias = useCallback(() => {
+    if (!aliasText) return;
+
     if (typing && index < aliasText.length) {
       const timeoutId = setTimeout(() => {
         setAlias((prev) => prev + aliasText[index]);

src/types.d.ts

@@ -13,8 +13,11 @@ type UserConfigType = {
 
 export interface LinkFolioProps {
   userConfig?: UserConfigType;
-  additionalContent?: React.ReactNode;
-  footerContent?: React.ReactNode;
+  UserProfileComponent?: React.ComponentType;
+  BeforeSocialLinksComponent?: React.ComponentType;
+  SocialLinksComponent?: React.ComponentType;
+  AfterSocialLinksComponent?: React.ComponentType;
+  FooterComponent?: React.ComponentType;
 }
 
 export interface UserProfileProps {

tailwind.config.ts

@@ -10,11 +10,11 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        primary: "#A56B8C",
-        secondary: "#937FA3",
+        primary: "#2F5D62",
+        secondary: "#5E8B7E",
         background: {
-          start: "#E8EFF7",
-          end: "#EDE8F7",
+          start: "#D9E2E1",
+          end: "#F2F7F6",
         },
       },
       backgroundImage: ({ theme }) => ({