https://github.com/punchagan/artful-dodger

A Next.js site to host an art gallery using Google Spreadsheets and Google Drive as a backend
https://github.com/punchagan/artful-dodger

art-gallery artgallery google-drive google-spreadsheet next-js nextjs static-site

Last synced: 18 days ago
JSON representation

A Next.js site to host an art gallery using Google Spreadsheets and Google Drive as a backend

• Host: GitHub
• URL: https://github.com/punchagan/artful-dodger
• Owner: punchagan
• License: gpl-3.0
• Created: 2021-11-13T16:30:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-07T15:23:46.000Z (6 months ago)
• Last Synced: 2024-12-18T23:26:33.777Z (21 days ago)
• Topics: art-gallery, artgallery, google-drive, google-spreadsheet, next-js, nextjs, static-site
• Language: JavaScript
• Homepage: https://punchagan.github.io/artful-dodger/
• Size: 516 KB
• Stars: 20
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# The Artful Dodger

A Next.js site to host an art gallery using Google Spreadsheets and Google

Drive as a backend.

## Setup

### Data Backend

The project can be powered by using a Google Spreadsheet that is viewable

publicly. The demo site for this project is powered by the Google Sheet

[here](https://docs.google.com/spreadsheets/d/134_5I84cpDHYFCfCgr1V7p8ArxeNPlOMcS1-D5E3jxk/). You

can setup a similar document and make it "readable" by everyone with the link.

The example document uses images from the web (freely available on

Pexels.com). But, you can use a Google Drive to upload the images. You can then

either use a CDN like Cloudinary to [automatically serve the

images](https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources)

from Google Drive. Or download the images onto your web server into the

directory from where you are serving the "built" site.

### Configuration

To configure your site, copy the `env.local.default` file to `.env.local` and

edit it to point to your Google Spreadsheet and your CDN, if you are using one.

You can either use a free service like opensheet.vercel.app to convert the

spreadsheet to a JSON end-point, or use the `scripts/download-images` script to

download the metadata as a json file to `public/metadata.json`. You need to

remove the `METADATA_URL` configuration from the `.env.local` file if you with

to use the `metadata.json` file from your `public/` directory.

Set `IMAGE_CDN_PREFIX=""` if you are using locally downloaded images on your

server. Configure the thumbnails in the metadata document so that your images

can be found at the location -- `${IMAGE_CDN_PREFIX}/image/${thumbnail}`. You

can use a `../` prefix on your thumbnails, if thumbnails don't live in an

`image` directory.

ALso, remove the `FORCE_CDN` configuration, if you wish to not use CDN when

developing locally.

### Troubleshooting

With newer versions of Nodejs (18+?), if you run into the following error:

``` sh

  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

  library: 'digital envelope routines',

  reason: 'unsupported',

  code: 'ERR_OSSL_EVP_UNSUPPORTED'

```

you can set the `NODE_OPTIONS` env var to allow the legacy openssl provider.

``` sh

export NODE_OPTIONS=--openssl-legacy-provider

```

## Build & Deploy

`yarn build` builds the site. And `yarn export` would export the site to a

static site.

See sample deploy scripts in the `scripts/` directory to see how to deploy this

site. You can see a demo site [here](https://punchagan.github.io/artful-dodger/).