adding social icons for new mastodon and discord sever

Author: chrisweb

app/global.css

@@ -926,6 +926,19 @@ make the text color a bit darker */
     margin-right: calc(var(--main-spacing) / 2);
 }
 
+/* not on mobile */
+@media (hover: hover) {
+
+    .socialIcon {
+        margin-right: calc(var(--main-spacing) / 2);
+        color: var(--primary-light-color);
+    }
+
+    .socialIcon:hover {
+        color: var(--secondary-light-color);
+    }
+}
+
 @keyframes rippleAnimation {
     0% {
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);

components/aside/Content.tsx

@@ -3,6 +3,7 @@ import BaseLink from '@/components/base/Link'
 import ShareButton from '@/components/base/button/Share'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart, faBug, faComments } from '@fortawesome/free-solid-svg-icons'
+import { faGithub, faMastodon, faDiscord } from '@fortawesome/free-brands-svg-icons'
 import Image from 'next/image'
 import buyMeACoffeeImport from '@/public/assets/images/buy_me_a_coffee_button.png'
 
@@ -14,7 +15,6 @@ const AsideContent: React.FC = () => {
             <a href="https://www.buymeacoffee.com/chriswwweb" className={`${styles.coffeeButton} shake`} rel="noopener noreferrer" target="_blank">
                 <Image src={buyMeACoffeeImport} priority fill alt="buy me a coffee, please" />
             </a>
-            <br />
             <span className="fontDarker">* Please 😉</span>
             <p className="fontSmall fontDarker alignLeft">
                 <FontAwesomeIcon icon={faHeart} size="1x" className="startInlineIcon" />
@@ -32,9 +32,22 @@ const AsideContent: React.FC = () => {
             <p className="fontSmall fontDarker alignLeft">
                 <FontAwesomeIcon icon={faComments} className="startInlineIcon" />
                 Suggestions and Ideas are appreciated, please use the&nbsp;
+                <BaseLink href="https://discord.gg/4p59CCTUAJ">chris.lu Discord server</BaseLink>
+                or the&nbsp;
                 <BaseLink href="https://github.com/chrisweb/chris.lu/discussions">discussion board</BaseLink>
                 to leave feedback or ask a question.
             </p>
+            <p>
+                <BaseLink href="https://discord.gg/4p59CCTUAJ" noExternalIcon={true}>
+                    <FontAwesomeIcon icon={faDiscord} color="white" size="2x" className="socialIcon" />
+                </BaseLink>
+                <BaseLink href="https://mastodon.social/@chriswwweb" noExternalIcon={true}>
+                    <FontAwesomeIcon icon={faMastodon} color="white" size="2x" className="socialIcon" />
+                </BaseLink>
+                <BaseLink href="https://github.com/chrisweb" noExternalIcon={true}>
+                    <FontAwesomeIcon icon={faGithub} color="white" size="2x" className="socialIcon" />
+                </BaseLink>
+            </p>
         </div>
     )
 }

components/base/Link.tsx

@@ -9,6 +9,7 @@ export interface IBaseLinkProps extends PropsWithChildren {
     target?: string
     rel?: string
     className?: string
+    noExternalIcon?: boolean
 }
 
 const isExternalUrl = (url: string, domain: string): boolean => {
@@ -53,12 +54,12 @@ const isUrlMe = (url: string): boolean => {
 
 const BaseLink: React.FC<IBaseLinkProps> = (props) => {
 
-    const { href, children, ...linkProps } = props
+    const { href, children, noExternalIcon, ...linkProps } = props
+    const newLinkProps = { ...linkProps }
 
     const isExternal = isExternalUrl(href.toString(), 'chris.lu')
     const isMe = isUrlMe(href.toString())
-
-    const newLinkProps = { ...linkProps }
+    const withExternalIcon = isExternal && !noExternalIcon
 
     if (isExternal) {
         newLinkProps.rel = 'noopener noreferrer'
@@ -71,7 +72,7 @@ const BaseLink: React.FC<IBaseLinkProps> = (props) => {
 
     return (
         <>
-            {isExternal ?
+            {(withExternalIcon) ?
                 (
                     <>
                         <a href={href.toString()} {...newLinkProps}>