docs(nx-dev): add star github button & cleanup (nrwl#28623)

bcabanes · Oct 25, 2024 · 96f36d3 · 96f36d3
1 parent ffb1b29
commit 96f36d3
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 34 deletions.
diff --git a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
@@ -119,21 +119,23 @@ export function DocViewer({
               {!hideTableOfContent && (
                 <div
                   className={cx(
-                    'fixed right-[max(2rem,calc(50%-55rem))] top-48 z-20 hidden w-60 overflow-y-auto bg-white text-sm xl:block dark:bg-slate-900'
+                    'fixed right-[max(2rem,calc(50%-55rem))] top-44 z-20 hidden w-60 space-y-6 overflow-y-auto bg-white text-sm xl:block dark:bg-slate-900'
                   )}
                 >
+                  {widgetData.githubStarsCount > 0 && (
+                    <div className="px-6">
+                      <GitHubStarWidget
+                        starsCount={widgetData.githubStarsCount}
+                      />
+                    </div>
+                  )}
                   <TableOfContents
                     elementRef={ref}
                     path={router.basePath}
                     headings={vm.tableOfContent}
                     document={document}
                   >
                     <>
-                      {widgetData.githubStarsCount > 0 && (
-                        <GitHubStarWidget
-                          starsCount={widgetData.githubStarsCount}
-                        />
-                      )}
                       <div className="my-4 flex items-center justify-center space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
                         <button
                           type="button"

diff --git a/nx-dev/ui-common/src/lib/github-star-widget.tsx b/nx-dev/ui-common/src/lib/github-star-widget.tsx
@@ -1,4 +1,5 @@
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
+import type { ReactElement } from 'react';
 
 export const GithubIcon = (props: any) => {
   return (
@@ -15,7 +16,11 @@ export const GithubIcon = (props: any) => {
   );
 };
 
-export function GitHubStarWidget({ starsCount }: { starsCount: number }) {
+export function GitHubStarWidget({
+  starsCount,
+}: {
+  starsCount: number;
+}): ReactElement {
   const formatStars = (count: number) => {
     if (count >= 1000) {
       return (count / 1000).toFixed(1) + 'k';
@@ -33,25 +38,20 @@ export function GitHubStarWidget({ starsCount }: { starsCount: number }) {
   };
 
   return (
-    <div className="flex items-center justify-between space-x-2 rounded-md border border-slate-200 pl-2 pr-2 hover:border-slate-400 dark:border-slate-700 print:hidden">
-      <a
-        href="https://github.com/nrwl/nx"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="flex items-center justify-between space-x-2"
-        onClick={() => handleClick('githubstars_iconclick')}
-      >
-        <GithubIcon className="h-6 w-6" />
-        <span className="text-md font-semibold">{formatStars(starsCount)}</span>
-      </a>
+    <div className="relative flex items-center justify-center gap-2 rounded-md border border-slate-100 p-2 text-xs transition hover:border-slate-200 dark:border-slate-800 dark:hover:border-slate-700 print:hidden">
+      <div className="flex items-center gap-2">
+        <GithubIcon aria-hidden="true" className="h-4 w-4" />
+        <span className="font-semibold">{formatStars(starsCount)}</span>
+      </div>
       <a
         href="https://github.com/nrwl/nx"
         target="_blank"
         rel="noreferrer noopener"
-        className="whitespace-nowrap border-transparent px-4 py-2 font-bold hover:text-slate-900 dark:hover:text-sky-400"
+        className="flex items-center gap-2 border-transparent font-bold"
         onClick={() => handleClick('githubstars_buttonclick')}
       >
-        Give us a Star!
+        <span className="absolute inset-0" />
+        <span className="whitespace-nowrap">Give us a Star!</span>
       </a>
     </div>
   );

diff --git a/nx-dev/ui-home/src/lib/team-and-community.tsx b/nx-dev/ui-home/src/lib/team-and-community.tsx
@@ -2,22 +2,33 @@ import {
   ArrowUpRightIcon,
   ChevronRightIcon,
   ComputerDesktopIcon,
-  DocumentIcon,
   MicrophoneIcon,
   NewspaperIcon,
+  StarIcon,
 } from '@heroicons/react/24/outline';
 import {
   DiscordIcon,
+  GithubIcon,
   SectionHeading,
   Strong,
   TextLink,
 } from '@nx/nx-dev/ui-common';
-import { YoutubeIcon } from '@nx/nx-dev/ui-icons';
+import { XIcon, YoutubeIcon } from '@nx/nx-dev/ui-icons';
 import Link from 'next/link';
+import type { ReactElement } from 'react';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
 const yearsAgo = new Date().getFullYear() - 2017;
 
-export function TeamAndCommunity(): JSX.Element {
+export function TeamAndCommunity(): ReactElement {
+  const handleClick = (eventAction: string) => {
+    sendCustomEvent(
+      eventAction,
+      'githubstars-community-section',
+      'githubstarswidget'
+    );
+  };
+
   return (
     <section className="mx-auto max-w-7xl px-6 lg:px-8">
       <article className="max-w-5xl">
@@ -61,21 +72,32 @@ export function TeamAndCommunity(): JSX.Element {
       </article>
 
       <div className="mx-auto mt-24">
-        <div className="grid grid-cols-2 gap-12 sm:grid-cols-3 sm:gap-8 lg:grid-cols-6 lg:gap-6">
+        <div className="flex justify-center rounded-md print:hidden">
+          <a
+            onClick={() => handleClick('githubstars_buttonclick')}
+            href="https://github.com/nrwl/nx"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 hover:underline"
+          >
+            <GithubIcon className="h-5 w-5" />
+            <span className="text-md font-semibold">
+              Give us a star on GitHub!
+            </span>
+            <StarIcon aria-hidden="true" className="h-4 w-4" />
+          </a>
+        </div>
+        <div className="mt-8 grid grid-cols-2 gap-12 sm:grid-cols-3 sm:gap-8 lg:grid-cols-6 lg:gap-6">
           <div>
             <div className="group/item relative flex items-center gap-2 rounded-xl border border-slate-100 p-4 transition hover:text-slate-950 dark:border-slate-800/60 dark:hover:text-white">
-              <DocumentIcon aria-hidden="true" className="size-6 shrink-0" />
-              <Link
-                href="/getting-started/intro?utm_medium=website&utm_campaign=homepage_links&utm_content=cta_team_and_community"
-                className="grow text-base"
-                prefetch={false}
-              >
+              <XIcon aria-hidden="true" className="size-6 shrink-0" />
+              <a href="https://x.com/NxDevTools" className="grow text-base">
                 <span className="absolute inset-0" />
-                Docs
-              </Link>
-              <ChevronRightIcon
+                Follow us
+              </a>
+              <ArrowUpRightIcon
                 aria-hidden="true"
-                className="size-4 shrink-0 transition group-hover/item:translate-x-1 "
+                className="size-4 shrink-0 transition group-hover/item:-translate-y-1 group-hover/item:translate-x-1"
               />
             </div>
           </div>