Abell

A Static-Site-Generator for JavaScript Developers.

Get Started GitHub Logo  GitHub 
    npx create-abell-app my-cool-blog
cd my-cool-blog
npm run dev

Why Abell?

New template engine to flatten the learning curve and faster builds 💅

Abell files are HTML files which allow you to write JS inside curly brackets so you can use JavaScript to loop over data, require static data, and use conditions in the HTML. Styling, client-side scripting and almost everything else stays same as you would do in vanilla HTML.

Input (.abell)

index.abell

{{ 
  const a = 'Hello';
  const b = ', World 🌻';
}}

<html>
  <body>
    I can render JavaScript! 
    Look: {{ a + b.toUpperCase() }}
  </body>
</html>

Output (.html)

index.html

<html>
  <body>
    I can render JavaScript! 
    Look: Hello, WORLD 🌻
  </body>
</html>

View on CodeSandbox

Edit abell-hello-world

Output What is Needed

Abell builds a static website for you on abell build so if your website does not need any client-side JavaScript, Abell will not add any JavaScript in your project!

For example, if we don't have any CSS and script in the code, this is what the output will look like:

Input

  • index.abell
  • Nav.abell
  • Footer.abell
  • Meta.abell

Output

index.html

Control over bundling!

Have a critical CSS/JS that needs to load as soon as user visits the page? With Abell you can inline a CSS or JavaScript from component!

Nav.abell

<AbellComponent>
  <template>
    <nav>I am an important navigation bar!</nav>
  </template>

  <!-- 'inlined' attribute adds CSS to <head> tag of the parent page during build -->
  <style inlined>
    nav {
      background-color: #111;
      color: #fff;
      padding: 10px 20px;
    }

    /*
      styles are scoped by default.
      You can use 'global' attribute on style tag to make it global.
    */
  </style>

  <!-- 
    'bundle' attribute adds the content to a new bundle of given name 
    ('nav.js' in this case) 
  -->
  <script bundle="nav.js"> /* not so important JavaScript */ </script>
</AbellComponent>

Edit abell-with-components

Build JSON based websites { }

If you have a portfolio and you're bored of writing code to add new project, you can have all the info of your projects

./site.json

{
  "title": "This is my Title",
  "projects": [
    {
      "name": "My cool project",
      "description": "Look at this cool project"
    },
    {
      "name": "Another project",
      "description": "This is another project"
    }
  ]
}

./projects.abell

{{ const siteData = require('./site.json'); }}
<html>
  <head>
    <title>{{ siteData.title }}</title>
  </head>
  <body>
    {{
      siteData.projects
        .map(project => 
          `<div>${project.name}</div>`
        )
    }}
  </body>
</html>

Output

./projects.html

<html>
  <head>
    <title>This is my Title</title>
  </head>
  <body>
    <div>My cool project</div>
    <div>Another project</div>
  </body>
</html>

Edit read-json

Build Markdown based websites 📖

With abell, you can import markdown content using Abell.importContent('path/to/mardown.md'). Even this text that you're reading right now is coming from https://github.com/abelljs/abell-website/blob/main/content/index.md

./content/index.md

# Abell's Intro Blog!

I loveeee writing markdown!

Star [Abell on GitHub](https://github.com/abelljs/abell)

./theme/index.abell

<body>
  <section class="blog-contaier"> 
    {{ Abell.importContent('./index.md')  }}
  </section>
</body>

Note: As you can see in the example, the path in Abell.importContent is relative to ./content directory

Output

./dist/index.html

<body>
  <section class="blog-contaier">
    <h1 id="abell-s-intro-blog-">Abell's Intro Blog!</h1>
    <p>I loveeee writing markdown!</p>
    <p>Star <a href="https://github.com/abelljs/abell">Abell on GitHub</a></p>
  </section>
</body>

Edit read-markdown



And a lot more!!

Get started with Abell for complete documentation 🐨🎉



GitHub Contributors

Check out GitHub @abelljs for list of repositories, every repo has a README for contribution guide