Skip to content

Commit

Permalink
Improve language in documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
niksy committed Oct 20, 2024
1 parent 107c2cf commit 66548c7
Show file tree
Hide file tree
Showing 8 changed files with 38 additions and 38 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
[![Build Status](https://travis-ci.org/trikoder/trim.svg?branch=master)](https://travis-ci.org/trikoder/trim)
[![NPM Status](https://img.shields.io/npm/v/@trikoder/trim.svg)](https://www.npmjs.com/package/@trikoder/trim)

Responsive user interface framework for building content management systems with simple authoring api.
Designed to run as a browser application connected to json:api powered backend.
Responsive user interface framework for building content management systems with simple authoring API.
Designed to run as a browser application connected to JSON:API powered backend.

## Documentation and demo
[Browse documentation and demo pages](https://trikoder.github.io/trim).
Expand Down
10 changes: 5 additions & 5 deletions documentation/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ Trikoder Trim is user interface framework for building headless content manageme
Craft responsive single page applications that work on all devices.

Content management systems built on top of Trikoder Trim are decoupled from server side technology stack.
UI framework works nicely with any server side technology that can process and render json api dataset compliant with [json:api specification](http://jsonapi.org/).
UI framework works nicely with any server side technology that can process and render JSON dataset compliant with [JSON:API specification](http://jsonapi.org/).

Trim enables you to quickly build administration CRUD (create, read, update, delete) interface for your application resources. Resulting CMS is responsive and fast - all styles and behavior for standard use cases come included - programmers job is only to define how each application resource is listed and edited.
Trim enables you to quickly build administration CRUD (create, read, update, delete) interface for your application resources. Resulting CMS is responsive and fast - all styles and behavior for standard use cases come included - developers job is only to define how each application resource is listed and edited.

Sensible dependency on standardized backend api enables us to create CMS domain specific language or api in javascript that is pretty much decoupled from JS libraries and frameworks that are used underneath. Any capable programmer should be able to define complete interface for resource in need of administration.
Sensible dependency on standardized backend API enables us to create CMS domain specific language or API in JS that is pretty much decoupled from JS libraries and frameworks that are used underneath. Any capable developer should be able to define complete interface for resource in need of administration.


## Technology and tooling
Expand All @@ -19,7 +19,7 @@ Trikoder Trim is built on following open source stack:
* [Vite](https://vitejs.dev/) or [Webpack](https://webpack.js.org/) is used for module bundling and code splitting

## Code sneek peek
Lets assume your application has a simple "tag" resource and backend api for this resource is ready.
Let’s assume your application has a simple `tag` resource and backend API for this resource is ready.
You want to show list of tags that can be filtered by title.
Additionally you want to setup create and edit interface with input for setting tag title.
Your code should end up looking something like this:
Expand Down Expand Up @@ -66,6 +66,6 @@ export default {
```

## Demo application
Visit [demo application](https://trikoder.github.io/trim/demo/index.html) to get a feeling how CMS built with Trikoder CMF looks and behaves. Is is completely safe to browse, edit and delete items - backend api on demo pages is running on client json api server that stores data in browser memory - so no harm can be done. Dataset can be reset by clicking "reset demo data" control in lower left corner of administration UI. Examine how everything is composed in [demo codebase](https://github.com/trikoder/trim/tree/master/demo).
Visit [demo application](https://trikoder.github.io/trim/demo/index.html) to get a feeling how CMS built with Trikoder CMF looks and behaves. Is is completely safe to browse, edit and delete items - backend API on demo pages is running on client JSON:API server that stores data in browser memory - so no harm can be done. Dataset can be reset by clicking "reset demo data" control in lower left corner of administration UI. Examine how everything is composed in [demo codebase](https://github.com/trikoder/trim/tree/master/demo).

Feel free to browse, cut and paste from demo codebase for your CMS needs and use it as reference.
10 changes: 5 additions & 5 deletions documentation/adding-resource.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
# Adding resource
We will examine typical scenario where new resource is ready on backend api and admin user interface has to be created.
We will examine typical scenario where new resource is ready on backend API and admin user interface has to be created.
Steps needed to complete UI for this new resource:
- examine resource api
- examine resource API
- create resource controller
- add resource route
- add navigation link
- register controller as service

For simple resources this can be completed in less then 5 minutes.

## Examine resource api
Make sure that resource backend api is ready to handle get, post, and put requests.
## Examine resource API
Make sure that resource backend API is ready to handle get, post, and put requests.
Check that backend properly outputs relation includes, make sure that filtering and validation rules are respected.
Examine new resource attributes and relations and decide what list and form elements have to be used.

Everything works? Then lets build resource UI controller.

## Create resource controller
Lets say new resource in need of UI is "tag" entity.
Let’s say new resource in need of UI is `tag` entity.
We will need a component to describe how resource is browsed, filtered and sorted in list, what form fields are rendered when resource is created or updated.

For this purpose we will build a tag resource controller in 'src/controllers/tag.js' file:
Expand Down
6 changes: 3 additions & 3 deletions documentation/base-controllers.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default {
```

Sometimes empty resource is required for meaningful create admin interface.
In this case draft resource is created on api (with id but no attributes and relation data) and edited in UI immediately.
In this case draft resource is created on API (with id but no attributes and relation data) and edited in UI immediately.

```js
export default {
Expand Down Expand Up @@ -98,7 +98,7 @@ Used for hierarchal resources that can be presented in nested tree view form.
Categories as resources usually have parent and child categories.
Example [demo controller](https://trikoder.github.io/trim/demo/index.html#category) and [codebase](https://github.com/trikoder/trim/tree/master/demo/controllers/category.js).

Lets examine category api response:
Let’s examine category API response:
```js
{
type: 'category',
Expand Down Expand Up @@ -161,7 +161,7 @@ Properties mapChildrenTo, mapLevelTo, mapIsLeafTo can be defined as strings or f
Used for browse, create (upload) and edit media resources sush as images or files.
Example [demo controller](https://trikoder.github.io/trim/demo/index.html#media) and [codebase](https://github.com/trikoder/trim/tree/master/demo/controllers/media.js).

Lets examine typical media api response:
Let’s examine typical media API response:
```js
{
type: 'media',
Expand Down
36 changes: 18 additions & 18 deletions documentation/core-concepts-and-api.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Core concepts and api
# Core concepts and API
Understanding of how core components work is essential for building applications with Trikoder Trim.
This chapter provides insight into resource controller, resource list, resource edit, router, navigation, service container and application object.

Expand Down Expand Up @@ -67,7 +67,7 @@ createRelatedStrategy: 'relatedFirst'
````

### includedRelationships
Specify relationships to include in api payload for resource listing (index) and editing (edit)
Specify relationships to include in API payload for resource listing (index) and editing (edit)
Previously named "includeApiData" in versions up to v0.77, now deprecated.
```js
includedRelationships: {
Expand All @@ -77,7 +77,7 @@ includedRelationships: {
````
### includedFields (sparse fieldsets)
Specify fields to include in api payload for resource listing (index) and editing (edit)
Specify fields to include in API payload for resource listing (index) and editing (edit)
```js
includedFields: {
index: {
Expand Down Expand Up @@ -240,7 +240,7 @@ list.addSort([
```

### filterAlwaysBy
Method for setting persistent api filters.
Method for setting persistent API filters.

```js
list.filterAlwaysBy('deleted', 'no');
Expand All @@ -249,7 +249,7 @@ list.filterAlwaysBy({deleted: 'no'});
```

### filterInitiallyBy
Method for setting initial api and UI filters.
Method for setting initial API and UI filters.

```js
list.filterInitiallyBy('published', 'yes');
Expand Down Expand Up @@ -609,7 +609,7 @@ app.getLocale() // en by default;
```

### beforeAdminEnter
Used to set Promise function before creating admin instance.
Used to set `Promise` function before creating admin instance.
```js
app.beforeAdminEnter(() => { return Promise.resolve(); });
```
Expand All @@ -619,33 +619,33 @@ Once called application will setup router, services and main view components.

## Configuration
Trim based application is configured by setting boot (or config) data in your main entry point.
Anything can be inserted in boot data storage, only "baseUrl" and "baseApiUrl" are mandatory.
Anything can be inserted in boot data storage, only `baseUrl` and `baseApiUrl` are mandatory.

```js
app.setBootData({
baseUrl: process.env.BASE_URL,
baseApiUrl: process.env.BASE_API_URL
})
````
### Use browser history api
Configure Trim application to use browser history api.
### Use browser history API
Configure Trim application to use browser history API.
```js
app.setBootData({
usesPushState: true
})
````
### Using patch for resource updates
Api adapter can be instructed to use 'PATCH' insted of 'PUT' method when updating JSON api resources.
API adapter can be instructed to use `PATCH` insted of `PUT` method when updating JSON:API resources.
```js
app.setBootData({
usePatchForUpdate: true
})
````

### Configuring resource url slugs
JSON api resource url slugs can be customized via 'resourceToApiMap' config property.
Used this when JSON api resource type is not directly mapped to resource api url.
### Configuring resource URL slugs
JSON:API resource URL slugs can be customized via `resourceToApiMap` config property.
Used this when JSON:API resource type is not directly mapped to resource API URL.
```js
app.setBootData({
resourceToApiMap: {
Expand All @@ -655,9 +655,9 @@ app.setBootData({
})
````
### Api pagination strategies
### API pagination strategies
Trim comes with offset (default) and page based pagination strategies included.
Customize offset based strategy (creates api query like ?page[offset]=0&page[limit]=15):
Customize offset based strategy (creates API query like `?page[offset]=0&page[limit]=15`):
```js
app.setBootData({
apiPagination: {
Expand All @@ -667,7 +667,7 @@ app.setBootData({
}
})
````
Set and customize page based strategy (creates api query like ?page[number]=1&page[size]=15):
Set and customize page based strategy (creates API query like `?page[number]=1&page[size]=15`):
```js
app.setBootData({
apiPagination: {
Expand All @@ -691,7 +691,7 @@ app.setBootData({
app.setBootData({
toggleColumnsVisibility: true, // activate toggle list table columns visibility feature, default is FALSE
itemsPerPage: 15, // default number of items per page
googleMapsApiKey: '123123', // api key for google maps
googleMapsApiKey: '123123', // API key for google maps
ckEditorPath: 'https://cdn.ckeditor.com/4.10.0/standard-all/' // ckeditor CDN
})
````
Expand All @@ -706,7 +706,7 @@ bootData('baseUrl'); // outputs boot data baseUrl value
## Authentication
To authenticating users to your app you have to implement simple authentication driver.
Default view for authenticating with username and password is included in Trim.
Examine [base auth api](https://github.com/trikoder/trim/tree/master/src/js/library/auth.js) for full implementation details.
Examine [base auth API](https://github.com/trikoder/trim/tree/master/src/js/library/auth.js) for full implementation details.
Simple driver implementation is shown bellow:

```js
Expand Down
2 changes: 1 addition & 1 deletion documentation/form-elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ edit.addField('HtmlComponentsFormElement', {
});
```

Expects api attribute structure similar to one defined bellow:
Expects API attribute structure similar to one defined bellow:

```js
[{
Expand Down
4 changes: 2 additions & 2 deletions documentation/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Getting started
Before digging into UI code make sure you have a basic understanding of core json api concepts (how relations, attributes, getting, creating and updating resources work). A functional backend api compliant with json api standard is prerequisite for building UI.
Browse [json:api webpage](http://jsonapi.org/) and [examples](http://jsonapi.org/examples/) to familiarize yourself with standard.
Before digging into UI code make sure you have a basic understanding of core JSON:API concepts (how relations, attributes, getting, creating and updating resources work). A functional backend API compliant with JSON:API standard is prerequisite for building UI.
Browse [JSON:API webpage](http://jsonapi.org/) and [examples](http://jsonapi.org/examples/) to familiarize yourself with standard.

Everything explained in this chapter has concrete implementation details in demo application codebase.
Feel free to [browse demo codebase](https://github.com/trikoder/trim/tree/master/demo) and take what you need.
Expand Down
4 changes: 2 additions & 2 deletions documentation/list-elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ All list elements are Vue components found in [listElement folder](https://githu
All list elements accept following set of options:

* **caption**: used to define cell heading content.
* **mapTo**: used for mapping list item content to resource attribute or relationship data. Can be string of function. When defined as string it will fetch model value under that key. Learn how to use [JSON api resource](https://dbrekalo.github.io/json-api-resource/) api to query and transform data.
* **mapTo**: used for mapping list item content to resource attribute or relationship data. Can be string of function. When defined as string it will fetch model value under that key. Learn how to use [JSON:API resource](https://dbrekalo.github.io/json-api-resource/) to query and transform data.
* **attributes**: List of DOM element attributes.

---
Expand Down Expand Up @@ -227,7 +227,7 @@ list.addItem('ContextMenu', {

## Media
List element used for presenting media items (image, video, audio, file).
Best used with "card" resource list template.
Best used with card resource list template.
[Code reference](https://github.com/trikoder/trim/tree/master/src/js/listElements/media.vue).

```js
Expand Down

0 comments on commit 66548c7

Please sign in to comment.