Rename theme to layout

docs/userGuide/contentAuthoring.md

@@ -589,9 +589,9 @@ Note:
 - Footers should not be nested in other components or HTML tags. If found inside, they will be shifted outside to be rendered properly.
 - [MarkBind components](#use-components) and [includes](#include-contents) are not supported in footers.
 
-### Themes
+### Layouts
 
-A theme is a set of styles that can be applied to a page, or glob of pages. It consists of the following files:
+A layout is a set of styles that can be applied to a page, or glob of pages. It consists of the following files:
 
 - `footer.md` : See [Using Footers](#using-footers)
 - `head.md` : See [Inserting content into a page's head element](#inserting-content-into-a-pages-head-element)
@@ -601,38 +601,38 @@ A theme is a set of styles that can be applied to a page, or glob of pages. It c
 
 These files will be automatically appended to a page upon generation, allowing you to quickly apply styles to a batch of pages at once.
 
-Themes can be found in `_markbind/themes`. Markbind will generate a default theme with blank files in `_markbind/themes/default`. The default theme is automatically applied to every single page.
+Layouts can be found in `_markbind/layouts`. Markbind will generate a default layout with blank files in `_markbind/layouts/default`. The default layout is automatically applied to every single page.
 
-To make a new theme, simply copy and rename the `default` folder (e.g. `_markbind/themes/myTheme`) and edit the files within.
+To make a new layout, simply copy and rename the `default` folder (e.g. `_markbind/layout/myLayout`) and edit the files within.
 
-A page can be assigned a theme in two ways:
+A page can be assigned a layout in two ways:
 
 - Using `site.json`
 ```js
-// Theme A will be applied to all index.md files
+// Layout A will be applied to all index.md files
 {
   "glob": "**/index.md",
-  "theme": "ThemeA"
+  "layout": "LayoutA"
 },
 
-// Theme B will be applied to index2.md
+// Layout B will be applied to index2.md
 {
   "src": "index2.md",
-  "theme": "ThemeB"
+  "layout": "LayoutB"
 },
 
-// No Theme - default theme will be applied
+// No Layout - default layout will be applied
 {
   "src": "index3.md"
 },
 ```
 - Using `frontMatter`
 ```html
 <frontmatter>
-  theme: themeA
+  layout: layoutA
   head: head.md
 </frontmatter>
 ```
 
-Note that the `frontMatter` theme takes precedence over `site.json` and any files specified in `frontMatter` will take precedence over theme files (`head.md` for example).
+Note that the `frontMatter` layout takes precedence over `site.json` and any files specified in `frontMatter` will take precedence over layout files (`head.md` for example).
 </div>

lib/Page.js

@@ -15,11 +15,11 @@ const md = require('./markbind/lib/markdown-it');
 const FOOTERS_FOLDER_PATH = '_markbind/footers';
 const HEAD_FOLDER_PATH = '_markbind/head';
 const NAVIGATION_FOLDER_PATH = '_markbind/navigation';
-const THEME_DEFAULT_NAME = 'default';
-const THEME_FOLDER_PATH = '_markbind/themes';
-const THEME_NAVIGATION = 'navigation.md';
-const THEME_HEAD = 'head.md';
-const THEME_FOOTER = 'footer.md';
+const LAYOUT_DEFAULT_NAME = 'default';
+const LAYOUT_FOLDER_PATH = '_markbind/layouts';
+const LAYOUT_NAVIGATION = 'navigation.md';
+const LAYOUT_HEAD = 'head.md';
+const LAYOUT_FOOTER = 'footer.md';
 
 const CONTENT_WRAPPER_ID = 'content-wrapper';
 const FLEX_BODY_DIV_ID = 'flex-body';
@@ -55,7 +55,7 @@ function Page(pageConfig) {
   this.searchable = pageConfig.searchable;
   this.src = pageConfig.src;
   this.template = pageConfig.pageTemplate;
-  this.theme = pageConfig.theme;
+  this.layout = pageConfig.layout;
   this.title = pageConfig.title || '';
   this.titlePrefix = pageConfig.titlePrefix;
   this.userDefinedVariablesMap = pageConfig.userDefinedVariablesMap;
@@ -346,14 +346,14 @@ Page.prototype.collectFrontMatter = function (includedPage) {
     this.frontMatter.src = this.src;
     // Title specified in site.json will override title specified in front matter
     this.frontMatter.title = (this.title || this.frontMatter.title || '');
-    // Theme specified in front matter will override theme specified in site.json
-    this.frontMatter.theme = (this.frontMatter.theme || this.theme || '');
+    // Layout specified in front matter will override layout specified in site.json
+    this.frontMatter.layout = (this.frontMatter.layout || this.layout || '');
   } else {
     // Page is addressable but no front matter specified
     this.frontMatter = {
       src: this.src,
       title: this.title || '',
-      theme: THEME_DEFAULT_NAME,
+      layout: LAYOUT_DEFAULT_NAME,
     };
   }
   this.title = this.frontMatter.title;
@@ -380,7 +380,7 @@ Page.prototype.insertFooter = function (pageData) {
   if (footer) {
     footerFile = path.join(FOOTERS_FOLDER_PATH, footer);
   } else {
-    footerFile = path.join(THEME_FOLDER_PATH, this.frontMatter.theme, THEME_FOOTER);
+    footerFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_FOOTER);
   }
   const footerPath = path.join(this.rootPath, footerFile);
   if (!fs.existsSync(footerPath)) {
@@ -407,7 +407,7 @@ Page.prototype.insertSiteNav = function (pageData) {
   if (siteNav) {
     siteNavFile = path.join(NAVIGATION_FOLDER_PATH, siteNav);
   } else {
-    siteNavFile = path.join(THEME_FOLDER_PATH, this.frontMatter.theme, THEME_NAVIGATION);
+    siteNavFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_NAVIGATION);
   }
   // Retrieve Markdown file contents
   const siteNavPath = path.join(this.rootPath, siteNavFile);
@@ -450,7 +450,7 @@ Page.prototype.collectHeadFiles = function (baseUrl, hostBaseUrl) {
   if (head) {
     headFile = path.join(HEAD_FOLDER_PATH, head);
   } else {
-    headFile = path.join(THEME_FOLDER_PATH, this.frontMatter.theme, THEME_HEAD);
+    headFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_HEAD);
   }
   const headFilePath = path.join(this.rootPath, headFile);
   if (!fs.existsSync(headFilePath)) {
@@ -508,7 +508,7 @@ Page.prototype.generate = function (builtFiles) {
         const baseUrl = newBaseUrl ? `${this.baseUrl}/${newBaseUrl}` : this.baseUrl;
         const hostBaseUrl = this.baseUrl;
 
-        this.addThemeFiles();
+        this.addLayoutFiles();
         this.collectHeadFiles(baseUrl, hostBaseUrl);
         this.content = nunjucks.renderString(this.content, { baseUrl, hostBaseUrl });
         return fs.outputFileAsync(this.resultPath, this.template(this.prepareTemplateData()));
@@ -534,15 +534,15 @@ Page.prototype.generate = function (builtFiles) {
 };
 
 /**
- * Adds linked theme files to page assets
+ * Adds linked layout files to page assets
  */
-Page.prototype.addThemeFiles = function () {
-  this.asset.themeScript = path.relative(path.dirname(this.resultPath),
-                                         path.join(this.rootPath, THEME_FOLDER_PATH,
-                                                   this.frontMatter.theme, 'scripts.js'));
-  this.asset.themeStyle = path.relative(path.dirname(this.resultPath),
-                                        path.join(this.rootPath, THEME_FOLDER_PATH,
-                                                  this.frontMatter.theme, 'styles.css'));
+Page.prototype.addLayoutFiles = function () {
+  this.asset.layoutScript = path.relative(path.dirname(this.resultPath),
+                                          path.join(this.rootPath, LAYOUT_FOLDER_PATH,
+                                                    this.frontMatter.layout, 'scripts.js'));
+  this.asset.layoutStyle = path.relative(path.dirname(this.resultPath),
+                                         path.join(this.rootPath, LAYOUT_FOLDER_PATH,
+                                                   this.frontMatter.layout, 'styles.css'));
 };
 
 /**

lib/Site.js

@@ -42,9 +42,9 @@ const PAGE_TEMPLATE_NAME = 'page.ejs';
 const SITE_CONFIG_NAME = 'site.json';
 const SITE_DATA_NAME = 'siteData.json';
 const SITE_NAV_PATH = '_markbind/navigation/site-nav.md';
-const THEME_DEFAULT_NAME = 'default';
-const THEME_FILES = ['navigation.md', 'head.md', 'footer.md', 'styles.css', 'scripts.js'];
-const THEME_FOLDER_PATH = '_markbind/themes';
+const LAYOUT_DEFAULT_NAME = 'default';
+const LAYOUT_FILES = ['navigation.md', 'head.md', 'footer.md', 'styles.css', 'scripts.js'];
+const LAYOUT_FOLDER_PATH = '_markbind/layouts';
 const USER_VARIABLES_PATH = '_markbind/variables.md';
 
 const SITE_CONFIG_DEFAULT = {
@@ -179,8 +179,8 @@ Site.initSite = function (rootPath) {
   const headFolderPath = path.join(rootPath, HEAD_FOLDER_PATH);
   const indexPath = path.join(rootPath, INDEX_MARKDOWN_FILE);
   const siteNavPath = path.join(rootPath, SITE_NAV_PATH);
-  const siteThemePath = path.join(rootPath, THEME_FOLDER_PATH);
-  const siteThemeDefaultPath = path.join(siteThemePath, THEME_DEFAULT_NAME);
+  const siteLayoutPath = path.join(rootPath, LAYOUT_FOLDER_PATH);
+  const siteLayoutDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME);
   const userDefinedVariablesPath = path.join(rootPath, USER_VARIABLES_PATH);
   // TODO: log the generate info
   return new Promise((resolve, reject) => {
@@ -233,28 +233,28 @@ Site.initSite = function (rootPath) {
         }
         return fs.outputFileAsync(siteNavPath, SITE_NAV_DEFAULT);
       })
-      .then(() => fs.accessAsync(siteThemePath))
+      .then(() => fs.accessAsync(siteLayoutPath))
       .catch(() => {
-        if (fs.existsSync(siteThemePath)) {
+        if (fs.existsSync(siteLayoutPath)) {
           return Promise.resolve();
         }
-        return fs.mkdirp(siteThemePath);
+        return fs.mkdirp(siteLayoutPath);
       })
-      .then(() => fs.accessAsync(siteThemeDefaultPath))
+      .then(() => fs.accessAsync(siteLayoutDefaultPath))
       .catch(() => {
-        if (fs.existsSync(siteThemeDefaultPath)) {
+        if (fs.existsSync(siteLayoutDefaultPath)) {
           return Promise.resolve();
         }
-        return fs.mkdirp(siteThemeDefaultPath);
+        return fs.mkdirp(siteLayoutDefaultPath);
       })
       .then(() => {
-        THEME_FILES.forEach((themeFile) => {
-          const themeFilePath = path.join(siteThemeDefaultPath, themeFile);
-          fs.accessAsync(themeFilePath).catch(() => {
-            if (fs.existsSync(themeFilePath)) {
+        LAYOUT_FILES.forEach((layoutFile) => {
+          const layoutFilePath = path.join(siteLayoutDefaultPath, layoutFile);
+          fs.accessAsync(layoutFilePath).catch(() => {
+            if (fs.existsSync(layoutFilePath)) {
               return Promise.resolve();
             }
-            return fs.outputFileAsync(themeFilePath, '');
+            return fs.outputFileAsync(layoutFilePath, '');
           });
         });
       })
@@ -304,7 +304,7 @@ Site.prototype.createPage = function (config) {
     rootPath: this.rootPath,
     searchable: config.searchable,
     src: config.pageSrc,
-    theme: config.theme,
+    layout: config.layout,
     title: config.title || '',
     titlePrefix: this.siteConfig.titlePrefix,
     headingIndexingLevel: this.siteConfig.headingIndexingLevel || HEADING_INDEXING_LEVEL_DEFAULT,
@@ -357,7 +357,7 @@ Site.prototype.collectAddressablePages = function () {
     }).map(globPath => ({
       src: globPath,
       searchable: addressableGlob.searchable,
-      theme: addressableGlob.theme,
+      layout: addressableGlob.layout,
     }))), []);
   // Add pages collected by walkSync without duplication
   this.addressablePages = _.unionWith(this.addressablePages, globPaths,
@@ -584,7 +584,7 @@ Site.prototype.generatePages = function () {
     faviconUrl,
     pageSrc: page.src,
     title: page.title,
-    theme: page.theme || THEME_DEFAULT_NAME,
+    layout: page.layout || LAYOUT_DEFAULT_NAME,
     searchable: page.searchable !== 'no',
   }));
   const progressBar = new ProgressBar(`[:bar] :current / ${this.pages.length} pages built`,

lib/template/page.ejs

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="<%- asset.glyphicons %>" >
     <link rel="stylesheet" href="<%- asset.highlight %>">
     <link rel="stylesheet" href="<%- asset.markbind %>">
-    <link rel="stylesheet" href="<%- asset.themeStyle %>">
+    <link rel="stylesheet" href="<%- asset.layoutStyle %>">
     <% if (siteNav) { %><link rel="stylesheet" href="<%- asset.siteNavCss %>"><% } %>
     <%- headFileBottomContent %>
     <% if (faviconUrl) { %><link rel="icon" href="<%- faviconUrl %>"><% } %>
@@ -30,5 +30,5 @@
     const baseUrl = '<%- baseUrl %>'
 </script>
 <script src="<%- asset.setup %>"></script>
-<script src="<%- asset.themeScript %>"></script>
+<script src="<%- asset.layoutScript %>"></script>
 </html>

test/test_site/_markbind/themes/testTheme/footer.md → test/test_site/_markbind/layouts/testLayout/footer.md

@@ -1,5 +1,5 @@
 <footer>
   <div class="text-center">
-    Theme footer
+    Layout footer
   </div>
 </footer>

test/test_site/_markbind/themes/testTheme/navigation.md → test/test_site/_markbind/layouts/testLayout/navigation.md

@@ -1,3 +1,3 @@
 <navigation>
-* [Theme Nav]
+* [Layout Nav]
 </navigation>

test/test_site/_markbind/themes/testTheme/scripts.js → test/test_site/_markbind/layouts/testLayout/scripts.js

@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-console
-console.info('Theme script');
+console.info('Layout script');

test/test_site/expected/_markbind/themes/testTheme/scripts.js → test/test_site/expected/_markbind/layouts/testLayout/scripts.js

@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-console
-console.info('Theme script');
+console.info('Layout script');

test/test_site/expected/bugs/index.html

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="..\markbind\css\bootstrap-glyphicons.min.css" >
     <link rel="stylesheet" href="..\markbind\css\github.min.css">
     <link rel="stylesheet" href="..\markbind\css\markbind.css">
-    <link rel="stylesheet" href="..\..\_markbind\themes\default\styles.css">
+    <link rel="stylesheet" href="..\..\_markbind\layouts\default\styles.css">
 
     <meta name="default-head-bottom">
     <link rel="icon" href="/test_site/favicon.png">
@@ -89,5 +89,5 @@ <h2 id="remove-extra-space-in-links">Remove extra space in links</h2>
     const baseUrl = '/test_site'
 </script>
 <script src="..\markbind\js\setup.js"></script>
-<script src="..\..\_markbind\themes\default\scripts.js"></script>
+<script src="..\..\_markbind\layouts\default\scripts.js"></script>
 </html>

test/test_site/expected/index.html

@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="markbind\css\bootstrap-glyphicons.min.css" >
     <link rel="stylesheet" href="markbind\css\github.min.css">
     <link rel="stylesheet" href="markbind\css\markbind.css">
-    <link rel="stylesheet" href="..\_markbind\themes\default\styles.css">
+    <link rel="stylesheet" href="..\_markbind\layouts\default\styles.css">
     <link rel="stylesheet" href="markbind\css\site-nav.css">
     <!-- Start of bottom level head file content insertion -->
 <script src="/test_site/headFiles/customScriptBottom.js"></script>
@@ -290,5 +290,5 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
     const baseUrl = '/test_site'
 </script>
 <script src="markbind\js\setup.js"></script>
-<script src="..\_markbind\themes\default\scripts.js"></script>
+<script src="..\_markbind\layouts\default\scripts.js"></script>
 </html>

test/test_site/expected/siteData.json

@@ -52,16 +52,16 @@
       "footer": "footer.md",
       "siteNav": "site-nav.md",
       "head": "myCustomHead.md",
-      "theme": "default",
+      "layout": "default",
       "src": "index.md"
     },
     {
       "headings": {
-        "uses-a-theme": "Uses a theme"
+        "uses-a-layout": "Uses a layout"
       },
       "title": "Hello World",
-      "src": "testThemes.md",
-      "theme": "testTheme"
+      "src": "testLayouts.md",
+      "layout": "testLayout"
     },
     {
       "headings": {
@@ -71,23 +71,23 @@
       },
       "title": "Open Bugs",
       "src": "bugs/index.md",
-      "theme": "default"
+      "layout": "default"
     },
     {
       "headings": {
         "feature-list": "Feature list"
       },
       "src": "sub_site/index.md",
       "title": "",
-      "theme": "default"
+      "layout": "default"
     },
     {
       "headings": {
         "some-heading": "Some heading"
       },
       "src": "test_md_fragment.md",
       "title": "",
-      "theme": "default"
+      "layout": "default"
     }
   ]
 }

test/test_site/expected/sub_site/index.html

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="..\markbind\css\bootstrap-glyphicons.min.css" >
     <link rel="stylesheet" href="..\markbind\css\github.min.css">
     <link rel="stylesheet" href="..\markbind\css\markbind.css">
-    <link rel="stylesheet" href="..\..\_markbind\themes\default\styles.css">
+    <link rel="stylesheet" href="..\..\_markbind\layouts\default\styles.css">
 
     <meta name="default-head-bottom">
     <link rel="icon" href="/test_site/favicon.png">
@@ -47,5 +47,5 @@ <h2 id="feature-list">Feature list</h2>
     const baseUrl = '/test_site'
 </script>
 <script src="..\markbind\js\setup.js"></script>
-<script src="..\..\_markbind\themes\default\scripts.js"></script>
+<script src="..\..\_markbind\layouts\default\scripts.js"></script>
 </html>