Merge pull request #3 from nhsuk/eleventy

Render documentation with eleventy instead of gulp
nhsuk · Apr 17, 2024 · 29a07b5 · 29a07b5
2 parents 8ce36fe + 5c8c677
commit 29a07b5
Show file tree

Hide file tree

Showing 7 changed files with 1,632 additions and 140 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,39 @@
+import nunjucks from 'nunjucks'
+import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
+
+const nunjucksEnv = nunjucks.configure([
+  // Our own components which we will ship in the release
+  'src/components',
+
+  // Includes specific to our documentation
+  'docs/_templates/',
+
+  // NHS.UK frontend components
+  'node_modules/nhsuk-frontend/packages/components'
+])
+
+export default function (eleventyConfig) {
+  // Configure a custom nunjucks environment
+  eleventyConfig.setLibrary('njk', nunjucksEnv)
+
+  // Copy static files
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/nhsuk-frontend/dist/nhsuk.css': 'assets/nhsuk.css',
+    'dist/nhsapp.css': 'assets/nhsapp.css'
+  })
+
+  // Watch for changes in these directories and files
+  eleventyConfig.addWatchTarget('./docs/')
+  eleventyConfig.addWatchTarget('./dist/nhsapp.css')
+
+  // We need this HtmlBase plugin for serving our docs on github pages at a subdirectory
+  // https://www.11ty.dev/docs/plugins/html-base/
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
+
+  return {
+    dir: {
+      input: 'docs/views',
+      output: 'dist/docs'
+    }
+  }
+}
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
@@ -14,7 +14,7 @@ jobs:
         with:
           node-version: '20'
       - run: npm ci
-      - run: BASE_URL="/nhsapp-frontend/" npm run build:docs
+      - run: npm run build:docs --pathprefix="nhsapp-frontend"
       - uses: actions/upload-pages-artifact@v3
         with:
           path: 'dist/docs'

diff --git a/docs/_templates/layout.njk b/docs/_templates/layout.njk
@@ -9,8 +9,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
-    <link href="{{baseUrl}}assets/nhsuk.css" rel="stylesheet" />
-    <link href="{{baseUrl}}assets/nhsapp.css" rel="stylesheet" />
+    <link href="/assets/nhsuk.css" rel="stylesheet" />
+    <link href="/assets/nhsapp.css" rel="stylesheet" />
   </head>
   <body>
     {% block header %}

diff --git a/gulpfile.mjs → gulpfile.js b/gulpfile.mjs → gulpfile.js
@@ -6,9 +6,6 @@ import rename from 'gulp-rename'
 import cleanCSS from 'gulp-clean-css'
 import packageJson from './package.json' with { type: 'json' }
 
-/* Import gulp tasks used for creating our website pages. */
-import * as docs from './tasks/docs.mjs'
-
 /* Configure the sass compiler */
 const sass = gulpSass(dartSass)
 
@@ -30,7 +27,7 @@ function compileCSS() {
 }
 
 /* Minify CSS and add a min.css suffix */
-export function minifyCSS() {
+function minifyCSS() {
   return gulp
     .src([
       'dist/*.css',
@@ -59,20 +56,15 @@ function copyNunjucks() {
   return gulp.src('src/**/*.njk').pipe(gulp.dest('dist/nhsapp'))
 }
 
-/* Recompile CSS and docs when there are any changes */
+/* Recompile CSS when there are any changes */
 function watch() {
-  gulp.watch(['src/**/*', 'docs/**/*'], gulp.series([compileCSS, docs.build]))
+  gulp.watch(['src/**/*'], compileCSS)
 }
 
 /**
- * The default task is to build everything, serve the docs and watch for changes
+ * The default task is to build everything, and watch for changes
  */
-export default gulp.series([
-  clean,
-  compileCSS,
-  docs.build,
-  gulp.parallel([docs.serve, watch])
-])
+export default gulp.series([clean, compileCSS, watch])
 
 const bundle = gulp.series([
   clean,
@@ -82,6 +74,4 @@ const bundle = gulp.series([
   copyNunjucks
 ])
 
-const buildDocs = gulp.series([compileCSS, docs.build])
-
-export { clean, bundle, buildDocs }
+export { clean, bundle }