Skip to content

Commit 700db1e

Browse files
jonasjabarijonasjabari
committed
[TASK] restructure docs in order to fit website communication
1 parent b4c1119 commit 700db1e

File tree

51 files changed

+1103
-1504
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1103
-1504
lines changed

‎docs/api/000-base/README.md

Lines changed: 0 additions & 119 deletions
This file was deleted.

‎docs/api/100-components/README.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎docs/api/README.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
# API Reference
1+
# Core Components
22

3-
1. [Base](/docs/api/000-base)
4-
2. [Core Components](/docs/api/100-components)
3+
Matestack provides you with a wide set of core components that enable you to easily build your UI.
4+
5+
Please use the sidebar to navigate to the component documentations.

‎docs/apps/100-rails-integration/README.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Rails integration
2+
3+
Matestack apps and pages are connected to Rails through controllers and controller actions. HTTP requests are handled through classic Rails routing and responded through Rails controller actions. Just let the controller action render Matestack page instead of a Rails view at the end. Optionally you can use apps on controller or action level in order to wrap the page with a layout written in pure Ruby.
4+
5+
## Rails layouts still required
6+
7+
Even if a Matestack app defines the layout of the UI, you need a classic Rails layout in order to get things running:
8+
9+
For Example, your `app/views/layouts/shop_layout.html.erb` should look like this:
10+
11+
```erb
12+
<!DOCTYPE html>
13+
<html>
14+
<head>
15+
<title>My Shop</title>
16+
<%= csrf_meta_tags %>
17+
<%= csp_meta_tag %>
18+
19+
<%= stylesheet_link_tag 'application', media: 'all' %>
20+
21+
<!-- if you are using webpacker: -->
22+
<%= javascript_pack_tag 'application' %>
23+
24+
<!-- if you are using the asset pipeline: -->
25+
<%= javascript_include_tag 'application' %>
26+
</head>
27+
28+
<body>
29+
<div id="matestack-ui">
30+
<!-- Matestack apps and pages will be yielded here! -->
31+
<%= yield %>
32+
</div>
33+
</body>
34+
</html>
35+
```
36+
You need to add the ID "matestack-ui" to some part of your application layout (or any layout you use). Don't apply the "matestack-ui" id to the body tag.
37+
38+
## Rails controllers referencing Matestack apps and pages
39+
40+
`app/controllers/shop_controller.rb`
41+
42+
```ruby
43+
class ShopController < ApplicationController
44+
45+
# if not already included
46+
include Matestack::Ui::Core::ApplicationHelper
47+
# if custom components are used
48+
include Components::Registry
49+
50+
layout "shop_layout" # if it shouldn't be the default application layout
51+
52+
matestack_app Shop::App # apps are optional!
53+
54+
def home
55+
render Shop::Pages::Home
56+
end
57+
58+
def product_detail
59+
render Shop::Pages::Product::Detail
60+
end
61+
62+
end
63+
```
64+
65+
and something like this in place:
66+
67+
`app/matestack/shop/app.rb`
68+
69+
```ruby
70+
class Shop::App < Matestack::Ui::App
71+
72+
def response
73+
heading text: 'Matestack Shop'
74+
yield_page
75+
end
76+
77+
end
78+
```
79+
80+
`app/matestack/shop/pages/home.rb`
81+
82+
```ruby
83+
class Shop::Pages::Home < Matestack::Ui::Page
84+
85+
def response
86+
heading size: 2, text: 'A few products you may like'
87+
Product.limit(5).each do |product|
88+
paragraph text: product.name
89+
small text: product.price
90+
end
91+
end
92+
93+
end
94+
```
95+
96+
`app/matestack/shop/pages/products/detail.rb`
97+
98+
```ruby
99+
class Shop::Pages::Products::Detail < Matestack::Ui::Page
100+
101+
def prepare
102+
@product = Product.find(params[:id])
103+
end
104+
105+
def response
106+
heading size: 2, text: @product.name
107+
paragraph text: product.description
108+
end
109+
110+
end
111+
```
112+
113+
## Rails routing as you're used to
114+
115+
Just use Rails routing as you're used to. No additional setup required!
116+
117+
```ruby
118+
Rails.application.routes.draw do
119+
120+
get '/home', to: 'shop#home'
121+
get '/product_details/:id', to: 'shop#product_details'
122+
123+
end
124+
```

‎docs/guides/100-tutorial/00_introduction.md renamed to ‎docs/apps/1000-tutorial/00_introduction.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Getting Started with Matestack
1+
# Creating a SPA-like App with Matestack
22

33
Demo: [Matestack Demo](https://demo.matestack.io)<br>
44
Github Repo: [Matestack Demo Application](https://github.com/matestack/matestack-demo-application)
@@ -10,7 +10,7 @@ This guide is designed for Ruby on Rails beginners, advanced and experienced dev
1010

1111
## What is Matestack?
1212

13-
Matestack deeply integrates a Vue.js based UI into Ruby on Rails, offering prebuilt components. Use these prebuild components to write dynamic Web-UIs mostly in pure Ruby and with minimum effort. Matestack enables you to develop rich SPA like interfaces in no time and without touching JavaScript. And if you need to go deeper you can always create your own custom components to do so.
13+
Matestack deeply integrates a Vue.js based UI into Ruby on Rails, offering prebuilt components. Use these prebuild components to write dynamic Web-UIs mostly in pure Ruby and with minimum effort. Matestack enables you to develop rich SPA like interfaces in no time and without touching JavaScript. And if you need to go deeper you can always create your own custom components to do so.
1414

1515
## Concept
1616

‎docs/guides/100-tutorial/01_setup.md renamed to ‎docs/apps/1000-tutorial/01_setup.md

File renamed without changes.

‎docs/guides/100-tutorial/02_active_record.md renamed to ‎docs/apps/1000-tutorial/02_active_record.md

File renamed without changes.

‎docs/guides/100-tutorial/03_index_show_transition.md renamed to ‎docs/apps/1000-tutorial/03_index_show_transition.md

File renamed without changes.

‎docs/guides/100-tutorial/04_forms_edit_new_create_update_delete.md renamed to ‎docs/apps/1000-tutorial/04_forms_edit_new_create_update_delete.md

File renamed without changes.

‎docs/guides/100-tutorial/05_toggle_component.md renamed to ‎docs/apps/1000-tutorial/05_toggle_component.md

File renamed without changes.

0 commit comments

Comments
 (0)