Fix spacing errors

Switching to Github Flavoured Markdown results in a LOT of differences between rendering. The bulk of these are related to blank lines in HTML blocks, which fall foul of rules 6 and 7 of HTML blocks in GFM (see: https://github.github.com/gfm/#html-blocks), and cause rendering errors. We can (painstakingly) remove all these blank lines to produce a compiled output that only differs in desirable ways. This is mostly fine, but it does mean that there are now no empty lines in code samples, which may or may not be a blocker.
alphagov · Nov 18, 2022 · b13c99c · b13c99c
1 parent 113e310
commit b13c99c
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 81 deletions.
diff --git a/lib/file-helper.js b/lib/file-helper.js
@@ -37,10 +37,16 @@ exports.getNunjucksCode = path => {
   // Omit any `{% extends "foo.njk" %}` nunjucks code, because we extend
   // templates that only exist within the Design System – it's not useful to
   // include this in the code we expect others to copy.
-  let content = parsedFile.content.replace(
-    /{%\s*extends\s*\S*\s*%}\s+/,
-    ''
-  )
+  let content = parsedFile.content
+    .replace(
+      /{%\s*extends\s*\S*\s*%}\s+/,
+      ''
+    )
+    // Remove empty lines to avoid broken markdown rendering
+    .replace(
+      /^\s*[\r\n]/gm,
+      ''
+    )
 
   return content
 }
@@ -107,12 +113,15 @@ exports.getHTMLCode = path => {
 
   return beautify(html.trim(), {
     indent_size: 2,
-    end_with_newline: true,
-    // If there are multiple blank lines, reduce down to one blank new line.
-    max_preserve_newlines: 1,
+    end_with_newline: false,
+    // Remove blank lines
+    max_preserve_newlines: 0,
     // set unformatted to a small group of elements, not all inline (the default)
     // otherwise tags like label arent indented properly
-    unformatted: ['code', 'pre', 'em', 'strong']
+    unformatted: ['code', 'pre', 'em', 'strong'],
+    // Ensure no empty lines after <head> and <body> tags - this breaks markdown
+    // rendering
+    extra_liners: []
   })
 }
 

diff --git a/lib/metalsmith.js b/lib/metalsmith.js
@@ -229,7 +229,7 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
       },
 
       // Markdown engine options
-      mangle: false,
+      mangle: false, // Don't mangle emails
       smartypants: true, // use "smart" typographic punctuation
       highlight: highlighter
     }

diff --git a/src/community/contribution-criteria/index.md.njk b/src/community/contribution-criteria/index.md.njk
@@ -79,7 +79,6 @@ Before a new component or pattern is published the working group reviews the imp
       },
       {
         html: "<p>It has been tested  in user research and shown to work with a representative sample of users, including those with disabilities.</p>
-
         <p class='govuk-!-margin-bottom-0'>Components and patterns which are not proven usable can be published as experimental. But they must be clearly based on relevant user research from other organisations and best practice, and meet the other criteria.</p>"
       }
     ],
@@ -89,9 +88,7 @@ Before a new component or pattern is published the working group reviews the imp
       },
       {
         html: "<p>It reuses existing styles and components in the Design System where relevant.</p>
-
         <p>Both the guidance and any content included in examples must follow the <a href='https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style'>GOV.UK content style guide</a>.</p>
-
         <p class='govuk-!-margin-bottom-0'>If there is code, it follows the <a href='https://github.com/alphagov/govuk-frontend/blob/main/CONTRIBUTING.md#conventions-to-follow'>GOV.UK Frontend coding standards</a> and is ready to merge in GOV.UK Frontend.</p>"
       }
     ],
@@ -101,9 +98,7 @@ Before a new component or pattern is published the working group reviews the imp
       },
       {
         html: "<p>The implementation is versatile enough that the component or pattern can be used in a range of different services that may need it.</p>
-
         <p>For example, a versatile date input component could be set up to ask for a year only, a month and year only, a precise date, or any other combination you may need.</p>
-
         <p class='govuk-!-margin-bottom-0'>The component or pattern must also have been tested and shown to work with a range of <a href='https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices'>browsers, assistive technologies and devices</a>.</p>"
       }
     ]

diff --git a/src/get-started/updating-your-code/index.md.njk b/src/get-started/updating-your-code/index.md.njk
@@ -26,42 +26,34 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
     </tr>
   </thead>
   <tbody class="govuk-table__body">
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:top_of_page</td>
       <td class="govuk-table__cell">Deprecated: putting content above the <code>&lt;!DOCTYPE html&gt;</code> will result in broken pages for users of older Internet Explorer versions.</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:html_lang</td>
       <td class="govuk-table__cell">htmlLang</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:page_title</td>
       <td class="govuk-table__cell">pageTitle</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:asset_path</td>
       <td class="govuk-table__cell">assetPath</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:head</td>
       <td class="govuk-table__cell">head</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:body_classes</td>
       <td class="govuk-table__cell">bodyClasses</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:body_start</td>
       <td class="govuk-table__cell">bodyStart</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:skip_link_message</td>
       <td class="govuk-table__cell">
@@ -78,14 +70,12 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:cookie_message</td>
       <td class="govuk-table__cell">
         See the <a class="govuk-link" href="/components/cookie-banner/">cookie banner component</a> for more details.
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">header_class</td>
       <td class="govuk-table__cell">
@@ -102,7 +92,6 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">homepage_url</td>
       <td class="govuk-table__cell">
@@ -119,14 +108,12 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">global_header_text</td>
       <td class="govuk-table__cell">
         No equivalent. <a href="https://github.com/alphagov/govuk-frontend/issue/new">Raise an issue</a> if you need this.
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">inside_header</td>
       <td class="govuk-table__cell">
@@ -143,7 +130,6 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">proposition_header</td>
       <td class="govuk-table__cell">
@@ -160,12 +146,10 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:after_header</td>
       <td class="govuk-table__cell">beforeContent</td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:content</td>
       <td class="govuk-table__cell">
@@ -183,7 +167,6 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:footer_top</td>
       <td class="govuk-table__cell">
@@ -200,7 +183,6 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:footer_support_links</td>
       <td class="govuk-table__cell">
@@ -217,14 +199,12 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
         </p>
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:licence_message</td>
       <td class="govuk-table__cell">
         No equivalent. <a href="https://github.com/alphagov/govuk-frontend/issues/new">Raise an issue</a> if you need this.
       </td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">:body_end</td>
       <td class="govuk-table__cell">bodyEnd</td>
@@ -475,7 +455,6 @@ GOV.UK Frontend uses ["Block, Element, Modifier" (BEM)](http://getbem.com/) and
       <td class="govuk-table__cell ">form-control<br>form-control-3-4<br>form-control-2-3<br>form-control-1-2<br>form-control-1-3<br>form-control-1-4<br>form-control-1-8</td>
       <td class="govuk-table__cell "><a class="govuk-link" href="/styles/layout/#width-override-classes">Width override classes</a></td>
     </tr>
-
     <tr class="govuk-table__row">
       <td class="govuk-table__cell ">form-section</td>
       <td class="govuk-table__cell ">Deprecated: not required with new spacing implementation</td>

diff --git a/src/styles/colour/index.md.njk b/src/styles/colour/index.md.njk
@@ -30,16 +30,16 @@ use `govuk-colour("red")` rather than `$govuk-error-colour`.
 
 <table class="govuk-body app-colour-list" summary="Table of main colours">
   <tbody>
-  {# colours is an object built by ./lib/colours.js based on data defined in ./data/colours.json #}
-  {% for groupName, group in colours.applied %}
+  {#- colours is an object built by ./lib/colours.js based on data defined in ./data/colours.json #}
+  {% for groupName, group in colours.applied -%}
     <tr>
       <td colspan="3">
         <h3 class="govuk-heading-m {% if not loop.first %}govuk-!-padding-top-6{% endif %}">
         {{groupName}}
         </h3>
       </td>
     </tr>
-    {% for colour in group %}
+    {% for colour in group -%}
       <tr class="app-colour-list-row">
         <th class="app-colour-list-column app-colour-list-column--name" scope="row">
           <span class="app-swatch {% if colour.colour == "#ffffff" %}app-swatch-border{% endif %}" style="background-color:{{colour.colour}}"></span>
@@ -48,9 +48,14 @@ use `govuk-colour("red")` rather than `$govuk-error-colour`.
         <td class="app-colour-list-column app-colour-list-column--colour">
           <code>{{colour.colour}}</code>
         </td>
+        {% if colour.notes %}
         <td class="app-colour-list-column app-colour-list-column--notes">
           {{colour.notes}}
         </td>
+        {% else %}
+        <td class="app-colour-list-column app-colour-list-column--notes">
+        </td>
+        {% endif %}
       </tr>
     {% endfor %}
   {% endfor %}