The abell from dipeshchouhan

NOT READY ENOUGH TO USE IN PRODUCTION. ☠️

Abell is a static site generator that generates sites in Vanilla HTML, CSS, JavaScript.
Built on top of abelljs/abell-renderer.

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

For Locally setting up the repository and Contribution Guidelines, check out CONTRIBUTING.md

Table of Content

Create your site
- Write/Edit Content
- Run your site locally
Abell Guide
Changelog

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 and npm run build to create final build.

2. Abell Guide

Abell Configs

Sample abell.config.js:

module.exports = {
  sourcePath: 'theme', // path of source where index.abell and [$slug]/index.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 ./theme/[$slug]/index.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 ./theme/[$slug]/index.abell with {{ meta.title }}, {{ meta.description }}, {{ meta.foo }}.

Content also has predefined variables that are mentioned in predefined variables section

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`
$contentArray	Array of all 'meta' values from content	`[{title: 'Cool Blog', $slug: 'my-cool-blog'}, {title: 'Nice blog', $slug: 'nice-blog-69'}]`

Predefined variables meta.$createdAt and meta.$modifiedAt can have unexpected changes in some cases, thus for more stable dates, you can overwrite these values by adding new values to the meta.json file in content/:slug/meta.json

Example ./content/:slug/meta.json

{
  "title": "Another blog",
  "description": "Amazing blog right",
  "$createdAt": "May 20 2020",
  "modifiedAt": "May 22 2020"
}

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 $contentArray

// $contentArray
[
  {
    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 $contentArray with,

<div class="article-container">
{{
  $contentArray
    .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 {{ }}

Changelog

Changelogs are maintained in CHANGELOG.md

If you want to know the status and get updates you can follow me on Twitter @saurabhcodes

dipeshchouhan / abell Goto Github PK

abell's Introduction