Changes from SME review

alphagov · Jul 29, 2020 · 689b6f9 · 689b6f9
1 parent c7c2296
commit 689b6f9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 32 deletions.
diff --git a/src/get-started/production/index.md.njk b/src/get-started/production/index.md.njk
@@ -33,7 +33,7 @@ Using this option, you will be able to:
 - selectively [include the CSS or JavaScript](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/) for individual components
 - build your own styles or components based on the palette or typography and spacing mixins
 - customise the build (for example, overriding colours or enabling global styles)
-- use the [component Nunjucks macros](https://frontend.design-system.service.gov.uk/use-nunjucks-macros/) if your environment supports them
+- use the [Nunjucks template and macros](https://frontend.design-system.service.gov.uk/use-nunjucks/) if your environment supports them
 
 ### Option 2: include compiled files
 
@@ -69,7 +69,7 @@ The components in the Design System are designed to be accessible and responsive
 You can use them in your live application as either:
 
 - HTML
-- [Nunjucks macros](https://frontend.design-system.service.gov.uk/use-nunjucks-macros/) - if you installed GOV.UK Frontend using npm and your application is written in JavaScript
+- [Nunjucks macros](https://frontend.design-system.service.gov.uk/use-nunjucks/) - if you installed GOV.UK Frontend using npm and your application uses Node.js
 
 You can get the code from the HTML or Nunjucks tabs below any examples:
 

diff --git a/src/styles/page-template/index.md.njk b/src/styles/page-template/index.md.njk
@@ -16,7 +16,7 @@ This page template combines the boilerplate markup and [components](../../compon
 - the [skip link](../../components/skip-link), [header](../../components/header) and [footer](../../components/footer) components
 - the favicon, and other related theme icons
 
-In the examples provided, we show both HTML and [Nunjucks](https://frontend.design-system.service.gov.uk/use-nunjucks-macros/).
+In the examples provided, we show both HTML and [Nunjucks](https://frontend.design-system.service.gov.uk/use-nunjucks/).
 
 You can use the HTML examples if you are not able to use Nunjucks. If you use HTML you’ll need to update it manually when new versions are released.
 
@@ -38,36 +38,11 @@ You can customise the page template, for example, by adding a service name and n
 
 ## Changing template content
 
-If you’re [using Nunjucks](https://frontend.design-system.service.gov.uk/use-nunjucks-macros/), you can change the template’s content using options.
-
-You can use either:
-
-- `set` to use a single value or string
-- `block` to use a multiline value or HTML markup
-
-For example, to use `set` to add a string before the closing </body> element in the template:
-
-```javscript
-{% raw %}
-{% set bodyEnd = "Example text" %}
-{% endraw %}
-```
-
-To use `block` to add a block of HTML before the closing </body> element in the template:
-
-```javscript
-{% raw %}
-{% block bodyEnd %}
-  <div>
-     <p>Example text</p>
-  </div>
-{% endblock %}
-{% endraw %}
-```
+If you’re using Nunjucks, you can change the template’s content using [options](https://frontend.design-system.service.gov.uk/use-nunjucks/#changing-the-html-thats-generated).
 
 To change the components that are included in the page template by default, set their equivalent blocks. For example:
 
-```javscript
+```javascript
 {% raw %}
 {% block header %}
   {{ header({
@@ -77,32 +52,34 @@ To change the components that are included in the page template by default, set
 {% endraw %}
 ```
 
-### Options
-
 <table class="govuk-table app-table--constrained">
   <caption class="govuk-table__caption govuk-visually-hidden">Options that you can use with the page template</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col">Option name</th>
+      <th class="govuk-table__header" scope="col">Option type</th>
       <th class="govuk-table__header" scope="col">Description</th>
     </tr>
   </thead>
   <tbody class="govuk-table__body">
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">assetPath</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">
         Specify a path to the <a href="https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#font-and-image-assets">GOV.UK Frontend assets</a> (icons, images, font files).
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">assetUrl</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">Set the domain for the Open Graph meta tag image asset. If you need to use both your own domain and your own image path and filename, add <code>&lt;meta property="og:image" content="YOUR-ABSOLUTE-URL"&gt;</code> inside the <code>head</code> <a href="#blocks">block</a> instead of using `assetUrl`.</td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">beforeContent</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Add content that needs to appear outside <code>&lt;main&gt;</code> element.
         <br>
@@ -113,50 +90,58 @@ To change the components that are included in the page template by default, set
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">bodyAttributes</td>
+      <td class="govuk-table__cell">Variable</td>      
       <td class="govuk-table__cell">Add attributes to the <code>&lt;body&gt;</code> element. Add each attribute and its value in the <code>bodyAttributes</code> object.</td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">bodyClasses</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">Add a class to the <code>&lt;body&gt;</code> element.</td>
     </tr>
 
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">bodyEnd</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Add content just before the closing <code>&lt;/body&gt;</code> element.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">bodyStart</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Add content after the opening <code>&lt;body&gt;</code> element.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">containerClasses</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">Add a class to the container. This is useful if you want to make the page wrapper a fixed width.</td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">content</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Add content that needs to appear centered in the <code>&lt;main&gt;</code> element.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">footer</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Override the default <a class="govuk-link" href="../../components/footer/">footer</a> component.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">head</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Add additional items inside the <code>&lt;head&gt;</code> element.
         <br>
@@ -166,13 +151,15 @@ To change the components that are included in the page template by default, set
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">header</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Override the default <a class="govuk-link" href="../../components/header/">header</a> component.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">headIcons</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Override the default icons used for GOV.UK branded pages.
         <br>
@@ -182,56 +169,65 @@ To change the components that are included in the page template by default, set
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">htmlClasses</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">Add a class to the <code>&lt;html&gt;</code> element.</td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">htmlLang</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">Set the language of the whole document. If your <code>&lt;title&gt;</code> and <code>&lt;main&gt;</code> element are in a different language to the rest of the page, use <code>htmlLang</code> to set the language of the rest of the page.</td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">main</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Override the main section of the page, which by default wraps the <code>&lt;main&gt;</code> element, <code>beforeContent</code> block and <code>content</code> block.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">mainClasses</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">Add a class to the <code>&lt;main&gt;</code> element. </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">mainLang</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">
         Set the language of the <code>&lt;main&gt;</code> element if it's different to <code>htmlLang</code>.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">pageTitle</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Override the default page title (<code>&lt;title&gt;</code> element).
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">pageTitleLang</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">
         Set the language of the <code>&lt;title&gt;</code> element if it's different to <code>htmlLang</code>.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">skipLink</td>
+      <td class="govuk-table__cell">Block</td>
       <td class="govuk-table__cell">
         Override the default <a class="govuk-link" href="../../components/skip-link/">skip link</a> component.
       </td>
     </tr>
 
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">themeColor</td>
+      <td class="govuk-table__cell">Variable</td>
       <td class="govuk-table__cell">
         Set the <a href="https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android">toolbar colour on some devices</a>.
       </td>