A static site catalog of plants in the community food forest, powered by Eleventy and Airtable.

• Dynamic plant catalog from Airtable
• Plant detail pages with photos, descriptions, and health status
• Client-side search functionality
• Responsive design

• Node.js 18+ (for built-in fetch support)
• An Airtable account with a base containing plant data

1. Clone the repository:

git clone https://github.com/angelaambroz/cffc-plant-catalog
cd cffc-plant-catalog

2. Install dependencies:

npm install

3. Create a .env file in the root directory with your Airtable credentials:

AIRTABLE_API_KEY=your_personal_access_token
AIRTABLE_BASE_ID=appXXXXXXXXXXXXXX
AIRTABLE_TABLE_NAME=Plant Species

Start the development server:

npm start

Visit http://localhost:8080 (or :8081 if :8080 is occupied) to view the site.

Build the static site:

npm run build

The output will be in the _site/ directory.

This site is configured for deployment on Vercel.

1. Push your code to GitHub
2. Connect your GitHub repository to Vercel
3. Add your environment variables in Vercel dashboard:
   • AIRTABLE_API_KEY
   • AIRTABLE_BASE_ID
   • AIRTABLE_TABLE_NAME
4. Deploy!

Vercel will automatically rebuild and deploy when you push to your main branch.

Since this is a static site, plant data from Airtable is fetched at build time. To update the site with new data:

• Push a commit to trigger a rebuild, or
• Use Vercel's "Redeploy" button in the dashboard, or
• Set up a webhook from Airtable to trigger automatic rebuilds

cffc-plant-catalog/
├── _data/
│   └── plants.js          # Airtable data fetching
├── _includes/
│   └── layout.njk         # Base layout template
├── css/
│   └── style.css          # Styles
├── images/
│   └── plants/            # Local plant images (if any)
├── index.njk              # Homepage with plant grid
├── plants.njk             # Plant detail page template
├── .eleventy.js           # Eleventy configuration
└── package.json           # Dependencies and scripts

• Eleventy - Static site generator
• Airtable - Database and CMS
• Nunjucks - Templating engine
• Vercel - Hosting platform

To be determined...