Skip to content
'All my friends KNOW the low-coder'. CLI for Pug and much more.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
more_examples
originalVersion
src
.editorconfig
.gitattributes
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
book.png
checklist.md
ip.txt
logo.png logo Jul 30, 2019
versions.yaml

README.md

MetaBake

'All my friends KNOW the low-coder'

MetaBake is open source and extensible low-code productivity tools for front-end developers.

Overview

MetaBake(mbake) provides all the necessary tools 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

npm i -gmbake
mbake -w . /* for a base website */
cd website
mbakeX -w . /* to run the watcher/livereload */

You can also use: npm i -g mbake BUT NOTE: You can't use sudo w/ npm.

MetaBake 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

header
body
   p Hello #{key1}

and create file dat.yaml

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:

mbake .

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

body
   div
      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

:::: column col-2
::: stick
Title 
:::
::::

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:

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 webapp served by a CDN

SASS

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

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
   font: 100% $font-stack;
   color: $primary-color;
}

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

css:
- style.scss

and run

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:

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

TypeScript

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

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

and run

mbake -t .

It will create a .js and min.js files. It will output ES5 to support IE11, so feel free to use class { } syntax. If there is no .ts, than it will simply slightly mimifify js files into min.js (but no ES5 conversion).

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:

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).

MetaBake tool belt

There are some libraries (and poly fills) that you use often. We just have a list of links, making them easy to load(depp.require())

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 toolBelt.js from a CDN.

Other examples include:

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

Links

Docs

Git Repo

Pug example

INTUITION.DEV Home Page

You can’t perform that action at this time.