added readme instructions on new shortcodes, templates, partials

README.md

@@ -31,7 +31,9 @@ content/\_index.md -> yoururl.com/
 content/blog/\_index.md -> yoururl.com/blog
 content/careers/index.md or content/careers.md -> yoururl.com/careers
 
-### Blog
+### Section Templates
+
+#### Blog.html
 
 The blog page is created by default if there is a blog folder in the content directory. The blog page consists of a featured post row, a paginated grid of posts sorted by recency, and a side nav of post categories and featured posts.
 
@@ -39,6 +41,10 @@ Blog posts can have categories, and can be filtered by said categries. To add a
 
 To make a blog post featured, simply add an isFeatured attribute to the yaml header of the blog post. The most recent featured blog post wiil be displayed on the heading row of the blog page, and the rest will be displayed under featured posts in the side nav. See /content/blog/2019/03/post-5/index.md for implementation.
 
+#### Section.html
+
+The default section template, displays section body without styling (except for margins), and displays subpages of the section below. The subpages of the page are displayed as small summaries of pages with title, description, and tags, as rendered by partials/pageBox.html. The subpages are grouped by the taxonomy name passed in as the "group_pages_by" extra attribute, defined in the section's yaml header.
+
 ### Creating custom pages
 
 To create your own page, simply create a markdwn file following the examples provided above.
@@ -48,18 +54,40 @@ By default, the markdown file will be displayed plainly as it is.
 
 If you wish to display your markdown files in a specific page template, simply define the template you would like to use in the yaml header of your markdown file. For instance, the blogPage.html template displays blog posts with author info, date, side margins, and a hero image on top of the post. See any blog page in /content for implementation.
 
-#### Augmented MD
+### Shortcodes
 
 To give website creators freedom in styling without necessitating getting outside of the /content directory and in to the html files, the template has a few features.
 
-- row.html shortcode
+- #### row.html shortcode
 
 Markdown only goes vertical, but this shortcode allows one to add horizontal elements to their web pages. Simply use the {% row() %} {% end %} syntax and place your content in between. The row shortcode can also take a bgPath parameter if you want your row to have a background. (see /content/careers/index.html)
 
 You can create columns in your row by using three vertical bars. ( ||| )
 You can fill in your columns with regular markdown, but they can also be empty.
 
-- Image sizing with source paths
+- #### menu.html
+
+Just like row, menu renders a row with columns split by ( ||| ). However, menu is specifically used to create menu objects for expandible header items. The menu shortcode supports button shortcodes in itself, and provides styling for the menu.
+
+- #### button.html
+
+A simple button shortcode that takes a body and displays it inside a button that is animated on hover. The button also is entirely clickable, and navigates to the first of if any children link elements.
+
+- #### mermaid.html
+
+Simple mermaid shorcode that can be used to create mermaid diagrams in markdown. Also supported in row shortcode.
+
+[Mermaid]("https://mermaid-js.github.io/mermaid/#/")
+
+- #### annotation.html
+
+Simple annotation shorcode that can be used to create annotation objects in markdown.
+
+(note: inline and inline end qualifiers do not work.)
+
+[Annotations]("https://squidfunk.github.io/mkdocs-material/reference/annotations/#usage")
+
+### Image sizing with source paths
 
 You can size your markdown images by adding #small, #medium or #large at the end of the images source url.
 See /content/\_index.md for implementation.

content/_index.md

@@ -7,7 +7,6 @@ draft: false
 extra:
   author: Your name here
   imgPath: /images/threefold_globe.png
-  #subtitle:
 ---
 
 {% row() %}

content/join-us/_index.md

@@ -3,6 +3,8 @@ title: "Join us"
 template: "section.html"
 page_template: "positionPage.html"
 insert_anchor_links: "left"
+extra:
+  group_pages_by: "roles"
 ---
 
 {% row(bgPath="/images/bernhard-eisenmann-unsplash.jpg") %}

templates/partials/pageList.html

@@ -1,18 +1,20 @@
 
 <div id="list"></div>
-<div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
-    {% set taxonomy = get_taxonomy(kind="roles") %}
-    {% set roles = taxonomy.items %}
-    {% for role in roles %}
-    <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
-        {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
-        <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
-        {% set path = role.name | slugify %}
-        {% set fullpath = "/roles/" ~ path %}
-        <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
-        {% for page in role.pages %}
-            {% include "partials/pageBox.html"%}
+{% if section.extra.group_pages_by %}
+    <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
+        {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
+        {% set roles = taxonomy.items %}
+        {% for role in roles %}
+        <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
+            {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
+            <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
+            {% set path = role.name | slugify %}
+            {% set fullpath = "/roles/" ~ path %}
+            <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
+            {% for page in role.pages %}
+                {% include "partials/pageBox.html"%}
+            {% endfor %}
+        </div>
         {% endfor %}
     </div>
-    {% endfor %}
-</div>
+{% endif %}