legacyweb-pages 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# legacyweb-pages
+
+This is a toolkit for generating simple pages for legacyweb.
+
+It includes templates, themes, and functions for generating pages based on these. This project is currently under development.

package/index.js

@@ -0,0 +1,3 @@
+const Page = require('./lib/page');
+
+module.exports = Page;

package/lib/page.js

@@ -0,0 +1,125 @@
+const ejs = require('ejs');
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const joi = require('joi');
+
+const relativePath = joi.string().regex(/^\/[a-z0-9\/]*$/);
+
+function Page(template, theme, title, home, addHomeLink=true, staticPaths=[]) {
+	this.setTemplate(template);
+	this.setTheme(theme);
+	this.pages = [];
+	this.links = [];
+	this.addPage({
+		path: '/',
+		gen: home.gen,
+		title,
+		method: 'get'
+	});
+	if (addHomeLink) {
+		this.addLink({
+			url: '/',
+			text: 'Home'
+		});
+	}
+	this.headerHtml = '';
+	this.port = process.env.EXPRESS_PORT || 3000;
+	this.app = express();
+    
+	// Define static paths
+	staticPaths.forEach(staticPath => {
+		this.app.use('/images', express.static(staticPath));
+	});
+}
+
+Page.prototype.setTemplate = function(template) {
+	const templateFile = path.join(__dirname, '..', 'templates', `${template}.ejs`);
+	if (!fs.existsSync(templateFile)) {
+		throw new Error(`Theme "${templateFile}" does not exist`);
+	}
+	this.template = fs.readFileSync(templateFile, 'utf-8');
+}
+
+Page.prototype.setTheme = function(theme) {
+	const themeFile = path.join(__dirname, '..', 'themes', `${theme}.json`);
+	if (!fs.existsSync(themeFile)) {
+		throw new Error(`Theme "${theme}" does not exist`);
+	}
+	this.theme = JSON.parse(fs.readFileSync(themeFile), 'utf-8');
+}
+
+Page.prototype.setBgImage = function(element, bgImage) {
+	joi.attempt(element, joi.string().valid('body', 'links', 'strip', 'content'));
+	this.theme[element].bgImage = bgImage;
+}
+
+Page.prototype.setHeader = function(code) {
+    this.headerHtml = code;
+}
+
+Page.prototype.setStrip = function(code) {
+	this.stripHtml = code;
+}
+
+Page.prototype.addLink = function(link) {
+    joi.attempt(link, joi.object({
+			url: joi.alternatives().try(joi.string().uri(), relativePath).required(),
+			text: joi.string().min(1).required()
+    }));
+    this.links.push(link);
+}
+
+Page.prototype.addPage = function(page) {
+    let validatedPage = joi.attempt(page, joi.object({
+			path: relativePath.required(),
+			gen: joi.func().required(),
+			title: joi.string().min(1).required(),
+			method: joi.string().valid('get', 'post').default('get'),
+			middleware: joi.array().default([])
+    }));
+
+    this.pages.push(validatedPage);
+}
+
+Page.prototype.start = function() {
+
+	const legacyPage = this;
+
+	this.pages.forEach(page => {
+		const renderPage = async function(req, res) {
+			try {
+				// Render content first in case we want to change the theme, header, etc. as part of the gen fn
+				const content = await page.gen(req, res);
+
+				const data = Object.assign({
+					page: {
+						header: legacyPage.headerHtml,
+						strip: legacyPage.stripHtml,
+						links: legacyPage.links,
+						content
+					}
+				}, legacyPage.theme);
+				const renderedPage = ejs.render(legacyPage.template, data);
+
+				res.status(200).send(renderedPage);
+			} catch (err) {
+				const statusCode = err.status || 500;
+				return res.status(statusCode).send(err.message);
+			}
+		}
+
+		switch (page.method) {
+			case 'post':
+				legacyPage.app.post(page.path, page.middleware, renderPage);
+				return;
+			default:
+				legacyPage.app.get(page.path, page.middleware, renderPage);
+				return;
+		}
+	});
+
+    this.app.listen(this.port);
+}
+
+module.exports = Page

package/lib/theme.js

@@ -0,0 +1,46 @@
+const joi = require('joi');
+
+function Theme(theme) {
+  const schema = joi.object({
+    body: joi.object({
+      bgColor: joi.string().default('white'),
+      bgImage: joi.string().optional(),
+      linkColor: joi.string().default('blue'),
+      borderColor: joi.string().default('black'),
+      borderThickness: joi.number().default(4)
+    }).default(),
+    header: joi.object({
+      bgColor: joi.string().default('white'),
+      bgImage: joi.string().optional(),
+      font: joi.object({
+        face: joi.string().default('Tahoma'),
+        bold: joi.boolean().default(true),
+        color: joi.string().default('black')
+      }).default()
+    }).default(),
+    links: joi.object({
+      bgColor: joi.string().default('white'),
+      bgImage: joi.string().optional(),
+      font: joi.object({
+        face: joi.string().default('Tahoma'),
+        bold: joi.boolean.default(true),
+        color: joi.string().default('black')
+      }).default()
+    }),
+    content: joi.object({
+      bgColor: joi.string().default('white'),
+      bgImage: joi.string().optional(),
+      font: joi.object({
+        face: joi.string().default('Tahoma'),
+        bold: joi.boolean.default(false),
+        color: joi.string().default('black')
+      }).default()
+    }).default()
+  }).default();
+
+  const validated = joi.attempt(theme, schema, {stripUnknown: true});
+
+  return validated;
+}
+
+module.exports = Theme;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "legacyweb-pages",
+  "version": "1.0.0",
+  "description": "A toolkit for generating legacyweb pages",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Justin Schwartzbeck (justinmschw@gmail.com)",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "3.1.6",
+    "express": "4.17.2",
+    "joi": "17.5.0",
+    "pug": "3.0.2"
+  }
+}

package/samples/left-business/business.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'business', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-business/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-business/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-business/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-christmas/christmas.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'christmas', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-christmas/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-christmas/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-christmas/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-fall/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-fall/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-fall/fall.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'fall', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-fall/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-forest/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-forest/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-forest/forest.js

@@ -0,0 +1,33 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+const path = require('path');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'forest', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+}, true, [path.join(__dirname, 'images')]);
+
+myLeftPage.setBgImage('body', '/images/leaves.jpg');
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-forest/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-library/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-library/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-library/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-library/library.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'library', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-ocean/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-ocean/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-ocean/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-ocean/ocean.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'ocean', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-sami/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-sami/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-sami/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-sami/sami.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'sami', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-space/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-space/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-space/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-space/space.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'space', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-spring/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-spring/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-spring/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-spring/spring.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'spring', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-summer/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-summer/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-summer/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-summer/summer.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'summer', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/left-winter/content-home.pug

@@ -0,0 +1,2 @@
+block content
+    p Content goes here

package/samples/left-winter/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/left-winter/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/left-winter/winter.js

@@ -0,0 +1,30 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myLeftPage = new Page('leftpane', 'winter', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myLeftPage.setHeader(header);
+
+myLeftPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myLeftPage.addLink({
+  url: '/page1',
+  text: 'Page 1'
+});
+
+myLeftPage.start();

package/samples/ribbon-business/content-home.pug

@@ -0,0 +1,55 @@
+block content
+    p Content goes here
+    p a
+    p b
+    p c
+    p d
+    p e
+    p f
+    p g
+    p h
+    p i
+    p j
+    p k
+    p l
+    p m
+    p n
+    p o
+    p p
+    p q
+    p r
+    p s
+    p t
+    p u
+    p v
+    p w
+    p x
+    p y
+    p z
+    p Content goes here
+    p a
+    p b
+    p c
+    p d
+    p e
+    p f
+    p g
+    p h
+    p i
+    p j
+    p k
+    p l
+    p m
+    p n
+    p o
+    p p
+    p q
+    p r
+    p s
+    p t
+    p u
+    p v
+    p w
+    p x
+    p y
+    p z

package/samples/ribbon-business/content-page1.pug

@@ -0,0 +1,2 @@
+block content
+    p Hello #{name}

package/samples/ribbon-business/header.html

@@ -0,0 +1 @@
+Sample Header

package/samples/ribbon-business/ribbon-business.js

@@ -0,0 +1,28 @@
+const Page = require('../../lib/page');
+const pug = require('pug');
+const fs = require('fs');
+
+const header = fs.readFileSync('./header.html', 'utf-8');
+const strip = pug.render(fs.readFileSync('./strip.pug', 'utf-8'), {});
+const contentHome = pug.render(fs.readFileSync('./content-home.pug', 'utf-8'), {});
+const contentPage1 = fs.readFileSync('./content-page1.pug', 'utf-8');
+
+const myRibbonPage = new Page('ribbon', 'business', 'Sample Page', {
+  gen: function() {
+    return Promise.resolve(contentHome);
+  }
+});
+
+myRibbonPage.setHeader(header);
+
+myRibbonPage.setStrip(strip);
+
+myRibbonPage.addPage({
+  path: '/page1',
+  gen: async function() {
+    return Promise.resolve(pug.render(contentPage1, {name: 'Justin'}));
+  },
+  title: 'Page 1'
+});
+
+myRibbonPage.start();

package/samples/ribbon-business/strip.pug

@@ -0,0 +1 @@
+p This is where strip content goes: links, etc.

package/templates/leftpane.ejs

@@ -0,0 +1,45 @@
+<html>
+<body bgcolor="<%= body.bgColor %>" <% if (body.bgImage) { %>background="<%- body.bgImage %>"<% } %> link="<%= body.linkColor %>" vlink="<%= body.linkColor %>">
+
+<table width="780px" border=0>
+    <tr>
+        <!-- This is actually where the "border" color is defined -->
+        <td bgcolor="<%= body.borderColor %>">
+
+            <!-- This inner table is where the page content (header, links, content) actually go
+            cellspacing = border thickness
+            -->
+            <table width="780px" border=0 cellspacing=<%= body.borderThickness %> >
+                <tr />
+
+                    <td height=80px colspan=2 bgcolor="<%= header.bgColor %>" <% if (header.bgImage) { %> background="<%= header.bgImage %>" <% } %>>
+                        <font size=7 face="<%= header.font.face %>" color="<%= header.font.color %>">
+                            <% if (header.font.bold) { %> <b><%- page.header %></b> <% } else { %><%- page.header %><% } %>
+                        </font>
+                    </td>
+
+                <tr />
+                    <td height=600px width=180px bgcolor="<%= links.bgColor %>" <% if (links.bgImage) { %> background="<%= links.bgImage %>" <% } %> valign=top>
+                        <table border="0">
+                            <% page.links.forEach(link => { %>
+                            <tr>
+                                <td <% if (links.bgColor) { %>bgcolor="<%= links.bgColor %>"<% } %>>
+                                    <font size=4 face="<%= links.font.face %>">
+                                        <% if (links.font.bold) { %><b><a href="<%- link.url %>"><%= link.text %></a></b><% } else { %><a href="<%- link.url %>"><%= link.text %></a><% } %>
+                                    </font>
+                                </td>
+                            </tr>
+                            <%})%>
+                        </table>
+                    </td>
+                    <td height=600px width=600px bgcolor="<%= content.bgColor %>" <% if (content.bgImage) { %> background="<%= content.bgImage %>" <% } %> valign=top>
+                        <font face="<%= content.font.face %>">
+                            <%- page.content %>
+                        </font>
+                    </td>
+            </table>
+        </td>
+</table>
+
+</body>
+</html>

package/templates/ribbon.ejs

@@ -0,0 +1,38 @@
+<html>
+<body bgcolor="<%= body.bgColor %>" <% if (body.bgImage) { %>background="<%- body.bgImage %>"<% } %> link="<%= body.linkColor %>" vlink="<%= body.linkColor %>">
+<center>
+    <table width="786px" border=0>
+        <tr>
+            <!-- This is actually where the "border" color is defined -->
+            <td bgcolor="<%= body.borderColor %>">
+
+                <!-- This inner table is where the page content (header, links, content) actually go
+                cellspacing = border thickness
+                -->
+                <table width="780px" border=0 cellspacing=<%= body.borderThickness %> >
+                    <tr />
+
+                        <td height=80px bgcolor="<%= header.bgColor %>" <% if (header.bgImage) { %> background="<%= header.bgImage %>" <% } %>>
+                            <font size=7 face="<%= header.font.face %>" color="<%= header.font.color %>">
+                                <% if (header.font.bold) { %> <b><%- page.header %></b> <% } else { %><%- page.header %><% } %>
+                            </font>
+                        </td>
+
+                    <tr>
+                        <td height=20px bgcolor="<%= links.bgColor %>" <% if (links.bgImage) { %> background="<%= links.bgImage %>" <% } %> valign=top>
+                            <%- page.strip %>
+                        </td>
+                    </tr>
+                    <tr />
+
+                        <td bgcolor="<%= content.bgColor %>" <% if (content.bgImage) { %> background="<%= content.bgImage %>" <% } %> valign=top>
+                            <font face="<%= content.font.face %>">
+                                <%- page.content %>
+                            </font>
+                        </td>
+                </table>
+            </td>
+    </table>
+</center>
+</body>
+</html>

package/themes/business.json

@@ -0,0 +1,28 @@
+{
+  "body": {
+    "bgColor": "#00008B",
+    "linkColor": "blue",
+    "borderColor": "black",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#808080",
+    "font": {
+      "face": "Courier New",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#D3D3D3",
+    "font": {
+      "face": "Tahoma",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/christmas.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#2F4F4F",
+    "linkColor": "#daa520",
+    "borderColor": "#daa520",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#b22222",
+    "font": {
+      "face": "Comic Sans MS",
+      "color": "#daa520",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#006400",
+    "font": {
+      "face": "Tahoma",
+      "color": "#daa520",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/fall.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#006400",
+    "linkColor": "#DAA520",
+    "borderColor": "#B22222",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#DAA520",
+    "font": {
+      "face": "Georgia",
+      "color": "#B22222",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#B22222",
+    "font": {
+      "face": "Tahoma",
+      "color": "#FAFAD2",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/forest.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#2F4F4F",
+    "linkColor": "#133c07",
+    "borderColor": "#2A1B0A",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#133c07",
+    "font": {
+      "face": "Courier New",
+      "color": "#70b15c",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#70b15c",
+    "font": {
+      "face": "Tahoma",
+      "color": "#133c07",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/library.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#8B4513",
+    "linkColor": "#ffffff",
+    "borderColor": "#2A1B0A",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#f1eea9",
+    "font": {
+      "face": "Times New Roman",
+      "color": "#000000",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#6f6e56",
+    "font": {
+      "face": "Tahoma",
+      "color": "#133c07",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/ocean.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#191970",
+    "linkColor": "#2F4F4F",
+    "borderColor": "#4682B4",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#2F4F4F",
+    "font": {
+      "face": "Courier New",
+      "color": "#F0FFFF",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#8DBC8F",
+    "font": {
+      "face": "Tahoma",
+      "color": "#778899",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/sami.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#B22222",
+    "linkColor": "#FFD700",
+    "borderColor": "#FFD700",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#0000CD",
+    "font": {
+      "face": "Georgia",
+      "color": "#FFD700",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#008000",
+    "font": {
+      "face": "Tahoma",
+      "color": "#008000",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/space.json

@@ -0,0 +1,29 @@
+{
+  "body": {
+    "bgColor": "#000000",
+    "linkColor": "#000000",
+    "borderColor": "#32CD32",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#000000",
+    "font": {
+      "face": "Courier New",
+      "color": "#32CD32",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#788890",
+    "font": {
+      "face": "Tahoma",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/spring.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#EEE8AA",
+    "linkColor": "#FAFAD2",
+    "borderColor": "#228B22",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#DAA520",
+    "font": {
+      "face": "Georgia",
+      "color": "#006400",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#006400",
+    "font": {
+      "face": "Tahoma",
+      "color": "#FAFAD2",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/summer.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#00008B",
+    "linkColor": "#5F9EA0",
+    "borderColor": "#5F9EA0",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#006400",
+    "font": {
+      "face": "Georgia",
+      "color": "#FAFAD2",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#2F4F4F",
+    "font": {
+      "face": "Tahoma",
+      "color": "#FAFAD2",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}

package/themes/winter.json

@@ -0,0 +1,30 @@
+{
+  "body": {
+    "bgColor": "#E0FFFF",
+    "linkColor": "#2F4F4F",
+    "borderColor": "#4682B4",
+    "borderThickness": 4
+  },
+  "header": {
+    "bgColor": "#5F9EA0",
+    "font": {
+      "face": "Georgia",
+      "color": "#F0FFFF",
+      "bold": true
+    }
+  },
+  "links": {
+    "bgColor": "#B0C4DE",
+    "font": {
+      "face": "Tahoma",
+      "color": "#778899",
+      "bold": true
+    }
+  },
+  "content": {
+    "bgColor": "#FFFFFF",
+    "font": {
+      "face": "Tahoma"
+    }
+  }
+}