How to feed the compatibility list on the site?

Tutorials
1

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.

Screenshot 2023-02-13 at 10.10.33
Screenshot 2023-02-13 at 10.10.333248Ă—1942 797 KB

  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:

Screenshot 2023-02-13 at 10.18.19
Screenshot 2023-02-13 at 10.18.191000Ă—400 23 KB

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

Exemple page intégrations gladys (1)
Exemple page intégrations gladys (1)1920×1080 151 KB

The field “Documentation ID”, corresponds to this:

Screenshot 2023-02-18 at 15.45.04
Screenshot 2023-02-18 at 15.45.043248Ă—1942 606 KB

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

Screenshot 2023-02-13 at 10.44.16
Screenshot 2023-02-13 at 10.44.163248Ă—1942 273 KB

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

Screenshot 2023-02-13 at 10.44.47
Screenshot 2023-02-13 at 10.44.473248Ă—1942 386 KB

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: