Con2Gen

Another Static Site Generator --> used to generate content pages without the need to write code (after the generator is set up).

Currently planned to be markdown based, with modular/optional sections.

Design is currently WIP; everything in this document is subject to change

Original Notes:

General Process:

• Create a sample page/template page with HTML/CSS/JS
• Add divs with div id "generator_template_SECTION_NAME"
  • Each template file will generate html/css/js formatted to what's inside the "generator_template_SECTION_NAME" div
• Extract template sections from the div ids
• Import content sections (filled in from each template)
• Combine content sections in the original order of the HTML/CSS/JS
• Generate pages with the "generator_template_SECTION_NAME" and similar template filler removed

Possible idea:

• User writes in markdown for each section
  • If using a CMS approach (like wordpress), the user types directly into an editor with a live preview of the page output
  • If just using the markdown approach, two options appear:
    1. A content section file is created for EACH "generator_template_SECTION_NAME"
    2. One markdown file is created for each page, where each "generator_template_SECTION_NAME" is a simple markdown element
       • This could be as simple as writing "#S.Instructions" before the "Instructions" section
• This needs to stay simple on the side of the content writing user
  • Anyone writing content should not have to care about anything beyond writing content for the sections they wish to include

WIP Design Notes:

The main idea for this project is that a user (content writer) should not care about the underlying code when creating a new page (review, guide, recipe, etc).

For the first iteration of this project, only terminal commands will be used for generation --> no UI will be available. This means that users will write their files (either markdown or section files depending on the approach). These files will be compiled to match the template HTML/CSS/JS

Two ideas for making a page for a cooking website:

Option 1, Templated Markdown, Sections:

• A sample recipe page is created in a frontend language of choice
• Empty wrappers are added around different sections of the sample page to mark where each part of a template begins/ends
  • Ex: The "ingredients" and "instructions" settings may have wrappers around them, so that section template files are created for "ingredients" and "instructions"
  • The author of the recipe page would add the ingredients as a bulleted list to ingredients.md, the instructions as a bulleted list to instructions.md
  • A section for "Recipe History" would have a recipe_history.md section that may just contain paragraphs of text
• The markdown files for each section are then compiled in the order that the generator is set up for (usually a direct match to the order of the sample file)

Option 2, Templated Markdown, Single File:

• Similar process as above, but with a single file for each section

Advantages over markdown sections:

• Simplier to write --> page authors can just write markdown
• Only one file per content page
• Most intuitive approach for authors

Disadvantages over markdown sections:

• Reordering sections becomes annoying, as the markdown file would directly compile to the output html/css/js
• More difficult to add custom code

Option 3, Hybrid Templated Markdown:

This option is designed to be a hybrid of the two approaches. Each content page will have exactly two files that the author will need to edit: Content.md and Variables.md

• Content.md will follow a similar to "Templated Markdown"
  • Author receives a markdown file with every section from the template available
  • These sections will be blank and follow the approach seen under "Example Empty Hybrid Content.md File"
  • Any sections that are auto generated by other code will start with the body <Section.GeneratedSection> to mark it as a generated section
  • Content.md is compiled down into a list of template sections for generation (Ex: Instructions.section, Ingredients.section)
  • These section files are inserted into the output HTML/CSS/JS in their respective spots (matching where they are in the sample/template page)
• Variables.md is a file that contains any variables used in the sample/template page
  • These variables are used directly in the template file
  • Ex: Title, Time, Servings, etc
  • Sample file can be found in Example Empty Variables.md File

Example Empty Hybrid Content.md File

Example of what an untouched content file looks like for a template that contains the sections "Description", "Instructions", "Ingredients", "Nutrition", "Images", and "Comments". For this example "Nutrition" is coded and static (at compile time), while "Comments" is a coded section that is dynamic and calls a database in production.

NOTE: IMAGE STORAGE LOCATION IS STILL TBD

#Section.Description

#Section.Instructions

#Section.Ingredients

#Section.Nutrition
<Section.GeneratedSection>

#Section.Images

#Section.Comments
<Section.GeneratedSection>

Example Empty Variables.md File

TODO: ADD THIS