feat(nx-dev): github star widget

nrwl · Jul 25, 2023 · bdcec6d · bdcec6d · vercel · Jul 25, 2023
1 parent 810b584
commit bdcec6d
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 43 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
@@ -4,7 +4,7 @@ import {
   ProcessedDocument,
   RelatedDocument,
 } from '@nx/nx-dev/models-document';
-import { Breadcrumbs, Footer } from '@nx/nx-dev/ui-common';
+import { Breadcrumbs, Footer, GitHubStarWidget } from '@nx/nx-dev/ui-common';
 import { renderMarkdown } from '@nx/nx-dev/ui-markdoc';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
@@ -15,9 +15,11 @@ import { collectHeadings, TableOfContents } from './table-of-contents';
 export function DocViewer({
   document,
   relatedDocuments,
+  widgetData,
 }: {
   document: ProcessedDocument;
   relatedDocuments: RelatedDocument[];
+  widgetData: { githubStarsCount: number };
 }): JSX.Element {
   const router = useRouter();
   const hideTableOfContent =
@@ -109,7 +111,13 @@ export function DocViewer({
                     elementRef={ref}
                     path={router.basePath}
                     headings={vm.tableOfContent}
-                  />
+                  >
+                    {widgetData.githubStarsCount > 0 && (
+                      <GitHubStarWidget
+                        starsCount={widgetData.githubStarsCount}
+                      />
+                    )}
+                  </TableOfContents>
                 </div>
               )}
             </div>

diff --git a/nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx b/nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx
@@ -39,10 +39,12 @@ export function TableOfContents({
   elementRef,
   headings,
   path,
+  children,
 }: {
   elementRef: any;
   headings: Heading[];
   path: string;
+  children: React.ReactNode;
 }): JSX.Element {
   const headingLevelTargets: number[] = [1, 2, 3]; // matching to: H1, H2, H3...
   const items = headings.filter(
@@ -60,32 +62,35 @@ export function TableOfContents({
   );
 
   return (
-    <nav className="toc">
-      <span className="pl-4 font-medium">On this page</span>
-      {!!items.length ? (
-        <ul className="mt-4 flex-col">
-          {items.map((item) => {
-            const href = `${path}#${item.id}`;
-            return (
-              <li key={item.title}>
-                <Link
-                  href={href}
-                  className={cx(
-                    'block w-full border-l-4 border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700',
-                    {
-                      'border-slate-500 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60':
-                        activeId === item.id,
-                      'pl-6': item.level === 3,
-                    }
-                  )}
-                >
-                  {item.level === 1 ? 'Overview' : item.title}
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      ) : null}
-    </nav>
+    <>
+      <nav className="toc">
+        <span className="pl-4 font-medium">On this page</span>
+        {!!items.length ? (
+          <ul className="flex-col mt-4">
+            {items.map((item) => {
+              const href = `${path}#${item.id}`;
+              return (
+                <li key={item.title}>
+                  <Link
+                    href={href}
+                    className={cx(
+                      'block w-full border-l-4 border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700',
+                      {
+                        'border-slate-500 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60':
+                          activeId === item.id,
+                        'pl-6': item.level === 3,
+                      }
+                    )}
+                  >
+                    {item.level === 1 ? 'Overview' : item.title}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        ) : null}
+      </nav>
+      <div className="p-4">{children}</div>
+    </>
   );
 }
diff --git a/nx-dev/nx-dev/lib/githubStars.api.ts b/nx-dev/nx-dev/lib/githubStars.api.ts
@@ -0,0 +1,33 @@
+import { Octokit } from 'octokit';
+
+let cachedGithubStarCountPromise: null | Promise<number> = null;
+
+export async function fetchGithubStarCount() {
+  if (cachedGithubStarCountPromise !== null) {
+    // If the promise is in the cache, return it directly
+    return cachedGithubStarCountPromise;
+  }
+
+  cachedGithubStarCountPromise = (async () => {
+    try {
+      const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+      const responseData = await octokit.request('GET /repos/{owner}/{repo}', {
+        owner: 'nrwl',
+        repo: 'nx',
+        headers: {
+          'X-GitHub-Api-Version': '2022-11-28',
+        },
+        retry: { enabled: false },
+        throttle: {
+          enabled: true,
+        },
+      });
+
+      return responseData.data.stargazers_count;
+    } catch (e) {
+      return 0; // fallback, will hide GitHub star widget
+    }
+  })();
+
+  return cachedGithubStarCountPromise;
+}
diff --git a/nx-dev/nx-dev/pages/[...segments].tsx b/nx-dev/nx-dev/pages/[...segments].tsx
@@ -1,7 +1,7 @@
 import { getBasicNxSection } from '@nx/nx-dev/data-access-menu';
 import { DocViewer } from '@nx/nx-dev/feature-doc-viewer';
 import { ProcessedDocument, RelatedDocument } from '@nx/nx-dev/models-document';
-import { Menu, MenuItem } from '@nx/nx-dev/models-menu';
+import { MenuItem } from '@nx/nx-dev/models-menu';
 import { DocumentationHeader, SidebarContainer } from '@nx/nx-dev/ui-common';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
@@ -10,15 +10,18 @@ import { menusApi } from '../lib/menus.api';
 import { useNavToggle } from '../lib/navigation-toggle.effect';
 import { nxDocumentationApi } from '../lib/nx.api';
 import { tagsApi } from '../lib/tags.api';
+import { fetchGithubStarCount } from '../lib/githubStars.api';
 
 export default function NxDocumentation({
   document,
   menu,
   relatedDocuments,
+  widgetData,
 }: {
   document: ProcessedDocument;
   menu: MenuItem[];
   relatedDocuments: RelatedDocument[];
+  widgetData: { githubStarsCount: number };
 }) {
   const router = useRouter();
   const { toggleNav, navIsOpen } = useNavToggle();
@@ -40,16 +43,8 @@ export default function NxDocumentation({
     return () => router.events.off('routeChangeComplete', handleRouteChange);
   }, [router, wrapperElement]);
 
-  const vm: {
-    document: ProcessedDocument;
-    menu: Menu;
-    relatedDocuments: RelatedDocument[];
-  } = {
-    document,
-    menu: {
-      sections: [getBasicNxSection(menu)],
-    },
-    relatedDocuments,
+  const menuWithSections = {
+    sections: [getBasicNxSection(menu)],
   };
 
   return (
@@ -62,16 +57,17 @@ export default function NxDocumentation({
         role="main"
         className="flex h-full flex-1 overflow-y-hidden"
       >
-        <SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
+        <SidebarContainer menu={menuWithSections} navIsOpen={navIsOpen} />
         <div
           ref={wrapperElement}
           id="wrapper"
           data-testid="wrapper"
           className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
         >
           <DocViewer
-            document={vm.document}
-            relatedDocuments={vm.relatedDocuments}
+            document={document}
+            relatedDocuments={relatedDocuments}
+            widgetData={widgetData}
           />
         </div>
       </main>
@@ -100,6 +96,9 @@ export const getStaticProps: GetStaticProps = async ({
     return {
       props: {
         document,
+        widgetData: {
+          githubStarsCount: await fetchGithubStarCount(),
+        },
         relatedDocuments: tagsApi
           .getAssociatedItemsFromTags(document.tags)
           .filter((item) => item.path !== '/' + params.segments.join('/')), // Remove currently displayed item

diff --git a/nx-dev/nx-dev/pages/extending-nx/[...segments].tsx b/nx-dev/nx-dev/pages/extending-nx/[...segments].tsx
@@ -10,15 +10,18 @@ import { menusApi } from '../../lib/menus.api';
 import { useNavToggle } from '../../lib/navigation-toggle.effect';
 import { nxPluginsApi } from '../../lib/plugins.api';
 import { tagsApi } from '../../lib/tags.api';
+import { fetchGithubStarCount } from '../../lib/githubStars.api';
 
 export default function Pages({
   document,
   menu,
   relatedDocuments,
+  widgetData,
 }: {
   document: ProcessedDocument;
   menu: MenuItem[];
   relatedDocuments: RelatedDocument[];
+  widgetData: { githubStarsCount: number };
 }): JSX.Element {
   const router = useRouter();
   const { toggleNav, navIsOpen } = useNavToggle();
@@ -72,6 +75,7 @@ export default function Pages({
           <DocViewer
             document={vm.document}
             relatedDocuments={vm.relatedDocuments}
+            widgetData={widgetData}
           />
         </div>
       </main>
@@ -98,6 +102,9 @@ export const getStaticProps: GetStaticProps = async ({
     return {
       props: {
         document,
+        widgetData: {
+          githubStarsCount: await fetchGithubStarCount(),
+        },
         relatedDocuments: tagsApi
           .getAssociatedItemsFromTags(document.tags)
           .filter((item) => item.path !== '/' + segments.join('/')), // Remove currently displayed item

diff --git a/nx-dev/nx-dev/pages/extending-nx/index.tsx b/nx-dev/nx-dev/pages/extending-nx/index.tsx
@@ -10,15 +10,18 @@ import { menusApi } from '../../lib/menus.api';
 import { useNavToggle } from '../../lib/navigation-toggle.effect';
 import { nxPluginsApi } from '../../lib/plugins.api';
 import { tagsApi } from '../../lib/tags.api';
+import { fetchGithubStarCount } from '../../lib/githubStars.api';
 
 export default function PluginsRoot({
   document,
   menu,
   relatedDocuments,
+  widgetData,
 }: {
   document: ProcessedDocument;
   menu: MenuItem[];
   relatedDocuments: RelatedDocument[];
+  widgetData: { githubStarsCount: number };
 }) {
   const router = useRouter();
   const { toggleNav, navIsOpen } = useNavToggle();
@@ -72,6 +75,7 @@ export default function PluginsRoot({
           <DocViewer
             document={document}
             relatedDocuments={vm.relatedDocuments}
+            widgetData={widgetData}
           />
         </div>
       </main>
@@ -87,6 +91,9 @@ export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       document,
+      widgetData: {
+        githubStarsCount: await fetchGithubStarCount(),
+      },
       menu: menusApi.getMenu('extending-nx', ''),
       relatedDocuments: document.tags
         .map((t) => tagsApi.getAssociatedItems(t))

diff --git a/nx-dev/nx-dev/pages/nx-cloud/[...segments].tsx b/nx-dev/nx-dev/pages/nx-cloud/[...segments].tsx
@@ -13,15 +13,18 @@ import { nxCloudApi } from '../../lib/cloud.api';
 import { menusApi } from '../../lib/menus.api';
 import { useNavToggle } from '../../lib/navigation-toggle.effect';
 import { tagsApi } from '../../lib/tags.api';
+import { fetchGithubStarCount } from '../../lib/githubStars.api';
 
 export default function Pages({
   document,
   menu,
   relatedDocuments,
+  widgetData,
 }: {
   document: ProcessedDocument;
   menu: MenuItem[];
   relatedDocuments: RelatedDocument[];
+  widgetData: { githubStarsCount: number };
 }) {
   const router = useRouter();
   const { toggleNav, navIsOpen } = useNavToggle();
@@ -75,6 +78,7 @@ export default function Pages({
           <DocViewer
             document={vm.document}
             relatedDocuments={vm.relatedDocuments}
+            widgetData={widgetData}
           />
         </div>
       </main>
@@ -99,6 +103,9 @@ export const getStaticProps: GetStaticProps = async ({
     return {
       props: {
         document,
+        widgetData: {
+          githubStarsCount: await fetchGithubStarCount(),
+        },
         relatedDocuments: tagsApi
           .getAssociatedItemsFromTags(document.tags)
           .filter((item) => item.path !== '/' + segments.join('/')), // Remove currently displayed item

diff --git a/nx-dev/nx-dev/pages/nx-cloud/index.tsx b/nx-dev/nx-dev/pages/nx-cloud/index.tsx
@@ -13,15 +13,18 @@ import { nxCloudApi } from '../../lib/cloud.api';
 import { menusApi } from '../../lib/menus.api';
 import { useNavToggle } from '../../lib/navigation-toggle.effect';
 import { tagsApi } from '../../lib/tags.api';
+import { fetchGithubStarCount } from '../../lib/githubStars.api';
 
 export default function CloudRoot({
   document,
   menu,
   relatedDocuments,
+  widgetData,
 }: {
   document: ProcessedDocument;
   menu: MenuItem[];
   relatedDocuments: RelatedDocument[];
+  widgetData: { githubStarsCount: number };
 }) {
   const router = useRouter();
   const { toggleNav, navIsOpen } = useNavToggle();
@@ -75,6 +78,7 @@ export default function CloudRoot({
           <DocViewer
             document={document}
             relatedDocuments={vm.relatedDocuments}
+            widgetData={widgetData}
           />
         </div>
       </main>
@@ -90,6 +94,9 @@ export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       document,
+      widgetData: {
+        githubStarsCount: await fetchGithubStarCount(),
+      },
       menu: menusApi.getMenu('cloud', ''),
       relatedDocuments: document.tags
         .map((t) => tagsApi.getAssociatedItems(t))