adding just the styling for header update

Author: gracepark

lib/get-mini-toc-items.js

@@ -1,7 +1,7 @@
 const cheerio = require('cheerio')
 const { range } = require('lodash')
 
-module.exports = function getMiniTocItems (html, maxHeadingLevel = 3, headingScope = '') {
+module.exports = function getMiniTocItems (html, maxHeadingLevel = 2, headingScope = '') {
   const $ = cheerio.load(html, { xmlMode: true })
 
   // eg `h2, h3` or `h2, h3, h4` depending on maxHeadingLevel

middleware/render-page.js

@@ -76,7 +76,6 @@ module.exports = async function renderPage (req, res, next) {
       )
     )
   }
-
   if (req.method === 'HEAD') {
     return res.status(200).end()
   }
@@ -141,7 +140,6 @@ module.exports = async function renderPage (req, res, next) {
 
   // collect URLs for variants of this page in all languages
   context.page.languageVariants = Page.getLanguageVariants(req.path)
-
   // Stop processing if the connection was already dropped
   if (isConnectionDropped(req, res)) return
 

script/content-migrations/update-headers.js

@@ -15,7 +15,7 @@ const re = /^#.*\n/gm
 
 async function updateMdHeaders (dir) {
   walk(dir, { includeBasePath: true, directories: false })
-    .filter(file => !file.endsWith('README.md'))
+    .filter(file => !file.endsWith('README.md') && !file.includes('content/rest/reference'))
     .forEach(file => {
       fs.readFile(file, 'utf8', (err, data) => {
         if (err) return console.error(err)

stylesheets/headings.scss

@@ -1,19 +1,18 @@
 h1,
 h2,
-h3,
-h4 {
+h3 {
   a {
     color: var(--color-auto-gray-9);
   }
 }
 
-// all h3 headers that are links should be blue-500
-h3 a {
+// all h2 headers that are links should be blue-500
+h2 a {
   color: var(--color-auto-blue-5);
 }
 
 // ... except those on each product's toc
-.product-landing h3 a {
+.product-landing h2 a {
   color: var(--color-auto-gray-9);
 }
 
@@ -22,12 +21,26 @@ h3 a {
   h2,
   h3,
   h4,
-  h5,
-  h6 {
+  h5 {
     font-family: $font-mktg;
     font-weight: $font-weight-semibold;
     padding-top: $spacer-3;
   }
+  h2 {
+    font-size: 1.25em;
+    border-bottom: none;
+  }
+  h3 {
+    font-size: 1em;
+  }
+
+  h4 {
+    font-size: 0.875em;
+  }
+
+  h5 {
+    font-size: 0.85em;
+  }
 }
 
 // needs specificity to override