feat: social media link on chapters

Signed-off-by: Akash Jaiswal <[email protected]>
OWASP · Mar 1, 2025 · ff47838 · ff47838
1 parent 126b0b1
commit ff47838
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
@@ -1,10 +1,11 @@
 import { HStack, Link } from '@chakra-ui/react'
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState, useEffect } from 'react'
 import { CardProps } from 'types/card'
 import { desktopViewMinWidth } from 'utils/constants'
 import { Icons } from 'utils/data'
 import { TooltipRecipe } from 'utils/theme'
+import { getSocialIcon } from 'utils/urlIconMappings'
 import { cn } from 'utils/utility'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import ActionButton from 'components/ActionButton'
@@ -100,7 +101,6 @@ const Card = ({
       )}
       {/* Render project summary using Markdown */}
       <Markdown content={summary} className="py-2 pr-4 text-gray-600 dark:text-gray-300" />
-
       <div
         className={
           social && social.length > 0
@@ -152,12 +152,11 @@ const Card = ({
                       alignItems="center"
                       gap={2}
                     >
-                      <FontAwesomeIcon icon={item.icon as FontAwesomeIconProps['icon']} />
+                      <FontAwesomeIcon icon={getSocialIcon(item.url)} className="h-5 w-5" />
                     </Link>
                   ))}
                 </HStack>
               )}
-
               {/* Action Button */}
               <div className="flex items-center">
                 <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}>

diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
@@ -41,7 +41,6 @@ const DetailsCard = ({
         <SecondaryCard title="Summary">
           <p>{summary}</p>
         </SecondaryCard>
-
         <div className="grid grid-cols-1 gap-6 md:grid-cols-7">
           <SecondaryCard
             title={`${type[0].toUpperCase() + type.slice(1)} Details`}
@@ -79,7 +78,6 @@ const DetailsCard = ({
             </div>
           )}
         </div>
-
         {(type === 'project' || type === 'repository') && (
           <div
             className={`mb-8 grid grid-cols-1 gap-6 ${topics.length === 0 || languages.length === 0 ? 'md:col-span-1' : 'md:grid-cols-2'}`}
@@ -88,9 +86,7 @@ const DetailsCard = ({
             {topics.length !== 0 && <ToggleableList items={topics} label="Topics" />}
           </div>
         )}
-
         <TopContributors contributors={topContributors} maxInitialDisplay={6} />
-
         {(type === 'project' || type === 'repository') && (
           <>
             <ItemCardList

diff --git a/frontend/src/utils/urlIconMappings.ts b/frontend/src/utils/urlIconMappings.ts
@@ -6,6 +6,18 @@ import {
   faXTwitter,
   faMeetup,
   faSlack,
+  faFacebook,
+  faTelegram,
+  faGoogle,
+  faBluesky,
+  faWhatsapp,
+  faTiktok,
+  faGithub,
+  faSlideshare,
+  faSpeakerDeck,
+  faVimeo,
+  faTwitch,
+  faMedium,
 } from '@fortawesome/free-brands-svg-icons'
 import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 
@@ -22,7 +34,18 @@ export const getSocialIcon = (url) => {
   if (hostname.includes('youtube')) return faYoutube
   if (hostname.includes('meetup')) return faMeetup
   if (hostname.includes('slack')) return faSlack
-
+  if (hostname.includes('facebook')) return faFacebook
+  if (hostname.includes('telegram') || hostname.includes('t.me')) return faTelegram
+  if (hostname.includes('google')) return faGoogle
+  if (hostname.includes('bsky')) return faBluesky
+  if (hostname.includes('whatsapp')) return faWhatsapp
+  if (hostname.includes('tiktok')) return faTiktok
+  if (hostname.includes('github')) return faGithub
+  if (hostname.includes('slideshare')) return faSlideshare
+  if (hostname.includes('speakerdeck')) return faSpeakerDeck
+  if (hostname.includes('vimeo')) return faVimeo
+  if (hostname.includes('twitch')) return faTwitch
+  if (hostname.includes('medium')) return faMedium
   if (hostname === 'x.com' || hostname.endsWith('.x.com') || hostname.includes('twitter')) {
     return faXTwitter
   }