timeline icon indicating copy to clipboard operation
timeline copied to clipboard

catnose's timeline

catnose99/timeline

deploy on vercel

screenshot

Personal website gathering my activities on the internet.

Usage

The feed are regularly updated by fetching data from specified sources: RSS feed or Google spreadsheet.

configuration

Create Google Spreadsheet

  1. Create a sheet.
  2. Set sheet header (first row in the sheet) exactly as follows.
date | title | action |	url | description | excluded | from_rss

Real world sheet example

Configure keys

This is required to access a sheet systematically.

  1. On GCP IAM console, create a service account.
  2. Generate a key for the service account with JSON format.
  3. Open the spreadsheet and paste service account mail([email protected]) on Collaboration settings.
  4. Create .env with the following contents on project root dir.
SHEET_ID='foo' # extracted from the sheet url.
GOOGLE_SERVICE_ACCOUNT_EMAIL='bar' # [email protected]
GOOGLE_PRIVATE_KEY='baz' # copy "private_key" in json (downloaded on step.2)

Configure scheduled deployments

You can configure scheduled deployments via Github Actions easily. (See /.github/workflows)

To make actions work, save the following values in repository secrets.

  • VERCEL_TOKEN
  • PROJECT_ID
  • ORG_ID

VERCEL_TOKEN can be generated on Vercel dashboard. PROJECT_ID and ORG_ID can be found in .vercel/project.json which is generated after running vercel command locally.

development

# install packages
$ npm install
# generate .items.json which has the feed sources.
$ npm run build:items
# start local server
$ npm run dev

deployment

I recommend you deploy on static website hosting services such as Vercel, Netlify or Cloudflare Pages. Note that build commands are configured properly.

# build commands
$ npm run build

To keep the feed fresh, you need to rebuild the app periodically.

Licence

MIT except for logo (/public/icon.*). Be sure to replace them when you fork this repo.