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 3dd20e1
Show file tree
Hide file tree
Showing 11 changed files with 53 additions and 54 deletions.
5 changes: 2 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
# Trikoder Trim
[![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
16 changes: 8 additions & 8 deletions documentation/.vitepress/components/HomeCustom.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<h2 class="title">Modernize your content management system</h2>
<p class="text">
Trikoder Trim is user interface framework for building headless
content management systems that connect to JSON API powered backend.
content management systems that connect to JSON:API powered backend.
Craft responsive single page applications that work on all devices.
</p>
</div>
Expand All @@ -17,12 +17,12 @@
<div class="featuresAccented">
<ul>
<li>
<h3 class="title">Headless and powered by JSON API standard</h3>
<h3 class="title">Headless and powered by JSON:API standard</h3>
<p class="text">
Client applications built with Trikoder Trim are decoupled from
server side technology stack. Develop with any
backend that can process json api datasets
compliant with json:api specification.
backend that can process JSON datasets
compliant with JSON:API specification.
</p>
</li>
<li>
Expand All @@ -45,14 +45,14 @@
</div>
<h3 class="quote">
Elevate developer and user experience by decoupling frontend
and agreeing on standardized api.
and agreeing on standardized API.
</h3>
<div class="features">
<ul>
<li>
<h3 class="title">Communicate with backend efficiently</h3>
<p class="text">
JSON API standard defines how attribute and relation data is structured,
JSON:API standard defines how attribute and relation data is structured,
how resources are created and updated. By agreeing on standardized
input / output with your backend colleges and following shared conventions
you can increase productivity and focus on your application.
Expand All @@ -64,15 +64,15 @@
Define how resource is browsed, filtered and sorted in list,
what form fields are rendered when resource is created or updated.
All this is done inside one javascript file via domain specific
language or api that anyone can easily read and write.
language or API that anyone can easily read and write.
</p>
</li>
<li>
<h3 class="title">Design with built-in performance</h3>
<p class="text">
Vue.js is doing its magic underneath all Trim controllers and components.
To ensure maximum performance and scalability every controller and its resources
are loaded on demand by utilizing webback's code splitting features.
are loaded on demand by utilizing your bundler’s code splitting features.
No css framework is used and css is component scoped.
Browser only downloads css and js related to currently viewed page.
</p>
Expand Down
4 changes: 2 additions & 2 deletions documentation/.vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const baseAbsoluteUrl = process.env.CI ? 'https://trikoder.github.io' : 'http://
export default {
outDir: '../docs',
title: 'Trikoder Trim',
description: 'Responsive UI framework for building content management systems with simple authoring api. Designed to run as a browser application connected to json:api powered backend.',
description: 'Responsive UI framework for building content management systems with simple authoring API. Designed to run as a browser application connected to JSON:API powered backend.',
base: '/trim/',
head: [
['link', {rel: 'shortcut icon', href: `/favicon.ico`}],
Expand All @@ -14,7 +14,7 @@ export default {
nav: [
{ text: 'Documentation', link: '/about' },
{ text: 'Demo', link: baseAbsoluteUrl + '/trim/demo/index.html' },
{ text: 'Github', link: 'https://github.com/trikoder/trim' }
{ text: 'GitHub', link: 'https://github.com/trikoder/trim' }
],
sidebar: [
{text: 'Home', link: '/'},
Expand Down
14 changes: 7 additions & 7 deletions documentation/about.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
# About
Trikoder Trim is user interface framework for building headless content management systems that connect to JSON API powered backend.
Trikoder Trim is user interface framework for building headless content management systems that connect to JSON:API powered backend.
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
Trikoder Trim is built on following open source stack:

* [Vue](https://vuejs.org/), [Vue Router](https://router.vuejs.org/) and [Vuex](https://vuex.vuejs.org/) are used for application views, routing and store management.
* [Axios](https://github.com/axios/axios) is used as http client
* [JSON api resource](https://dbrekalo.github.io/json-api-resource/) is used for querying and persisting resources
* [JSON:API resource](https://dbrekalo.github.io/json-api-resource/) is used for querying and persisting resources
* [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
40 changes: 20 additions & 20 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 All @@ -8,7 +8,7 @@ Here we define how resource is browsed, filtered and sorted in list, what form f

In most use cases controller looks like a simple configuration file.
This configuration based architecture delegates most of the work to components that are composed out of our sight.
Resource controller is a container component which calls service components for listing and editing resources who build their own component subtrees - all that is abstracted from user via simple and easy to use api.
Resource controller is a container component which calls service components for listing and editing resources who build their own component subtrees - all that is abstracted from user via simple and easy to use API.

All resource controllers share same basic skeleton. We define what resource type controller is handling (resourceName) and implement methods for resource listing (setupList) and resource editing (setupEdit):

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 @@ -389,7 +389,7 @@ Application utilizes simple service container to register and locate components
All form and list components are registered and retrieved from service container by default.

Your resource controllers should also be registered as services.
We encourage you to do so with dynamic import to utilize webpack code splitting and load controller code only when it is requested.
We encourage you to do so with dynamic import to utilize your bundler’s code splitting and load controller code only when it is requested.

A typical service container with navigation and few registered controllers looks something like this:

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
Loading

0 comments on commit 3dd20e1

Please sign in to comment.