Add Stacked Logo Black #31
Description
Add the stacked logo "black" to the site assets.
from the Figma design (direct link)
displaying all. This issue only adds the blackone.
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 stacked-black.svg
Paste the below contents into the new file and save.
<svg width="267" height="164" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_337_7902)"><mask id="mask0_337_7902" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="267" height="164"><path d="M267 0H0v164h267V0Z" fill="#fff"/></mask><g mask="url(#mask0_337_7902)"><path d="M131.991 164c-.905 0-1.75-.242-2.534-.666l-8.027-4.78c-1.207-.666-.604-.908-.242-1.029 1.63-.545 1.931-.666 3.621-1.634.181-.121.423-.061.604.06l6.156 3.692c.241.121.543.121.724 0l24.141-13.98c.242-.121.362-.363.362-.665V117.1c0-.303-.12-.545-.362-.666l-24.081-13.919c-.241-.121-.543-.121-.724 0l-24.08 13.919c-.242.121-.363.424-.363.666v27.898c0 .242.121.544.363.665l6.578 3.813c3.561 1.816 5.794-.303 5.794-2.421V119.52c0-.363.302-.726.724-.726h3.078c.362 0 .724.303.724.726v27.535c0 4.781-2.595 7.565-7.121 7.565-1.388 0-2.475 0-5.553-1.513l-6.337-3.631a5.11 5.11 0 0 1-2.535-4.418V117.16c0-1.815.966-3.51 2.535-4.418l24.141-13.979c1.509-.847 3.561-.847 5.07 0l24.141 13.979a5.112 5.112 0 0 1 2.535 4.418v27.898a5.11 5.11 0 0 1-2.535 4.418l-24.141 13.979c-.905.303-1.811.545-2.656.545Z" fill="#5FA04E"/><path d="M139.415 144.756c-10.562 0-12.735-4.842-12.735-8.957 0-.363.302-.726.724-.726h3.139c.362 0 .664.242.664.605.482 3.208 1.871 4.781 8.268 4.781 5.07 0 7.242-1.15 7.242-3.873 0-1.573-.603-2.723-8.509-3.51-6.579-.666-10.683-2.118-10.683-7.383 0-4.902 4.104-7.807 10.984-7.807 7.725 0 11.528 2.663 12.01 8.473 0 .181-.06.363-.181.544-.12.121-.301.242-.482.242h-3.199a.707.707 0 0 1-.664-.544c-.724-3.329-2.595-4.418-7.544-4.418-5.553 0-6.216 1.937-6.216 3.389 0 1.755.784 2.3 8.268 3.268 7.423.968 10.924 2.36 10.924 7.625 0 5.265-4.346 8.291-12.01 8.291ZM174.178 115.466c0 2.541-2.113 4.659-4.648 4.659a4.655 4.655 0 0 1-4.647-4.659c0-2.663 2.173-4.66 4.647-4.66a4.656 4.656 0 0 1 4.648 4.66Zm-8.51 0c0 2.178 1.75 3.933 3.862 3.933 2.173 0 3.923-1.815 3.923-3.933 0-2.179-1.75-3.873-3.923-3.873a3.855 3.855 0 0 0-3.862 3.873Zm2.112-2.603h1.811c.603 0 1.81 0 1.81 1.392 0 .969-.603 1.15-.965 1.271.724.061.784.545.845 1.211.06.423.12 1.149.241 1.391h-1.086c0-.242-.181-1.573-.181-1.634-.061-.302-.181-.423-.543-.423h-.906v2.118h-1.026v-5.326Zm1.026 2.3h.785c.664 0 .784-.484.784-.726 0-.726-.482-.726-.784-.726h-.845v1.452h.06Z" fill="#5FA04E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M57.275 54.828a3.08 3.08 0 0 0-1.57-2.663L30.177 37.34c-.422-.242-.905-.363-1.388-.424h-.241c-.483 0-.966.182-1.388.424L1.569 52.105A3.105 3.105 0 0 0 0 54.828l.06 39.699c0 .545.302 1.09.785 1.331.483.303 1.086.303 1.509 0l15.209-8.714a3.08 3.08 0 0 0 1.569-2.663V65.903A3.08 3.08 0 0 1 20.7 63.24l6.458-3.752c.483-.303 1.026-.424 1.569-.424.543 0 1.086.121 1.509.424l6.457 3.752a3.08 3.08 0 0 1 1.57 2.663V84.48a3.08 3.08 0 0 0 1.569 2.663l15.088 8.714a1.47 1.47 0 0 0 1.57 0c.482-.242.784-.786.784-1.331V54.828ZM180.334.182c-.483-.243-1.087-.243-1.509 0-.483.302-.785.786-.785 1.33V40.85c0 .363-.181.726-.543.968a1.151 1.151 0 0 1-1.086 0l-6.397-3.691a3.103 3.103 0 0 0-3.078 0l-25.59 14.826a3.08 3.08 0 0 0-1.569 2.663v29.592a3.08 3.08 0 0 0 1.569 2.663l25.59 14.827a3.107 3.107 0 0 0 3.078 0l25.589-14.827a3.08 3.08 0 0 0 1.569-2.663v-73.77c0-1.15-.603-2.178-1.569-2.723L180.334.182Zm-2.414 75.282c0 .303-.121.545-.362.666l-8.752 5.083a.892.892 0 0 1-.784 0l-8.751-5.083c-.242-.121-.362-.424-.362-.666V65.297c0-.302.12-.544.362-.665l8.751-5.084a.892.892 0 0 1 .784 0l8.752 5.084c.241.12.362.423.362.665v10.167ZM265.491 65.055c.966-.544 1.509-1.573 1.509-2.662V55.19c0-1.09-.603-2.118-1.509-2.663l-25.408-14.766a3.103 3.103 0 0 0-3.078 0l-25.59 14.827a3.082 3.082 0 0 0-1.569 2.663v29.592c0 1.09.604 2.118 1.569 2.663l25.409 14.524c.965.545 2.112.545 3.017 0l15.39-8.593c.483-.242.785-.787.785-1.332 0-.544-.302-1.089-.785-1.331l-25.71-14.827c-.483-.302-.784-.786-.784-1.331v-9.26c0-.544.301-1.088.784-1.33l8.027-4.6a1.47 1.47 0 0 1 1.569 0l8.027 4.6c.483.302.785.786.785 1.33v7.263c0 .545.301 1.09.784 1.331a1.47 1.47 0 0 0 1.569 0l15.209-8.896Z" fill="#333"/><path fill-rule="evenodd" clip-rule="evenodd" d="M238.152 63.663a.546.546 0 0 1 .603 0l4.889 2.845a.636.636 0 0 1 .302.544v5.689a.636.636 0 0 1-.302.545l-4.889 2.844a.546.546 0 0 1-.603 0l-4.889-2.844a.636.636 0 0 1-.302-.545v-5.689c0-.242.121-.423.302-.544l4.889-2.844Z" fill="#5FA04E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M96.987 37.883a3.104 3.104 0 0 1 3.078 0l25.348 14.706c.966.545 1.509 1.573 1.509 2.663v29.35c0 1.09-.604 2.118-1.509 2.663l-25.348 14.705a3.102 3.102 0 0 1-3.078 0L71.639 87.265c-.966-.545-1.51-1.573-1.51-2.663v-29.41c0-1.09.604-2.119 1.51-2.664l25.348-14.645Z" fill="url(#paint0_linear_337_7902)"/><path opacity=".66" d="m125.292 52.528-25.227-14.705a4.192 4.192 0 0 0-.785-.303L70.733 86.54c.242.302.544.544.845.726l25.409 14.706c.784.423 1.63.544 2.414.242l26.676-48.958c-.181-.303-.483-.545-.785-.727Z" fill="#B4B4B4"/><path d="m100.004 101.97 25.288-14.705c.966-.545 1.388-1.573 1.388-2.663v-.12L99.28 37.58c-.784-.242-1.63-.121-2.353.302L71.82 52.407l27.28 49.866a3.12 3.12 0 0 0 .904-.303Z" fill="url(#paint1_linear_337_7902)"/></g></g><defs><linearGradient id="paint0_linear_337_7902" x1="70.117" y1="69.914" x2="126.971" y2="69.914" gradientUnits="userSpaceOnUse"><stop offset=".005"/><stop offset=".194" stop-color="#171717"/><stop offset=".542" stop-color="#3D3D3D"/><stop offset=".824" stop-color="#545454"/><stop offset="1" stop-color="#5C5C5C"/></linearGradient><linearGradient id="paint1_linear_337_7902" x1="69.724" y1="69.872" x2="128.373" y2="69.872" gradientUnits="userSpaceOnUse"><stop stop-color="#5C5C5C"/><stop offset=".176" stop-color="#545454"/><stop offset=".458" stop-color="#3D3D3D"/><stop offset=".806" stop-color="#171717"/><stop offset=".995"/></linearGradient><clipPath id="clip0_337_7902"><path fill="#fff" d="M0 0h267v164H0z"/></clipPath></defs></svg>
Adding a Storybook story to preview the file
Use Storybook to preview the new logo.
Add a file called stacked-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 StackedLogos: StoryObj = {};
export default {
title: 'Design System/Logos',
component: () => {
return (
<div>
<div>
<Image
src={`/static/images/logos/stacked-white.svg`}
alt="Node.js"
width={267}
height={80}
/>
</div>
<div>
<Image
src={`/static/images/logos/stacked-light.svg`}
alt="Node.js"
width={267}
height={80}
/>
</div>
<div>
<Image
src={`/static/images/logos/stacked-black.svg`}
alt="Node.js"
width={267}
height={80}
/>
</div>
<div>
<Image
src={`/static/images/logos/stacked-dark.svg`}
alt="Node.js"
width={267}
height={80}
/>
</div>
</div>
)},
} as MetaObj;Only add the
Imagefor 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--stacked-logos and you should see the file you added.
Preview
Submitting the changes
Submit a pull request back to the main repository.