Add social icon LinkedIn

[bmuenzenmeyer]

Add the LinkedIn logo to the site assets.

Read more about the Node.js Website redesign

from the Figma design (direct link)

displaying all. This issue only adds the LinkedIn one.

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.

Make sure that npm ci completes for you in a terminal pointing to your fork. If it doesn't or you aren't sure, ask a mentor.

---

Where to add the file

Site assets are found at https://github.com/nodejs/nodejs.org/tree/main/public/static/images/logos.

• Add the file into this directory on your fork

Adding the file

This file is an SVG, which means it is represented as text.

Create a new file in the public/static/images/logos directory, called social-linkedin.svg

Paste the below contents into the new file and save.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><rect width="20" height="20" fill="#1275B1" rx="10"/><path fill="#fff" d="M7.585 5.494c0 .668-.579 1.21-1.293 1.21C5.58 6.703 5 6.161 5 5.493c0-.667.579-1.208 1.292-1.208.714 0 1.293.54 1.293 1.208ZM5.177 7.592h2.209v6.694h-2.21V7.592ZM10.943 7.592h-2.21v6.694h2.21V10.86c0-.791.27-1.586 1.347-1.586 1.218 0 1.21 1.035 1.205 1.837-.008 1.048.01 2.118.01 3.174h2.21v-3.533c-.02-2.256-.607-3.296-2.541-3.296-1.149 0-1.86.522-2.231.993v-.858Z"/></svg>

Adding a Storybook story to preview the file

Use Storybook to preview the new logo.

Add a file called social-logos.stories.tsx to the components/__design__ directory. If this file already exists, open it instead.

We want to create a file that looks like this, eventually, for this and the other logos (separate stories)

import Image from 'next/image';
import type { Meta as MetaObj, StoryObj } from '@storybook/react';

export const SocialLogos: StoryObj = {};

export default {
  title: 'Design System/Logos',
  component: () => {
    return (
    <div>
      <div>
        <Image
            src="/static/images/logos/social-github.svg"
            alt="GitHub Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/social-mastadon.svg"
            alt="Mastadon Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/social-linkedin.svg"
            alt="LinkedIn Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/social-slack.svg"
            alt="Slack Logo"
            width={64}
            height={64}
          />
      </div>
      <div>
        <Image
            src="/static/images/logos/social-x.svg"
            alt="X Logo"
            width={64}
            height={64}
          />
      </div>
    </div>
  )},
} as MetaObj;

Only add the Image for the logo you added.

Running Storybook

In a terminal, run npm run storybook.

Then, in a browser, go to http://localhost:6006/?path=/story/design-system-logos--social-logos and you should see the file you added.

Submitting the changes

Submit a pull request back to the main repository.

[srideviraju]

nodejs#5874

[bmuenzenmeyer]

done