AFP-241: Refactor page templates

* AFP-241: WIP Refactor page templates

* AFP-421: Extract all template strings into separate modules. Move page title logic into template components.

* AFP-421: Tidy up tests

* Fix gitignore for cypress plugins

* Add changeset

* Smol fixes

Author: dpisani-atl

.changeset/e47ad29f/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "patch" }],
+  "dependents": []
+}

.changeset/e47ad29f/changes.md

@@ -0,0 +1 @@
+- Refactor of how pages are generated. This should have no visible side effects.

.gitignore

@@ -10,7 +10,8 @@ node_modules
 package-lock.json
 yarn-error.log
 
-cypress
+/cypress
+**/cypress/screenshots
 
 /packages/website/pages/packages
 /packages/website/pages/docs
@@ -20,4 +21,4 @@ cypress
 /packages/**/bundles/**/*.js
 /packages/**/dist
 
-out
+out

packages/website/bin/page-generator/index.js

@@ -12,7 +12,7 @@ const {
   generateDocsHomePage,
   generateExamplesHomePage,
   generateProjectDocPage,
-} = require('./templates');
+} = require('./write-pages');
 
 const packagesData = [];
 

packages/website/bin/page-generator/templates/changelog/index.js

@@ -0,0 +1,24 @@
+const outdent = require('outdent');
+
+/**
+ * changelogTemplate - template for generating a changelog page
+ *
+ * @param {string} changelogPath relative path to the changelog file
+ * @param {string} wrapperPath   relative path to the page template component
+ * @param {object} [data={}]     extra data needed by the page
+ *
+ * @returns {string} source code for the page
+ */
+const changelogTemplate = (changelogPath, wrapperPath, data = {}) => outdent`
+  import React from 'react';
+  import changelog from '!!raw-loader!${changelogPath}';
+  import Wrapper from '${wrapperPath}';
+
+  export default () => (
+    <Wrapper data={${JSON.stringify(data)}}>
+        {changelog}
+    </Wrapper>
+  );
+`;
+
+module.exports = changelogTemplate;

packages/website/bin/page-generator/templates/changelog/test.js

@@ -0,0 +1,10 @@
+import assertValidTemplate from '../test-utils';
+import changelogTemplate from './index';
+
+describe('changelog page templates', () => {
+  it('creates valid source code for a page', () => {
+    const source = changelogTemplate('./component/path', './wrapper/path');
+
+    assertValidTemplate(source);
+  });
+});

packages/website/bin/page-generator/templates/example/index.js

@@ -0,0 +1,27 @@
+const outdent = require('outdent');
+
+/**
+ * exampleTemplate - template for an example page where the source code
+ * for the wrapped component is also passed to the wrapper
+ *
+ * @param {string} componentPath absolute path to the example
+ * @param {string} wrapperPath   absolute path to the page wrapper
+ * @param {object} [data={}]     extra data needed for the page
+ *
+ * @returns {string} source code for the page
+ */
+const exampleTemplate = (componentPath, wrapperPath, data = {}) => outdent`
+    import React from 'react';
+    import Component from '${componentPath}';
+    import fileContents from '!!raw-loader!${componentPath}';
+
+    import Wrapper from '${wrapperPath}';
+
+    export default () => (
+      <Wrapper data={${JSON.stringify(data)}} fileContents={fileContents}>
+          <Component />
+      </Wrapper>
+    );
+`;
+
+module.exports = exampleTemplate;

packages/website/bin/page-generator/templates/example/test.js

@@ -0,0 +1,10 @@
+import assertValidTemplate from '../test-utils';
+import exampleTemplate from './index';
+
+describe('example page template', () => {
+  it('creates valid source code for a page', () => {
+    const source = exampleTemplate('./component/path', './wrapper/path');
+
+    assertValidTemplate(source);
+  });
+});