Write an amazing documentation #5

doc/Development-Guide.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # Development guide
 TODO fill this with everything a developer starting to work on Xiana might need to know
 

doc/How-To.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # How to
 
 - [Login implementation](#login-implementation)

doc/contribution.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # Contribution
 
 - [Development dependencies](#development-dependencies)

doc/conventions.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # Conventions
 
 - [Overview](#overview)
@@ -75,7 +77,8 @@ the state on state creation, and defined on application startup.
 An interceptor is a pair of unary functions. Each function must recieve and return a state map. You can look at it as on
 an analogy to AOP's around aspect, or as on a pair of middlewares. They work mostly the same way
 as [pedestal](http://pedestal.io/reference/interceptors) and [sieppari](https://github.com/metosin/sieppari)
-interceptors. Xiana provides a set of base [interceptors](interceptors.md), for the most common use cases.
+interceptors.
+Xiana provides a set of base [interceptors](interceptors.md), for the most common use cases.
 
 This figure shows how interceptors are executed ideally:
 

doc/conventions_template.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # Conventions
 
 - [Overview](#overview)

doc/getting-started.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # How to make a Todo app using Xiana
 
 ## Requirements
@@ -27,13 +29,15 @@ lein shadow npm-deps
 
 ### 3. Run dockerized database
 
-You need to have docker and docker-compose installed on your machine for the following command to work. Run the following from the root directory of your project.
+You need to have docker and docker-compose installed on your machine for the following command to work. Run the
+following from the root directory of your project.
 
 ```bash
 docker-compose up -d
 ```
 
-This should spin up a PostgreSQL database on port 5433. Name of the DB is `todo_app` You can verify that the database is running by connecting to it. Value of `username` and `password` is *`postgres`.*  
+This should spin up a PostgreSQL database on port 5433. Name of the DB is `todo_app` You can verify that the database is
+running by connecting to it. Value of `username` and `password` is *`postgres`.*
 
 ```bash
 docker exec -it todo-app_db_1 psql -U postgres -d todo_app
@@ -43,15 +47,17 @@ which should open a PostgreSQL shell if successful.
 
 ### 4. Populate database with data
 
-On application start, the framework will look for database migrations located in the configured location. By default, this location is set to *resources/migrations* directory*.*
+On application start, the framework will look for database migrations located in the configured location. By default,
+this location is set to *resources/migrations* directory*.*
 
 It is possible to create migrations by running from the project directory
 
 ```bash
 lein migrate create todos
 ```
 
-This will create two migration files inside the *resources/migrations* directory. Both file names will be prefixed by the timestamp value of the file creation. 
+This will create two migration files inside the *resources/migrations* directory. Both file names will be prefixed by
+the timestamp value of the file creation.
 
 Put the following SQL code inside the *todos-up.sql* file
 
@@ -65,7 +71,9 @@ CREATE TABLE todos
     done boolean NOT NULL DEFAULT false,
     created_at timestamptz NOT NULL DEFAULT now()
 );
+
 --;;
+
 INSERT INTO todos (label) values ('example label from DB');
 ```
 
@@ -80,26 +88,28 @@ DROP TABLE todos;
 1. Run Clojure REPL and load contents of file *dev/user.clj* into it.
 2. Execute function *start-dev-system*
 3. Your **Todo App** should now be running. You can verify it by visiting URL
-*[http://localhost:3000/re-frame](http://localhost:3000/re-frame)* in your browser.
+   *[http://localhost:3000/re-frame](http://localhost:3000/re-frame)* in your browser.
 
 ### 6. Add endpoint to backend API
 
-Routes definition can be found in the *src/backend/todo_app/core.clj* file. Replace the routes definition with following code.
+Routes definition can be found in the *src/backend/todo_app/core.clj* file. Replace the routes definition with following
+code.
 
 ```clojure
 (def routes
   [["/api/todos" {:action #'fetch}]])
 ```
 
-define a function to be called when the endpoint is hit. 
+define a function to be called when the endpoint is hit.
 
 ```clojure
 (defn fetch
   [state]
   state)
 ```
 
-Now you need to reload the changed files to REPL and restart the application by executing *start-dev-system* function once again.
+Now you need to reload the changed files to REPL and restart the application by executing *start-dev-system* function
+once again.
 Now opening [http://localhost:3000/api/todos](http://localhost:3000/api/todos) in your browser returns a blank page.
 
 ### 7. Hello World!
@@ -110,14 +120,14 @@ Change the implementation of *fetch* function to display "Hello World!" every ti
 (defn fetch
   [state]
   (assoc state :response {:status 200
-                                    :body "Hello World!"}))
+                          :body   "Hello World!"}))
 ```
 
 Reload the modified function and restart the application.
 
 ### 8. Return contents of the todos table
 
-Change the implementation of function *fetch* once again and create a new *view* function. 
+Change the implementation of function *fetch* once again and create a new *view* function.
 
 Function:
 
@@ -128,15 +138,15 @@ Function:
 (defn view
   [{{db-data :db-data} :response-data :as state}]
   (assoc state :response {:status 200
-                                    :body (mapv :todos/label db-data)}))
+                          :body   (mapv :todos/label db-data)}))
 (defn fetch
   [state]
   (assoc state
-                   :view view
-                   :query {:select [:*] :from [:todos]}))
+    :view view
+    :query {:select [:*] :from [:todos]}))
 ```
 
-Again, reload the modified function and restart the application. 
+Again, reload the modified function and restart the application.
 
 After running following curl command from your shell, live data from your database should appear on your screen.
 
@@ -146,26 +156,27 @@ curl http://localhost:3000/api/todos
 
 ## Create a page in the app to display data returned by the endpoint
 
-### 1.  Add frontend dependencies
+### 1. Add frontend dependencies
 
 Add following dependencies into *project.clj* file.
 
 ```clojure
 (defproject
   ...
   :dependencies [
-    ...
-    [cljs-ajax "0.8.4"]
-    [day8.re-frame/http-fx "0.2.3"]
-    ...
-    ]
+                 ...
+                 [cljs-ajax "0.8.4"]
+                 [day8.re-frame/http-fx "0.2.3"]
+                 ...
+                 ]
   ...
   )
 ```
 
 ### 2. Set initial value of re-frame database
 
-File *src/frontend/todo_app/db.cljs* contains initial value of re-frame databse. Inside of this file replace value of *default-db* to following:
+File *src/frontend/todo_app/db.cljs* contains initial value of re-frame databse. Inside of this file replace value of *
+default-db* to following:
 
 ```clojure
 (def default-db
@@ -179,39 +190,39 @@ Replace contents of *src/frontend/todo_app/events.cljs* file with the following
 ```clojure
 (ns todo-app.events
   (:require
-   [re-frame.core :as re-frame]
-   [ajax.core :as ajax]
-   [day8.re-frame.http-fx]
-   [todo-app.db :as db]
-   ))
+    [re-frame.core :as re-frame]
+    [ajax.core :as ajax]
+    [day8.re-frame.http-fx]
+    [todo-app.db :as db]
+    ))
 
 (defn url [tail] (str "http://localhost:3000" tail))
 
 (re-frame/reg-event-db
- ::initialize-db
- (fn [_ _]
-   db/default-db))
+  ::initialize-db
+  (fn [_ _]
+    db/default-db))
 
 (re-frame/reg-event-db
- ::add-todos->db
- (fn [db [_ response]]
-   (assoc db :todos response)))
+  ::add-todos->db
+  (fn [db [_ response]]
+    (assoc db :todos response)))
 
 (re-frame/reg-event-db
- ::failure
- (fn [db _]
-   (js/console.error "Something is wrong!")
-   db))
+  ::failure
+  (fn [db _]
+    (js/console.error "Something is wrong!")
+    db))
 
 (re-frame/reg-event-fx
- ::fetch-todos!
- (fn [_ [_]]
-   (js/console.info "Fetching todos!")
-   {:http-xhrio {:uri (url "/api/todos")
-                 :response-format (ajax/json-response-format {:keywords? true})
-                 :format (ajax/json-request-format)
-                 :on-success [::add-todos->db]
-                 :on-failure [::failure]}}))
+  ::fetch-todos!
+  (fn [_ [_]]
+    (js/console.info "Fetching todos!")
+    {:http-xhrio {:uri             (url "/api/todos")
+                  :response-format (ajax/json-response-format {:keywords? true})
+                  :format          (ajax/json-request-format)
+                  :on-success      [::add-todos->db]
+                  :on-failure      [::failure]}}))
 ```
 
 ### 4. Define re-frame subscription
@@ -221,7 +232,7 @@ Replace contents of *src/frontend/todo_app/subs.cljs* file with the following co
 ```clojure
 (ns todo-app.subs
   (:require
-   [re-frame.core :as re-frame]))
+    [re-frame.core :as re-frame]))
 
 (re-frame/reg-sub
   ::todos
@@ -236,16 +247,16 @@ Replace contents of *src/frontend/todo_app/views.cljs* file with the following c
 ```clojure
 (ns todo-app.views
   (:require
-   [re-frame.core :as re-frame]
-   [todo-app.events :as events]
-   [todo-app.subs :as subs]))
+    [re-frame.core :as re-frame]
+    [todo-app.events :as events]
+    [todo-app.subs :as subs]))
 
 (defn main-panel []
   (re-frame/dispatch [::events/fetch-todos!])
-    (let [todos (re-frame/subscribe [::subs/todos])]
-      [:div
-        (map #(identity [:ul  %])
-             @todos)]))
+  (let [todos (re-frame/subscribe [::subs/todos])]
+    [:div
+     (map #(identity [:ul %])
+          @todos)]))
 ```
 
 ### 6. Define frontend routes
@@ -262,9 +273,11 @@ Update *routes* definition in file *src/backend/todo_app/core.clj* to following:
 
 ### 7. At this point the app should be running
 
-Again, reload the modified code and restart the application. After opening [http://localhost:3000/todos](http://localhost:3000/todos) in your browser, it returns a page containing the data from our database that looks like this:
+Again, reload the modified code and restart the application. After
+opening [http://localhost:3000/todos](http://localhost:3000/todos) in your browser, it returns a page containing the
+data from our database that looks like this:
 
-![success](../resources/images/success.png)
+![success](./resources/images/success.png)
 
 ## Create another endpoint to add a new entry to the DB
 

doc/interceptors.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # Interceptors implemented in Xiana
 
 - [log](#log)

doc/modules.md

@@ -1,3 +1,5 @@
+<img src="resources/images/Xiana.png" width="242">
+
 # Modules
 
 - [Backend](#backend)