From b1a91d98676ed262c7002c8d1486d8dd966823ba Mon Sep 17 00:00:00 2001
From: Philip Fulcher <philip@nrwl.io>
Date: Mon, 16 Dec 2024 14:47:07 -0700
Subject: [PATCH] chore(nx-dev): add bluesky to footer and community page

---
 nx-dev/ui-common/src/lib/footer.tsx           | 19 ++++++++++-
 .../src/lib/headers/documentation-header.tsx  | 17 ++++++++++
 .../ui-community/src/lib/connect-with-us.tsx  | 32 +++++++++++++++++++
 3 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx
index c3473d69251df..2faabd880efff 100644
--- 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
index 312124c8027ba..11e96102260bf 100644
--- 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
index 6301ea9a48726..0a7b12ec4ce7d 100644
--- 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" />