jekyll-theme-alta-docs 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +168 -10
- data/_includes/footer.html +1 -1
- data/_includes/navbar.html +1 -1
- data/_includes/project_overview.html +41 -0
- data/_includes/system_components_overview.html +12 -0
- data/_includes/useful_links.html +20 -0
- data/_sass/jekyll-theme-alta-docs.scss +166 -4
- metadata +5 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e66de8ee1a3d8de337c6ab2214b84461339547390700443763ec32669f12e1ac
|
4
|
+
data.tar.gz: 407c33116e63d462aab77409f8161c614e189141565b4d6d690c2bf03581f007
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 68c991d1a43d1a76c4ed7d4a616f28b7e3efb10e45958d3c361aabf41768b831986bd4a4b9d26fe6840521ad04e5574749d4668bdd9b1455006e3a26537c2b04
|
7
|
+
data.tar.gz: b2e2567c5d572a406700f28e9fa91902ad5d60b15a1c98a3f18824aad5ffb1f50c9dc0da6d309c891b99fde090d3cf4e8fcc4ebb1af122e533e838800ea38710
|
data/README.md
CHANGED
@@ -1,24 +1,111 @@
|
|
1
1
|
# Jekyll Theme: Alta Docs Theme
|
2
2
|
|
3
|
-
The Jekyll theme for documenting development projects.
|
3
|
+
The Jekyll theme for documenting software development projects.
|
4
|
+
|
5
|
+

|
4
6
|
|
5
7
|
## Basic usage
|
6
8
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
9
|
+
### New Jekyll project
|
10
|
+
|
11
|
+
1. Install Jekyll
|
12
|
+
|
13
|
+
gem install bundler jekyll
|
14
|
+
|
15
|
+
2. Create Jekyll project:
|
16
|
+
|
17
|
+
jekyll new my-project
|
18
|
+
|
19
|
+
3. Go to the project:
|
20
|
+
|
21
|
+
cd my-project
|
22
|
+
|
23
|
+
4. Run:
|
11
24
|
|
12
|
-
|
25
|
+
bundle exec jekyll serve
|
26
|
+
# OR
|
27
|
+
bundle exec jekyll serve --host xxx.xx.xxx.xx --port 4001
|
13
28
|
|
14
|
-
|
29
|
+
### Use jekyll-theme-alta-docs
|
15
30
|
|
16
|
-
|
31
|
+
1. Change `Gemfile`
|
17
32
|
|
18
|
-
5
|
33
|
+
# gem "minima", "~> 2.5" # <-- Remove or comment
|
34
|
+
gem "jekyll-theme-alta-docs" # <--- Add
|
19
35
|
|
36
|
+
2. Run:
|
37
|
+
|
38
|
+
$ bundle install
|
39
|
+
|
40
|
+
3. Create *_docs/* folder
|
41
|
+
|
42
|
+
4. Edit `_config.yml`:
|
43
|
+
|
44
|
+
# Set new theme:
|
45
|
+
theme: jekyll-theme-alta-docs
|
46
|
+
|
47
|
+
# Register new collection "docs" from "_docs" folder:
|
48
|
+
collections:
|
49
|
+
docs:
|
50
|
+
output: true
|
51
|
+
permalink: /:collection/:name/
|
52
|
+
|
53
|
+
# Bind your "docs" collection
|
20
54
|
doc_collection : docs
|
21
|
-
|
55
|
+
|
56
|
+
5. Add markdown files to the `_docs/` folder:
|
57
|
+
|
58
|
+
# _docs/01_intro/getting_started.md
|
59
|
+
---
|
60
|
+
title: Getting started # Enter any name
|
61
|
+
category: Intro # Enter any category. Categories are used to group docs.
|
62
|
+
layout: doc # Important! Use doc layout
|
63
|
+
toc: true # Optional: to display table of contents
|
64
|
+
order: 11 # To sort the documents in the navigation
|
65
|
+
---
|
66
|
+
|
67
|
+
## Getting started
|
68
|
+
|
69
|
+
Hello world!
|
70
|
+
|
71
|
+
6. Add `index.md` in the root directory (Home page):
|
72
|
+
|
73
|
+
# index.md
|
74
|
+
---
|
75
|
+
layout: page
|
76
|
+
---
|
77
|
+
|
78
|
+
# Home page
|
79
|
+
|
80
|
+
This is my home page
|
81
|
+
|
82
|
+
7. Run:
|
83
|
+
|
84
|
+
bundle exec jekyll serve
|
85
|
+
|
86
|
+
### What's next?
|
87
|
+
|
88
|
+
Add more documents in *_docs* folder and see [advanced options](#advanced-options).
|
89
|
+
|
90
|
+
|
91
|
+
## Advanced options
|
92
|
+
|
93
|
+
### Common _config.yml options
|
94
|
+
|
95
|
+
title : "Project title"
|
96
|
+
|
97
|
+
getting_started : >- # Used in the Project overview component
|
98
|
+
Take a look on the useful materials below.
|
99
|
+
Start by checking "the System Overview" to get a big picture of the project.
|
100
|
+
Don't forget to check "Development Guidelines".
|
101
|
+
Find more by exploring navigation on the left.
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
### Links
|
106
|
+
|
107
|
+
Links to the repositories can be added in *_config.yml*:
|
108
|
+
|
22
109
|
links:
|
23
110
|
repos:
|
24
111
|
- name : Web app repository
|
@@ -30,6 +117,76 @@ gem "jekyll-theme-alta-docs"
|
|
30
117
|
- name : Docs repository
|
31
118
|
icon : "fab fa-gitlab" # Use fontawesome v6
|
32
119
|
url : https://bitbucket.org/
|
120
|
+
useful:
|
121
|
+
- name : System overview
|
122
|
+
icon : "fas fa-project-diagram"
|
123
|
+
url : /architecture/
|
124
|
+
- name : Architecture
|
125
|
+
icon : "fas fa-clipboard-list"
|
126
|
+
url : /architecture/
|
127
|
+
- name : Development Guidelines
|
128
|
+
icon : "fas fa-pencil-alt"
|
129
|
+
url : /architecture/
|
130
|
+
|
131
|
+
Repositories links are displayed in website footer.
|
132
|
+
|
133
|
+
|
134
|
+
### System components
|
135
|
+
|
136
|
+
You can define the system components like Backend, Frontend etc. in *_config.yml*:
|
137
|
+
|
138
|
+
system_components:
|
139
|
+
- name : Frontend
|
140
|
+
techs :
|
141
|
+
- name: React.js
|
142
|
+
- name: Redux
|
143
|
+
- name : Backend
|
144
|
+
techs :
|
145
|
+
- name: Ruby on Rails
|
146
|
+
- name : Database
|
147
|
+
techs :
|
148
|
+
- name: PostgreSQL
|
149
|
+
- name : Service provider
|
150
|
+
techs :
|
151
|
+
- name: AWS
|
152
|
+
|
153
|
+
The "System components" are used in two components:
|
154
|
+
|
155
|
+
* `project_overview.html` > `{% include project_overview.html %}`
|
156
|
+
* `system_components_overview.html` > `{% include project_overview.html %}`
|
157
|
+
|
158
|
+
|
159
|
+
### Versioning
|
160
|
+
|
161
|
+
The documentation version is displayed in the footer.
|
162
|
+
|
163
|
+
doc_version : 1.0.0
|
164
|
+
|
165
|
+
|
166
|
+
## Components (includes)
|
167
|
+
|
168
|
+
### Project overview
|
169
|
+
|
170
|
+
The "Project overview" component renders:
|
171
|
+
|
172
|
+
* `project_title`
|
173
|
+
* `doc_version`
|
174
|
+
* `description`
|
175
|
+
* `getting_started`
|
176
|
+
* `system_components`
|
177
|
+
* `links`
|
178
|
+
|
179
|
+
Props:
|
180
|
+
|
181
|
+
* `next_button` - URL for the "Get started!" button
|
182
|
+
|
183
|
+
Usage:
|
184
|
+
|
185
|
+
{% include project_overview.html next_button="/docs/development/" %}
|
186
|
+
|
187
|
+
Example:
|
188
|
+
|
189
|
+

|
33
190
|
|
34
191
|
|
35
192
|
## Development
|
@@ -38,6 +195,7 @@ To set up your environment to develop this theme, run `bundle install`.
|
|
38
195
|
|
39
196
|
To test theme, run: `bundle exec rake preview` or `bundle exec rake preview host=xxx.xx.xxx.xx`
|
40
197
|
|
198
|
+
|
41
199
|
## License
|
42
200
|
|
43
201
|
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/_includes/footer.html
CHANGED
data/_includes/navbar.html
CHANGED
@@ -0,0 +1,41 @@
|
|
1
|
+
<div class="ad-project-overview container">
|
2
|
+
<div class="ad-project-overview__header">
|
3
|
+
<h1>{{ site.title }}</h1>
|
4
|
+
<span class="ad-project-overview__version">{{ site.doc_version }}</span>
|
5
|
+
{% if site.description %}
|
6
|
+
<p class="ad-project-overview__site-description">{{ site.description }}</p>
|
7
|
+
{% endif %}
|
8
|
+
</div>
|
9
|
+
|
10
|
+
<div class="ad-project-overview__content">
|
11
|
+
<div class="ad-page-section">
|
12
|
+
<h2><span class="symbol">🚀</span> Getting started</h2>
|
13
|
+
{% if site.getting_started %}
|
14
|
+
<p>{{ site.getting_started }}</p>
|
15
|
+
{% endif %}
|
16
|
+
</div>
|
17
|
+
|
18
|
+
{% if site.system_components %}
|
19
|
+
<div class="ad-page-section">
|
20
|
+
<h3><span class="symbol">🛠</span> System components</h3>
|
21
|
+
{% include system_components_overview.html %}
|
22
|
+
</div>
|
23
|
+
{% endif %}
|
24
|
+
|
25
|
+
{% if site.links %}
|
26
|
+
<div class="ad-page-section">
|
27
|
+
<h3><span class="symbol">🔗</span> Links</h3>
|
28
|
+
{% include useful_links.html %}
|
29
|
+
</div>
|
30
|
+
{% endif %}
|
31
|
+
|
32
|
+
|
33
|
+
{% if include.next_button %}
|
34
|
+
<hr />
|
35
|
+
<div class="ad-project-overview__next-button">
|
36
|
+
<a href="{{ include.next_button }}" class="ad-btn-primary btn-lg">Get started!</a>
|
37
|
+
</div>
|
38
|
+
{% endif %}
|
39
|
+
|
40
|
+
</div>
|
41
|
+
</div>
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<div class="ad-system_components">
|
2
|
+
{% for component in site.system_components %}
|
3
|
+
<div class="ad-system_component">
|
4
|
+
<span class="name">{{ component.name }}</span>
|
5
|
+
<ul>
|
6
|
+
{% for tech in component.techs %}
|
7
|
+
<li>{{ tech.name }}</li>
|
8
|
+
{% endfor %}
|
9
|
+
</ul>
|
10
|
+
</div>
|
11
|
+
{% endfor %}
|
12
|
+
</div>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<div class="ad-useful-links">
|
2
|
+
<div class="ad-useful-links__col">
|
3
|
+
<ul>
|
4
|
+
{% for link in site.links.useful %}
|
5
|
+
<li>
|
6
|
+
<a href="{{ link.url }}"><i class="{{ link.icon }}"></i> {{ link.name }}</a>
|
7
|
+
</li>
|
8
|
+
{% endfor %}
|
9
|
+
</ul>
|
10
|
+
</div>
|
11
|
+
<div class="ad-useful-links__col w-200">
|
12
|
+
<ul>
|
13
|
+
{% for link in site.links.repos %}
|
14
|
+
<li>
|
15
|
+
<a href="{{ link.url }}"><i class="{{ link.icon }}"></i> {{ link.name }}</a>
|
16
|
+
</li>
|
17
|
+
{% endfor %}
|
18
|
+
</ul>
|
19
|
+
</div>
|
20
|
+
</div>
|
@@ -2,11 +2,14 @@
|
|
2
2
|
|
3
3
|
$primary-color: #8600E8;
|
4
4
|
$dark-color: #142233;
|
5
|
+
$gray-200: #F1F5F9;
|
5
6
|
$gray-400: #DFE5EC;
|
6
7
|
$text-color-primary: $dark-color;
|
7
8
|
$text-color-regular: #3E546B;
|
8
9
|
$link-color: #8905EA;
|
9
10
|
$link-color-hover: #6109A1;
|
11
|
+
$header-bg: #f4f7fd;
|
12
|
+
$code-bg: #f4f7fd;
|
10
13
|
$font-family-primary: 'Poppins', sans-serif;
|
11
14
|
$font-family-regular: 'Source Sans Pro', sans-serif;
|
12
15
|
|
@@ -61,6 +64,71 @@ a.ad-btn-nav-home {
|
|
61
64
|
}
|
62
65
|
}
|
63
66
|
|
67
|
+
.ad-btn-default {
|
68
|
+
@include shadow(0.05);
|
69
|
+
font-family: $font-family-primary;
|
70
|
+
background: transparent;
|
71
|
+
border: 1px solid $link-color;
|
72
|
+
border-radius: 5px;
|
73
|
+
padding: 5px 10px;
|
74
|
+
&:hover {
|
75
|
+
border-color: $link-color-hover;
|
76
|
+
color: $link-color-hover;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
.ad-btn-primary {
|
81
|
+
@include shadow(0.2);
|
82
|
+
font-family: $font-family-primary;
|
83
|
+
background: $link-color;
|
84
|
+
border: 1px solid $link-color;
|
85
|
+
border-radius: 5px;
|
86
|
+
color: #fff;
|
87
|
+
padding: 5px 10px;
|
88
|
+
&:hover {
|
89
|
+
background: $link-color-hover;
|
90
|
+
color: #fff;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
.btn-lg {
|
95
|
+
font-size: 20px;
|
96
|
+
font-weight: 600;
|
97
|
+
font-family: $font-family-primary;
|
98
|
+
padding: 10px 15px;
|
99
|
+
}
|
100
|
+
|
101
|
+
.primary-color {
|
102
|
+
color: $primary-color;
|
103
|
+
}
|
104
|
+
|
105
|
+
h1 {
|
106
|
+
i.fas, .symbol {
|
107
|
+
font-size: 20px;
|
108
|
+
margin-right: 7px;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
h2 {
|
113
|
+
i.fas, .symbol {
|
114
|
+
font-size: 16px;
|
115
|
+
margin-right: 5px;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
|
119
|
+
h3 {
|
120
|
+
i.fas, .symbol {
|
121
|
+
font-size: 14px;
|
122
|
+
margin-right: 5px;
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
hr {
|
127
|
+
height: 1px;
|
128
|
+
background-color: $gray-400;
|
129
|
+
border: none;
|
130
|
+
}
|
131
|
+
|
64
132
|
.container {
|
65
133
|
max-width: 1200px;
|
66
134
|
margin-left: auto;
|
@@ -87,7 +155,7 @@ a.ad-btn-nav-home {
|
|
87
155
|
}
|
88
156
|
.ad-page__content {
|
89
157
|
width: 100%;
|
90
|
-
|
158
|
+
|
91
159
|
padding: 15px;
|
92
160
|
-webkit-box-sizing: border-box;
|
93
161
|
-moz-box-sizing: border-box;
|
@@ -229,7 +297,7 @@ button.ad-collapsible, .ad-collapsible {
|
|
229
297
|
|
230
298
|
.ad-doc__header {
|
231
299
|
border-bottom: 1px solid #f3f3f3;
|
232
|
-
background:
|
300
|
+
background: $header-bg;
|
233
301
|
padding: 30px;
|
234
302
|
|
235
303
|
h1 {
|
@@ -279,8 +347,102 @@ button.ad-collapsible, .ad-collapsible {
|
|
279
347
|
}
|
280
348
|
}
|
281
349
|
|
350
|
+
.ad-project-overview {
|
351
|
+
.ad-project-overview__header {
|
352
|
+
padding: 30px;
|
353
|
+
background: $header-bg;
|
354
|
+
h1 {
|
355
|
+
margin-bottom: 5px;
|
356
|
+
}
|
357
|
+
.ad-project-overview__version {
|
358
|
+
opacity: 0.3;
|
359
|
+
font-size: 12px;
|
360
|
+
}
|
361
|
+
.ad-project-overview__site-description {
|
362
|
+
color: $text-color-regular;
|
363
|
+
opacity: 0.5;
|
364
|
+
}
|
365
|
+
}
|
366
|
+
}
|
367
|
+
|
368
|
+
.ad-page-section {
|
369
|
+
padding-top: 15px;
|
370
|
+
padding-bottom: 15px;
|
371
|
+
}
|
372
|
+
|
373
|
+
.ad-system_components {
|
374
|
+
display: flex;
|
375
|
+
align-items: stretch;
|
376
|
+
justify-content: flex-start;
|
377
|
+
flex-wrap: wrap;
|
378
|
+
.ad-system_component {
|
379
|
+
min-width: 200px;
|
380
|
+
flex: 1;
|
381
|
+
display: flex;
|
382
|
+
flex-direction: column;
|
383
|
+
border: 1px solid $gray-200;
|
384
|
+
padding: 5px;
|
385
|
+
|
386
|
+
.name {
|
387
|
+
font-family: $font-family-primary;
|
388
|
+
font-weight: bold;
|
389
|
+
text-transform: uppercase;
|
390
|
+
font-size: 12px;
|
391
|
+
}
|
392
|
+
ul {
|
393
|
+
list-style: none;
|
394
|
+
padding-left: 5px;
|
395
|
+
margin-top: 3px;
|
396
|
+
margin-bottom: 3px;
|
397
|
+
font-size: 12px;
|
398
|
+
}
|
399
|
+
}
|
400
|
+
}
|
401
|
+
|
402
|
+
.ad-useful-links {
|
403
|
+
display: flex;
|
404
|
+
flex-wrap: wrap;
|
405
|
+
.ad-useful-links__col {
|
406
|
+
flex: 1;
|
407
|
+
border-right: 1px solid $gray-400;
|
408
|
+
&:last-child {
|
409
|
+
border-width: 0;
|
410
|
+
}
|
411
|
+
|
412
|
+
&.w-200 {
|
413
|
+
width: 200px;
|
414
|
+
min-width: 200px;
|
415
|
+
max-width: 200px;
|
416
|
+
}
|
417
|
+
|
418
|
+
ul {
|
419
|
+
list-style: none;
|
420
|
+
margin: 3px 0;
|
421
|
+
padding-left: 0;
|
422
|
+
li {
|
423
|
+
padding: 2px 5px;
|
424
|
+
a {
|
425
|
+
font-size: 16px;
|
426
|
+
i {
|
427
|
+
min-width: 16px;
|
428
|
+
text-align: center;
|
429
|
+
margin-right: 3px;
|
430
|
+
font-size: 11px;
|
431
|
+
}
|
432
|
+
}
|
433
|
+
}
|
434
|
+
}
|
435
|
+
}
|
436
|
+
}
|
437
|
+
|
438
|
+
.ad-project-overview__next-button {
|
439
|
+
padding-top: 40px;
|
440
|
+
padding-bottom: 40px;
|
441
|
+
text-align: center;
|
442
|
+
}
|
443
|
+
|
282
444
|
code.highlighter-rouge {
|
283
|
-
background:
|
445
|
+
background: $code-bg;
|
284
446
|
padding: 1px 3px;
|
285
447
|
border-radius: 2px;
|
286
448
|
color: #e00bbc;
|
@@ -288,7 +450,7 @@ code.highlighter-rouge {
|
|
288
450
|
|
289
451
|
pre.highlight {
|
290
452
|
padding: 10px;
|
291
|
-
background:
|
453
|
+
background: $code-bg;
|
292
454
|
border: 1px solid $gray-400;
|
293
455
|
border-radius: 3px;
|
294
456
|
.k {
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll-theme-alta-docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Tom Antas
|
@@ -94,8 +94,11 @@ files:
|
|
94
94
|
- _includes/head_scripts.html
|
95
95
|
- _includes/nav.html
|
96
96
|
- _includes/navbar.html
|
97
|
+
- _includes/project_overview.html
|
97
98
|
- _includes/scripts.html
|
98
99
|
- _includes/sidebar.html
|
100
|
+
- _includes/system_components_overview.html
|
101
|
+
- _includes/useful_links.html
|
99
102
|
- _layouts/default.html
|
100
103
|
- _layouts/doc.html
|
101
104
|
- _layouts/page.html
|
@@ -124,5 +127,5 @@ requirements: []
|
|
124
127
|
rubygems_version: 3.0.3
|
125
128
|
signing_key:
|
126
129
|
specification_version: 4
|
127
|
-
summary:
|
130
|
+
summary: The Jekyll theme for documenting software development projects..
|
128
131
|
test_files: []
|