diff --git a/docs/assets/example-layouts/post-image.jpg b/docs/assets/example-layouts/post-image.jpg new file mode 100644 index 00000000..67e26551 Binary files /dev/null and b/docs/assets/example-layouts/post-image.jpg differ diff --git a/docs/assets/example-layouts/product-illustration.svg b/docs/assets/example-layouts/product-illustration.svg new file mode 100644 index 00000000..10a7b490 --- /dev/null +++ b/docs/assets/example-layouts/product-illustration.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Service + + + + + diff --git a/docs/example-layouts/collection.md b/docs/example-layouts/collection.md new file mode 100644 index 00000000..b6855944 --- /dev/null +++ b/docs/example-layouts/collection.md @@ -0,0 +1,60 @@ +--- +layout: collection +title: Apply for a juggling licence +description: API documentation for the new Apply for a juggling licence service. +paginationHeading: API methods +pagination: + data: example + size: 4 +example: + - url: "#" + date: 2021-09-08 + data: + title: GET /applications + description: Get many applications. + - url: "#" + date: 2021-09-08 + data: + title: GET /applications/:id + description: Get a single application. + - url: "#" + date: 2021-09-08 + data: + title: POST /applications/:id/approve + description: Approve an application. + - url: "#" + date: 2021-09-08 + data: + title: POST /applications/:id/reject + description: Reject an application. + - url: "#" + date: 2021-09-08 + data: + date: 2021-08-17 + title: POST /applications/:id/withdraw + description: Withdraw an application. +related: + sections: + - title: Related content + items: + - text: Layouts + href: /layouts + - text: Collection layout + href: /layouts/collection + subsections: + - title: Other example layouts + items: + - text: Page + href: /example-layouts/page + - text: Page with sub navigation + href: /example-layouts/sub-navigation + - text: Post + href: /example-layouts/post + - text: Product page + href: /example-layouts/product-page +eleventyComputed: + aside: + title: Example layout + content: | + This is an example page using the `collection` layout. You can [view the source used to create this page on GitHub]({{ viewSource }}). +--- diff --git a/docs/example-layouts/example-layouts.11tydata.js b/docs/example-layouts/example-layouts.11tydata.js new file mode 100644 index 00000000..28cdefeb --- /dev/null +++ b/docs/example-layouts/example-layouts.11tydata.js @@ -0,0 +1,7 @@ +module.exports = { + eleventyComputed: { + viewSource: (data) => + `https://github.com/x-govuk/govuk-eleventy-plugin/blob/main/docs${data.page.filePathStem}.md?plain=1` + }, + eleventyExcludeFromCollections: true +} diff --git a/docs/example-layouts/page.md b/docs/example-layouts/page.md new file mode 100644 index 00000000..8e0f1866 --- /dev/null +++ b/docs/example-layouts/page.md @@ -0,0 +1,49 @@ +--- +layout: page +title: Apply for a juggling licence +description: API documentation for the new Apply for a juggling licence service. +related: + sections: + - title: Related content + items: + - text: Layouts + href: /layouts + - text: Page layout + href: /layouts/page + subsections: + - title: Other example layouts + items: + - text: Page with sub navigation + href: /example-layouts/sub-navigation + - text: Post + href: /example-layouts/post + - text: Collection + href: /example-layouts/collection + - text: Product page + href: /example-layouts/product-page +eleventyComputed: + aside: + title: Example layout + content: | + This is an example page using the `page` layout. You can [view the source used to create this page on GitHub]({{ viewSource }}). +--- + +## About this API + +Once a juggler has submitted their application via the Apply service, the application will become available over the API. + +Providers can then use the API for: + +- [Retrieving applications](#) +- [Approving applications](#) +- [Rejecting unsuccessful applications](#) + +To get an idea of how the API works, [review the example usage scenarios](#). + +## Authentication and authorisation + +Requests to the API must be accompanied by an authentication token. + +Each token is associated with a single licencing authority. It will grant access to applications for courses offered by or accredited by that provider. + +For instructions on how to authenticate, see the [API reference](#). diff --git a/docs/example-layouts/post.md b/docs/example-layouts/post.md new file mode 100644 index 00000000..4ef9084f --- /dev/null +++ b/docs/example-layouts/post.md @@ -0,0 +1,53 @@ +--- +layout: post +title: How we designed a service to manage juggling licence applications +description: Layout for date-based content, such as blog posts or news items. +date: 2011-12-21 +image: + src: /assets/example-layouts/post-image.jpg + alt: High angle photo of assorted-colour plastic balls. + caption: Photo by [Greyson Joralemon](https://unsplash.com/@greysonjoralemon) on [Unsplash](https://unsplash.com/photos/9IBqihqhuHc) +authors: + - name: Rod Gandini + url: '#' + - name: Sean Laver + url: '#' +related: + sections: + - title: Related content + items: + - text: Layouts + href: /layouts + - text: Post layout + href: /layouts/post + subsections: + - title: Other example layouts + items: + - text: Page + href: /example-layouts/page + - text: Page with sub navigation + href: /example-layouts/sub-navigation + - text: Collection + href: /example-layouts/collection + - text: Product page + href: /example-layouts/product-page +tags: + - example tag +eleventyComputed: + aside: + title: Example layout + content: | + This is an example page using the `post` layout. You can [view the source used to create this page on GitHub]({{ viewSource }}). +--- + +Jugglers require proper licensing to ensure the safety of both themselves and their audiences. Our team has been building a new service which aims to simplify the licensing process while reducing the administrative burden on licensing authorities. + +They told us about the cumbersome paperwork and frustrating manual processes currently used to manage applications. Meanwhile, the complex application forms are difficult for jugglers to complete, while some told us they were unaware that a licence to juggle with more than 3 objects was even needed. + +During our Alpha phase, we explored creating an intuitive, user-friendly service for jugglers that would allow them to easily submit new licence applications (or renew an existing licence) online. Regular research sessions with jugglers and licensing authorities helped us iterate and refine such a system. + +We launched a pilot of the new service 2 weeks ago. We have already received feedback from jugglers. They’ve told us that the new service is easier to use and understand. Meanwhile, the licensing authorities we have partnered with are recording quicker processing times and seeing reduced administrative overhead. + +As we continue to develop the service, we will explore future enhancements such as real-time application tracking and automated renewal reminders. + +Our goal is to deliver a service that not only meets the current needs of the juggling community, but one that can evolve in response to the evolving regulatory landscape. diff --git a/docs/example-layouts/product.md b/docs/example-layouts/product.md new file mode 100644 index 00000000..06e4897c --- /dev/null +++ b/docs/example-layouts/product.md @@ -0,0 +1,70 @@ +--- +layout: product +title: Apply for a juggling licence +description: API documentation for the new Apply for a juggling licence service. +startButton: + href: "#" + text: Get started +image: + src: /assets/example-layouts/product-illustration.svg + alt: Eleventy’s possum mascot hanging on a red balloon and floating above a laptop. +related: + sections: + - title: Related content + items: + - text: Layouts + href: /layouts + - text: Page layout + href: /layouts/product + subsections: + - title: Other example layouts + items: + - text: Page + href: /example-layouts/page + - text: Page with sub navigation + href: /example-layouts/sub-navigation + - text: Post + href: /example-layouts/post + - text: Collection + href: /example-layouts/collection + - text: Product page + href: /example-layouts/product-page +eleventyComputed: + aside: + title: Example layout + content: | + This is an example page using the `product` layout. You can [view the source used to create this page on GitHub]({{ viewSource }}). +--- + +
+
+

+ + API reference + +

+

+ Methods for retrieving and approving and rejecting licence applications. +

+
+
+

+ + Usage scenarios + +

+

+ Scenarios that show example request URLs and payloads clients can use to take actions via this API. +

+
+
+

+ + Release notes + +

+

+ We sometimes make changes to the API that require updates to juggler record systems. +

+
+
diff --git a/docs/example-layouts/sub-navigation.md b/docs/example-layouts/sub-navigation.md new file mode 100644 index 00000000..bb7b1387 --- /dev/null +++ b/docs/example-layouts/sub-navigation.md @@ -0,0 +1,49 @@ +--- +layout: sub-navigation +title: Apply for a juggling licence +description: API documentation for the new Apply for a juggling licence service. +related: + sections: + - title: Related content + items: + - text: Layouts + href: /layouts + - text: Sub navigation layout + href: /layouts/sub-navigation + subsections: + - title: Other example layouts + items: + - text: Page + href: /example-layouts/page + - text: Post + href: /example-layouts/post + - text: Collection + href: /example-layouts/collection + - text: Product page + href: /example-layouts/product-page +eleventyComputed: + aside: + title: Example layout + content: | + This is an example page using the `sub-navigation` layout. You can [view the source used to create this page on GitHub]({{ viewSource }}). +--- + +## About this API + +Once a juggler has submitted their application via the Apply service, the application will become available over the API. + +Providers can then use the API for: + +- [Retrieving applications](#) +- [Approving applications](#) +- [Rejecting unsuccessful applications](#) + +To get an idea of how the API works, [review the example usage scenarios](#). + +## Authentication and authorisation + +Requests to the API must be accompanied by an authentication token. + +Each token is associated with a single licencing authority. It will grant access to applications for courses offered by or accredited by that provider. + +For instructions on how to authenticate, see the [API reference](#). diff --git a/docs/includes/front-matter-options.md b/docs/includes/front-matter-options.md deleted file mode 100644 index f0cc4387..00000000 --- a/docs/includes/front-matter-options.md +++ /dev/null @@ -1,41 +0,0 @@ -Use these options to customise the appearance, content and behaviour of any layout. - -| Name | Type | Description | -| :----------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------- | -| **layout** | string | Page layout. | -| **includeInBreadcrumbs** | boolean | Include page as the last item in any breadcrumbs. Default is `false`. | -| **order** | number | Ranking of page in navigation. Lower numbers appear before pages with a higher number. | -| **title** | string | Page title. | -| **description** | string | Page description. | -| **opengraphImage** | object | Open Graph image that appears on social media networks. | -| **opengraphImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. | -| **opengraphImage.alt** | string | Alternative text for Open Graph image. | -| **aside** | object | Small portion of content that is indirectly related to the main content. | -| **aside.title** | string | Title for aside. | -| **aside.content** | string | Content for aside. Accepts Markdown. | -| **related** | object | Related links. See [related](#options-for-related). | - -### Options for related - -With one section: - -| Name | Type | Description | -| :-------------------- | :----- | :---------------------------------------------------------------- | -| **title** | string | Title for group of related links. Default is `'Related content'`. | -| **items** | array | See [items](#options-for-items). | -| **subsections** | array | Title for sub-group of related links. | -| **subsections.title** | string | | -| **subsections.items** | array | See [items](#options-for-items). | - -With multiple sections: - -| Name | Type | Description | -| :----------- | :---- | :--------------------------------- | -| **sections** | array | See [items](#options-for-related). | - -### Options for items - -| Name | Type | Description | -| :------- | :----- | :---------------------------- | -| **text** | string | Title of related content. | -| **href** | string | Link for the related content. | diff --git a/docs/includes/includes.11tydata.js b/docs/includes/includes.11tydata.js deleted file mode 100644 index f3e7f324..00000000 --- a/docs/includes/includes.11tydata.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - eleventyExcludeFromCollections: true -} diff --git a/docs/layouts.md b/docs/layouts.md index 1a2c7bce..2708d159 100644 --- a/docs/layouts.md +++ b/docs/layouts.md @@ -11,6 +11,50 @@ description: The plugin offers a number of layouts to match the type of content {% endfor %} +## Common front matter options + +Layouts can accept the following [front matter data](https://www.11ty.dev/docs/data-frontmatter/) to customise the appearance, content and behaviour of a layout. + +| Name | Type | Description | +| :----------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------- | +| **layout** | string | Page layout. | +| **includeInBreadcrumbs** | boolean | Include page as the last item in any breadcrumbs. Default is `false`. | +| **order** | number | Ranking of page in navigation. Lower numbers appear before pages with a higher number. | +| **title** | string | Page title. | +| **description** | string | Page description. | +| **opengraphImage** | object | Open Graph image that appears on social media networks. | +| **opengraphImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. | +| **opengraphImage.alt** | string | Alternative text for Open Graph image. | +| **aside** | object | Small portion of content that is indirectly related to the main content. | +| **aside.title** | string | Title for aside. | +| **aside.content** | string | Content for aside. Accepts Markdown. | +| **related** | object | Related links. See [related](#options-for-related). | + +### Options for related + +With one section: + +| Name | Type | Description | +| :-------------------- | :----- | :---------------------------------------------------------------- | +| **title** | string | Title for group of related links. Default is `'Related content'`. | +| **items** | array | See [items](#options-for-items). | +| **subsections** | array | Title for sub-group of related links. | +| **subsections.title** | string | | +| **subsections.items** | array | See [items](#options-for-items). | + +With multiple sections: + +| Name | Type | Description | +| :----------- | :---- | :--------------------------------- | +| **sections** | array | See [items](#options-for-related). | + +### Options for items + +| Name | Type | Description | +| :------- | :----- | :---------------------------- | +| **text** | string | Title of related content. | +| **href** | string | Link for the related content. | + ## Overriding layouts Layouts are registered with Eleventy by setting the `dir.layouts` key to point to the layout files installed in the package directory: diff --git a/docs/layouts/collection.md b/docs/layouts/collection.md index f658a3ff..fa270b0f 100644 --- a/docs/layouts/collection.md +++ b/docs/layouts/collection.md @@ -1,115 +1,25 @@ --- -layout: collection order: 4 title: Collection description: Layout for a paginated list of pages. -paginationHeading: Example collection -pagination: - data: example - size: 2 -example: - - url: "#" - data: - date: 2021-09-08 - title: Design changes after research round three - description: Here are the changes we made after our third round of user research. - - url: "#" - data: - date: 2021-08-27 - title: Helping users better find our service - description: Reviewing the user onboarding journey. - - url: "#" - data: - date: 2021-08-17 - title: Design changes after our second research session - description: Updating our start page after further user research. - - url: "#" - data: - date: 2021-08-08 - title: Getting to know our users better - description: What we learnt from our first round of user research. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ --- -Use front matter options to customise the appearance, content and behaviour of this layout. +> View an example page that uses this layout (opens in a new tab) -For example, this page has the following options: +To use this layout, make `collection` the value for a page’s `layout` key: ```yaml +--- layout: collection -order: 4 -title: Collection -description: Layout for a paginated list of pages. -paginationHeading: Example collection -pagination: - data: example - size: 2 -example: - - url: "#" - data: - date: 2021-09-08 - title: Design changes after research round three - description: Here are the changes we made after our third round of user research. - - url: "#" - data: - date: 2021-08-27 - title: Helping users better find our service - description: Reviewing the user onboarding journey. - - url: "#" - data: - date: 2021-08-17 - title: Design changes after our second research session - description: Updating our start page after further user research. - - url: "#" - data: - date: 2021-08-08 - title: Getting to know our users better - description: What we learnt from our first round of user research. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ -``` +title: Page title +--- -{% from "govuk/components/details/macro.njk" import govukDetails %} -{% set detailsText %}{% include "../includes/front-matter-options.md" %}{% endset %} -{{ govukDetails({ - summaryText: "Common front matter options", - html: detailsText -}) }} +Page content +``` -In addition to the common front matter options, this layout also accepts the following options: +In addition to [common front matter options](/layouts#common-front-matter-options), this layout accepts the following options: | Name | Type | Description | | :-------------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **paginationHeading** | string | Heading for the list of paginated pages. | | **pagination** | object | **Required.** Pages to show in the paginated list. Learn more about [pagination](https://www.11ty.dev/docs/pagination/) in the documentation for Eleventy. | +| **paginationHeading** | string | Heading for the list of paginated pages. | diff --git a/docs/layouts/layouts.11tydata.js b/docs/layouts/layouts.11tydata.js index fbaceb38..252145ed 100644 --- a/docs/layouts/layouts.11tydata.js +++ b/docs/layouts/layouts.11tydata.js @@ -1,9 +1,6 @@ module.exports = { - eleventyComputed: { - viewSource: (data) => - `https://github.com/x-govuk/govuk-eleventy-plugin/blob/main/docs${data.page.filePathStem}.md?plain=1` - }, eleventyNavigation: { parent: 'Layouts' - } + }, + layout: 'sub-navigation' } diff --git a/docs/layouts/page.md b/docs/layouts/page.md index b9cdc282..1decfc79 100644 --- a/docs/layouts/page.md +++ b/docs/layouts/page.md @@ -1,58 +1,20 @@ --- -layout: page order: 1 title: Page description: Simple layout designed for maximum flexibility of content. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ --- -Use front matter options to customise the appearance, content and behaviour of this layout. +> View an example page that uses this layout (opens in a new tab) -For example, this page has the following options: +To use this layout, make `page` the value for a page’s `layout` key: ```yaml +--- layout: page -order: 1 -title: Page -description: Simple layout designed for maximum flexibility of content. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ +title: Page title +--- + +Page content ``` -{% from "govuk/components/details/macro.njk" import govukDetails %} -{% set detailsText %}{% include "../includes/front-matter-options.md" %}{% endset %} -{{ govukDetails({ - summaryText: "Common front matter options", - html: detailsText -}) }} +Use [common front matter options](/layouts#common-front-matter-options) to customise which items and content appear within a page. diff --git a/docs/layouts/post.md b/docs/layouts/post.md index ab938641..a53aeb6b 100644 --- a/docs/layouts/post.md +++ b/docs/layouts/post.md @@ -1,90 +1,23 @@ --- -layout: post order: 3 title: Post description: Layout for date-based content, such as blog posts or news items. -date: 2011-12-21 -modified: 2012-12-22 -image: - src: /assets/images/govuk-opengraph-image.png - alt: A crown icon above the words GOV.UK. - caption: The GOV.UK logo - opengraphImage: true -authors: - - name: William Ewart Gladstone - url: https://www.gov.uk/government/history/past-prime-ministers/william-ewart-gladstone - - name: Benjamin Disraeli - url: https://www.gov.uk/government/history/past-prime-ministers/benjamin-disraeli-the-earl-of-beaconsfield -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ -tags: - - example tag --- -Use front matter options to customise the appearance, content and behaviour of this layout. +> View an example page that uses this layout (opens in a new tab) -For example, this page has the following options: +To use this layout, make `post` the value for a page’s `layout` key: ```yaml +--- layout: post -order: 3 -title: Post -description: Layout for date-based content, such as blog posts or news items. -date: 2011-12-21 -modified: 2012-12-22 -image: - src: /assets/images/govuk-opengraph-image.png - alt: A crown icon above the words GOV.UK. - caption: The GOV.UK logo -authors: - - name: William Ewart Gladstone - url: https://www.gov.uk/government/history/past-prime-ministers/william-ewart-gladstone - - name: Benjamin Disraeli - url: https://www.gov.uk/government/history/past-prime-ministers/benjamin-disraeli-the-earl-of-beaconsfield -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ -tags: - - example tag -``` +title: Page title +--- -{% from "govuk/components/details/macro.njk" import govukDetails %} -{% set detailsText %}{% include "../includes/front-matter-options.md" %}{% endset %} -{{ govukDetails({ - summaryText: "Common front matter options", - html: detailsText -}) }} +Page content +``` -In addition to the common front matter options, this layout also accepts the following options: +In addition to [common front matter options](/layouts#common-front-matter-options), this layout accepts the following options: | Name | Type | Description | | :----------------------- | :------------------------- | :------------------------------------------------------------------------------------------- | diff --git a/docs/layouts/product.md b/docs/layouts/product.md index f400de1d..0bd33336 100644 --- a/docs/layouts/product.md +++ b/docs/layouts/product.md @@ -1,77 +1,25 @@ --- -layout: product order: 5 title: Product page -description: Layout for a product or marketing page based on the [Product Page Example](https://github.com/alphagov/product-page-example). -startButton: - href: "#" - text: Start button -image: - src: /assets/homepage-illustration.png - alt: The Eleventy mascot floating above a laptop. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ +description: Layout for product and marketing pages. --- -Use front matter options to customise the appearance, content and behaviour of this layout. +> View an example page that uses this layout (opens in a new tab) + +This layout, based on the component used on [GOV.UK product pages](https://github.com/alphagov/product-page-example), can be useful if you need a product or marketing page. -For example, this page has the following options: +To use this layout, make `product` the value for a page’s `layout` key: ```yaml +--- layout: product -order: 5 -title: Product page -description: Layout for a product or marketing page based on the [Product Page Example](https://github.com/alphagov/product-page-example). -startButton: - href: "#" - text: Start button -image: - src: /assets/homepage-illustration.png - alt: Eleventy’s possum mascot hanging on a red balloon and floating above a laptop. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ -``` - -{% from "govuk/components/details/macro.njk" import govukDetails %} -{% set detailsText %}{% include "../includes/front-matter-options.md" %}{% endset %} -{{ govukDetails({ - summaryText: "Common front matter options", - html: detailsText -}) }} +title: Page title +--- -### Additional front matter options +Page content +``` -In addition to the common front matter options, this layout also has the following options: +In addition to [common front matter options](/layouts#common-front-matter-options), this layout also accepts the following options: | Name | Type | Description | | :------------------- | :----- | :------------------------------------------------------------------------------ | diff --git a/docs/layouts/sub-navigation.md b/docs/layouts/sub-navigation.md index 66a2b693..4b6a930a 100644 --- a/docs/layouts/sub-navigation.md +++ b/docs/layouts/sub-navigation.md @@ -1,60 +1,22 @@ --- -layout: sub-navigation order: 2 title: Page with sub navigation description: Layout with sub navigation. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ --- -The `sub-navigation` layout offers a page with sub navigation, appearing to the left of content on wider viewports, and above on narrower ones. +> View an example page that uses this layout (opens in a new tab) -Use front matter options to customise the appearance, content and behaviour of this layout. +This layout offers a page with sub navigation, appearing to the left of content on wider viewports, and above on narrower ones. -For example, this page has the following options: +To use this layout, make `sub-navigation` the value for a page’s `layout` key: ```yaml +--- layout: sub-navigation -order: 2 -title: Page with sub navigation -description: Layout with sub navigation. -aside: - title: Aside - content: | - A small portion of content that is **indirectly** related to the main content. -related: - sections: - - title: Related links - items: - - text: Layouts - href: ../../layouts - - text: Options - href: ../../options - subsections: - - title: Eleventy documentation - items: - - text: Front matter data - href: https://www.11ty.dev/docs/data-frontmatter/ +title: Page title +--- + +Page content ``` -{% from "govuk/components/details/macro.njk" import govukDetails %} -{% set detailsText %}{% include "../includes/front-matter-options.md" %}{% endset %} -{{ govukDetails({ - summaryText: "Common front matter options", - html: detailsText -}) }} +Use [common front matter options](/layouts#common-front-matter-options) to customise which items and content appear within a page. diff --git a/layouts/base.njk b/layouts/base.njk index 9b7e73ea..bc33739f 100644 --- a/layouts/base.njk +++ b/layouts/base.njk @@ -43,6 +43,16 @@ {% for stylesheet in options.stylesheets %} {% endfor %} + {% if options.url %}{% endif %} diff --git a/layouts/post.njk b/layouts/post.njk index 883d0771..df5f29b4 100644 --- a/layouts/post.njk +++ b/layouts/post.njk @@ -26,7 +26,7 @@
{{ image.alt }} {% if image.caption -%} -
{{ image.caption }}
+
{{ image.caption | markdown }}
{% endif -%}
{%- endif %}