Adding base template and another page to the project

This commit is contained in:
Awstin 2023-12-17 15:43:25 -05:00
parent abe4edb901
commit 4173da5193
5 changed files with 70 additions and 17 deletions

View file

@ -44,7 +44,7 @@ html {
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
@ -539,3 +539,21 @@ video {
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.block {
display: block;
}
.font-bold {
font-weight: 700;
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity));
}

View file

@ -23,10 +23,13 @@ async fn main() -> anyhow::Result<()> {
let assets_path = std::env::current_dir().unwrap();
let port = 8000_u16;
let addr = std::net::SocketAddr::from(([0, 0, 0, 0], port));
let router = Router::new().route("/", get(hello)).nest_service(
"/assets",
ServeDir::new(format!("{}/assets", assets_path.to_str().unwrap())),
);
let router = Router::new()
.route("/", get(hello))
.route("/another-page", get(another_page))
.nest_service(
"/assets",
ServeDir::new(format!("{}/assets", assets_path.to_str().unwrap())),
);
info!("router initialized, now listening on port {}", port);
axum::Server::bind(&addr)
.serve(router.into_make_service())
@ -66,3 +69,12 @@ where
}
}
}
async fn another_page() -> impl IntoResponse {
let template = AnotherPageTemplate {};
HtmlTemplate(template)
}
#[derive(Template)]
#[template(path = "another-page.html")]
struct AnotherPageTemplate;

View file

@ -0,0 +1,8 @@
<!-- prettier-ignore -->
{% extends "base.html" %}
{% block title %}Another page!{% endblock %}
{% block content %}
<h1 class="font-bold text-indigo-500">Another page</h1>
{% endblock %}

20
templates/base.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<link href="/assets/main.css" rel="stylesheet" />
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
<!-- Allow any inheriting page to set it's own title -->
<title>{% block title %}{{ title }}{% endblock %}</title>
<!-- Allow any inheriting page to extend head with additional assets -->
{% block head %}{% endblock %}
</head>
<body>
<div id="content">
<!-- Inheriting pages will have their content rendered here, similar to app root in React, Angular, etc. -->
{% block content %}{% endblock %}
</div>
</body>
</html>

View file

@ -1,13 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<!-- prettier-ignore -->
{% extends "base.html" %}
<head>
<link href="/assets/main.css" rel="stylesheet" />
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
</head>
<body>
<h1>Howdy!</h1>
</body>
</html>
{% block title %}Hello!{% endblock %}
{% block content %}
<h1 class="text-green-500">Howdy!</h1>
{% endblock %}