abell v1.0.0-beta.4
📖 Documentation
This documentation is only for the people who want to contribute or just want to try it out for fun. Abell should not be used for production applications yet.
Table of Content
1. Create your site
Deploy to netlify button below will create copy of Abell Starter Project in your GitHub and will deploy it to Netlify and boom! that's it 🎉
REMEMBER! ABELL IS NOT READY! SO DON'T GET TOO EXCITED TO CREATE AN ACTUAL PRODUCTION BLOG WITH THIS.
Write/Edit Content
You can edit markdown files from ./content
directory in your repo to edit content.
To test your blog, you can either run your site locally or open your site's github repository in CodeSandbox
Run your site locally
- You can
git clone <project-github-url>
cd <project-name>
npm install
npm run dev
to run a dev server andnpm run build
to create final build.
2. Abell Guide
Abell Configs
Sample abell.config.js:
module.exports = {
sourcePath: 'src', // path of source where index.abell and template/content.abell are located
destinationPath: 'dist', // Build destination
contentPath: 'content', // Content Path which has .md
globalMeta: { // All the global variables
siteName: 'Abell Demo',
author: 'Saurabh Daware',
foo: 'bar'
}
}
Variables in Abell
Abell lets you use variables inside your .abell files.
- Content Specific Variables that can be accessed from
./src/template/content.abell
. - There are Global Variables that can be accessed from any .abell files with
{{ globalMeta.<key> }}
. - Predefined Variables
Content specific variables
Your content may sometimes have meta data like title, og:image, etc. which is dynamic (different for different content). You can set this meta info from ./content/<content-slug>/meta.json
.
Example ./content/<content-slug>/meta.json
{
"title": "Another blog",
"description": "Amazing blog right",
"foo": "bar"
}
These variables can be accessed from ./src/template/content.abell
with {{ meta.title }}
, {{ meta.description }}
, {{ meta.foo }}
Global variables
You can add your variables in globalMeta
property inside abell.config.js
file and access those variables from .abell files with {{ globalMeta.<key> }}
(e.g {{ globalMeta.siteTitle }}
)
Predefined variables
In addition to Content Specific Variables and Global Variables, Abell has some predefined variables to provide required meta data about the content.
Predefined variables start with $
and are accessible from .abell
files.
List of predefined variables
Variables | description | Example Value |
---|---|---|
meta.$slug | Folder name of content, used as slug | my-cool-blog |
meta.$createdAt | Date & Time of creation of content. | Sun Apr 30 2020 |
meta.$modifiedAt | Date & Time of last modification of content. | Thu May 20 2020 |
$contentList | Array of all 'meta' values from content | [{title: 'Cool Blog', $slug: 'my-cool-blog'}, {title: 'Nice blog', $slug: 'nice-blog-69'}] |
Importing Markdown as HTML
You can import markdown files as HTML in .abell files using $importContent(path)
function.
In this function, paths are relative to 'content' directory.
Example:
<section id="blog-container">
{{ $importContent(meta.$slug + '/index.md') }}
</section>
This will import the markdown as HTML from ./content/my-blog/index.md
. (where my-blog
is dynamic)
Loops in Abell
Starting from v0.1.12, Abell uses abell-renderer for rendering.
You can use JavaScript methods within {{
and }}
so to loop through an object and generate HTML, you can use .map()
method from JavaScript.
Note: The JavaScript you write inside {{
and }}
compiles on build time and runs in NodeJS context so you cannot use frontend JavaScript methods from DOM
Example 1
Let's say we have this object in variable $contentList
// $contentList
[
{
title: 'Cool Blog',
$slug: 'my-cool-blog',
$createdAt: 'Sun Apr 30 2020',
$modifiedAt: 'Wed May 10 2020'
},
{
title: 'Nice blog',
$slug: 'nice-blog-69',
$createdAt: 'Sun Apr 06 2069',
$modifiedAt: 'Wed May 09 2069'
}
]
We can loop $contentList
with,
<div class="article-container">
{{
$contentList
.map(meta => `
<article>
<a href="${meta.$slug}"><h2>${meta.title.toUpperCase()}</h2></a>
<p>Created at: ${meta.$createdAt}</p>
</article>
`).join('')
}}
</div>
outputs:
<div class="article-container">
<article>
<a href="my-cool-blog"><h2>Cool Blog</h2></a>
<p>Created at: Sun Apr 30 2020</p>
</article>
<article>
<a href="nice-blog-69"><h2>Nice Blog</h2></a>
<p>Created at: Sun Apr 06 2069</p>
</article>
</div>
Example 2
Let's say we have globalMeta.foo
as,
['Hi I am 1', 'John Doe', 'Lorem Ipsum']
<div>
{{
globalMeta.foo
.map(content => `<b>${content}<b>`)
.join('')
}}
</div>
outputs:
<div>
<b>Hi I am 1</b>
<b>John Doe</b>
<b>Lorem Ipsum</b>
</div>
You can also use other JavaScript methods within {{
}}
3. Contributing to Abell
This repository contains the code that builds the Abell Website. If you want you can also contribute to other repositories in this organization that deal with starter-templates, vscode extension for .abell files, etc.
Local Setup of Abell Builder
- Fork this repository
git clone {url of your fork}
cd abell
npm install
to install dependenciesnpm run dev:build
to build static site!
and you will have your website in ./demo/dist
To run a DEV server, you can run npm run dev:serve
which will serve the website on localhost
Creating Pull Request
- Create a branch with name of feature you are working on. (e.g.
feat-abell-config
,fix-serve-fails
, etc) - Make changes in your locally cloned fork
- Send Pull Request from your branch to master of main repository.
npm run dev:build
is equivalent to abell build
and npm run dev:serve
is equivalent to abell serve
Changelog
Changelogs are maintained in CHANGELOG.md
If you want to know the status and get updates you can follow me on Twitter @saurabhcodes
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
6 months ago
9 months ago
7 months ago
9 months ago
9 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago