Add documentation on how to change the default design

docs/design.md

@@ -0,0 +1,104 @@
+---
+layout: sub-navigation
+order: 3
+title: Design
+description: Replace the crown, GOV.UK logotype and GDS Transport typeface.
+---
+
+By default, the GOV.UK Eleventy Plugin generates pages that use the standard GOV.UK header and GDS Transport typeface.
+
+If your website isn’t considered part of GOV.UK, it must not:
+
+- identify itself as being part of GOV.UK
+- use the crown or GOV.UK logotype in the header
+- use the GDS Transport typeface
+- suggest that it’s an official UK government website if it’s not
+
+It is strongly recommended that you change the default values to match your department or organisation’s own branding.
+
+## Replace the GOV.UK logotype and crown
+
+Use the `header.logotype.text` option to replace the crown and GOV.UK logotype with a text value. For example:
+
+```js
+const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(govukEleventyPlugin, {
+    header: {
+      logotype: {
+        text: 'Circus Agency'
+      },
+      productName: 'Apply for a juggling licence',
+    }
+  })
+}
+```
+
+If you need more control, use `logo.logotype.html`. This allows you to provide your own HTML which could, for example, contain an SVG logo or image:
+
+```js
+const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(govukEleventyPlugin, {
+    header: {
+      logotype: {
+        html: `<img src="logo.png" alt="Circus Agency">`
+      },
+      productName: 'Apply for a juggling licence',
+    }
+  })
+}
+```
+
+## Update the copyright statement
+
+By default, the footer shows a link to the [Open Government Licence v3.0](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/), and places the website under Crown copyright.
+
+If these are not right for your website, change:
+
+- `footer.contentLicence.text` or `footer.contentLicence.html` for the content licence
+- `footer.copyright.text` or `footer.copyright.html` for the copyright statement
+
+For example:
+
+```js
+const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(govukEleventyPlugin, {
+    header: {
+      contentLicence: {
+        html: 'Licensed under the <a class="govuk-footer__link" href="https://licence.example">Example Licence</a>, except where otherwise stated'
+      },
+      copyright: {
+        text: '© Circus Agency'
+      },
+    }
+  })
+}
+```
+
+## Replace the GDS Transport typeface
+
+A number of design features, including the typeface used, can be changed by overriding SCSS settings.
+
+Add a `_settings.scss` file to a `/sass/` folder in the input directory (you can change this location using the `scssSettingsPath` option).
+
+Then, in this SCSS file, override the `$govuk-font-family` setting. For example:
+
+```scss
+$govuk-font-family: system-ui, sans-serif;
+```
+
+You can also use this file to change other [global SCSS settings provided by GOV.UK Frontend](https://frontend.design-system.service.gov.uk/sass-api-reference/#settings). For example:
+
+```scss
+$govuk-font-family: system-ui, sans-serif;
+$govuk-brand-colour: #8822aa;
+$govuk-link-colour: #660088;
+$govuk-link-hover-colour: #440066;
+$govuk-link-visited-colour: #333366;
+$govuk-page-width: 1100px;
+```

docs/feed.md

@@ -1,6 +1,6 @@
 ---
 layout: sub-navigation
-order: 7
+order: 8
 title: Adding a feed
 description: Allow people to subscribe to your posts and read them in a feed reader
 ---

docs/hosting.md

@@ -1,6 +1,6 @@
 ---
 layout: sub-navigation
-order: 8
+order: 9
 title: Hosting
 description: Hosting Eleventy websites on services like GitHub Pages.
 ---

docs/layouts.md

@@ -1,8 +1,8 @@
 ---
 layout: sub-navigation
-order: 3
+order: 4
 title: Layouts
-description: The plugin offers a number of layouts to match the type of content you want write.
+description: Choose a layout to match the type of content you want write.
 ---
 
 {% for page in collections.layout %}

docs/markdown-advanced.md

@@ -1,6 +1,6 @@
 ---
 layout: sub-navigation
-order: 5
+order: 6
 title: Advanced Markdown
 description: Additional Markdown syntax is supported to ensure pages can contain additional elements like tables, code blocks and footnotes.
 related:

docs/markdown.md

@@ -1,6 +1,6 @@
 ---
 layout: sub-navigation
-order: 4
+order: 5
 title: Markdown
 description: A lightweight markup language that allows you to add formatting to plain text text documents.
 related:

docs/options.md

@@ -2,7 +2,7 @@
 layout: sub-navigation
 order: 2
 title: Options
-description: The plugin has a number of options that allow you to customise the appearance of your website.
+description: Customise the appearance and behaviour of your website.
 ---
 
 You can add options to the second parameter of the `addPlugin` function in Eleventy config file.

docs/search.md

@@ -1,6 +1,6 @@
 ---
 layout: sub-navigation
-order: 6
+order: 7
 title: Adding a site search
 description: Make it easier for readers to find content on your site.
 ---

docs/tagging.md

@@ -1,6 +1,6 @@
 ---
 layout: sub-navigation
-order: 7
+order: 9
 title: Adding tags
 description: Use tags to categorise posts and make it easier for readers to browse content on your site.
 ---

eleventy.config.js

@@ -64,8 +64,8 @@ module.exports = function (eleventyConfig) {
     collection
       .getFilteredByGlob([
         'docs/options.md',
-        'docs/layouts.md',
-        'docs/markdown.md'
+        'docs/design.md',
+        'docs/layouts.md'
       ])
       .sort((a, b) => (a.data.order || 0) - (b.data.order || 0))
   )