AirCMS

Use Airtable as a CMS

Features:

• Create your own CMS Collection Templates and pull the data from airtable. Use attributes to help the script know what is what.
• Use your own airtable base as a custom Content Management System

Airtable Setup

Each table is it's own Collection. Each table must have a field called slug. For best results use the formula field with the formula below. this formula takes the Name field and makes all letters lowercase, with every space it replaces with a -

LOWER(
  SUBSTITUTE(
    IF(
      FIND(" (", Name),
      REPLACE(
        Name,
        FIND(" (", Name),
        FIND(")", Name),
        ""
      ),
      Name
    )
    ,
    " ",
    "-"
  )
)

Attribute tags:

Collection Lists

A collection list is a dynamic list that populates on your page, typically used in web development to display a set of items that are fetched from a data source, such as a database or an API. Each item in the collection list represents a single entity from the data source, and the list can automatically update as the data changes.

For example, in a blog application, a collection list might display a list of blog posts. Each item in the list would represent a single blog post, including its title, summary, and publication date. The collection list can be configured to automatically update when new blog posts are added or existing ones are modified.

Set up

To setup a collection list in your html it must contain a wrapper, list, empty, and item. here is the structure:

<div airCollection="wrapper">
  <div airCollection="list" airTable="products" loader-color="purple">
    <div airCollection="item">
      This is the item template that will be duplicated by the script
    </div>
  </div>
  <div airCollection="empty">
    This is where you would design what your Empty Collection
  </div>
</div>

The item with the airCollection="list" attribute must also have airTable="name of table". This is what allows the script to determine which table in your base to retrieve the data from.

Binding Data to collection item

Example of airCollection="item" div:

<a
              airCMS-image="main_image"
              style="
                background-image: url('https://cdn.prod.website-files.com/67200b19be39c0429e0468df/67240297b87c0e69bc182500_img.png');
              "
              airCMS-link="this"
              ><div>
                <div >
                  <div >$</div>
                  <div
                    airCMS-format=".2"
                    airCMS-text="sale_Price"
                  >
                    20.00
                  </div>
                </div>
              </div>
              <div airCMS-rating="rating" max="5">
                <div>
                  <img
                    airCMS-ratingStar="true"
                    src="https://cdn.prod.website-files.com/671fe75ae6a2a4e433e65afb/67200fd6746a3101fee76788_Vectors-Wrapper.svg"
                  /><img
                </div>
              </div>
              <div>
                <div>
                  <div airCMS-text="Name">
                    Lemon Grass Soap
                  </div>
            </a>

Collection Pages

setup: 404.html page This script needs to be on all pages in the after body tag. or in your website header script:

// Imports
import airCMS from "aircms";
import dotenv from "dotenv";
dotenv.config();

window.onload = () => {
  const cms = new airCMS(); // Instantiate airCMS class
  cms.init(); // initialize airCMS
};

head of index: (For STYLING)

<link
  rel="stylesheet"
  type="text/css"
  href="./node_modules/aircms/src/css/stylesheet.css"
/>

FUTURE UPDATES

• LightBox
• Loader on Full Page or In Individul spots
• Decreased Async functions by nesting one level deep of records initially.