UI: Add links to documentation pages in tutorial's last step (#2424)

src/ScriptEditor/ui/Toolbar.tsx

@@ -21,11 +21,11 @@ import { useBoolean } from "../../ui/React/hooks";
 import { Settings } from "../../Settings/Settings";
 import { OptionsModal, OptionsModalProps } from "./OptionsModal";
 import { useScriptEditorContext } from "./ScriptEditorContext";
-import { NsApiDocumentationLink } from "../../ui/React/NsApiDocumentationLink";
 import { CurrentKeyBindings, parseKeyCombinationsToString, ScriptEditorAction } from "../../utils/KeyBindingUtils";
 import { DocumentationAutocomplete } from "../../Documentation/ui/DocumentationAutocomplete";
 import { openDocumentationPopUp } from "../../Documentation/root";
-import { openDocExternally } from "../../ui/React/Documentation";
+import { defaultNsApiPage, openDocExternally } from "../../ui/React/Documentation";
+import { DocumentationLink } from "../../ui/React/DocumentationLink";
 
 type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 
@@ -107,7 +107,16 @@ export function Toolbar({ editor, onSave, onRun, onBeautify }: IProps) {
           }}
         />
         <Typography>
-          <NsApiDocumentationLink />
+          <DocumentationLink
+            page={defaultNsApiPage}
+            fontSize="1.2rem"
+            sx={{
+              textDecorationThickness: "3px",
+              textUnderlineOffset: "5px",
+            }}
+          >
+            NS API documentation
+          </DocumentationLink>
         </Typography>
       </Box>
       <OptionsModal

src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx

@@ -25,7 +25,8 @@ import {
 } from "../../InteractiveTutorial";
 import { useRerender } from "../React/hooks";
 import { Settings } from "../../Settings/Settings";
-import { NsApiDocumentationLink } from "../React/NsApiDocumentationLink";
+import { DocumentationLink } from "../React/DocumentationLink";
+import { defaultNsApiPage } from "../React/Documentation";
 
 interface IContent {
   content: React.ReactElement;
@@ -364,7 +365,8 @@ export async function main(ns) {
             Use the search tool at the bottom to find and have a quick glance at documentation of any NS APIs.
             <br />
             <br />
-            To access <NsApiDocumentationLink />, press the link at the bottom.
+            To access <DocumentationLink page={defaultNsApiPage}>NS API documentation</DocumentationLink>, press the
+            link at the bottom.
             <br />
             <br />
             To save and close the script editor, press the button at the bottom.
@@ -556,10 +558,17 @@ export async function main(ns) {
           You should at least check these pages:
           <ul>
             <li>
-              The Beginner's guide contains the guide for new players, navigating you through most of the early game.
+              The <DocumentationLink page="help/getting_started.md">Beginner's guide</DocumentationLink> contains the
+              guide for new players, navigating you through most of the early game.
+            </li>
+            <li>
+              The <DocumentationLink page={defaultNsApiPage}>NS API documentation</DocumentationLink> contains reference
+              materials for all NS APIs.
+            </li>
+            <li>
+              The <DocumentationLink page="help/beginner_faq.md">FAQ</DocumentationLink> contains questions often asked
+              by beginners of the game.
             </li>
-            <li>The NS API documentation contains reference materials for all NS APIs.</li>
-            <li>The FAQ contains questions often asked by beginners of the game.</li>
           </ul>
           <Typography fontWeight="fontWeightBold">
             This documentation page is the best place to get up-to-date information, especially when you get stuck. If

src/ui/React/NsApiDocumentationLink.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { defaultNsApiPage } from "./Documentation";
-import { DocumentationLink } from "./DocumentationLink";
-
-export function NsApiDocumentationLink(): React.ReactElement {
-  return (
-    <DocumentationLink
-      page={defaultNsApiPage}
-      fontSize="1.2rem"
-      sx={{
-        textDecorationThickness: "3px",
-        textUnderlineOffset: "5px",
-      }}
-    >
-      NS API documentation
-    </DocumentationLink>
-  );
-}