Airtableに統合されたGatsbyスターター gatsby-airtable-listingを使用した私の好きな映画リスト
Over 40 Web Clubの2020-10-25の勉強会で途中までの作成を実演しました。
https://pitang-movie-list.netlify.app/
- Integration with Airtable
- Item details displayed in a modal with navigation (previous / next)
- Responsive/adaptive images via gatsby-image
- Uses utility-first TailwindCSS framework
- Responsive design (desktop / mobile)
- Generic newsletter form
Install Node package manager (NPM) (if you haven't already).
$ git clone git@github.com:wkocjan/gatsby-airtable-listing.git
$ npm install
To use this project you have to have a Airtable account.
Once you have it, go to this base and click Copy base
button located in the top right corner.
Included columns:
title
(single line text)slug
(single line text, should be unique)rating
(single line text)image
(attachment)descrition
(long text)countries
(single select)tags
(multiple select)url
(single line text)year
(single line text)
Copy included .env.example
file to .env
and fill it with your unique values:
AIRTABLE_API_KEY=""
AIRTABLE_BASE_ID=""
AIRTABLE_TABLE_NAME="Destinations"
You can find your API key and Base ID by clicking "Help" and then "API Documentation". Table name in the example is "Destinations" (case sensitive name).
You're now ready to go. If you want to customize the Airtable base, please refer to gatsby-source-airtable
plugin documentation.
This project comes with a few handy commands for linting and code fixing. The most important ones are the ones to develop and ship code. You can find the most important commands below.
Run in the project locally.
Run a production build into ./public
. The result is ready to be put on any static hosting you prefer.