aji/hendrik-instruction-costapy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Dita Aji Pratama 2026-09-26 15:23:50 +07:00
commit a3bc2515b2
2 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
costapy-template-create.md Normal file
View File

@ -0,0 +1,95 @@
# CostaPy / Template / Create
Here is the guide about how to create a template for costapy.
What you need to prepare:
- template name
- static file and directory
- raw HTML template
- part or component that you want to create
## Create a directory
- make a directory with your template name `mkdir learn`
- go to a template directory `cd learn`
- then `learn` is your template directory
## Routing a static file
create `static` directory inside the template directory.
create `main.py` inside the template directory and add a static list
```python
static = [
{
"route" : "/templates/learn/css/<filepath:re:.*\.(css|sass|css.map)>",
"root" : "./templates/learn/static/css"
}
]
```
then you can manage your file on there. For example, put `style.css` on `static/css`.
## Separate the part or component from the raw HTML template
create `html` directory inside the template directory. and place your raw `index.html` in here.
create `main.py` inside the template directory and set the template parts or components
```python
from core import html
def main(dir, page):
html_template = html.main.get_html("templates/learn/html")
html_page = html.main.get_html(dir)
return {
"index" : html_template [ "index.html" ],
"navbar" : html_template [ "navbar.html" ],
"footer" : html_template [ "footer.html" ],
"container" : html_page [f"{page}.html" ]
}
```
adjust and separate the code into a modular file. For example, here I separate `navbar` and `footer` into a modular file. Use python mako template.
`index.html`
```python
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>${title}</title>
<link rel="stylesheet" href="/templates/learn/css/style.css">
</head>
<body>
<header>
<h1>${header}</h1>
</header>
${navbar}
<main>
${container}
</main>
${footer}
</body>
</html>
```
`navbar.html`
```python
<nav class="navbar">
% for item in menu:
% if any(role in item['roles'] for role in user_roles):
<a class="${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
${item['name']}
</a>
% endif
% endfor
</nav>
```
`footer.html`
```python
<footer>
${copyright}
</footer>
```

6
costapy.md Normal file
View File

@ -0,0 +1,6 @@
# CostaPy
Here is the instruction list that you can call.
Templating
- `costapy-template-create.md` Create a template