Merge pull request #2454 from ONSdigital/cleanup/remove-website

Remove website generation

.github/workflows/tests.yml

@@ -19,9 +19,6 @@ jobs:
         run: yarn install
       - name: Run macro and script tests
         run: yarn test
-      - name: Run visual regression tests
-        if: "contains(github.event.head_commit.message, 'test-visual')"
-        run: yarn test-visual
       - name: Create Slack notification
         if: always()
         uses: edge/simple-slack-notify@master

README.md

@@ -43,65 +43,6 @@ yarn start
 
 Once the server has started, navigate to <http://localhost:3030>
 
-## Mixed Markdown/Nunjucks syntax in .njk pages
-
-The design system documentation is authored with files that contain a mix of Markdown and Nunjucks syntax. These files begin with frontmatter and then contain Markdown syntax; for example:
-
-```markdown
----
-title: Foo
----
-
-## Some section
-
-A simple paragraph of _markdown_.
-```
-
-Simple Nunjucks placeholders/variables can be added into these files without any special syntax; for example:
-
-```markdown
-A paragraph of _markdown_ with some template value {{ foo.bar }}.
-
-{{
-    patternlibExample({"path": "components/foo/examples/foo/index.njk"})
-}}
-```
-
-For the most part no special syntax is needed when mixing Nunjucks templating into the markdown syntax. If syntax contains nested character sequence `}}` then it must be wrapped within `+++` fences. The `{% ... %}` syntax must also be wrapped within `+++` fences. This applies for things like imports, calling macros, defining blocks, etc:
-
-```markdown
-+++
-{% from "views/partials/example/_macro.njk" import patternlibExample %}
-{% from "components/external-link/_macro.njk" import onsExternalLink %}
-+++
-```
-
-As a rule of thumb; code highlight blocks should always be wrapped with `+++` fences:
-
-```markdown
-+++
-{% from "components/code-highlight/_macro.njk" import onsCodeHighlight %}
-{{ onsCodeHighlight({
-"code": '[
-  {
-    "en": "England"
-  },
-  {
-    "en": "Wales"
-  },
-  {
-    "en": "Scotland"
-  },
-  {
-    "en": "Northern Ireland"
-  },
-]'
-}) }}
-+++
-```
-
-Mixed markdown files are easier to maintain when each section that is fenced with `+++` is a standalone unit. For example, each code example should have it's own `+++` fence even if they immediately follow one another. This is because content can be edited around these fenced units.
-
 ## Testing
 
 This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.
@@ -158,10 +99,6 @@ It is sometimes useful to adjust the following settings when writing tests or di
 
 - `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
 
-## Run visual regression tests
-
-To run visual regression (VR) tests on pull requests using our VR testing tool [percy.io](https://percy.io) you must include `[test-visual]` in your commit message e.g. `git commit -m "Update button border width [test-visual]"`. This prevents unnecessary builds and saves the limited quota we have available.
-
 ## Build
 
 Generate a build into `./build`.

__snapshots__/layout/_template.spec.js.snap

@@ -49,13 +49,9 @@ exports[`base page template matches the body block override snapshot 1`] = `
         
         Content
 
-        
-            
-        
-
         <script>
             (function() {
-                var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
+                var s = [ '/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {
@@ -286,13 +282,9 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
             
         
 
-        
-            
-        
-
         <script>
             (function() {
-                var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
+                var s = [ '/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {
@@ -529,13 +521,9 @@ exports[`base page template matches the footer block override snapshot 1`] = `
             
         
 
-        
-            
-        
-
         <script>
             (function() {
-                var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
+                var s = [ '/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {
@@ -1720,13 +1708,9 @@ exports[`base page template matches the full configuration snapshot 1`] = `
             Some bodyEnd content
         
 
-        
-            
-        
-
         <script>
             (function() {
-                var s = '/some-path/scripts/main.js,/some-path/scripts/patternlib.js'.split(','),
+                var s = [ '/some-path/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {
@@ -1963,13 +1947,9 @@ exports[`base page template matches the meta block override snapshot 1`] = `
             
         
 
-        
-            
-        
-
         <script>
             (function() {
-                var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
+                var s = [ '/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {
@@ -2192,13 +2172,9 @@ exports[`base page template matches the social block override snapshot 1`] = `
             
         
 
-        
-            
-        
-
         <script>
             (function() {
-                var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
+                var s = [ '/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {

gulpfile.js

@@ -13,9 +13,8 @@ require('@babel/register');
 
 const babelEsmConfig = require('./babel.conf.esm');
 const babelNomoduleConfig = require('./babel.conf.nomodule');
-const nunjucksRendererPipe = require('./lib/rendering/nunjucks-renderer-pipe.js').default;
-const searchIndexPipe = require('./lib/rendering/search-index-pipe.js').default;
 const postCssPlugins = require('./postcss.config').default;
+const generateStaticPages = require('./lib/generate-static-pages').default;
 
 const isProduction = process.env.NODE_ENV === 'production';
 const isDevelopment = !isProduction;
@@ -27,7 +26,7 @@ const terserOptions = {
 };
 
 const sassOptions = {
-  includePaths: ['./node_modules/normalize.css', './node_modules/prismjs/themes'],
+  includePaths: ['./node_modules/normalize.css'],
   outputStyle: 'compressed',
 };
 
@@ -42,16 +41,6 @@ const scripts = [
     outputFile: 'main.es5.js',
     config: babelNomoduleConfig,
   },
-  {
-    entryPoint: './src/js/patternlib/index.js',
-    outputFile: 'patternlib.js',
-    config: babelEsmConfig,
-  },
-  {
-    entryPoint: './src/js/patternlib/index.js',
-    outputFile: 'patternlib.es5.js',
-    config: babelNomoduleConfig,
-  },
 ];
 
 gulp.task('clean', () => {
@@ -88,20 +77,6 @@ gulp.task('build-styles', () => {
     .pipe(browserSync.stream());
 });
 
-gulp.task('build-pages', () => {
-  return gulp
-    .src(['./src/**/*.njk', '!**/_*/**'])
-    .pipe(nunjucksRendererPipe)
-    .pipe(gulp.dest('./build'));
-});
-
-gulp.task('build-search-index', () => {
-  return gulp
-    .src('./src/search-index.json')
-    .pipe(searchIndexPipe)
-    .pipe(gulp.dest('./build'));
-});
-
 gulp.task('copy-static-files', () => {
   return gulp.src('./src/static/**/*').pipe(gulp.dest('./build'));
 });
@@ -110,6 +85,10 @@ gulp.task('copy-js-files', () => {
   return gulp.src('./src/js/*.js').pipe(gulp.dest('./build/js'));
 });
 
+gulp.task('generate-pages', async function() {
+  await generateStaticPages();
+});
+
 gulp.task('watch-and-build', async () => {
   browserSync.init({
     proxy: 'localhost:3010',
@@ -124,10 +103,10 @@ gulp.task('start-dev-server', async () => {
   await import('./lib/dev-server.js');
 });
 
-gulp.task('build-assets', gulp.series('build-script', 'build-styles', 'build-search-index'));
-gulp.task('build-assets-for-testing', gulp.series('build-script', 'build-styles'));
+gulp.task('build-assets', gulp.series('build-script', 'build-styles'));
 
 gulp.task('start', gulp.series('build-assets', 'watch-and-build', 'start-dev-server'));
 gulp.task('watch', gulp.series('watch-and-build', 'start-dev-server'));
-gulp.task('build', gulp.series('copy-static-files', 'build-assets', 'build-pages'));
+gulp.task('build', gulp.series('copy-static-files', 'build-assets', 'generate-pages'));
+gulp.task('generate', gulp.series('generate-pages'));
 gulp.task('build-package', gulp.series('copy-static-files', 'copy-js-files', 'build-assets'));

lib/config.indexPage.js

@@ -0,0 +1,9 @@
+export const pages = [
+  { title: 'Components', uri: '/components' },
+  { title: 'Patterns', uri: '/patterns' },
+  { title: 'Foundations', uri: '/foundations' },
+];
+
+export const pagesWithIndex = pages.map(page => ({ ...page, uri: `${page.uri}/index.html` }));
+
+export const title = 'ONS Design System';

lib/rendering/create-nunjucks-environment.js → lib/create-nunjucks-environment.js

@@ -4,15 +4,13 @@ import setAttribute from './filters/set-attribute.js';
 import setAttributes from './filters/set-attributes.js';
 
 export default function createNunjucksEnvironment(loader) {
-  const templatePaths = ['src', 'src/views'];
+  const templatePaths = ['src'];
   const nunjucksLoader = loader ?? new nunjucks.FileSystemLoader(templatePaths, { noCache: true });
 
   const nunjucksEnvironment = new nunjucks.Environment(nunjucksLoader);
 
   nunjucksEnvironment.addFilter('setAttribute', setAttribute);
   nunjucksEnvironment.addFilter('setAttributes', setAttributes);
 
-  nunjucksEnvironment.addGlobal('isPatternLib', true);
-
   return nunjucksEnvironment;
 }

lib/create-page-list.js

@@ -0,0 +1,36 @@
+import fs from 'fs';
+import path from 'path';
+import glob from 'glob';
+
+function buildEntries(templatePath, type) {
+  templatePath = path.resolve(templatePath);
+
+  return {
+    title: path.basename(templatePath, '.njk'),
+    uri: templatePath.replace('.njk', '.html').substring(templatePath.indexOf(`/${type}`)),
+  };
+}
+
+export default async function createPageList(res, type = null, name = null) {
+  try {
+    let pages = [];
+    if (type && name) {
+      if (!fs.existsSync(`./src/${type}/${name}`)) {
+        return res.status(404).send({ error: `${type} not found` });
+      }
+      pages = glob.sync(`./src/${type}/${name}/example-*.njk`).map(templatePath => buildEntries(templatePath, type));
+    } else if (type) {
+      const hasExample = glob.sync(`./src/${type}/**/*example-*`);
+      const templatePath = Array.from(new Set(hasExample.map(filePath => path.dirname(filePath))));
+
+      if (templatePath.length) {
+        pages = templatePath.map(folderPath => buildEntries(folderPath, type));
+      }
+    }
+
+    return pages;
+  } catch (err) {
+    console.error(err);
+    return res.status(500).send({ error: 'An error occurred while building the page list' });
+  }
+}