#81: Option to enable floating table of contents

vdjagilev · vdjagilev · commit 4d655fea4baa · 2022-05-02T22:34:38.000+03:00
diff --git a/cmd/root.go b/cmd/root.go
@@ -101,6 +101,8 @@ func init() {
 
 	rootCmd.Flags().BoolVar(&config.OutputOptions.HTMLOptions.DarkMode, "html-dark-mode", true, "--html-dark-mode=false, sets HTML output in dark colours")
 
+	rootCmd.Flags().BoolVar(&config.OutputOptions.HTMLOptions.FloatingContentsTable, "html-toc-float", false, "--html-toc-float=true, Table of contents floats along with the scroll")
+
 	// Pretty-print json
 	rootCmd.Flags().BoolVar(&config.OutputOptions.JSONOptions.PrettyPrint, "json-pretty", true, "--json-pretty=false (pretty prints JSON output)")
 
diff --git a/formatter/output_options.go b/formatter/output_options.go
@@ -21,6 +21,8 @@ type HTMLOutputOptions struct {
 	SkipPortScripts bool
 	// DarkMode sets a style to be mostly in dark colours, if false, light colours would be used
 	DarkMode bool
+	// FloatingContentsTable is an option to make contents table float on the side of the page
+	FloatingContentsTable bool
 }
 
 type MarkdownOutputOptions struct {
diff --git a/formatter/resources/templates/simple-html.gohtml b/formatter/resources/templates/simple-html.gohtml
@@ -1,19 +1,33 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		{{ $ftColor := "#121212" }}
+		{{ $bgColor := "#eee" }}
+		{{ if .OutputOptions.HTMLOptions.DarkMode }}
+			{{ $ftColor = "#eee" }}
+			{{ $bgColor = "#121212" }}
+		{{ end }}
 		<title>NMAP Scan result: {{ .NMAPRun.StartStr }}</title>
 		<meta charset="utf-8" />
 		<style>
 			body {
-				{{ if .OutputOptions.HTMLOptions.DarkMode }}
-					color: #eee;
-					background-color: #121212;
-				{{ else }}
-					color: #121212;
-					background-color: #eee;
-				{{ end }}
+				color: {{ $ftColor }};
+				background-color: {{ $bgColor }};
 				font-family: -apple-system,Helvetica,"Segoe UI Symbol";
 			}
+			{{ if .OutputOptions.HTMLOptions.FloatingContentsTable }}
+			#toc {
+				position: fixed;
+				top: 20px;
+				right: 0;
+				margin-right: 5px;
+				z-index: 1000;
+				max-height: 780px;
+				max-width: 250px;
+				overflow: auto;
+				background-color: {{ $bgColor }};
+			}
+			{{ end }}
 			#summary-table {
 				table-layout: fixed;
 				width: 640px;
@@ -36,6 +50,9 @@
 			.data-table > tbody > tr > td {
 				border-bottom: 1px solid #404040;
 			}
+			.data-table > tbody > tr > td > pre {
+				white-space: pre-wrap;
+			}
 			.data-table > tbody > tr > td > ul {
 				padding-left: 0;
 			}
@@ -89,16 +106,18 @@
 		{{ $skipPortScripts := .OutputOptions.HTMLOptions.SkipPortScripts }}
 		<h1>NMAP Scan Result: {{ .NMAPRun.StartStr }}</h1>
 		<hr />
-		<h2>TOC:</h2>
-		<ul>
-			{{ if not $skipSummary }}<li><a href="#scan-summary">Scan Summary</a></li>{{ end }}
-			{{ range .NMAPRun.Host }}
-			{{ if or ($displayDownHosts) (eq .Status.State "up") }}
-			<li><a href="#{{ .HostAddress.Address }}">{{ .HostAddress.Address }}{{ range .HostNames.HostName }} / {{ .Name }}{{ end }}</a> ({{ .Status.State }})</li>
-			{{ end }}{{/* if or ($displayDownHosts) (eq .Status.State "up") */}}
-			{{ end }}{{/* range .Host */}}
-		</ul>
-		<hr />
+		<div id="toc">
+			<h2>Table of contents:</h2>
+			<ul>
+				{{ if not $skipSummary }}<li><a href="#scan-summary">Scan Summary</a></li>{{ end }}
+				{{ range .NMAPRun.Host }}
+				{{ if or ($displayDownHosts) (eq .Status.State "up") }}
+				<li><a href="#{{ .HostAddress.Address }}">{{ .HostAddress.Address }}{{ range .HostNames.HostName }} / {{ .Name }}{{ end }}</a> ({{ .Status.State }})</li>
+				{{ end }}{{/* if or ($displayDownHosts) (eq .Status.State "up") */}}
+				{{ end }}{{/* range .Host */}}
+			</ul>
+			<hr />
+		</div>
 		{{ if not $skipSummary }}
 		<a name="scan-summary"></a>
 		<h2>Scan Summary:</h2>

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,8 @@ type HTMLOutputOptions struct {`
`21`	`21`	`SkipPortScripts bool`
`22`	`22`	`// DarkMode sets a style to be mostly in dark colours, if false, light colours would be used`
`23`	`23`	`DarkMode bool`
	`24`	`+ // FloatingContentsTable is an option to make contents table float on the side of the page`
	`25`	`+ FloatingContentsTable bool`
`24`	`26`	`}`
`25`	`27`
`26`	`28`	`type MarkdownOutputOptions struct {`