site architecture

100 Automations Architecture

Live version

In Development version

PLEASE READ JEKYLL DOCUMENTATION HERE

100 Automations site Architecture can be broken down into a Model View Control paradigm.

Model: Collections
View: _sass
Control: Jekyll

Collections

We have two folders for our collections: _guides, and _automations.

_guides

_guides contain content in a markdown format. Their YAML front matter contains a title, description, status, and display.

---
title: String
description: String
status: String (Either active or inactive)
display: Boolean
---

{{content}}

_automations

_automations are markdown files that only contain YAML front matter

---
identification: String (A number in string format)
title: String
description: String
image: API Endpoint (assets/images/projects[project repo name + .png])
alt: String (for image)
Authors:
- name: String(First Last)
  links:
    slack: URL
    github: URL
  picture: URL
links: 
  - name: String
    url: URL
looking:
  category: 
   - String
   - skill: String
needs: 
 - String
status:

  - String

seen-in:
 - String (lock-icon)

visible: Boolean

---

Views

The views are a provided by the _sass directory, styling our html

_sass Directory

There are two folders that need styling: _includes, and _layouts. Our styles are imported through the head.html file.

includes
1. action.scss : action.html
2. ato_grid.scss : ato_grid.html
3. borders.scss : border.html
guide
1. index.scss : guides.html

Controllers

Jekyll is going to create routes using its _config.yml. It routes that data into an index.html file, and you as a developer are responsible for how the data is routed. Data can be held within other html components or routed to other components.

_config.yml

This file contains the site's title, description, url, and routes.

# This is the sass compiler for jekyll
sass:
  sass_dir: _sass
  style: compressed
# Routing our two collections denoted with an "_" in our root directory
collections:
  automations:
  guides:
    output: true
# Routing the user to each collection item, and defining a layout.
defaults:
  - scope:
      path: ""
      type: "guides"
    values:
      layout: "guides"

index.html

The index.html file is displaying a layout, and contains various include statements. We will go over this file as well as the default.html layout.

---
layout: default
---
<!-- We are including our components to create our home page -->
{% include action.html %}
{% include ato_grid.html %}
{% include border.html %}
{% include guide_grid.html %}

Jekyll looks for the index.html file in its root directory and displays whatever is on it. Thanks to Liquid you can write to Jekyll.

First Jekyll reads the front matter: It reads use the layout: default. Jekyll will look for a folder called _layouts, and a file called default.html.

default.html

<!DOCTYPE html>
<html lang="en">
{% include head.html %}

<body>
    <div id="app">
        <!-- This div is necessary for mdl components to work -->
        <div class="container-layout mdl-layout mdl-js-layout">
            {% include header.html %}
            <main class="mdl-layout__content">
                {{content}}
            </main>
            {% include footer.html %}
        </div>
    </div>
</body>

</html>

You tell Jekyll that you want to include the head.html in the <head> section. The head.html contains the links for our css, as well as the Content Delivery Network links for Material Design lite js & css.

We also have a header component: header.html; and a footer component: footer.html. The {{content}} that will be displayed is the index.html page.

Lesson Plan

You should gain, or will gain a familiarity with these materials:

The Wiki is a working document and we would love to improve it. Please compile any questions and suggestions you may have and submit it via creating an issue on our project board.