content,devtools: update readme.css for goldmark styles

Updates css generator and creates new readme.css file that
preserves github heading styles when using the goldmark
parser.

Change-Id: Iddd2ea99711ffe11c14f6e9e2087b023b7d73325
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/266580
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>

content/static/css/readme.css

@@ -28,7 +28,7 @@
   font-weight: inherit;
   font-weight: bolder;
 }
-.Overview-readmeContent h1 {
+.Overview-readmeContent h3 {
   font-size: 2em;
   margin: 0.67em 0;
 }
@@ -114,43 +114,43 @@
   border-radius: 0.1875rem;
   box-shadow: inset 0 -0.0625rem 0 #d1d5da;
 }
-.Overview-readmeContent h1,
-.Overview-readmeContent h2,
 .Overview-readmeContent h3,
 .Overview-readmeContent h4,
 .Overview-readmeContent h5,
-.Overview-readmeContent h6 {
+.Overview-readmeContent h6,
+.Overview-readmeContent div[aria-level='7'],
+.Overview-readmeContent div[aria-level='8'] {
   margin-top: 0;
   margin-bottom: 0;
 }
-.Overview-readmeContent h1 {
-  font-size: 2rem;
-}
-.Overview-readmeContent h1,
-.Overview-readmeContent h2 {
-  font-weight: 600;
-}
-.Overview-readmeContent h2 {
-  font-size: 1.5rem;
-}
 .Overview-readmeContent h3 {
-  font-size: 1.25rem;
+  font-size: 2rem;
 }
 .Overview-readmeContent h3,
 .Overview-readmeContent h4 {
   font-weight: 600;
 }
 .Overview-readmeContent h4 {
-  font-size: 1rem;
+  font-size: 1.5rem;
 }
 .Overview-readmeContent h5 {
-  font-size: 0.875rem;
+  font-size: 1.25rem;
 }
 .Overview-readmeContent h5,
 .Overview-readmeContent h6 {
   font-weight: 600;
 }
 .Overview-readmeContent h6 {
+  font-size: 1rem;
+}
+.Overview-readmeContent div[aria-level='7'] {
+  font-size: 0.875rem;
+}
+.Overview-readmeContent div[aria-level='7'],
+.Overview-readmeContent div[aria-level='8'] {
+  font-weight: 600;
+}
+.Overview-readmeContent div[aria-level='8'] {
   font-size: 0.75rem;
 }
 .Overview-readmeContent p {
@@ -247,38 +247,38 @@
 .Overview-readmeContent blockquote > :last-child {
   margin-bottom: 0;
 }
-.Overview-readmeContent h1,
-.Overview-readmeContent h2,
 .Overview-readmeContent h3,
 .Overview-readmeContent h4,
 .Overview-readmeContent h5,
-.Overview-readmeContent h6 {
+.Overview-readmeContent h6,
+.Overview-readmeContent div[aria-level='7'],
+.Overview-readmeContent div[aria-level='8'] {
   margin-top: 1.5rem;
   margin-bottom: 1rem;
   font-weight: 600;
   line-height: 1.25;
 }
-.Overview-readmeContent h1 {
+.Overview-readmeContent h3 {
   font-size: 2em;
 }
-.Overview-readmeContent h1,
-.Overview-readmeContent h2 {
+.Overview-readmeContent h3,
+.Overview-readmeContent h4 {
   padding-bottom: 0.3em;
   border-bottom: 0.0625rem solid #eaecef;
 }
-.Overview-readmeContent h2 {
+.Overview-readmeContent h4 {
   font-size: 1.5em;
 }
-.Overview-readmeContent h3 {
+.Overview-readmeContent h5 {
   font-size: 1.25em;
 }
-.Overview-readmeContent h4 {
+.Overview-readmeContent h6 {
   font-size: 1em;
 }
-.Overview-readmeContent h5 {
+.Overview-readmeContent div[aria-level='7'] {
   font-size: 0.875em;
 }
-.Overview-readmeContent h6 {
+.Overview-readmeContent div[aria-level='8'] {
   font-size: 0.85em;
   color: #6a737d;
 }

content/static/html/base.tmpl

@@ -14,7 +14,11 @@
 <meta name="Description" content="Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.">
 <meta class="js-gtmID" data-gtmid="{{.GoogleTagManagerID}}">
 <link href="/static/css/stylesheet.css?version={{.AppVersionLabel}}" rel="stylesheet">
-<link href="/static/css/legacy_readme.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{if (.Experiments.IsActive "goldmark")}}
+  <link href="/static/css/readme.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{else}}
+  <link href="/static/css/legacy_readme.css?version={{.AppVersionLabel}}" rel="stylesheet">
+{{end}}
 {{if (.Experiments.IsActive "sidenav")}}
   <link href="/static/css/sidenav.css?version={{.AppVersionLabel}}" rel="stylesheet">
 {{end}}

devtools/cmd/css/main.go

@@ -59,6 +59,9 @@ func main() {
 	)
 	for scanner.Scan() {
 		text := scanner.Text()
+		if headerString := replaceHeaderTag(text); headerString != "" {
+			text = headerString
+		}
 		if atPropertyStart && shouldIncludeProperty(text) {
 			includeProperty = true
 		}
@@ -131,6 +134,21 @@ func main() {
 	}
 }
 
+// replaceHeaderTag finds any header tags in a line of text and increases
+// the header level by 2. replaceHeader tag returns the replaced string if a
+// header tag is found and returns an empty string if not
+func replaceHeaderTag(property string) string {
+	headerMap := map[string]string{
+		"h1": "h3", "h2": "h4", "h3": "h5", "h4": "h6", "h5": "div[aria-level=7]", "h6": "div[aria-level=8]",
+	}
+	for k, v := range headerMap {
+		if strings.Contains(property, k) {
+			return strings.ReplaceAll(property, k, v)
+		}
+	}
+	return ""
+}
+
 // shouldIncludeProperty reports whether this property should be included in
 // the CSS file.
 func shouldIncludeProperty(property string) bool {