docs(core): fix header and footer links (nrwl#6025)

KeKs0r · Jun 16, 2021 · c9d9f68 · c9d9f68
1 parent 1a1039f
commit c9d9f68
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 94 deletions.
diff --git a/nx-dev/nx-dev/pages/[...segments].tsx b/nx-dev/nx-dev/pages/[...segments].tsx
@@ -147,18 +147,7 @@ export function DocumentationPage({
           </svg>
         </button>
       </main>
-      {!navIsOpen ? (
-        <Footer
-          flavor={{
-            name: flavor.label,
-            value: flavor.value,
-          }}
-          version={{
-            name: version.name,
-            value: version.id,
-          }}
-        />
-      ) : null}
+      {!navIsOpen ? <Footer /> : null}
       <Dialog
         as="div"
         className="fixed z-50 inset-0 overflow-y-auto"

diff --git a/nx-dev/nx-dev/pages/angular.tsx b/nx-dev/nx-dev/pages/angular.tsx
@@ -484,16 +484,7 @@ export function AngularPage() {
           <NxUsersShowcase />
         </div>
       </main>
-      <Footer
-        flavor={{
-          name: storedFlavor || 'angular',
-          value: storedFlavor || 'angular',
-        }}
-        version={{
-          name: storedVersion || 'Latest',
-          value: storedVersion || 'latest',
-        }}
-      />
+      <Footer />
     </>
   );
 }

diff --git a/nx-dev/nx-dev/pages/community.tsx b/nx-dev/nx-dev/pages/community.tsx
@@ -297,16 +297,7 @@ export function Community(props: CommunityProps) {
           </div>
         </div>
       </main>
-      <Footer
-        flavor={{
-          name: storedFlavor || 'react',
-          value: storedFlavor || 'react',
-        }}
-        version={{
-          name: storedVersion || 'Latest',
-          value: storedVersion || 'latest',
-        }}
-      />
+      <Footer />
     </>
   );
 }

diff --git a/nx-dev/nx-dev/pages/index.tsx b/nx-dev/nx-dev/pages/index.tsx
@@ -27,17 +27,7 @@ export function Index() {
         distributed graph-based task execution, a robust CLI, computation caching, dependency management, and more."
         />
       </Head>
-      <Header
-        showSearch={false}
-        flavor={{
-          name: storedFlavor || 'react',
-          value: storedFlavor || 'react',
-        }}
-        version={{
-          name: storedVersion || 'Latest',
-          value: storedVersion || 'latest',
-        }}
-      />
+      <Header showSearch={false} />
       <main>
         <div className="w-full">
           {/*INTRO COMPONENT*/}
@@ -54,7 +44,7 @@ export function Index() {
                   </p>
 
                   <div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
-                    <Link href="/latest/react/getting-started/getting-started">
+                    <Link href="/getting-started/intro">
                       <a className="w-full sm:w-auto flex-none bg-purple-nx-base text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-purple-nx-base focus:outline-none transition-colors duration-180">
                         Get Started
                       </a>
@@ -418,16 +408,7 @@ export function Index() {
           <NxUsersShowcase />
         </div>
       </main>
-      <Footer
-        flavor={{
-          name: storedFlavor || 'react',
-          value: storedFlavor || 'react',
-        }}
-        version={{
-          name: storedVersion || 'Latest',
-          value: storedVersion || 'latest',
-        }}
-      />
+      <Footer />
     </>
   );
 }

diff --git a/nx-dev/nx-dev/pages/node.tsx b/nx-dev/nx-dev/pages/node.tsx
@@ -552,16 +552,7 @@ export function Node() {
           <NxUsersShowcase />
         </div>
       </main>
-      <Footer
-        flavor={{
-          name: storedFlavor || 'node',
-          value: storedFlavor || 'node',
-        }}
-        version={{
-          name: storedVersion || 'Latest',
-          value: storedVersion || 'latest',
-        }}
-      />
+      <Footer />
     </>
   );
 }

diff --git a/nx-dev/nx-dev/pages/react.tsx b/nx-dev/nx-dev/pages/react.tsx
@@ -517,16 +517,7 @@ export function ReactPage() {
           <NxUsersShowcase />
         </div>
       </main>
-      <Footer
-        flavor={{
-          name: storedFlavor || 'react',
-          value: storedFlavor || 'react',
-        }}
-        version={{
-          name: storedVersion || 'Latest',
-          value: storedVersion || 'latest',
-        }}
-      />
+      <Footer />
     </>
   );
 }

diff --git a/nx-dev/ui/common/src/lib/footer.spec.tsx b/nx-dev/ui/common/src/lib/footer.spec.tsx
@@ -5,12 +5,7 @@ import Footer from './footer';
 
 describe('Footer', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(
-      <Footer
-        flavor={{ name: 'react', value: 'react' }}
-        version={{ name: 'latest', value: 'latest' }}
-      />
-    );
+    const { baseElement } = render(<Footer />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/nx-dev/ui/common/src/lib/footer.tsx b/nx-dev/ui/common/src/lib/footer.tsx
@@ -1,9 +1,6 @@
 import Link from 'next/link';
-export interface FooterProps {
-  version: { name: string; value: string };
-  flavor: { name: string; value: string };
-}
-export function Footer({ version, flavor }: FooterProps) {
+
+export function Footer() {
   return (
     <footer className="mt-32 text-white body-font">
       <div className="bg-blue-nx-base text-white">
@@ -40,9 +37,7 @@ export function Footer({ version, flavor }: FooterProps) {
               <h3 className="text-xl leading-none tracking-tight mb-4">Help</h3>
               <ul>
                 <li className="mb-2">
-                  <Link
-                    href={`/${version.value}/${flavor.value}/getting-started/intro`}
-                  >
+                  <Link href={`/getting-started/intro`}>
                     <a className="cursor-pointer block">Documentation</a>
                   </Link>
                 </li>

diff --git a/nx-dev/ui/common/src/lib/header.tsx b/nx-dev/ui/common/src/lib/header.tsx
@@ -2,13 +2,25 @@ import React from 'react';
 import Link from 'next/link';
 import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
 
-export interface HeaderProps {
+interface HeaderPropsWithoutFlavorAndVersion {
+  showSearch: false;
+}
+
+interface HeaderPropsWithFlavorAndVersion {
   showSearch: boolean;
-  flavor: { name: string; value: string } | null;
-  version: { name: string; value: string } | null;
+  flavor: { name: string; value: string };
+  version: { name: string; value: string };
 }
 
-export function Header({ flavor, showSearch, version }: HeaderProps) {
+export type HeaderProps =
+  | HeaderPropsWithFlavorAndVersion
+  | HeaderPropsWithoutFlavorAndVersion;
+
+export function Header(props: HeaderProps) {
+  const showSearch = props.showSearch;
+  const version = props.showSearch ? props.version : null;
+  const flavor = props.showSearch ? props.flavor : null;
+
   return (
     <header className="h-16 px-5 py-5 flex items-center justify-between print:hidden bg-blue-nx-base">
       <div className="flex items-center justify-between w-full max-w-screen-xl mx-auto space-x-10">
@@ -59,14 +71,22 @@ export function Header({ flavor, showSearch, version }: HeaderProps) {
         <div className="text-sm flex-shrink-0">
           <nav className="flex items-justified justify-center space-x-1">
             <Link
-              href={`/${version.value}/${flavor.value}/getting-started/getting-started`}
+              href={
+                version
+                  ? `/${version.value}/${flavor.value}/getting-started/intro`
+                  : `/getting-started/intro`
+              }
             >
               <a className="font-bold px-3 py-2 text-white leading-tight">
                 Get Started
               </a>
             </Link>
             <Link
-              href={`/${version.value}/${flavor.value}/core-concepts/nx-devkit`}
+              href={
+                version
+                  ? `/${version.value}/${flavor.value}/core-concepts/nx-devkit`
+                  : `/core-concepts/nx-devkit`
+              }
             >
               <a className="px-3 py-2 hidden md:inline-flex text-white leading-tight">
                 Plugins