Merge pull request #4 from yoanbernabeu/1-icons-for-social-networks

Draft: 📦 NEW: Add Social Icon Link

Author: yoanbernabeu

README.md

@@ -10,7 +10,7 @@ Feel free to use it as a template for your own projects.
 
 ## 👀 Demo
 
-You can see a demo of the project at [https://go.yoandev.co](https://go.yoandev.co/)
+You can see a demo of the project at [https://linktreefreeclone.yoandev.co/](https://linktreefreeclone.yoandev.co/)
 
 ## 🚀 Quick start
 
@@ -23,11 +23,15 @@ You can see a demo of the project at [https://go.yoandev.co](https://go.yoandev.
     Create a new file in `src/pages/links/` for each link you want to add.
     The file name will be not used, but it is recommended to use a descriptive name.
     The file should contain a frontmatter section with the following variables:
-        * `title`: The title of the link
-        * `emoji`: The emoji to use for the link
-        * `href`: The URL of the link
+    
+    * `title`: The title of the link
+    
+    * `emoji`: The emoji to use for the link
+    
+    * `href`: The URL of the link
 
     Example:
+    
     ```md
     ---
 
@@ -42,6 +46,52 @@ You can see a demo of the project at [https://go.yoandev.co](https://go.yoandev.
 
     Replace the file `src/public/avatar.png` with your own avatar.
 
+4. **Customize your social media links**
+
+    Create a new file in `src/pages/social/` for each social media link you want to add.
+    The file name will be not used, but it is recommended to use a descriptive name.
+    The file should contain a frontmatter section with the following variables:
+
+    * `icon`: The icon to use for the link
+    
+    * `url`: The URL of the link
+
+    Example:
+
+    ```md
+    ---
+    icon: linkedin
+    url: https://linkedin.com/in/yoan-bernabeu
+
+    ---
+    ```
+
+## 🔠 List of available icons for social media
+
+For the `icon` variable in the frontmatter section of the social media links, you can use the following values:
+
+* `behance`
+* `discord`
+* `github`
+* `facebook`
+* `instagram`
+* `google`
+* `linkedin`
+* `pinterest`
+* `vkontakte`
+* `stackoverflow`
+* `telegram`
+* `youtube`
+* `tiktok`
+* `snapchat`
+* `slack`
+* `messenger`
+* `dribbble`
+* `reddit`
+* `twitter`
+* `whatsapp`
+* `twitch`
+
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:

public/avatar.png

@@ -12,6 +12,9 @@ const { title, tagline } = Astro.props;
             <p class="text-center text-base text-gray-400">
                 &copy; 2022 {title}. {tagline}
             </p>
+            <p class="text-center text-base text-gray-400">
+                Make with <a href="https://github.com/yoanbernabeu/LinkTreeFreeClone" class="text-indigo-600">LinkTreeFreeClone</a>
+            </p>
         </div>
     </div>
 </footer>

readme.png

@@ -1,15 +1,18 @@
 ---
+import Social from './Social.astro';
+
 export interface Props {
 	subtitle: string;
 	title: string;
 	tagline: string;
 }
 
 const { subtitle, title, tagline } = Astro.props;
+const socials = await Astro.glob("./../pages/socials/*.md");
 ---
 
 <div>
-    <div class="mx-auto max-w-7xl py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-7xl py-16 px-4 sm:py-10 sm:px-6 lg:px-8">
         <div class="text-center">
 
             <img class="mx-auto h-40 w-40 rounded-full xl:h-56 xl:w-56" src="avatar.png" alt="">
@@ -25,7 +28,10 @@ const { subtitle, title, tagline } = Astro.props;
             <p class="mx-auto mt-5 max-w-xl text-xl text-gray-500">
                 {tagline}
             </p>
-
+        
+            <Social
+                socials={socials}
+            />
         </div>
     </div>
 </div>