meta: announce the new discord server (#7490)

Author: ovflowd

apps/site/authors.json

@@ -3,6 +3,7 @@ import type { FC, SVGProps } from 'react';
 
 import NavItem from '@/components/Containers/NavBar/NavItem';
 import Bluesky from '@/components/Icons/Social/Bluesky';
+import Discord from '@/components/Icons/Social/Discord';
 import GitHub from '@/components/Icons/Social/GitHub';
 import LinkedIn from '@/components/Icons/Social/LinkedIn';
 import Mastodon from '@/components/Icons/Social/Mastodon';
@@ -19,6 +20,7 @@ const footerSocialIcons: Record<string, React.FC<SVGProps<SVGSVGElement>>> = {
   slack: Slack,
   linkedin: LinkedIn,
   bluesky: Bluesky,
+  discord: Discord,
 };
 
 const Footer: FC = () => {

apps/site/components/Containers/Footer/index.tsx

@@ -5,14 +5,14 @@ const Bluesky: FC<SVGProps<SVGSVGElement>> = props => (
     width="20"
     height="20"
     viewBox="0 0 568 501"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    fill="none"
     {...props}
   >
     <path
       fill="#1185FE"
       d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"
-    ></path>
+    />
   </svg>
 );
 

apps/site/components/Icons/Social/Bluesky.tsx

@@ -0,0 +1,20 @@
+import type { FC, SVGProps } from 'react';
+
+const Bluesky: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 -28.5 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+      fill="#5865F2"
+      fillRule="nonzero"
+    />
+  </svg>
+);
+
+export default Bluesky;

apps/site/components/Icons/Social/Discord.tsx

@@ -5,8 +5,8 @@ const GitHub: FC<SVGProps<SVGSVGElement>> = props => (
     width="20"
     height="20"
     viewBox="0 0 20 20"
-    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
     {...props}
   >
     <path d="M10 1.25C5.16562 1.25 1.25 5.16562 1.25 10C1.25 13.8719 3.75469 17.1422 7.23281 18.3016C7.67031 18.3781 7.83437 18.1156 7.83437 17.8859C7.83437 17.6781 7.82344 16.9891 7.82344 16.2563C5.625 16.6609 5.05625 15.7203 4.88125 15.2281C4.78281 14.9766 4.35625 14.2 3.98438 13.9922C3.67812 13.8281 3.24063 13.4234 3.97344 13.4125C4.6625 13.4016 5.15469 14.0469 5.31875 14.3094C6.10625 15.6328 7.36406 15.2609 7.86719 15.0312C7.94375 14.4625 8.17344 14.0797 8.425 13.8609C6.47813 13.6422 4.44375 12.8875 4.44375 9.54062C4.44375 8.58906 4.78281 7.80156 5.34062 7.18906C5.25313 6.97031 4.94687 6.07344 5.42812 4.87031C5.42812 4.87031 6.16094 4.64063 7.83437 5.76719C8.53438 5.57031 9.27813 5.47187 10.0219 5.47187C10.7656 5.47187 11.5094 5.57031 12.2094 5.76719C13.8828 4.62969 14.6156 4.87031 14.6156 4.87031C15.0969 6.07344 14.7906 6.97031 14.7031 7.18906C15.2609 7.80156 15.6 8.57812 15.6 9.54062C15.6 12.8984 13.5547 13.6422 11.6078 13.8609C11.925 14.1344 12.1984 14.6594 12.1984 15.4797C12.1984 16.65 12.1875 17.5906 12.1875 17.8859C12.1875 18.1156 12.3516 18.3891 12.7891 18.3016C14.5261 17.7152 16.0355 16.5988 17.1048 15.1096C18.1741 13.6204 18.7495 11.8333 18.75 10C18.75 5.16562 14.8344 1.25 10 1.25Z" />

apps/site/components/Icons/Social/GitHub.tsx

@@ -2,14 +2,14 @@ import type { FC, SVGProps } from 'react';
 
 const LinkedIn: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
     viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
     fill="currentColor"
-    width="24"
-    height="24"
     {...props}
   >
-    <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path>
+    <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" />
   </svg>
 );
 

apps/site/components/Icons/Social/LinkedIn.tsx

@@ -2,11 +2,11 @@ import type { FC, SVGProps } from 'react';
 
 const Mastodon: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
-    width="75"
-    height="79"
+    width="20"
+    height="20"
     viewBox="0 0 75 79"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    fill="none"
     {...props}
   >
     <path

apps/site/components/Icons/Social/Mastodon.tsx

@@ -5,8 +5,8 @@ const Slack: FC<SVGProps<SVGSVGElement>> = props => (
     width="20"
     height="20"
     viewBox="0 0 20 20"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    fill="none"
     {...props}
   >
     <path

apps/site/components/Icons/Social/Slack.tsx

@@ -2,11 +2,11 @@ import type { FC, SVGProps } from 'react';
 
 const Twitter: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
-    width="24"
-    height="24"
+    width="20"
+    height="20"
     viewBox="0 0 24 24"
-    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
     {...props}
   >
     <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />

apps/site/components/Icons/Social/Twitter.tsx

@@ -1,6 +1,7 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Bluesky from '@/components/Icons/Social/Bluesky';
+import Discord from '@/components/Icons/Social/Discord';
 import GitHub from '@/components/Icons/Social/GitHub';
 import LinkedIn from '@/components/Icons/Social/LinkedIn';
 import Mastodon from '@/components/Icons/Social/Mastodon';
@@ -20,6 +21,9 @@ export const SocialMediaLogos: StoryObj = {
         <Twitter width={64} height={64} />
         <Bluesky width={64} height={64} />
       </div>
+      <div className="flex flex-col items-center gap-4">
+        <Discord width={64} height={64} />
+      </div>
     </div>
   ),
 };

apps/site/components/__design__/social-logos.stories.tsx

@@ -63,21 +63,26 @@
       "link": "https://github.com/nodejs/node",
       "alt": "GitHub"
     },
+    {
+      "icon": "discord",
+      "link": "https://nodejs.org/discord",
+      "alt": "Discord"
+    },
     {
       "icon": "mastodon",
       "link": "https://social.lfx.dev/@nodejs",
       "alt": "Mastodon"
     },
-    {
-      "icon": "twitter",
-      "link": "https://twitter.com/nodejs",
-      "alt": "Twitter"
-    },
     {
       "icon": "bluesky",
       "link": "https://bsky.app/profile/nodejs.org",
       "alt": "Bluesky"
     },
+    {
+      "icon": "twitter",
+      "link": "https://twitter.com/nodejs",
+      "alt": "Twitter"
+    },
     {
       "icon": "slack",
       "link": "https://slack-invite.openjsf.org/",

apps/site/navigation.json

@@ -9,6 +9,7 @@ If you are interested in getting involved with the Node.js community, there are
 
 ## Community Discussion
 
+- The [Node.js official Discord server](/discord) is a place to chat with other Node.js developers and getting official news from the Node.js project.
 - The [GitHub issues list](https://github.com/nodejs/node/issues) is the place for discussion of Node.js core features and if you have questions about Node.js, you can use the [github discussions](https://github.com/orgs/nodejs/discussions).
 - The [`nodejs/help`](https://github.com/nodejs/help/issues) repository is the place to ask questions about Node.js.
 - The official Node.js Twitter account is [nodejs](https://twitter.com/nodejs).
@@ -32,6 +33,4 @@ Please note that these are not officially endorsed by the Node.js project. Also
 
 - [Node Slackers](https://www.nodeslackers.com/) is a Node.js-focused Slack community.
 - [OpenJSF Slack](https://slack-invite.openjsf.org/) is a Slack workspace for the OpenJS Foundation. There are several channels related to Node.js. _(channels prefixed by `#nodejs-` are related to the project)_
-- [Nodeiflux](https://discordapp.com/invite/vUsrbjd) is a friendly community of Node.js backend developers supporting each other on Discord.
-- [ES Community](https://discord.gg/zJsuc6vvhn) is a Discord community for French-speaking JavaScript developers.
 - `irc.libera.chat` in the `#node.js` channel with an [IRC client](https://en.wikipedia.org/wiki/Comparison_of_Internet_Relay_Chat_clients) or connect in your web browser to the channel using [a web client](https://kiwiirc.com/nextclient/).

apps/site/pages/en/about/get-involved/index.md

@@ -0,0 +1,38 @@
+---
+date: '2025-03-17T10:00:00-04:00'
+category: announcements
+title: Node.js Launches Official Community Space on Discord
+layout: blog-post
+author: Carl Vitullo, Claudio Wunder
+---
+
+First, the news: [The OpenJS Foundation](https://openjsf.org/) and [Reactiflux](https://reactiflux.com/) have collaborated to bring forth an official Discord community for Node.js 🎉 You can [join the Node.js Discord](/discord) now.
+
+Over the past several years, Discord has become the de-facto platform for communities to connect and communicate. Many Node.js community members already use Discord to discuss Node.js, seek advice, and share their projects. By establishing an official Node.js Discord server, we aim to gather these conversations and provide a safe and well-moderated space for our online community to congregate. Lots of other open-source projects, such as [TypeScript](https://discord.gg/typescript), [Rust](https://discord.gg/rust-lang), and [Python](https://discord.gg/python), have successfully built their communities on Discord.
+
+Our Node.js Discord space will be perfect for:
+
+- Hosting livestreams by Node.js Ambassadors and community members
+- Facilitating discussions about Node.js, answering questions, and sharing projects
+- Connecting with Node.js maintainers, influencers, and contributors
+- Receiving the latest updates on Node.js releases and events hosted by the OpenJS Foundation
+
+But this is not a professionally-operated corporate space with full-time staff and a marketing budget, this is an organic community operated by volunteers because they love using JavaScript on the backend. If there's something you feel is missing, shout it out in [#meta-admin](https://discord.com/channels/425824580918181889/425824906882580492) — resources are limited but enthusiasm can go a long way 🫶
+
+### The Journey So Far
+
+Our journey began with [this issue on GitHub](https://github.com/nodejs/admin/issues/872). We partnered with the Reactiflux/Nodeiflux community to rebrand their existing Nodeiflux server as the official Node.js Discord server. Over the past few months, we have been preparing the server for everyone to use, and you can follow some of our progress in the issue.
+
+Reactiflux was one of the first large commuinities on Discord, joining the platform less than 6 months after its publish launch and operating continuously since then. In 2018, one of its administrators started a "sister server" for those using JS on the backend; Nodeiflux!
+
+Now, 7 years on, the Nodeiflux server has joined up with the OpenJS Foundation to serve as the official Node.js Discord server. We are excited to see how our community will thrive in this new environment — the server will be jointly managed by the Node.js project and the Nodeiflux community, with the Node.js Technical Steering Committee (TSC) providing advisory support. The Nodeiflux community will handle the day-to-day administration of the server.
+
+For all intents and purposes, this is an official Node.js space, and we are eager to see how it will grow and evolve. [Join the Node.js Discord](/discord) and become part of our growing community. See you there!
+
+### Looking Ahead
+
+We are eager to see how our community will grow and interact in this new space. We look forward to hosting events and livestreams in the future. If you have any ideas or feedback, please share them in the #discord-feedback channel on the server.
+
+---
+
+A warm hug from [@vcarl](https://github.com/vcarl) and [@ovflowd](https://github.com/ovflowd). We hope to see you on the Node.js Discord server soon!