Merge pull request #1503 from BishopFox/docs/next

Docs/next

docs/sliver-docs/.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.vscode/
+
 # dependencies
 /node_modules
 /.pnp

docs/sliver-docs/asciicenma-player.d.ts

@@ -0,0 +1,21 @@
+declare module "asciinema-player" {
+  export function create(
+    src: string,
+    element: HTMLElement | null,
+    // START asciinemaOptions
+    opts: {
+      cols?: string,
+      rows?: string,
+      autoPlay?: boolean,
+      preload?: boolean,
+      loop?: boolean | number,
+      startAt?: number | string,
+      speed?: number,
+      idleTimeLimit?: number,
+      theme?: string,
+      poster?: string,
+      fit?: string,
+      fontSize?: string
+    }
+  )
+}

docs/sliver-docs/components/asciinema.tsx

@@ -0,0 +1,41 @@
+import "asciinema-player/dist/bundle/asciinema-player.css";
+import React from "react";
+
+type AsciinemaPlayerProps = {
+  src: string;
+
+  cols?: string;
+  rows?: string;
+  autoPlay?: boolean;
+  preload?: boolean;
+  loop?: boolean | number;
+  startAt?: number | string;
+  speed?: number;
+  idleTimeLimit?: number;
+  theme?: string;
+  poster?: string;
+  fit?: string;
+  fontSize?: string;
+};
+
+function AsciinemaPlayer({ src, ...asciinemaOptions }: AsciinemaPlayerProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [player, setPlayer] =
+    React.useState<typeof import("asciinema-player")>();
+  React.useEffect(() => {
+    import("asciinema-player").then((p) => {
+      setPlayer(p);
+    });
+  }, []);
+  React.useEffect(() => {
+    const currentRef = ref.current;
+    const instance = player?.create(src, currentRef, asciinemaOptions);
+    return () => {
+      instance?.dispose();
+    };
+  }, [src, player, asciinemaOptions]);
+
+  return <div ref={ref} />;
+}
+
+export default AsciinemaPlayer;

docs/sliver-docs/components/code.tsx

@@ -0,0 +1,122 @@
+import { Themes } from "@/util/themes";
+import { faLinux, faPython } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Editor, { loader } from "@monaco-editor/react";
+import { Card, CardBody } from "@nextui-org/react";
+import { useTheme } from "next-themes";
+import React, { useRef } from "react";
+
+export type CodeSchema = {
+  name: string;
+  script_type: string;
+  source_code: string;
+};
+
+export type CodeViewerProps = {
+  script: CodeSchema;
+
+  hideHeader?: boolean;
+
+  className?: string;
+};
+
+export function renderScriptTypeIcon(key: string, className?: string) {
+  switch (key) {
+    case "bash":
+      return (
+        <FontAwesomeIcon icon={faLinux} className={className || undefined} />
+      );
+
+    case "python":
+      return (
+        <FontAwesomeIcon icon={faPython} className={className || undefined} />
+      );
+    default:
+      return <></>;
+  }
+}
+
+const CodeViewer = (props: CodeViewerProps) => {
+  const { theme } = useTheme();
+
+  // Editor
+  loader.config({ paths: { vs: "/js/monaco" } });
+  const editorRef = useRef(null as any);
+  function handleEditorDidMount(editor: any, monaco: any) {
+    editorRef.current = editor;
+  }
+  const vsTheme = React.useMemo(() => {
+    return theme === Themes.DARK ? "vs-dark" : undefined;
+  }, [theme]);
+  const language = React.useMemo(() => {
+    switch (props.script?.script_type) {
+      case "bash":
+        return "shell";
+      default:
+        return props.script?.script_type || "shell";
+    }
+  }, [props]);
+
+  const [scriptSourceCode, setScriptSourceCode] = React.useState(
+    props.script.source_code
+  );
+  const [fontSize, setFontSize] = React.useState(14);
+  const editorContainerClassName = React.useMemo(() => {
+    return theme === Themes.DARK
+      ? "col-span-12 mt-4 rounded-2xl overflow-hidden"
+      : "col-span-12 mt-4 rounded-2xl overflow-hidden border border-gray-300";
+  }, [theme]);
+
+  return (
+    <div className="grid grid-cols-12">
+      {!props.hideHeader ? (
+        <div className="col-span-12 mt-2">
+          <Card>
+            <CardBody>
+              <div className="flex w-full items-center">
+                <div className="w-full">
+                  <div>
+                    <div className="flex items-center text-xl monospace">
+                      {renderScriptTypeIcon(
+                        props.script.script_type || "",
+                        "mr-2"
+                      )}
+                      {`${props.script.name}`}
+                    </div>
+                    <div className="flex w-full">
+                      <div className="text-xs text-gray-500 capitalize">
+                        {`${props.script.script_type} script - Version`}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+      ) : (
+        <></>
+      )}
+      <div className={editorContainerClassName}>
+        <Editor
+          className={props.className || "min-h-[200px]"}
+          theme={vsTheme}
+          defaultLanguage={language}
+          defaultValue={scriptSourceCode}
+          onChange={(value, event) => {
+            setScriptSourceCode(value || "");
+          }}
+          onMount={handleEditorDidMount}
+          options={{
+            readOnly: true,
+            fontFamily: "Fira Code",
+            fontLigatures: true,
+            fontSize: fontSize,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CodeViewer;

docs/sliver-docs/components/icons/slivers.tsx

@@ -0,0 +1,26 @@
+export type SliversIconProps = {
+  className?: string;
+  fill?: string;
+
+  height?: number;
+  width?: number;
+};
+
+export const SliversIcon = (props: SliversIconProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 912 1024"
+      className={props.className}
+      height={props.height || 24}
+      width={props.width}
+    >
+      <path
+        fill={props.fill ? props.fill : "currentColor"}
+        d="M3.767 709.26s-38.415-249.17 142.452-440.946C326.97 76.538 584.482 63.816 759.689 133.127c0 0-32.847 29.271-32.847 65.806 0 36.444 21.936 58.378 45.658 82.101 23.723 23.815 135.095 158.909 135.095 312.294 0 153.453-125.972 336.015-324.992 336.015-199.042 0-312.293-144.239-328.682-310.414 0 0 96.771 164.294 255.611 164.294s213.62-125.971 213.62-219.167c0-93.034-51.113-272.02-275.666-272.02-224.645 0-379.795 199.042-443.72 417.224z"
+      ></path>
+    </svg>
+  );
+};

docs/sliver-docs/components/navbar.tsx

@@ -0,0 +1,97 @@
+import { Themes } from "@/util/themes";
+import { faEye, faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  Button,
+  Link,
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+} from "@nextui-org/react";
+import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
+import { SliversIcon } from "./icons/slivers";
+
+export type TopNavbarProps = {};
+
+export default function TopNavbar(props: TopNavbarProps) {
+  const router = useRouter();
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Navbar
+      isBordered
+      maxWidth="full"
+      classNames={{
+        item: [
+          "flex",
+          "relative",
+          "h-full",
+          "items-center",
+          "data-[active=true]:after:content-['']",
+          "data-[active=true]:after:absolute",
+          "data-[active=true]:after:bottom-0",
+          "data-[active=true]:after:left-0",
+          "data-[active=true]:after:right-0",
+          "data-[active=true]:after:h-[2px]",
+          "data-[active=true]:after:rounded-[2px]",
+          "data-[active=true]:after:bg-primary",
+        ],
+      }}
+    >
+      <NavbarBrand>
+        <SliversIcon />
+        <p className="hidden sm:block font-bold text-inherit">
+          &nbsp; Sliver C2
+        </p>
+      </NavbarBrand>
+
+      <NavbarContent>
+        <NavbarItem isActive={router.pathname === "/"}>
+          <Button
+            variant="light"
+            color={router.pathname === "/" ? "primary" : "default"}
+            as={Link}
+            onPress={() => router.push("/")}
+          >
+            <FontAwesomeIcon fixedWidth icon={faHome} />
+          </Button>
+        </NavbarItem>
+
+        <NavbarItem isActive={router.pathname.startsWith("/tutorials")}>
+          <Button
+            variant="light"
+            color={router.pathname === "/tutorials" ? "primary" : "default"}
+            as={Link}
+            onPress={() => router.push("/tutorials")}
+          >
+            Tutorials
+          </Button>
+        </NavbarItem>
+
+        <NavbarItem isActive={router.pathname.startsWith("/docs")}>
+          <Button
+            variant="light"
+            color={router.pathname === "/docs" ? "primary" : "default"}
+            as={Link}
+            onPress={() => router.push("/docs")}
+          >
+            Docs
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent as="div" justify="end">
+        <Button
+          variant="light"
+          onPress={() => {
+            setTheme(theme === Themes.DARK ? Themes.LIGHT : Themes.DARK);
+          }}
+        >
+          <FontAwesomeIcon icon={faEye} />
+        </Button>
+      </NavbarContent>
+    </Navbar>
+  );
+}