Skip to content

Commit

Permalink
[DO NOT MERGE] Run npm run build with gfm
Browse files Browse the repository at this point in the history 
Uh oh...

**Nunjucks whitespace issue**

I haven't figured this out yet, but something is going awry with whitespace in our Nunjucks code. I've left most of the pages as is on this PR, but I've gone in and edited the source code for the `example` component and the accordion page to make those compile correctly, and it's clearly to do with empty lines.

I would hope there is a config option somewhere for Nunjucks, or an ordering issue that would not necessitate us smooshing together all the source file whitespace, because as can be seen by the edited source files, this makes them less readable.

I've tried using Nunjucks whitespace control (ie: the minus sign), but that doesn't solve the problem, which makes it feel like the nunjucks hasn't compiled before being run through `marked` or something?

**Build time is significantly slower**

Build time with marked set to `gfm` seems much slower. That could be due to the whitespace issue and all the faffy formatting its doing though.
  • Loading branch information
@domoscargin
domoscargin committed Aug 24, 2022
1 parent 3397424 commit 64a71f8
Show file tree
Hide file tree
Showing 68 changed files with 21,359 additions and 23,304 deletions.
29 changes: 15 additions & 14 deletions deploy/public/community/contribution-criteria/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1064,24 +1064,25 @@ <h2 id="developing-a-component-or-pattern">Developing a component or pattern</h2
<th scope="row" class="govuk-table__header">Usable</th>
<td class="govuk-table__cell"><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></td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">Consistent</th>
<td class="govuk-table__cell"><p>It reuses existing styles and components in the Design System where relevant.</p>
<pre><code>&lt;p <span class="hljs-keyword">class</span>=<span class="hljs-comment">&#x27;govuk-!-margin-bottom-0&#x27;&gt;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.<span class="hljs-doctag">&lt;/p&gt;</span><span class="hljs-doctag">&lt;/td&gt;</span></span>
&lt;/tr&gt;
&lt;tr <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;
&lt;th scope=<span class="hljs-string">&quot;row&quot;</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;govuk-table__header&quot;</span>&gt;Consistent&lt;/th&gt;
&lt;td <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;&lt;p&gt;It reuses existing styles <span class="hljs-keyword">and</span> components <span class="hljs-keyword">in</span> the Design System <span class="hljs-keyword">where</span> relevant.&lt;/p&gt;

<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>
&lt;p&gt;Both the guidance <span class="hljs-keyword">and</span> any content included <span class="hljs-keyword">in</span> examples must follow the &lt;a href=<span class="hljs-comment">&#x27;https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style&#x27;&gt;GOV.UK content style guide<span class="hljs-doctag">&lt;/a&gt;</span>.<span class="hljs-doctag">&lt;/p&gt;</span></span>

<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></td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">Versatile</th>
<td class="govuk-table__cell"><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>
&lt;p <span class="hljs-keyword">class</span>=<span class="hljs-comment">&#x27;govuk-!-margin-bottom-0&#x27;&gt;If there is code, it follows the <span class="hljs-doctag">&lt;a href=&#x27;https://github.com/alphagov/govuk-frontend/blob/main/CONTRIBUTING.md#conventions-to-follow&#x27;&gt;</span>GOV.UK Frontend coding standards<span class="hljs-doctag">&lt;/a&gt;</span> and is ready to merge in GOV.UK Frontend.<span class="hljs-doctag">&lt;/p&gt;</span><span class="hljs-doctag">&lt;/td&gt;</span></span>
&lt;/tr&gt;
&lt;tr <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;
&lt;th scope=<span class="hljs-string">&quot;row&quot;</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;govuk-table__header&quot;</span>&gt;Versatile&lt;/th&gt;
&lt;td <span class="hljs-keyword">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;&lt;p&gt;The implementation <span class="hljs-keyword">is</span> versatile enough that the component <span class="hljs-keyword">or</span> pattern can be used <span class="hljs-keyword">in</span> a range <span class="hljs-keyword">of</span> different services that may need it.&lt;/p&gt;

<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>
&lt;p&gt;<span class="hljs-keyword">For</span> example, a versatile <span class="hljs-built_in">date</span> input component could be <span class="hljs-keyword">set</span> up <span class="hljs-keyword">to</span> ask <span class="hljs-keyword">for</span> a year only, a month <span class="hljs-keyword">and</span> year only, a precise <span class="hljs-built_in">date</span>, <span class="hljs-keyword">or</span> any other combination you may need.&lt;/p&gt;

<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></td>
</tr>
&lt;p <span class="hljs-keyword">class</span>=<span class="hljs-comment">&#x27;govuk-!-margin-bottom-0&#x27;&gt;The component or pattern must also have been tested and shown to work with a range of <span class="hljs-doctag">&lt;a href=&#x27;https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices&#x27;&gt;</span>browsers, assistive technologies and devices<span class="hljs-doctag">&lt;/a&gt;</span>.<span class="hljs-doctag">&lt;/p&gt;</span><span class="hljs-doctag">&lt;/td&gt;</span></span>
&lt;/tr&gt;
</code></pre>
</tbody>
</table>

Expand Down
1 change: 0 additions & 1 deletion deploy/public/components/accordion/default/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@




<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
<div class="govuk-accordion__section ">
<div class="govuk-accordion__section-header">
Expand Down
45 changes: 9 additions & 36 deletions deploy/public/components/accordion/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1138,8 +1138,7 @@ <h1 class="govuk-heading-xl">
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/accordion/default/index.html" class="app-example__new-window" target="_blank">
Open this

Open this
<span class="govuk-visually-hidden">accordion</span>
example in a new tab
</a>
Expand Down Expand Up @@ -1208,17 +1207,14 @@ <h1 class="govuk-heading-xl">
</div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#accordion-example-nunjucks" aria-controls="accordion-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="accordion-example-nunjucks" role="tabpanel">


<details class="govuk-details app-options" data-module="govuk-details" id="options-accordion-example-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
<span data-components='github-component-arguments'>Nunjucks macro options</span>
</span>
</summary>
<div class="govuk-details__text">

<p>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Expand All @@ -1227,7 +1223,6 @@ <h1 class="govuk-heading-xl">
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>

<table class="govuk-table app-options__table" id="options-accordion-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
Expand All @@ -1238,7 +1233,6 @@ <h1 class="govuk-heading-xl">
</tr>
</thead>
<tbody class="govuk-table__body">

<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">id</th>
<td class="govuk-table__cell ">string</td>
Expand Down Expand Up @@ -1289,7 +1283,6 @@ <h1 class="govuk-heading-xl">
</tr>
</thead>
<tbody class="govuk-table__body">

<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">heading.text</th>
<td class="govuk-table__cell ">string</td>
Expand Down Expand Up @@ -1346,13 +1339,11 @@ <h1 class="govuk-heading-xl">
</tbody>
</table>


</div>
</details>

<div class="app-example__code">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/accordion/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukAccordion %}

{{ govukAccordion({
<span class="hljs-attr">id</span>: <span class="hljs-string">&quot;accordion-default&quot;</span>,
<span class="hljs-attr">items</span>: [
Expand Down Expand Up @@ -1445,8 +1436,7 @@ <h3 id="section-heading-buttons">Section heading buttons</h3>
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/accordion/default/index.html" class="app-example__new-window" target="_blank">
Open this

Open this
<span class="govuk-visually-hidden">accordion second</span>
example in a new tab
</a>
Expand Down Expand Up @@ -1515,17 +1505,14 @@ <h3 id="section-heading-buttons">Section heading buttons</h3>
</div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#accordion-second-example-nunjucks" aria-controls="accordion-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="accordion-second-example-nunjucks" role="tabpanel">


<details class="govuk-details app-options" data-module="govuk-details" id="options-accordion-second-example-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
<span data-components='github-component-arguments'>Nunjucks macro options</span>
</span>
</summary>
<div class="govuk-details__text">

<p>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Expand All @@ -1534,7 +1521,6 @@ <h3 id="section-heading-buttons">Section heading buttons</h3>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>

<table class="govuk-table app-options__table" id="options-accordion-second-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
Expand All @@ -1545,7 +1531,6 @@ <h3 id="section-heading-buttons">Section heading buttons</h3>
</tr>
</thead>
<tbody class="govuk-table__body">

<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">id</th>
<td class="govuk-table__cell ">string</td>
Expand Down Expand Up @@ -1596,7 +1581,6 @@ <h3 id="section-heading-buttons">Section heading buttons</h3>
</tr>
</thead>
<tbody class="govuk-table__body">

<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">heading.text</th>
<td class="govuk-table__cell ">string</td>
Expand Down Expand Up @@ -1653,13 +1637,11 @@ <h3 id="section-heading-buttons">Section heading buttons</h3>
</tbody>
</table>


</div>
</details>

<div class="app-example__code">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/accordion/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukAccordion %}

{{ govukAccordion({
<span class="hljs-attr">id</span>: <span class="hljs-string">&quot;accordion-default&quot;</span>,
<span class="hljs-attr">items</span>: [
Expand Down Expand Up @@ -1714,8 +1696,7 @@ <h4 id="adding-a-summary-line">Adding a summary line</h4>
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/accordion/with-summary-section/index.html" class="app-example__new-window" target="_blank">
Open this

Open this
<span class="govuk-visually-hidden">accordion with summary sections</span>
example in a new tab
</a>
Expand Down Expand Up @@ -1863,17 +1844,14 @@ <h4 id="adding-a-summary-line">Adding a summary line</h4>
</div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#accordion-with-summary-sections-example-nunjucks" aria-controls="accordion-with-summary-sections-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="accordion-with-summary-sections-example-nunjucks" role="tabpanel">


<details class="govuk-details app-options" data-module="govuk-details" id="options-accordion-with-summary-sections-example-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
<span data-components='github-component-arguments'>Nunjucks macro options</span>
</span>
</summary>
<div class="govuk-details__text">

<p>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Expand All @@ -1882,7 +1860,6 @@ <h4 id="adding-a-summary-line">Adding a summary line</h4>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>

<table class="govuk-table app-options__table" id="options-accordion-with-summary-sections-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
Expand All @@ -1893,7 +1870,6 @@ <h4 id="adding-a-summary-line">Adding a summary line</h4>
</tr>
</thead>
<tbody class="govuk-table__body">

<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">id</th>
<td class="govuk-table__cell ">string</td>
Expand Down Expand Up @@ -1944,7 +1920,6 @@ <h4 id="adding-a-summary-line">Adding a summary line</h4>
</tr>
</thead>
<tbody class="govuk-table__body">

<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">heading.text</th>
<td class="govuk-table__cell ">string</td>
Expand Down Expand Up @@ -2001,13 +1976,11 @@ <h4 id="adding-a-summary-line">Adding a summary line</h4>
</tbody>
</table>


</div>
</details>

<div class="app-example__code">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% from &quot;govuk/components/accordion/macro.njk&quot; import govukAccordion %}

{{ govukAccordion({
id: &quot;accordion-with-summary-sections&quot;,
items: [
Expand Down
1 change: 0 additions & 1 deletion deploy/public/components/accordion/with-summary-section/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@




<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
<div class="govuk-accordion__section ">
<div class="govuk-accordion__section-header">
Expand Down
Loading

0 comments on commit 64a71f8

Please sign in to comment.