From 3189bad44797713a0db5183bd686ef5c6ba31467 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Sat, 15 Mar 2025 10:32:42 +0700
Subject: [PATCH] Update the guide on the sample

---
 pages/sample/prime.html | 264 ++++++++++++++++++++--------------------
 1 file changed, 129 insertions(+), 135 deletions(-)

diff --git a/pages/sample/prime.html b/pages/sample/prime.html
index c004ba8..5de1309 100644
--- a/pages/sample/prime.html
+++ b/pages/sample/prime.html
@@ -6,156 +6,150 @@
     <li><p>Put the folder in your <code>templates</code> directory</p></li>
     <li>
       <p>Add to handler</p>
-<code>
-import templates.prime.main as template_dashboard
+      <code>
+<pre>import templates.prime.main as template_dashboard
 
 params["mako"] = {
 	"website" : template_dashboard.main("pages/dashboard", "users")
-}
-</code>
+}</pre>
+      </code>
     </li>
     <li>
-      - Define a necessary variable on your modules
+      <p>Define a necessary variable on your modules</p>
+      <code>
+<pre>title       = "CostaPy"
 
-  ```python
-  title       = "CostaPy"
+user_roles  = [1,2]    # A roles that user have
+active_page = "Users"  # Current active page name
 
-  user_roles  = [1,2]    # A roles that user have
-  active_page = "Users"  # Current active page name
-
-  copyright   = "Copyright (C) 2022 Dita Aji Pratama"
-  greeting    = "Hello world"
-  ```
+copyright   = "Copyright (C) 2022 Dita Aji Pratama"
+greeting    = "Hello world"</pre>
+      </code>
     </li>
     <li>
-      - Define a navbar menu on your modules
-
-  ```python
-  menu_navbar = [
-      {
-          "name":"Home",
-          "target":"_self",
-          "href":"#",
-          "notification":0,
-          "roles":[1,2]
-      },
-      {
-          "name":"Customize",
-          "href":"#",
-          "target":"_self",
-          "notification":0,
-          "roles":[1,2]
-      },
-      {
-          "name":"Notification",
-          "href":"#",
-          "target":"_self",
-          "notification":1,
-          "roles":[1,2]
-      }
-  ]
-  ```
+      <p>Define a navbar menu on your modules</p>
+      <code>
+<pre>menu_navbar = [
+	{
+		"name":"Home",
+		"target":"_self",
+		"href":"#",
+		"notification":0,
+		"roles":[1,2]
+	},
+	{
+		"name":"Customize",
+		"href":"#",
+		"target":"_self",
+		"notification":0,
+		"roles":[1,2]
+	},
+	{
+		"name":"Notification",
+		"href":"#",
+		"target":"_self",
+		"notification":1,
+		"roles":[1,2]
+	}
+]</pre>
+      </code>
     </li>
     <li>
-      - Define a profile menu on your modules
-
-  ```python
-  menu_profile = {
-      "picture"     : "https://ditaajipratama.net/img/no-profile-donut.png",
-      "name"		: "Dita Aji Pratama",
-      "menu"		: [
-          {
-              "name"  :"Profile",
-              "href"  :"/profile",
-              "target":"_self",
-              "roles":[1,2]
-          },
-          {
-              "name"  :"Settings",
-              "href"  :"/settings",
-              "target":"_self",
-              "roles":[1,2]
-          },
-          {
-              "name"  :"Logout",
-              "href"  :"/logout",
-              "target":"_self",
-              "roles":[1,2,3]
-          }
-      ]
-  }
-  ```
+      <p>Define a profile menu on your modules</p>
+      <code>
+<pre>menu_profile = {
+	"picture"     : "https://ditaajipratama.net/img/no-profile-donut.png",
+	"name"		: "Dita Aji Pratama",
+	"menu"		: [
+		{
+			"name"  :"Profile",
+			"href"  :"/profile",
+			"target":"_self",
+			"roles":[1,2]
+		},
+		{
+			"name"  :"Settings",
+			"href"  :"/settings",
+			"target":"_self",
+			"roles":[1,2]
+		},
+		{
+			"name"  :"Logout",
+			"href"  :"/logout",
+			"target":"_self",
+			"roles":[1,2,3]
+		}
+	]
+}</pre>
+      </code>
     </li>
     <li>
-      - Define a sidebar menu on your modules
-
-  ```python
-  menu_sidebar = [
-      {
-          "icon":"fa-solid fa-gauge",
-          "name":"Dashboard",
-          "target":"_self",
-          "href":"#",
-          "roles":[1,2]
-      },
-      {
-          "icon":"fa-solid fa-users",
-          "name":"Users",
-          "target":"_self",
-          "href":"#",
-          "roles":[1,2]
-      },
-      {
-          "icon":"fa-solid fa-book",
-          "name":"Items",
-          "target":"_self",
-          "href":"#",
-          "roles":[1,2]
-      },
-      {
-          "icon":"fa-solid fa-book",
-          "name":"Analytic",
-          "target":"_self",
-          "href":"#",
-          "roles":[1,2]
-      },
-      {
-          "icon":"fa-solid fa-book",
-          "name":"Reports",
-          "target":"_self",
-          "href":"#",
-          "roles":[1,2]
-      }
-  ]
-  ```
-
+      <p>Define a sidebar menu on your modules</p>
+      <code>
+<pre>menu_sidebar = [
+	{
+		"icon":"fa-solid fa-gauge",
+		"name":"Dashboard",
+		"target":"_self",
+		"href":"#",
+		"roles":[1,2]
+	},
+	{
+		"icon":"fa-solid fa-users",
+		"name":"Users",
+		"target":"_self",
+		"href":"#",
+		"roles":[1,2]
+	},
+	{
+		"icon":"fa-solid fa-book",
+		"name":"Items",
+		"target":"_self",
+		"href":"#",
+		"roles":[1,2]
+	},
+	{
+		"icon":"fa-solid fa-book",
+		"name":"Analytic",
+		"target":"_self",
+		"href":"#",
+		"roles":[1,2]
+	},
+	{
+		"icon":"fa-solid fa-book",
+		"name":"Reports",
+		"target":"_self",
+		"href":"#",
+		"roles":[1,2]
+	}
+]</pre>
+      </code>
     </li>
     <li>
-      - Set a template on your modules
-
-  ```python
-  return Template(params["mako"]["website"]['index']).render(
-      title     = title,
-      navbar    = Template(params["mako"]["website"]['navbar']).render(
-          title       = title,
-          menu        = menu_navbar,
-          profile     = menu_profile,
-          user_roles  = user_roles,
-          active_page = active_page
-      ),
-      sidebar   = Template(params["mako"]["website"]['sidebar']).render(
-          menu        = menu_sidebar,
-          user_roles  = user_roles,
-          active_page = active_page
-      ),
-      footer    = Template(params["mako"]["website"]['footer']).render(
-          copyright   = copyright,
-      ),
-      container = Template(params["mako"]["website"]['container']).render(
-          greeting    = greeting
-      )
-  )
-  ```
+      <p>Set a template on your modules</p>
+      <code>
+<pre>return Template(params["mako"]["website"]['index']).render(
+	title     = title,
+	navbar    = Template(params["mako"]["website"]['navbar']).render(
+		title       = title,
+		menu        = menu_navbar,
+		profile     = menu_profile,
+		user_roles  = user_roles,
+		active_page = active_page
+	),
+	sidebar   = Template(params["mako"]["website"]['sidebar']).render(
+		menu        = menu_sidebar,
+		user_roles  = user_roles,
+		active_page = active_page
+	),
+	footer    = Template(params["mako"]["website"]['footer']).render(
+		copyright   = copyright,
+	),
+	container = Template(params["mako"]["website"]['container']).render(
+		greeting    = greeting
+	)
+)</pre>
+      </code>
     </li>
   </ul>
   <h2>License</h2>