Use the recipe to drive the renderer

recipes/html-element.yaml

@@ -9,9 +9,6 @@ body:
 - prose.accessibility_concerns?
 - prose.*
 - meta.examples
-- meta.info_box:
-    - meta.api
-    - meta.permitted_aria_roles
-    - meta.tag_omission
+- meta.info_box
 - meta.browser_compatibility
 - prose.see_also

scripts/build-json/build-page-json.js

@@ -22,29 +22,75 @@ function writeToFile(json, elementPath) {
   fs.writeFileSync(dest, `${JSON.stringify(json, null, 2)}`);
 };
 
+async function processMetaIngredient(elementPath, ingredientName, data) {
+    switch (ingredientName) {
+        case 'interactive_example':
+            return data.interactive_example;
+        case 'browser_compatibility':
+            return bcd.package(data.browser_compatibility);
+        case 'attributes':
+            if (data.attributes.element_specific) {
+                const attributesPath = path.join(elementPath, data.attributes.element_specific);
+                return await attributes.package(attributesPath);
+            } else {
+                return [];
+            }
+        case 'examples':
+            const examplesPaths = data.examples.map(relativePath => path.join(elementPath, relativePath));
+            return await examples.package(examplesPaths);
+        case 'info_box':
+            // TODO: implement packaging for info boxes
+            return 'info_box-value';
+        default:
+            console.error(`Error: Unrecognized ingredient: ${ingredient}`);
+            return null;
+    }
+}
+
+async function processProseIngredient(ingredientName, proseSections) {
+    if (ingredientName !== '*') {
+        const matches = proseSections.filter(section => section.value.id === ingredientName);
+        if (matches.length > 0) {
+            return matches[0];
+        }
+    } else {
+        const additional = proseSections.filter(section => !section.value.id);
+        return {
+          type: 'additional_prose',
+          value: additional
+        };
+    }
+}
+
 async function buildFromRecipe(elementPath, data, content) {
     const item = {};
+    item.title = data.title;
+    item.mdn_url = data.mdn_url;
 
-    // load the recipe to get related_content
     const recipePath = path.join(process.cwd(), './recipes', `${data.recipe}.yaml`);
     const recipe = yaml.safeLoad(fs.readFileSync(recipePath, 'utf8'));
     item.related_content = related.buildRelatedContent(recipe.related_content);
 
-    item.title = data.title;
-    item.mdn_url = data.mdn_url;
-    item.interactive_example_url = data.interactive_example;
-    item.browser_compatibility = bcd.package(data.browser_compatibility);
-
-    if (data.attributes.element_specific) {
-        const attributesPath = path.join(elementPath, data.attributes.element_specific);
-        item.attributes = await attributes.package(attributesPath);
-    } else {
-        item.attributes = [];
-    }
-
-    const examplesPaths = data.examples.map(relativePath => path.join(elementPath, relativePath));
-    item.examples = await examples.package(examplesPaths);
-    item.prose = await prose.package(content);
+    // for each ingredient in the recipe, process the item's ingredient
+    const proseSections = await prose.package(content);
+    item.body = await Promise.all(recipe.body.map(async ingredient => {
+        const [ingredientType, ingredientName] = ingredient.replace(/\?$/, '').split('.');
+        if (ingredientType === 'meta') {
+            const value = await processMetaIngredient(elementPath, ingredientName, data);
+            if (value) {
+                return {
+                  type: ingredientName,
+                  value: value
+                };
+            }
+        } else if (ingredientType === 'prose') {
+            return await processProseIngredient(ingredientName, proseSections);
+        } else {
+            throw (`Error: Unrecognized ingredient type: ${ingredientType}`);
+        }
+    }));
+    // filter out missing ingredients
+    item.body = item.body.filter(x => !!x);
 
     const contributorsPath = path.join(elementPath, 'contributors.md');
     item.contributors = await contributors.package(contributorsPath);

scripts/build-json/slice-prose.js

@@ -33,35 +33,37 @@ function extractFromSiblings(node, terminatorTag, contentType) {
     return content;
 }
 
-function getSection(node, sections) {
+function getSectionValue(node, sections) {
     const sectionName = node.textContent.trim();
     const sectionContent = extractFromSiblings(node, 'H2', 'html');
 
     if (namedSections.includes(sectionName)) {
-        const sectionSlug = sectionNameToSlug(sectionName);
-        sections[sectionSlug] = {
+        const sectionId = sectionNameToSlug(sectionName);
+        return {
             title: sectionName,
+            id: sectionId,
             content: sectionContent
-        }
+        };
     } else {
-        const additionalSection = {
+        return {
             title: sectionName,
             content: sectionContent
         };
-      sections['additional_sections'].push(additionalSection);
     }
 }
 
 async function package(proseMD) {
-    const proseHTML = await markdown.markdownToHTML(proseMD)
+    const proseHTML = await markdown.markdownToHTML(proseMD);
     const dom = JSDOM.fragment(proseHTML);
-    const sections = {
-        'additional_sections': []
-    };
+    const sections = [];
     let node = dom.firstChild;
     while (node) {
         if (node.nodeName === 'H2') {
-            getSection(node, sections);
+            const sectionValue = getSectionValue(node, sections);
+            sections.push({
+                type: 'prose',
+                value: sectionValue
+            });
         }
         node = node.nextSibling;
     }