https://github.com/marcolink/snapshots-manager
Track granular changes of contentful entries
https://github.com/marcolink/snapshots-manager
app contentful jsonpatch
Last synced: about 1 month ago
JSON representation
Track granular changes of contentful entries
- Host: GitHub
- URL: https://github.com/marcolink/snapshots-manager
- Owner: marcolink
- Created: 2022-01-29T17:46:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-06-02T17:03:41.000Z (about 1 year ago)
- Last Synced: 2025-06-05T11:08:31.301Z (about 1 year ago)
- Topics: app, contentful, jsonpatch
- Language: TypeScript
- Homepage: https://github.com/marcolink/snapshots-manager
- Size: 3.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Welcome to the Time Machine!
A contentful app that allows you to travel back in time and see how the world has changed.
## How it works
This app uses [App Events](https://www.contentful.com/developers/docs/extensibility/app-framework/app-events/) (similar to webhooks) to listen for changes of entries in the contentful space.
When a change is detected, the app will create a patch for each change and store it in the data store.
This lets you scroll through the history of your content and see how it has evolved over time.
In context of contentful content, a patch describes the change of a value for a field and a locale. This can be represented with a JSON patch operation like this:
```json
{
"op": "replace",
"path": "/fields/title/en-US",
"value": "hello world"
}
```
We can also combine a set of operations into a more meaningful change:
```json
[
{
"op": "replace",
"path": "/fields/title/en-US",
"value": "hello world"
},
{
"op": "replace",
"path": "/fields/amount/en-US",
"value": 1
}
]
```
We can store metadata such as space, environment, entry, version along the patch, to later receive a stream of changes of a particular entry on a specific space environment.
```json
{
"space": "",
"environment": "",
"entry": "",
"patch": [
{
"op": "replace",
"path": "/fields/title/en-US",
"value": "hello world"
}
]
}
```
If we create a new patch entry for every event (`save`, `auto_save`, `delete`, `archive`, `unarchive`, `publish`, `unpublish`) in our system, we get the highest possible resolution (keep in mind that some of these events are not changing content, but its availability).
### App Configuration
#### Define Entry and Sidebar Location
#### Define App Events
> Provide the public url of the app with `/api/webhook` appended to it.
### App Locations in Contentful
#### Define Entry editor location
#### Define Sidebar location
## Development
Run the dev server:
```shellscript
npm run dev
```
View the database:
```shellscript
npm run db-view
```
### Run Locally
You can either run the app with a remote database, or you can spin up a local database.
#### Local Database
This repo includes a docker compose file with a postgres database. spin up the database with the following command:
```shellscript
docker compose up -d
```
Provide the local database url in the `.env` file or via `VITE_POSTGRES_URL` env var.:
```
postgres://default:pg-password@localhost:5432/time-machine
```
#### Tunnel with ngrok
Use [ngrok](https://ngrok.com/) to tunnel the local server to the internet and make it reachable for [App Events](https://www.contentful.com/developers/docs/extensibility/app-framework/app-events/).
Install ngrok locally and authenticate with your account.
Then run the following command:
```shellscript
ngrok http http://localhost:5173
```
This will provide you with the public forwarding url that you can use in the Contentful app configuration.
Don't forget to append `/api/webhook` to the url to reach the the right endpoint on your local server.
## Deployment
This app is build with a "bring your own database" setup.
You can provide a postgres database connection string in the `.env` file (or via `VITE_POSTGRES_URL` env var).
### Drizzle Setup
After setting the connection string, you must push your schema via `npx drizzle-kit push`.
Alternatively, you can also run `npx drizzle-kit migrate` to apply the schema via migrations.
### App Template
This app is bootstrapped with the [Contentful Remix App Template](https://github.com/contentful/apps/tree/master/examples/remix) (well, actually the template is grown out of this app).