https://github.com/statamic/content-api-demo

Simple demo of the Statamic Content API
https://github.com/statamic/content-api-demo

api cms demo flat flat-file laravel php rest-api statamic statamic-3

Last synced: 11 days ago
JSON representation

Simple demo of the Statamic Content API

• Host: GitHub
• URL: https://github.com/statamic/content-api-demo
• Owner: statamic
• Created: 2020-02-12T03:02:14.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:46:41.000Z (almost 2 years ago)
• Last Synced: 2024-05-01T09:42:31.484Z (7 months ago)
• Topics: api, cms, demo, flat, flat-file, laravel, php, rest-api, statamic, statamic-3
• Language: PHP
• Homepage: https://content-api-demo.statamic.dev/
• Size: 11.7 MB
• Stars: 1
• Watchers: 6
• Forks: 2
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


## Statamic 3 (beta) Content API Demo

_Statamic 3 is the very latest and greatest version of Statamic, a uniquely powerful CMS built on [Laravel](https://laravel.com) and designed to make building and managing bespoke websites radically efficient and remarkably enjoyable._

## Demo Details

This Content API Demo uses the entries endpoint on a Movies collection to fetch and and filter data with the help of [Vue Select](https://vue-select.org).

### AJAX Calls

The AJAX calls happen in the main [Vue instance](https://github.com/statamic/content-api-demo/blob/master/resources/js/site.js#L13-L27).

```js

onSearch(search, loading) {

    loading(true);

    this.search(loading, search, this);

},

search: _.debounce((loading, search, vm) => {

    fetch(

        `/api/collections/movies/entries?filter[title:contains]=${escape(search)}`

    ).then(res => {

        res.json().then(json => (vm.options = json.data));

        loading(false);

    });

}, 350)

```

### Rendered Output

The returned data from the `/api/collections/movies/entries` call is rendered in the [`home.antlers.html`](https://github.com/statamic/content-api-demo/blob/master/resources/views/home.antlers.html#L4-L26) template, inside a scoped slot for the Vue Select component.

## Screenshot

![Statamic 3 Content API Demo Screenshot](https://github.com/statamic/content-api-demo/raw/master/screenshot.png)

## Want to try it for yourself?

**1. Clone the project repo** locally and install the dependencies.

```

git clone [email protected]:statamic/content-api-demo.git

cd content-api-demo

composer install

npm i && npm run dev

cp .env.example .env && php artisan key:generate

```

**2. Visit `content-api-demo.test`** (or whatever your dev URL pattern is) to see it in action

**3. Make a new user** – If you want to mess around and create/modify entries. You'll want it to be a `super` so you have access to everything.

```

php please make:user

```

You can log in at `content-api.demo.test/cp`.

## Related Links

- [Statamic 3 Documentation][docs]

- [Statamic 3 CMS Repo][cms]

- [Statamic Discord][discord]

[cms]: https://github.com/statamic/cms

[docs]: https://statamic.dev/

[discord]: https://statamic.com/discord