Callete

A framework built for beginners, and speed.

Discord: discord.gg/SMP5Sy

Installing

Run this command:

$ npm i -g callete

to install callete.

Starting a project

callete create <name> [starter]

name: The name of the project

starter: A link to a git repository to clone

Development builds

callete build

Builds and runs a server.

Production builds

callete build -p [-N]

Builds a production-ready site in a dist folder in your project folder.

-N or --netlify: Builds for netlify with files like _redirects

Routing

In your callete project which has a very simple file structure:

callete.config.json  /components  package.json  routes.json

Where would we manage routes?

Yes, another amazingly simple feature of callete: routes.json

This is the default:

[
	{
		"url": "/",
		"component": "index.ette"
	},
	{
		"url": "/about",
		"component": "about.ette"
	}
]

No need to be scared! It's just a JSON array. Just make another object in the array, like if we wanted a contact page:

[
	{
		"url": "/",
		"component": "index.ette"
	},
	{
		"url": "/about",
		"component": "about.ette"
	},
	{
		"url": "/contact",
		"component": "contact.ette"
	}
]

Now the other important piece of the puzzle where are we linking to in the component variable?

Well we just link to a file in the components folder.

.ette

The .ette extension is calletes form of html its literally html with custom components its just a filename extension no need to be worried.

Components

The simplest yet most effective part of callete!

As simple as this:

components/index.ette

<Navigation>

Now how would we make a component

components/Navigation.ette

<a href="/">Home Page</a>
<a href="/about">About Page</a>

Yes, as simple as that.

Markdown

To include markdown into your pages you need to create a markdown directory.

We'll be calling it Markdown.

No subdirectory support is currently included for your markdown folder.

Now you have to edit your callete.config.json.

The default is this:

{
	"name": "<name>",
	"description": "A Callete App.",
	"version": "1.0.0"
}

To add markdown:

{
	"name": "Docs",
	"description": "A Callete App.",
	"version": "1.0.0",
	"markdown": "Markdown"
}

Then to include it in any of our .ette files:

<Markdown file='filename (no .md)'></Markdown>