chore(nx-dev): add bluesky to footer and community page (#29379)

## Current Behavior Bluesky is not linked in the footer or community page. ## Expected Behavior Bluesky is linked on the footer and community page.
nrwl · Dec 18, 2024 · bdc7634 · bdc7634
1 parent b9c0e3d
commit bdc7634
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 1 deletion.
diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx
@@ -63,7 +63,7 @@ const navigation = {
     },
     {
       name: 'X',
-      label: 'Latest news',
+      label: 'Latest news on X',
       href: 'https://x.com/NxDevTools?utm_source=nx.dev',
       icon: (props: any) => (
         <svg
@@ -78,6 +78,23 @@ const navigation = {
         </svg>
       ),
     },
+    {
+      name: 'Bluesky',
+      label: 'Latest news on Bluesky',
+      href: 'https://bsky.app/profile/nx.dev?utm_source=nx.dev',
+      icon: (props: any) => (
+        <svg
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          {/*<title>Bluesky</title>*/}
+          <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
+        </svg>
+      ),
+    },
     {
       name: 'Youtube',
       label: 'Youtube channel',

diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx
@@ -137,6 +137,23 @@ export function DocumentationHeader({
         </svg>
       ),
     },
+    {
+      name: 'Bluesky',
+      label: 'Latest news on Bluesky',
+      href: 'https://bsky.app/profile/nx.dev?utm_source=nx.dev',
+      icon: (props: any) => (
+        <svg
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          {/*<title>Bluesky</title>*/}
+          <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
+        </svg>
+      ),
+    },
     {
       name: 'Youtube',
       label: 'Youtube channel',

diff --git a/nx-dev/ui-community/src/lib/connect-with-us.tsx b/nx-dev/ui-community/src/lib/connect-with-us.tsx
@@ -122,6 +122,38 @@ export function ConnectWithUs(): JSX.Element {
                 </p>
               </a>
             </div>
+
+            <div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-blue-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-blue-900 dark:hover:bg-slate-800">
+              <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
+                <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-blue-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-blue-800" />
+                <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#0285FF] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
+                <svg
+                  fill="currentColor"
+                  className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Bluesky</title>
+                  <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
+                </svg>
+              </div>
+              <h4 className="mb-2 text-lg font-bold">Follow us on Bluesky</h4>
+              <a
+                href="https://bsky.app/profile/nx.dev?utm_source=nx.dev"
+                rel="noreferrer"
+                target="_blank"
+                title="Nx Bluesky account"
+                className="focus:outline-none"
+              >
+                <span className="absolute inset-0" aria-hidden="true"></span>
+                <p className="leading-relaxed">
+                  Stay up to date on everything about Nx by following @nx.dev on
+                  Bluesky.
+                </p>
+              </a>
+            </div>
+
             <div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
               <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                 <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-green-800" />

diff --git a/nx-dev/ui-contact/src/lib/contact-links.tsx b/nx-dev/ui-contact/src/lib/contact-links.tsx
@@ -129,6 +129,40 @@ export function ContactLinks(): JSX.Element {
             <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
           </a>
         </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              className="h-4 w-4"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Bluesky</title>
+              <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
+            </svg>
+            <h4 className="text-lg font-medium text-slate-700 dark:text-slate-300">
+              Follow us on Bluesky
+            </h4>
+          </div>
+          <p className="mt-2">
+            Stay up to date on everything about Nx like news, conferences,
+            features, releases and more.
+          </p>
+          <a
+            href="https://bsky.app/profile/nx.dev?utm_source=nx.dev"
+            rel="noreferrer"
+            target="_blank"
+            title="Nx Official Bluesky account"
+            className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
+          >
+            <span>
+              Follow <span className="font-medium">@nx.dev</span>
+            </span>
+            <ArrowUpRightIcon aria-hidden="true" className="h-3 w-3" />
+          </a>
+        </div>
         <div>
           <div className="flex items-center gap-2">
             <EnvelopeIcon aria-hidden="true" className="h-4 w-4" />