Proof of Concept: A CMS for BSS using airtable

Reflow
1

I’ve been playing around with various options including node.js react/next.js options to create a simple cms to be usable with bss. All work great on localhost but wanted something that could be used on the bss.design server.

Here is what I have come up with using a free airtable account, and vanilla javascript.

Quick video of creating an article:

6 Likes
2

This is very cool, pretty much exactly what I am asking for in ‘reflow as a blog’.

Looks excellent so far, well done.

3 Likes
3

How is the page airCMS
created ?

4

@twinstream
The design/html is created in bss, and it runs on 4 javascript files

  • Airtable.js - an external file from airtable to communicate with the airtable database
  • An external markdown javascript to convert the markdown to html
  • A JS file for the index page that lists the ‘cards’
  • A JS file for the article page that injects the relevant fields into an element with the corresponding ID

So you would have code something like

<h1 id="artTitle"> </h1>
<h4 id="artSummary"> </h4>
<div id="artContent"> </div>

Then the script would add the correct info to each element, allowing you to use any design.

5

@richards
Thank you. My question is related to the article page(s) themselves. The url of the pages for example the last two from the Read More have different slugs such as article.html?id=recimywR9z4zYRCd9 for the second to last and article.html?id=recOMJPkeMqR6GLIG for the last one which I assume was added in you video demo. I am trying to wrap my mind around how those are created?

Are you using a reflow component perhaps ?

6

@twinstream

When you call the airtable api it will return a list of the articles in an array which would look something like:

{
        "id": "reckGQ0BSP8ocST2V",
        "fields": {
            "Cover_Image": [
                {
                    "id": "att5mllfkPgtk7dRM",
                    "width": 842,
                    "height": 420,
                    "url": "https://dl.airtable.com/.attachments/48f5e59b193cee176fc3f93ae1529389/45a5100d/enissan.jpg",
                    "filename": "enissan.jpg",
                    "size": 23124,
                    "type": "image/jpeg",
                    "thumbnails": {
                        "small": {
                            "url": "https://dl.airtable.com/.attachmentThumbnails/ef158a73d1c2a171ebcbb0155a9d2397/caf90ff3",
                            "width": 72,
                            "height": 36
                        },
                        "large": {
                            "url": "https://dl.airtable.com/.attachmentThumbnails/d34cdcaf66bfdd067a9f6fc695f2b4c6/7b2c5e9b",
                            "width": 842,
                            "height": 420
                        },
                        "full": {
                            "url": "https://dl.airtable.com/.attachmentThumbnails/2c73684b6bf46b08932c9d026c51e795/9f7bcebc",
                            "width": 3000,
                            "height": 3000
                        }
                    }
                }
            ],
            "Title": "Nissan announces all-new electric compact car coming to Europe",
            "Category": "General",
            "Summary": "Planned to be manufactured in the Renault ElectriCity centre in France, the new car will succeed the iconic Nissan Micra as the entry-level vehicle in the Nissan line-up.",
            "Content": "The Europe region is already playing a key role in driving electrification under Nissan’s Ambition 2030 vision, with new vehicles and technologies arriving soon including the new Nissan Ariya, a new EV crossover and Nissan’s unique e-POWER technology arriving in Europe in the new Qashqai and X-Trail.\n\nThe all-new electric compact car will further enhance this future line-up. Announced today as part of the new Alliance 2030 roadmap, it is designed by Nissan and engineered and manufactured by Renault on the Alliance CMF B-EV platform. This platform enables the companies to maintain unique styling for their respective products, as demonstrated by the design preview of the new vehicle.\n“This all-new model will be designed by Nissan and engineered and manufactured by Renault using our new common platform, maximizing the use of our Alliance assets while maintaining its Nissan-ness,” said Nissan Chief Operating Officer Ashwani Gupta.\n\n“This is a great example of the Alliance’s ‘smart differentiation’ approach. Succeeding our iconic Micra, I am sure this new model will provide further excitement to our customers in Europe.”\n\nThe future compact EV was announced today as part of Alliance 2030, a common roadmap announced by Renault, Nissan & Mitsubishi Motors that focuses on EVs and connected mobility activities.\n\nThe EV announced today adds to the portfolio of Nissan vehicles manufactured by Renault in France, which include Nissan’s portfolio of LCVs, notably the new Nissan Townstar, which is succeeding the trailblazing e-NV200 as Nissan’s small electric van.\n\n",
            "Status": "Published",
            "CreatedDate": "2022-02-02T19:13:50.000Z"
        },
        "createdTime": "2022-02-02T19:13:50.000Z"
    }

As you can see the first entry is the “id”: “reckGQ0BSP8ocST2V”

I’ve set the javascript to create a link of:

'<a href="article.html?id=' + record.id + '">Read More</a>'

Then on the article page the javascript takes the ?id=reckGQ0BSP8ocST2V and loads only the data for that entry.

Hope that makes sense :slight_smile:

7

@richards
Yes that answers my question. Nice integration.

8

this looks awesome. Mind sharing the code for everyone else here?

1 Like
9

I was going to write a ‘how to’ the only problem is because it uses javascript to dynamically load the content then it isn’t good for SEO, or any google indexing. But if it is something you are interested in I will post.

1 Like
10

Yes, I would be interested.

11

Same here, share away.