Merge pull request #2 from buzcarter/spike/recipe-customization-statements

Spike/recipe customization statements

Author: buzcarter

.gitignore

@@ -4,3 +4,5 @@
 .lab
 node_modules
 output
+*.zip
+*.rar

README.md

@@ -10,32 +10,64 @@ This is based on Jeff Thompson's [recipes PHP project](https://github.com/jeffTh
 
 This project generates static HTML. You may view locally just by dragging one of the output files into your browser, loading onto your webserver, or by using a utility such as [http-server (node)](https://github.com/http-party/http-server).
 
+#### The "Recipe Book" Index
+
+![Recipe Book Index](./docs/images/recipe-index-box-views.jpg)
+
+Choose your preferred view: "Compact List", "List with Thumbnail", or "Recipe Card Grid". (you may set the default view in `config.js`)
+
+![Choose your Recipe Book view preference](./docs/images/index-view-modes.png)
+
+
+#### New: Per Recipe "Styles"
+
+![Recipe Book Index](./docs/images/recipe-styles.jpg)
+
+Choose your preferred recipe layout **per recipe**: clean, minimal default, Washington Post Recipe Layout ("washington-post"), or New York Times Cooking ("nytimes"). 
+
+Just add a hidden comment somewhere in your recipe text (*tip*: near the top makes it easier to find and change)
+ 
+```html
+<!-- recipe-style: washington-post -->
+```
+
+A *style* tag (or comment) tells the app to swap the default styles for whichever one you specify. If you want _all_ of your recipes to render in a specific style just edit `config.js`, setting `defaultTheme` as desired.
+
+```html
+<!-- recipe-style: nytimes -->
+
+# Gran's Killer Kowboy Kookies
+
+```
+
+Create your own... ummm, I owe y'all some documentation here, don't I? Soon... And should be consistent with "theme" v. "style". Sorry. Soon.
+
 ### Features:
 
 * Recipes are written in plain text using the intuitive-ish [Markdown format](https://daringfireball.net/projects/markdown).
 * Publishes a recipe index, including on-page links to more easily locate a recipe.
 * Template driven layout, customize or use the provided template
+* Customize with themes -- color and minor layout settings. Plus, each recipe may choose its own theme.
 * No more overlooked ingredients or skipped Steps as recipe pages allow you to flag your current step and mark-off those you've already done. In the Ingredients and Steps sections:
     * Tap an item once to highlight it, tappin again removes highlighting.
     * Double tab an item to mark as "completed" or "used" (the text will be italicized and have a strike-through through it). Double tapping again removes the line.
     * Navigate through Steps via arrow keys: when a Step is highlighted step using the left/right arrow keys highlights the previous/next step.
-* Auto-generated links to a Google image search for that dish, recipes on Serious Eats and Google, and for restaurants on Yelp (in case you burn something and need takeout fast)  
+* Auto-generated links to a Google image search for that dish, recipes on Serious Eats and Google, and for restaurants on Yelp (in case you burn something and need takeout fast)
+* Access to the original, plain text source for any recipe is but one click away
+
+![view-original-markdown-plain-text-recipes](./docs/images/view-original-markdown-plain-text-recipes.png)
 
 EXAMPLE: below a recipe with a few ingredients "ticked" off (indicating they've been used) and the current step being highlighted:
 
 ![Recipe Helpers - Highlighter & Ingredient Indicator](./docs/images/carnitas-with-highlights.png)
 
-The "Recipe Book" Index:
-
-![Recipe Book Index](./docs/images/recipe-book-index.png)
-
 ## MORE INFO
 
 * [Installation](#installation)
 * [Recipe format](#recipe-format)
 * [Adding images](#adding-images)
 * [Other options](#other-options)
-* [Suggestions welcome!](#suggestions-welcome)
+* [Advanced customizations](#advanced-customizations)
 * [Colophon & Thank Yous](#Colophon)
 
 ## Installation
@@ -170,6 +202,8 @@ The `recipe.html` template file also includes some more options you can customiz
 * `autoUrlSections`: list of sections in the recepe template where you want raw URLs (ex: www.instagram.com) to be turned into real links. Great for the `Based On` section but not so good if you want to include Markdown-formatted links in other sections  
 * `shortenUrls`: turns a super-long url into just the main domain name (link will still work as normal, just less cluttered). Off by default but exists if you want it
 
+
+
 ## Colophon & Thank Yous
 
 Site built with:

build.js

@@ -1,59 +1,93 @@
+/* eslint-disable no-console */
 const { basename, extname, resolve } = require('path');
-const { cpSync, readdirSync, readFileSync, rmSync, mkdirSync } = require('fs');
+const { rmSync, mkdirSync } = require('fs');
+const { cp, readdir, readFile } = require('fs/promises');
+const sharp = require('sharp');
 
 const { buildRecipes } = require('./src/buildRecipes');
 const buildRecipeIndex = require('./src/buildRecipeIndex');
 const configs = require('./config');
 
-const MARKDOWN_EXT = '.md';
+const THUMBNAIL_WIDTH = 260;
 
-function getRecipeFileList({ recipesPath } = {}) {
-  return readdirSync(recipesPath)
-    .filter(fileName => extname(fileName) === MARKDOWN_EXT)
-    .map(fileName => ({
-      file: resolve(recipesPath, fileName),
-      name: basename(fileName, MARKDOWN_EXT),
-    }));
-}
-
-function readTemplates({ templatesPath }) {
-  return {
-    indexTemplate: readFileSync(resolve(templatesPath, 'index.html'), { encoding: 'utf8' }),
-    recipeTemplate: readFileSync(resolve(templatesPath, 'recipe.html'), { encoding: 'utf8' }),
-  };
-}
+const filterByExtension = (fileList, recipesPath, allowedExtensions) => fileList
+  .filter(fileName => allowedExtensions.includes(extname(fileName)))
+  .map(fileName => ({
+    file: resolve(recipesPath, fileName),
+    fileName,
+    name: basename(fileName, extname(fileName)),
+  }));
 
 function setupOutputDir(outputPath) {
   rmSync(outputPath, { recursive: true, force: true });
   mkdirSync(outputPath);
+  mkdirSync(resolve(outputPath, 'sources'));
+  mkdirSync(resolve(outputPath, 'images'));
+  mkdirSync(resolve(outputPath, 'images/thumbnails'));
+}
 
+function copyStatic({staticPath, imagesPath, outputPath, recipesPath}) {
+  Promise.all([
+    cp(staticPath, outputPath, { recursive: true }),
+    cp(imagesPath, resolve(outputPath, 'images'), { recursive: true }),
+    cp(recipesPath, resolve(outputPath, 'sources'), { recursive: true }),
+  ])
+    .catch((err) => {
+      console.error(err);
+    });
 }
 
-function copyStatic(staticPath, imagesPath, outputPath) {
-  cpSync(staticPath, outputPath, { recursive: true });
-  cpSync(imagesPath, resolve(outputPath, 'images'), { recursive: true });
+function makeThumbnails(outputPath, images) {
+  images
+    .forEach(({ file, name }) => {
+      const thumbnailPath = resolve(outputPath, `images/thumbnails/${name}.jpg`);
+      sharp(file)
+        .resize(THUMBNAIL_WIDTH)
+        .jpeg({ quality: 70 })
+        .toFile(thumbnailPath)
+        .catch(err => console.error(`Problem generating ${thumbnailPath}`, err));
+    });
 }
 
 function main(configs) {
+  const startTime = new Date();
+  const imagesPath = resolve(__dirname, configs.imageDir);
+  const outputPath = resolve(__dirname, configs.outputDir);
+  const recipesPath = resolve(__dirname, configs.recipeDir);
+  const staticPath = resolve(__dirname, './src/static/');
+  const templatesPath = resolve(__dirname, './src/templates/');
+
   const options = {
     ...configs,
-    imagesPath: resolve(__dirname, configs.imageDir),
-    outputPath: resolve(__dirname, configs.outputDir),
-    recipesPath: resolve(__dirname, configs.recipeDir),
-    staticPath: resolve(__dirname, './src/static/'),
-    templatesPath: resolve(__dirname, './src/templates/'),
+    imagesPath,
+    outputPath,
+    recipesPath,
+    staticPath,
+    templatesPath,
   };
 
-  const fileList = getRecipeFileList(options);
-  const { indexTemplate, recipeTemplate } = readTemplates(options);
+  Promise.all([
+    readdir(recipesPath),
+    readdir(imagesPath),
+    readFile(resolve(templatesPath, 'index.html'), { encoding: 'utf8' }),
+    readFile(resolve(templatesPath, 'recipe.html'), { encoding: 'utf8' }),
+  ])
+    .then(([markdownFiles, images, indexTemplate, recipeTemplate]) => {
+      markdownFiles = filterByExtension(markdownFiles, recipesPath, ['.md']);
+      images = filterByExtension(images, imagesPath, ['.jpg', '.jpeg', '.png', '.webp', '.avif']);
 
-  setupOutputDir(options.outputPath);
-  copyStatic(options.staticPath, options.imagesPath, options.outputPath);
-  buildRecipes(recipeTemplate, options, fileList);
-  buildRecipeIndex(indexTemplate, options, fileList);
+      setupOutputDir(outputPath);
+      copyStatic({staticPath, imagesPath, outputPath, recipesPath});
+      makeThumbnails(outputPath, images);
+      buildRecipes(recipeTemplate, options, markdownFiles, images);
+      buildRecipeIndex(indexTemplate, options, markdownFiles, images);
 
-  // eslint-disable-next-line no-console
-  console.log(`Processed ${fileList.length} recipes`);
+      const endTime = new Date();
+      console.log(`Processed ${markdownFiles.length} recipes in ${endTime - startTime}ms`);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
 }
 
 main(configs);

config.js

@@ -18,6 +18,15 @@ module.exports = {
 
   includeHelpLinks: false,
 
+  defaultTheme: 'default',
+
+  /**
+   * Options are:
+   * * 'content'
+   * * 'compact-list'
+   * * 'grid'
+   */
+  initialIndexView: 'content',
   /**
    * help urls to include (will be listed in the order below)
    * label = text displayed