Homepage

Information

Folder
src/templates/homepage

Files

Schema 
// src/templates/homepage/schema.json

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "required": [
    "authorLinks",
    "content",
    "cta",
    "linkList"
  ],
  "properties": {
    "authorLinks": {
      "type": "object"
    },
    "content": {
      "type": "object"
    },
    "cta": {
      "type": "string"
    },
    "linkList": {
      "type": "object"
    }
  }
}
Mocks 
// src/templates/homepage/mocks.json

{
  "content": {
    "$ref": "components/rte"
  },
  "cta": {
    "$tpl": "components/button",
    "$ref": "components/button",
    "label": "Get it @ npm",
    "url": "https://npmjs.com/package/@miyagi/core",
    "external": true
  },
  "linkList": {
    "title": "Links",
    "headlineType": "2",
    "links": [
      {
        "$tpl": "components/link",
        "$ref": "components/link",
        "label": "GitHub",
        "url": "https://github.com/mgrsskls/miyagi"
      },
      {
        "$tpl": "components/link",
        "$ref": "components/link",
        "label": "npm",
        "url": "https://npmjs.com/org/miyagi/"
      }
    ]
  },
  "authorLinks": {
    "$ref": "components/link-list"
  }
}
Template 
// src/templates/homepage/index.hbs

<div class="Homepage">
  <div class="Homepage-header">
    {{> templates/_includes/header/index.hbs}}
  </div>

  <div class="Homepage-main">
    <main class="Homepage-content">
      {{> components/rte/index.hbs content}}
      <div class="Homepage-cta">
        {{{cta}}}
      </div>
    </main>
    <aside class="Homepage-subContent">
      {{#if linkList}}
      {{> components/link-list/index.hbs linkList}}
      {{/if}}
      {{#if authorLinks}}
      {{> components/link-list/index.hbs authorLinks}}
      {{/if}}
    </aside>
  </div>

  <div class="Homepage-footer">
    {{> templates/_includes/footer/index.hbs}}
  </div>
</div>

Variants

default
Open

miyagi

Introduction

miyagi is a component development tool for JavaScript templating engines.

Benefits

  • No overhead in your project by running _miyagi_ without a configuration file.
  • Works with any folder structure.
  • Helps you developing your components encapsulated.
  • Validates your components for HTML and accessibility violations.
  • Mock data (static or dynamic) allows developing independently from a backend.
  • Validates your mock data against your JSON schema.
  • Documentation of your components using markdown.
  • The layout is customizable, so it fits to your project.
  • Supports lots of template engines by using consolidate.js internally.
  • Allows creating a static build.
  • Lets you create components via CLI.
Get it @ npm