First commit

2026-09-26 15:23:50 +07:00 · 2026-09-26 15:23:50 +07:00 · a3bc2515b2
commit a3bc2515b2
2 changed files with 101 additions and 0 deletions
--- a/costapy-template-create.md
+++ b/costapy-template-create.md
@ -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>
+```
--- a/costapy.md
+++ b/costapy.md
@ -0,0 +1,6 @@
+# CostaPy
+
+Here is the instruction list that you can call.
+
+Templating
+- `costapy-template-create.md` Create a template