Skip to content

Commit e2b178a

Browse files
TOwInOKTOwInOK
committed
docs(templates): update template field documentation
- Rename color fields to semantic names (text, background, accent, border) - Restructure link objects to use Tabler icons instead of provider enums - Add get_icon_name() helper function for icon name retrieval - Include real-world example from umbrella template - Update template path references to relative paths
1 parent 51b4467 commit e2b178a

9 files changed

Lines changed: 914 additions & 145 deletions

File tree

‎How_to_construct_layout.md‎

Lines changed: 249 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,249 @@
1-
# Available Template Fields
2-
3-
## Colors
4-
- `primary`: String - Primary text color
5-
- `secondary`: String - Background color
6-
- `thirdly`: String - Accent color
7-
- `border`: String - Muted color for borders, text, and dividers
8-
9-
## User Data
10-
- `name`: String - Username
11-
- `current_nickname`: Object
12-
- `word`: String - Current nickname
13-
- `pronounce`: String - Nickname pronunciation
14-
- `previous_nicknames`: Array[Object]
15-
- `word`: String - Previous nickname
16-
- `pronounce`: String - Previous nickname pronunciation
17-
18-
## Professional Info
19-
- `specifications`: Array[String] - List of specializations/roles
20-
- `about`: String - Description text
21-
22-
## Repository Links
23-
- `repos`: Array[Object]
24-
- `name`: String - Repository name
25-
- `link`: Object
26-
- `provider`: Enum(Github|LinkedIn|Telegram)
27-
- `url`: String - Repository URL
28-
29-
## Social Links
30-
- `socials`: Array[Object]
31-
- `provider`: Enum(Github|LinkedIn|Telegram)
32-
- `url`: String - Social network URL
33-
34-
## Skills
35-
- `skills`: Array[Object]
36-
- `skill`: String - Skill name
37-
- `main`: Boolean - Is it a main skill
38-
- `since`: Object
39-
- `start`: Number - Start year
40-
- `end`: Number - End year (0 = "present")
41-
- `repo_link`: Object
42-
- `provider`: Enum(Github|LinkedIn|Telegram)
43-
- `url`: String - Related repository URL
44-
- `projects`: Array[Object]
45-
- `name`: String - Project name
46-
- `link`: Object
47-
- `provider`: Enum(Github|LinkedIn|Telegram)
48-
- `url`: String - Project URL
49-
50-
## Helper Functions
51-
- `get_svg(provider: Enum)`: Function - Returns SVG icon for specified provider
52-
53-
# Tera Template Constructions
54-
- Example based on [umbrella layout](C:\Users\towinok\Documents\SSS-rs\sss-lib\sss-std\src\layouts\templates\umbrella\card.html.tera)
55-
- [Official documentation](https://keats.github.io/tera/)
56-
57-
## 1. Value Insertion
58-
```tera
59-
# Simple variable insertion
60-
{{ secondary }}
61-
62-
# Nested value insertion
63-
{{ current_nickname.word }}
64-
{{ current_nickname.pronounce }}
65-
66-
# Insertion in CSS classes
67-
class="text-[{{ primary }}]"
68-
class="bg-[{{ secondary }}]"
69-
```
70-
71-
## 2. Loops (For)
72-
```tera
73-
# Simple array loop
74-
{% for spec in specifications %}
75-
<span>{{ spec }}</span>
76-
{% endfor %}
77-
78-
# Loop through array of objects
79-
{% for repo in repos %}
80-
<a href="{{ repo.link.link }}">
81-
{{ repo.name }}
82-
</a>
83-
{% endfor %}
84-
```
85-
86-
## 3. Conditional Statements (If)
87-
```tera
88-
# Simple condition
89-
{% if skill.main %}
90-
{% set opacity = 100 %}
91-
{% else %}
92-
{% set opacity = 80 %}
93-
{% endif %}
94-
95-
# Inline condition
96-
{{ skill.since.end != 0 ? skill.since.end : "today" }}
97-
98-
# Condition with multiple checks
99-
{% if skill.main and skill.since.end == 0 %}
100-
// content
101-
{% endif %}
102-
```
103-
104-
## 4. Variable Assignment
105-
```tera
106-
{% set opacity = 100 %}
107-
```
108-
109-
## 5. Function Calls with Filters
110-
```tera
111-
# Function call with parameter and safe filter
112-
{{ get_svg(provider=repo.link.provider) | safe }}
113-
```
114-
115-
## 6. Comments
116-
```tera
117-
{# This is a comment in Tera #}
118-
```
119-
120-
## 7. Nested Conditions Inside Loops
121-
```tera
122-
{% for skill in skills %}
123-
{% if skill.main %}
124-
{% set opacity = 100 %}
125-
{% else %}
126-
{% set opacity = 80 %}
127-
{% endif %}
128-
<div class="opacity-{{ opacity }}">
129-
{{ skill.name }}
130-
</div>
131-
{% endfor %}
132-
```
133-
134-
## 8. Accessing Nested Structures
135-
```tera
136-
# Two-level nesting
137-
{{ skill.since.start }}
138-
139-
# Condition with nested field
140-
{% if skill.since.end != 0 %}
141-
{{ skill.since.end }}
142-
{% else %}
143-
today
144-
{% endif %}
145-
```
1+
# Available Template Fields
2+
3+
## Colors
4+
- `text`: String - Primary text color
5+
- `background`: String - Background color
6+
- `accent`: String - Accent color
7+
- `border`: String - Muted color for borders, text, and dividers
8+
9+
## User Data
10+
- `name`: String - Username
11+
- `current_nickname`: Object
12+
- `word`: String - Current nickname
13+
- `pronounce`: String - Nickname pronunciation
14+
- `prevision_nicknames`: Array[Object]
15+
- `word`: String - Previous nickname
16+
- `pronounce`: String - Previous nickname pronunciation
17+
18+
## Professional Info
19+
- `specifications`: Array[String] - List of specializations/roles
20+
- `about`: String - Description text
21+
22+
## Repository Links
23+
- `repos`: Array[Object]
24+
- `name`: String - Repository name
25+
- `link`: Object
26+
- `icon`: Tabler - Icon identifier (Tabler enum)
27+
- `link`: String - Repository URL
28+
29+
## Social Links
30+
- `socials`: Array[Object]
31+
- `icon`: Tabler - Icon identifier (Tabler enum)
32+
- `link`: String - Social network URL
33+
34+
## Skills
35+
- `skills`: Array[Object]
36+
- `skill`: String - Skill name
37+
- `main`: Boolean - Is it a main skill
38+
- `since`: Object
39+
- `start`: Number - Start year
40+
- `end`: Number - End year (0 = "present")
41+
- `repo_link`: Object
42+
- `icon`: Tabler - Icon identifier (Tabler enum)
43+
- `link`: String - Related repository URL
44+
- `projects`: Array[Object]
45+
- `name`: String - Project name
46+
- `link`: Object
47+
- `icon`: Tabler - Icon identifier (Tabler enum)
48+
- `link`: String - Project URL
49+
50+
## Helper Functions
51+
- `get_svg(icon: Tabler)`: Function - Returns SVG icon for specified icon identifier
52+
- `get_icon_name(icon: Tabler)`: Function - Returns the name of the icon
53+
54+
# Tera Template Constructions
55+
- Example based on [umbrella layout](sss-std/src/layouts/html_tera/templates/umbrella/card.html.tera)
56+
- [Official documentation](https://keats.github.io/tera/)
57+
58+
## 1. Value Insertion
59+
```tera
60+
# Simple variable insertion
61+
{{ background }}
62+
63+
# Nested value insertion
64+
{{ current_nickname.word }}
65+
{{ current_nickname.pronounce }}
66+
67+
# Insertion in CSS classes
68+
class="text-[{{ text }}]"
69+
class="bg-[{{ background }}]"
70+
```
71+
72+
## 2. Loops (For)
73+
```tera
74+
# Simple array loop
75+
{% for spec in specifications %}
76+
<span>{{ spec }}</span>
77+
{% endfor %}
78+
79+
# Loop through array of objects
80+
{% for repo in repos %}
81+
<a href="{{ repo.link.link }}">
82+
{{ repo.name }}
83+
</a>
84+
{% endfor %}
85+
```
86+
87+
## 3. Conditional Statements (If)
88+
```tera
89+
# Simple condition
90+
{% if skill.main %}
91+
{% set opacity = 100 %}
92+
{% else %}
93+
{% set opacity = 80 %}
94+
{% endif %}
95+
96+
# Inline condition
97+
{{ skill.since.end != 0 ? skill.since.end : "today" }}
98+
99+
# Condition with multiple checks
100+
{% if skill.main and skill.since.end == 0 %}
101+
// content
102+
{% endif %}
103+
```
104+
105+
## 4. Variable Assignment
106+
```tera
107+
{% set opacity = 100 %}
108+
```
109+
110+
## 5. Function Calls with Filters
111+
```tera
112+
# Function call with parameter and safe filter
113+
{{ get_svg(icon=repo.link.icon) | safe }}
114+
115+
# Get icon name
116+
{{ get_icon_name(icon=social.icon) }}
117+
```
118+
119+
## 6. Comments
120+
```tera
121+
{# This is a comment in Tera #}
122+
```
123+
124+
## 7. Nested Conditions Inside Loops
125+
```tera
126+
{% for skill in skills %}
127+
{% if skill.main %}
128+
{% set opacity = 100 %}
129+
{% else %}
130+
{% set opacity = 80 %}
131+
{% endif %}
132+
<div class="opacity-{{ opacity }}">
133+
{{ skill.skill }}
134+
</div>
135+
{% endfor %}
136+
```
137+
138+
## 8. Accessing Nested Structures
139+
```tera
140+
# Two-level nesting
141+
{{ skill.since.start }}
142+
143+
# Condition with nested field
144+
{% if skill.since.end != 0 %}
145+
{{ skill.since.end }}
146+
{% else %}
147+
today
148+
{% endif %}
149+
150+
# Accessing Link structure
151+
{{ repo.link.link }} # URL
152+
{{ repo.link.icon }} # Icon identifier
153+
154+
# Using helper functions with nested fields
155+
{{ get_svg(icon=repo.link.icon) | safe }}
156+
{{ get_icon_name(icon=skill.repo_link.icon) }}
157+
```
158+
159+
## 9. Real Example from Umbrella Template
160+
```tera
161+
{# Names section #}
162+
<div class="items-center text-[{{ text }}] grid grid-cols-2">
163+
<div class="text-lg md:text-xl font-bold flex justify-evenly">
164+
{{ name }}
165+
</div>
166+
<div class="flex items-center justify-evenly w-full text-2xl md:text-3xl">
167+
<span>[</span>
168+
<div class="flex flex-col items-center text-sm md:text-md truncate">
169+
<span>{{ current_nickname.word }}</span>
170+
<span class="text-[{{ accent }}]/80">{{ current_nickname.pronounce }}</span>
171+
</div>
172+
<span>]</span>
173+
</div>
174+
</div>
175+
176+
{# Section with specifications and about info #}
177+
<div class="grid grid-cols-2 gap-2 md:gap-4">
178+
<div class="grid gap-2">
179+
{% for spec in specifications %}
180+
<div class="text-[{{ text }}] flex items-center justify-between text-xl md:text-2xl gap-4">
181+
<span class="w-[15px]">[</span>
182+
<span class="text-xs md:text-sm text-center flex-1">{{ spec }}</span>
183+
<span class="w-[15px]">]</span>
184+
</div>
185+
{% endfor %}
186+
</div>
187+
<div class="text-[{{ accent }}] text-right text-sm md:text-base text-balance max-h-[200px] truncate">
188+
{{ about }}
189+
</div>
190+
</div>
191+
192+
{# Section with repos #}
193+
<div class="flex justify-evenly w-full text-[{{ text }}]">
194+
{% for repo in repos %}
195+
<a href="{{ repo.link.link }}" class="flex items-center justify-evenly w-full text-xl md:text-2xl transition duration-300 ease-in-out group">
196+
<span class="group-hover:scale-92 transition-transform duration-300">[</span>
197+
<div class="h-[48px] flex-col justify-evenly items-center flex text-[{{ accent }}]">
198+
<div class="group-hover:scale-108 transition-transform duration-300">
199+
{{ get_svg(icon=repo.link.icon) | safe }}
200+
</div>
201+
<div class="flex text-[{{ text }}] text-xs md:text-sm">
202+
{{ repo.name }}
203+
</div>
204+
</div>
205+
<span class="group-hover:scale-92 transition-transform duration-300">]</span>
206+
</a>
207+
{% endfor %}
208+
</div>
209+
210+
{# Social section #}
211+
<div class="flex justify-evenly w-full text-[{{ text }}] gap-4">
212+
{% for social in socials %}
213+
<a href="{{ social.link }}" class="group flex items-center justify-evenly w-full text-xl md:text-2xl transition duration-300 ease-in-out">
214+
<span class="group-hover:scale-92 transition-transform duration-300">[</span>
215+
<div class="h-[48px] flex-col justify-evenly items-center flex text-[{{ accent }}]">
216+
<div class="group-hover:scale-108 transition-transform duration-300">
217+
{{ get_svg(icon=social.icon) | safe }}
218+
</div>
219+
<div class="flex text-[{{ text }}] text-xs md:text-sm">
220+
{{ get_icon_name(icon=social.icon) }}
221+
</div>
222+
</div>
223+
<span class="group-hover:scale-92 transition-transform duration-300">]</span>
224+
</a>
225+
{% endfor %}
226+
</div>
227+
228+
{# Skill section #}
229+
<div class="flex justify-evenly gap-4">
230+
{% for skill in skills %}
231+
{% if skill.main %}
232+
{% set opacity = 100 %}
233+
{% else %}
234+
{% set opacity = 80 %}
235+
{% endif %}
236+
<a href="{{ skill.repo_link.link }}" class="text-center opacity-{{ opacity }} transition duration-300 ease-in-out group">
237+
<div class="text-xl md:text-2xl text-[{{ text }}] group-hover:scale-102 transition-transform duration-300">
238+
{{ skill.skill }}
239+
</div>
240+
<div class="flex justify-center text-xs md:text-sm text-[{{ accent }}]">
241+
{{ skill.since.start }} -> {% if skill.since.end != 0 %}{{ skill.since.end }}{% else %}today{% endif %}
242+
</div>
243+
<div class="group-hover:scale-105 group-hover:text-[{{ text }}] transition-all duration-300 flex justify-center text-xs md:text-sm text-[{{ border }}] hover:scale-105 transition duration-300 ease-in-out">
244+
{{ get_icon_name(icon=skill.repo_link.icon) }}
245+
</div>
246+
</a>
247+
{% endfor %}
248+
</div>
249+
```

0 commit comments

Comments
 (0)