How to feed the compatibility list on the site?

Hi everyone,

The Integrations page of the site allows newcomers to know which devices are Gladys compatible.

This list is fed by you, the Gladys community via an online spreadsheet!

For the moment, this page is not at all exhaustive, but thanks to you this can change :slight_smile:

How to feed the compatibility list of the site?

  1. Join the Airtable list via this link which allows you to become a contributor on this shared document.

  1. Go through the list, and compare with the equipment you have at home and that works with Gladys. If there are any missing devices, it’s time to add them to the list!

  2. To add a device, it’s very simple.

Click on “+” at the bottom of the page to add a line:

Each line has several fields, which must be filled in this way:

The field “Documentation ID”, corresponds to this:

It will be used to create the redirection link to the doc.

For the image, take a good quality landscape image, if possible the image on the manufacturer’s website to be as clean as possible :slight_smile:

The “tags” field is currently not used, don’t bother to fill it for now.

For the purchase link, put a link to what makes the most sense for you (best value for money).

  1. The “FR” tab feeds the compatibility page on the French site, and the “EN” page feeds the English site. Remember to feed both :wink: For the English page, think of putting links to US sites (amazon.com for example, which is different from amazon.fr)

Thanks to those who will take the time to feed these lists :pray:

Synchronize the site with the Airtable list

The first part of this tutorial is for a general public, the second part is more techy but not very complicated.

The gladysassistant.com site is a static site generated by Docusaurus and hosted on Cloudflare.

To synchronize the site with the Airtable list, I coded a small helper in the repo of the site ( GitHub - GladysAssistant/v4-website: Gladys Assistant website ) which allows to synchronize both.

  1. Clone the site’s repo
git clone https://github.com/GladysAssistant/v4-website
cd v4-website
  1. Install the dependencies

( Assumes you have Node LTS + Yarn installed on your machine )

yarn
  1. Create a “personal access token” on Airtable

Go to https://airtable.com/create/tokens

Click on “Create token”, and fill in the form like this:

You should get an API key!

  1. Create a .env file in the root of the locally cloned repo, with the following content:
AIRTABLE_API_KEY=YOUR_API_KEY
  1. Run the command:
npm run load-integrations

This script will retrieve all the content of the spreadsheet via the Airtable API, and will download all the images.

  1. See the changes locally

To see the EN site locally:

npm start

To see the French site locally:

npm run start-fr
  1. Integrate the changes to the live site?

If you want the changes to be integrated into the production site, so be it:

  • Notify me here so I can synchronize the two myself
  • Make a PR with the above tuto :slight_smile:

**Any questions / feedback ?

Thanks to everyone who will make the effort to add to this list.

Don’t hesitate if you have any questions.

If you think this page/process could be improved, don’t hesitate either, it’s far from a perfect process, and everything is open-source :slight_smile: