项目作者: intuition-dev

项目描述 :
Intuition v1. CLI for Pug, CRUD and docs/blogs as staticGen, and much more.
高级语言:
项目地址: git://github.com/intuition-dev/INTUITION.git
创建时间: 2018-07-26T11:41:24Z
项目社区:https://github.com/intuition-dev/INTUITION

开源协议:MIT License

下载


MetaBake ( Intuition v1 )

‘All my friends KNOW the low-coder’

mbake CLI is open source and extensible low-code productivity bundler/builder that leverages Pug and JAMstack.

Overview

MetaBake(mbake) provides a bundler/builder for a developer to write cleaner code quicker, with pug and livereload out of the box.

You can gradually adopt it while it allows you to develop quicker - and with clean simplicity - Static Websites, Custom Elements, custom CMS/E-Commerce, CRUD and all sorts of dynamic Web Apps.

Please star our main project here:

Prerequisites

You should know HTML, CSS and JavaScript - that is all we use. If you need to catch up, we recommend this book: ‘Design and Build Websites’ by Jon Duckett.

Quick start

  1. npm i -g mbake
  2. mbake -w . /* for a base website */
  3. cd website
  4. mbake -w . /* to run the watcher livereload */

INTUITION in 4 Minutes

Building sites take a few moments, just add index.pug and dat.yaml files in the folder, and compile it with mbake . from the root folder of your site.

Example

Create a folder called ‘one’.
In the folder ‘one’, create file index.pug

  1. header
  2. body
  3. p Hello #{key1}

and create file dat.yaml

  1. key1: World

Note: to create a new page|screen in mbake, create a new folder with an index.pug and day.yaml in each folder.

Now make with mbake:

  1. mbake .

This will create index.html. Of course you can use regular Pug syntax to include other Pug files or Markdown. (INTUITION Markdown flavor includes CSS support):

  1. body
  2. div
  3. include:metaMD comment.md

And example Markdown file with CSS nested classes. Title is nested in 2 levels, .column class CSS and second level .stick CSS class

  1. :::: column col-2
  2. ::: stick
  3. Title
  4. :::
  5. ::::

So if you write a Markdown file comment.md, it will be included in index.html

Watcher

This will start a webserver and auto-refresh browser, and watch for file changes to auto build:

  1. mbakeX -w .

Instead of . you can specify any path.
Also, the fact that we are generating this static content allows us to have the entire Web App served by a CDN

SASS

CSS can be hard to work with, so people use Sass/Scss. Create a style.scss file:

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3. body {
  4. font: 100% $font-stack;
  5. color: $primary-color;
  6. }

Create file style.yaml in assets folder, to compile your scss to css

  1. css:
  2. - style.scss

and run

  1. mbake -s .

It will create a css file in assets/css with auto-prefixes.

So the structure of asset folder should look something like that:

  1. assets/
  2. css/style.css /* this is going to be compiled from style.scss */
  3. scss/style.scss /* your working area */
  4. style.yaml /* with `scss` files that need to be compiled */
  5. ...

TypeScript

TypeScript is supper-set of JavaScript. Write a ts file, like foo.ts:

  1. foo(i:number) {
  2. console.log('oh hi')
  3. }

and run

  1. mbake -t .

Lots of time you use .ts to call DB services: such as Google FireStore.

Examples - Website

There are 12 very different examples included in the mbake CLI. One is just a website:

  1. mbake -w

That will extract an example website in the current folder. ( Obviously you can create any layout with any combination of css and other libraries, but here is how we laid out an example/starter website).

  1. mbake -f .

This emits a Pug file that you should include in your Pug’s layout head section.
In turn, the included file calls a mbToolBelt.js from a CDN.

Apps

While you can build websites: you can also build full webapps, eg. CRUD.

Other examples include:

  • Using markdown CSS effect: allows non-programmers to write interactive stories
  • Slide show with markdown
  • Dashboard example
  • Ads example

Links

Advanced Front End w/ Pug

mbake CLI Docs

Git Repo

Pug example

INTUITION.DEV Home Page