Merge pull request #1129 from isaacphysics/hotfix/bluesky-icon

Hotfix/bluesky icon

Author: jsharkey13

public/assets/common/logos/bluesky_icon.svg

@@ -1,7 +1,8 @@
 import React from "react";
-import {ListGroup, ListGroupItem} from "reactstrap";
+import {Col, Row} from "reactstrap";
 import {SITE_TITLE, siteSpecific, SOCIAL_LINKS} from "../../../services";
 import {ExternalLink} from "../ExternalLink";
+import chunk from 'lodash/chunk';
 
 const getSocialIcon = (name: string) => {
     if (name === "x (twitter)") {
@@ -11,33 +12,36 @@ const getSocialIcon = (name: string) => {
 };
 
 export const SocialLinksRow = () => {
+    const linksByColumn = chunk(Object.entries(SOCIAL_LINKS), 2);
     return (
         <div className='footer-links footer-links-social'>
             {
                 siteSpecific(
                     // Physics
                     <>
-                    <h5>Get social</h5>
-                        <ListGroup className='mt-3 pb-5 py-lg-3 link-list d-md-flex flex-row'>
-                            {Object.entries(SOCIAL_LINKS).map(([_, {name, href}]) =>
-                                <ListGroupItem key={name} className='border-0 px-0 py-0 pb-1 bg-transparent'>
-                                    <ExternalLink href={href}>
-                                        <img src={getSocialIcon(name.toLowerCase())} alt={`${SITE_TITLE} on ${name}`}
-                                             className='social-logo'/>
-                                    </ExternalLink>
-                                </ListGroupItem>
-                            )}
-                        </ListGroup>
+                        <h5>Get social</h5>
+                        <Row>
+                            {linksByColumn.map((column, index) => (
+                                <Col key={index}>
+                                    {column.map(([_, {name, href}]) =>
+                                        <ExternalLink href={href}  key={name}>
+                                            <img src={getSocialIcon(name.toLowerCase())} alt={`${SITE_TITLE} on ${name}`}
+                                                className='social-logo'/>
+                                        </ExternalLink>
+                                    )}
+                                </Col>
+                            ))}
+                        </Row>
                     </>,
                     // CS
                     <>
-                    <h2>Get social</h2>
+                        <h2>Get social</h2>
                         <div className='mt-1 text-nowrap'>
                             {Object.entries(SOCIAL_LINKS).map(([_, {name, href}]) =>
                                 <div className={"me-3 d-inline-block"} key={name}>
                                     <ExternalLink href={href}>
                                         <img src={getSocialIcon(name.toLowerCase())} alt={`${SITE_TITLE} on ${name}`}
-                                             className='img-fluid footer-social-logo'/>
+                                            className='img-fluid footer-social-logo'/>
                                     </ExternalLink>
                                 </div>
                             )}

src/app/components/elements/list-groups/SocialLinks.tsx

@@ -76,6 +76,7 @@ export const SOCIAL_LINKS = siteSpecific(
         youtube: {name: "YouTube", href: "https://www.youtube.com/user/isaacphysics"},
         twitter: {name: "X (Twitter)", href: "https://twitter.com/isaacphysics"},
         facebook: {name: "Facebook", href: "https://www.facebook.com/isaacphysicsUK"},
+        bluesky: {name: "Bluesky", href: "https://bsky.app/profile/isaacphysics.org"},
     },
     {
         facebook: {name: "Facebook", href: "https://www.facebook.com/RaspberryPiFoundation"},