Merge pull request #7 from nhsuk/eleventy

Docs restructuring
nhsuk · Apr 18, 2024 · 101c9c5 · 101c9c5
2 parents 29a07b5 + fb11887
commit 101c9c5
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 39 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -6,7 +6,7 @@ const nunjucksEnv = nunjucks.configure([
   'src/components',
 
   // Includes specific to our documentation
-  'docs/_templates/',
+  'docs/_includes',
 
   // NHS.UK frontend components
   'node_modules/nhsuk-frontend/packages/components'
@@ -24,6 +24,7 @@ export default function (eleventyConfig) {
 
   // Watch for changes in these directories and files
   eleventyConfig.addWatchTarget('./docs/')
+  eleventyConfig.addWatchTarget('./src/')
   eleventyConfig.addWatchTarget('./dist/nhsapp.css')
 
   // We need this HtmlBase plugin for serving our docs on github pages at a subdirectory
@@ -32,8 +33,9 @@ export default function (eleventyConfig) {
 
   return {
     dir: {
-      input: 'docs/views',
+      input: 'docs',
       output: 'dist/docs'
-    }
+    },
+    markdownTemplateEngine: 'njk'
   }
 }
diff --git a/docs/_templates/layout.njk → docs/_includes/layouts/base.njk b/docs/_templates/layout.njk → docs/_includes/layouts/base.njk
@@ -3,14 +3,16 @@
 {%- from 'skip-link/macro.njk' import skipLink -%}
 
 <!DOCTYPE html>
-<html lang="en" class="govuk-template no-js">
+<html lang="en">
   <head>
     <meta content="IE=edge" http-equiv="X-UA-Compatible">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
     <link href="/assets/nhsuk.css" rel="stylesheet" />
     <link href="/assets/nhsapp.css" rel="stylesheet" />
+
+    <title>{{ title }}</title>
   </head>
   <body>
     {% block header %}

diff --git a/docs/_includes/layouts/plain.njk b/docs/_includes/layouts/plain.njk
@@ -0,0 +1,7 @@
+{% extends "./base.njk" %}
+
+{% block content %}
+  <h1>{{ title }}</h1>
+
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/examples/cards.md b/docs/examples/cards.md
@@ -0,0 +1,19 @@
+---
+layout: layouts/plain.njk
+title: Cards
+---
+
+{% from "card/macro.njk" import card %}
+
+<h2>Card Link</h2>
+{{ card({
+  title: 'Title',
+  href: '#'
+}) }}
+
+<h2>Card Link with text</h2>
+{{ card({
+  title: 'Title',
+  href: '#',
+  description: 'Supporting text'
+}) }}
diff --git a/docs/examples/index.md b/docs/examples/index.md
@@ -0,0 +1,11 @@
+---
+layout: layouts/plain.njk
+title: Examples
+---
+
+{% from "card/macro.njk" import card %}
+
+{{ card({
+    title: "Cards",
+    href: "./cards"
+}) }}
diff --git a/docs/views/index.njk → docs/index.njk b/docs/views/index.njk → docs/index.njk
@@ -1,4 +1,6 @@
-{% extends "layout.njk" %}
+{% extends "layouts/base.njk" %}
+
+{% set title = "NHS App frontend" %}
 
 {%- from 'hero/macro.njk' import hero -%}
 {%- from 'card/macro.njk' import card -%}

diff --git a/docs/views/examples/cards.njk b/docs/views/examples/cards.njk
diff --git a/docs/views/examples/index.njk b/docs/views/examples/index.njk
diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -4,11 +4,11 @@
       <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state">
         {{ params.title }}
       </a>
-      {% if params.description %}
+      {%- if params.description -%}
         <div class="nhsapp-card__below">
           <p>{{ params.description }}</p>
         </div>
-      {% endif %}
+      {%- endif -%}
     </div>
     <svg class="nhsapp-icon app-icon--chevron" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
       <path d="M8.82264 19.11C8.56264 19.11 8.29264 19.01 8.10264 18.8C7.72264 18.4 7.73264 17.77 8.13264 17.39L13.7426 12.01L8.14264 6.75999C7.74264 6.37999 7.72264 5.74999 8.09264 5.34999C8.47264 4.94999 9.10264 4.92999 9.50264 5.29999L15.8726 11.27C16.0726 11.46 16.1826 11.72 16.1926 11.99C16.2026 12.26 16.0826 12.53 15.8826 12.72L9.51264 18.83C9.32264 19.02 9.07264 19.11 8.82264 19.11Z"></path>