@bbc/morty-docs 1.10.0 → 1.11.2

package/README.md

@@ -43,7 +43,7 @@ Morty Docs will generate a website listing an HTML page for each markdown file i
 
 To try it with markdown files from a custom directory
 ```bash
-npm start /absolute/path/to/custom/directory
+mortyPath=/absolute/path/to/custom/directory npm start
 ```
 
 ## Use as a library

package/build/generate-indexes.js

@@ -12,14 +12,14 @@ const generateIndex = (directory, filePaths, subDirPaths, options) => {
   const subDirLinks = subDirPaths.filter(dirPath => !dirPath.includes('/')).map(dirPath => ({
     link: `${dirPath}/index.html`,
     text: dirPath,
-    iconClass: 'fas fa-folder-open'
+    iconName: 'folder'
   }));
   const fileLinks = filePaths.map(filePath => {
     const text = path.basename(filePath);
     return {
       link: encodeURIComponent(text),
       text,
-      iconClass: 'fas fa-file-alt'
+      iconName: 'file'
     };
   });
   return renderIndexPage([...subDirLinks, ...fileLinks], options, directory);

package/build/page-renderers/Components/Footer.js

@@ -1,38 +1,33 @@
 const React = require('react');
 
+const {
+  prettyDate
+} = require('./PrettyDate');
+
 const Styles = {
   footer: {
     bottom: '0',
     width: '100%',
     backgroundColor: '#f5f5f5',
-    padding: '0 15px',
     boxSizing: 'border-box',
     minHeight: '25vh',
-    position: 'relative'
-  },
-  footerContainer: {
-    padding: '1em 0 2em 0'
+    position: 'relative',
+    textAlign: 'center',
+    padding: '1em 0 2em 0',
+    lineHeight: '1.5rem'
   },
-  footerContent: {
-    textAlign: 'center'
+  footerLink: {
+    color: '#337ab7'
   }
 };
 
 const Footer = () => {
   return React.createElement("footer", {
-    style: Styles.footer,
-    className: "footer"
-  }, React.createElement("div", {
-    style: Styles.footerContainer,
-    className: "container"
-  }, React.createElement("div", {
-    className: "row"
-  }, React.createElement("div", {
-    style: Styles.footerContent,
-    className: "col-md-4 col-md-offset-4"
-  }, React.createElement("p", null, React.createElement("a", {
-    href: "https://github.com/bbc/morty-docs"
-  }, "Morty-Docs on github"), ".")))));
+    style: Styles.footer
+  }, React.createElement("a", {
+    href: "https://github.com/bbc/morty-docs",
+    style: Styles.footerLink
+  }, "Morty-Docs on github"), React.createElement("br", null), "Page generated on ", prettyDate(new Date()));
 };
 
 module.exports = Footer;

package/build/page-renderers/Components/Header.js

@@ -7,23 +7,21 @@ const Styles = {
     border: 'none',
     borderRadius: '0',
     backgroundColor: '#000',
-    height: '60px',
     marginBottom: '0',
-    width: '100%',
-    padding: '1.142rem'
+    width: '100%'
   },
   headerNav: {},
   headerLinks: {
-    padding: '0',
+    padding: '1rem',
     listStyle: 'none',
     display: 'flex',
-    height: '100%',
     alignItems: 'center'
   },
   headerLink: {
     textAlign: 'left',
     color: 'lightblue',
-    fontSize: '2rem'
+    fontSize: '1.5rem',
+    textDecoration: 'none'
   },
   separator: {
     margin: '0 0.28rem',
@@ -51,15 +49,16 @@ const HeaderLinks = ({
 const Header = ({
   relPath,
   basePath
-}) => React.createElement("div", {
-  className: "container",
-  style: Styles.navbar
-}, React.createElement("nav", {
-  style: Styles.headerNav
-}, React.createElement("ol", {
-  style: Styles.headerLinks
-}, React.createElement(HeaderLinks, {
-  paths: getHeaderPaths(basePath, relPath)
-}))));
+}) => {
+  return React.createElement("div", {
+    style: Styles.navbar
+  }, React.createElement("nav", {
+    style: Styles.headerNav
+  }, React.createElement("ol", {
+    style: Styles.headerLinks
+  }, React.createElement(HeaderLinks, {
+    paths: getHeaderPaths(basePath, relPath)
+  }))));
+};
 
 module.exports = Header;

package/build/page-renderers/Components/IndexListItem.js

@@ -1,29 +1,63 @@
 const React = require('react');
 
+const IconFileLines = require('./icons/IconFileLines');
+
+const IconFolderOpen = require('./icons/IconFolderOpen');
+
 const Styles = {
   indexListItem: {
-    fontSize: '1.6em',
+    fontSize: '1.5rem',
     borderBottom: 'solid black 1px',
-    marginBottom: '10px'
+    marginBottom: '1rem',
+    paddingBottom: '0.5rem'
   },
   linkText: {
-    marginLeft: '5px'
+    marginLeft: '1rem'
+  },
+  linkAnchor: {
+    textDecoration: 'none',
+    color: '#337ab7'
+  },
+  icon: {
+    fill: '#337ab7',
+    height: '1em',
+    verticalAlign: 'middle'
+  },
+  iconWrap: {
+    display: 'inline-block',
+    width: '1em'
   }
 };
 
+const Icon = ({
+  iconName
+}) => {
+  if (iconName === 'folder') {
+    return React.createElement(IconFolderOpen, {
+      style: Styles.icon
+    });
+  }
+
+  return React.createElement(IconFileLines, {
+    style: Styles.icon
+  });
+};
+
 const IndexListItem = ({
   link,
   text,
-  iconClass
+  iconName
 }) => {
   return React.createElement("li", {
-    className: "index-list",
     style: Styles.indexListItem
   }, React.createElement("a", {
-    href: link
-  }, React.createElement("i", {
-    className: iconClass
-  }), React.createElement("span", {
+    href: link,
+    style: Styles.linkAnchor
+  }, React.createElement("span", {
+    style: Styles.iconWrap
+  }, React.createElement(Icon, {
+    iconName: iconName
+  })), React.createElement("span", {
     style: Styles.linkText
   }, text)));
 };

package/build/page-renderers/Components/PrettyDate.js

@@ -0,0 +1,31 @@
+const React = require('react');
+
+const nth = function (d) {
+  if (d > 3 && d < 21) return 'th';
+
+  switch (d % 10) {
+    case 1:
+      return 'st';
+
+    case 2:
+      return 'nd';
+
+    case 3:
+      return 'rd';
+
+    default:
+      return 'th';
+  }
+};
+
+const month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+const prettyDate = dateObj => {
+  const day = dateObj.getDate();
+  const year = dateObj.getFullYear();
+  return React.createElement(React.Fragment, null, day, React.createElement("sup", null, nth(day)), " ", month[dateObj.getMonth()], " ", year);
+};
+
+module.exports = {
+  prettyDate
+};

package/build/page-renderers/Components/Reset.js

@@ -0,0 +1,64 @@
+const React = require('react');
+
+const resetStyles = `/* http://meyerweb.com/eric/tools/css/reset/ 
+v2.0 | 20110126
+License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+sup {
+  vertical-align: super;
+  font-size: smaller;
+  padding-right: 0.2rem;
+}
+`;
+
+const Reset = () => React.createElement("style", {
+  dangerouslySetInnerHTML: {
+    __html: resetStyles
+  }
+});
+
+module.exports = Reset;

package/build/page-renderers/Components/Title.js

@@ -2,7 +2,8 @@ const React = require('react');
 
 const Styles = {
   heading: {
-    fontSize: '32px'
+    fontSize: '2rem',
+    fontWeight: '500'
   }
 };
 
@@ -11,10 +12,10 @@ const Title = ({
 }) => {
   if (contentTitle) {
     return React.createElement("div", {
-      className: "row col-md-6 col-md-offset-3",
       style: {
         textAlign: 'center',
-        marginBottom: '20px'
+        marginBottom: '20px',
+        marginTop: '32px'
       }
     }, React.createElement("h1", {
       style: Styles.heading

package/build/page-renderers/Components/icons/IconFileLines.js

@@ -0,0 +1,14 @@
+const React = require('react');
+
+const IconFileLines = ({
+  style
+}) => React.createElement("svg", {
+  "aria-hidden": "true",
+  style: style,
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 384 512"
+}, '<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->', React.createElement("path", {
+  d: "M256 0v128h128L256 0zM224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128zM272 416h-160C103.2 416 96 408.8 96 400C96 391.2 103.2 384 112 384h160c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 352h-160C103.2 352 96 344.8 96 336C96 327.2 103.2 320 112 320h160c8.836 0 16 7.162 16 16C288 344.8 280.8 352 272 352zM288 272C288 280.8 280.8 288 272 288h-160C103.2 288 96 280.8 96 272C96 263.2 103.2 256 112 256h160C280.8 256 288 263.2 288 272z"
+}));
+
+module.exports = IconFileLines;

package/build/page-renderers/Components/icons/IconFolderOpen.js

@@ -0,0 +1,14 @@
+const React = require('react');
+
+const IconFolderOpen = ({
+  style
+}) => React.createElement("svg", {
+  "aria-hidden": "true",
+  style: style,
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512"
+}, '<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->', React.createElement("path", {
+  d: "M147.8 192H480V144C480 117.5 458.5 96 432 96h-160l-64-64h-160C21.49 32 0 53.49 0 80v328.4l90.54-181.1C101.4 205.6 123.4 192 147.8 192zM543.1 224H147.8C135.7 224 124.6 230.8 119.2 241.7L0 480h447.1c12.12 0 23.2-6.852 28.62-17.69l96-192C583.2 249 567.7 224 543.1 224z"
+}));
+
+module.exports = IconFolderOpen;

package/build/page-renderers/IndexPage.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const React = require('react');
 
@@ -12,6 +12,8 @@ const Footer = require('./Components/Footer');
 
 const IndexListItem = require('./Components/IndexListItem');
 
+const Reset = require('./Components/Reset');
+
 const Styles = {
   headingContainer: {
     padding: '40px 15px',
@@ -32,10 +34,19 @@ const Styles = {
     paddingBottom: '20px'
   },
   html: {
-    minHeight: '100vh'
+    minHeight: '100vh',
+    fontSize: '16px'
   },
   body: {
-    minHeight: '100vh'
+    minHeight: '100vh',
+    fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
+    color: '#333',
+    backgroundColor: '#fff'
+  },
+  listContainer: {
+    marginTop: '10px',
+    maxWidth: '600px',
+    margin: 'auto'
   }
 };
 
@@ -55,17 +66,7 @@ const IndexPage = ({
   }), React.createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=1"
-  }), React.createElement("title", null, `Morty Docs`), React.createElement("link", {
-    rel: "stylesheet",
-    href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
-    integrity: "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u",
-    crossOrigin: "anonymous"
-  }), React.createElement("link", {
-    rel: "stylesheet",
-    href: "https://use.fontawesome.com/releases/v5.8.1/css/all.css",
-    integrity: "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf",
-    crossOrigin: "anonymous"
-  })), React.createElement("body", {
+  }), React.createElement("title", null, `Morty Docs`), React.createElement(Reset, null)), React.createElement("body", {
     style: Styles.body
   }, React.createElement("div", {
     style: Styles.wrapper
@@ -73,17 +74,14 @@ const IndexPage = ({
     relPath: relPath,
     basePath: options.basePath
   }), React.createElement("div", {
-    className: "container",
     style: {
       marginTop: '10px'
     }
   }, React.createElement(Title, {
     contentTitle: options.contentTitle
   }), React.createElement("div", {
-    className: "row col-md-8 col-md-offset-2"
-  }, React.createElement("ul", {
-    className: "list-unstyled"
-  }, (() => listItems.map((item, index) => React.createElement(IndexListItem, _extends({
+    style: Styles.listContainer
+  }, React.createElement("ul", null, (() => listItems.map((item, index) => React.createElement(IndexListItem, _extends({
     key: index
   }, item))))())))), React.createElement(Footer, null)));
 };

package/build/page-renderers/MortyPage.js

@@ -6,18 +6,174 @@ const Header = require('./Components/Header');
 
 const Footer = require('./Components/Footer');
 
+const Reset = require('./Components/Reset');
+
 const Styles = {
   wrapper: {
     minHeight: '75vh',
     paddingBottom: '20px'
   },
   html: {
-    minHeight: '100vh'
+    minHeight: '100vh',
+    fontSize: '16px'
   },
   body: {
-    minHeight: '100vh'
+    minHeight: '100vh',
+    fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
+    color: '#333',
+    backgroundColor: '#fff'
   }
 };
+const contentStyles = `
+.content {
+  padding: 20px 96px;
+  line-height: 1.42857143;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.content a {
+  color: #337ab7;
+  text-decoration: none;
+}
+
+.content h1 {
+  font-size: 2.2rem;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.content h2 {
+  font-size: 1.8rem;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.content h3 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.content ul {
+  display: block;
+  list-style-type: disc;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  padding-inline-start: 40px;
+  margin-bottom: 10px;
+}
+
+.content ol {
+  list-style-type: decimal;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  padding-inline-start: 40px;
+}
+
+.content p {
+  margin-bottom: 10px;
+}
+
+.content img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+.content strong {
+  font-weight: 700;
+}
+
+.content em {
+  font-style: italic;
+}
+
+.content blockquote {
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    font-size: 17.5px;
+    border-left: 5px solid #eee;
+}
+
+.content blockquote p:last-child {
+    margin-bottom: 0;
+}
+
+.content hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #949494;
+}
+
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.content code {
+  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+}
+
+.content pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+.content p code {
+  padding: 2px 4px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    border-radius: 4px;
+}
+
+.content table {
+  background-color: transparent;
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+}
+
+.content th {
+  text-align: left;
+  vertical-align: bottom;
+  border-bottom: 2px solid #ddd;
+  font-weight: bold;
+  font-size: 1.2rem;
+  padding: 8px;
+  line-height: 1.42857143;
+}
+
+.content td {
+  padding: 8px;
+  line-height: 1.42857143;
+  vertical-align: top;
+  border-top: 1px solid #ddd;
+}
+
+`;
 
 const MortyPage = ({
   relPath,
@@ -35,11 +191,10 @@ const MortyPage = ({
   }), React.createElement("meta", {
     name: "viewport",
     content: "width=device-width, initial-scale=1"
-  }), React.createElement("title", null, relPath), React.createElement("link", {
-    rel: "stylesheet",
-    href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
-    integrity: "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u",
-    crossOrigin: "anonymous"
+  }), React.createElement("title", null, relPath), React.createElement(Reset, null), React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: contentStyles
+    }
   })), React.createElement("body", {
     style: Styles.body
   }, React.createElement("div", {
@@ -48,7 +203,7 @@ const MortyPage = ({
     relPath: relPath,
     basePath: options.basePath
   }), React.createElement("div", {
-    className: "container",
+    className: "content",
     dangerouslySetInnerHTML: {
       __html: body
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/morty-docs",
-  "version": "1.10.0",
+  "version": "1.11.2",
   "description": "To generate a static website from markdown documentation, to allow users to consume content in an easily accessible format",
   "main": "build/index.js",
   "publishConfig": {
@@ -53,7 +53,8 @@
     "@babel/node": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.3",
-    "jest": "^24.7.1",
+    "http-server": "^14.1.1",
+    "jest": "^28.1.2",
     "jest-serializer-html": "^7.0.0",
     "standard": "^12.0.1"
   },