Add html!{} and Tera templates for PageTop

This commit is contained in:
Manuel Cillero 2024-11-17 08:06:46 +01:00
parent 046d5605e9
commit bf150d206f
30 changed files with 2756 additions and 416 deletions

View file

@ -1,10 +1,10 @@
[package]
name = "pagetop-aliner"
version = "0.0.1"
version = "0.0.9"
edition = "2021"
description = """\
PageTop default theme.\
PageTop's default theme for schematic layouts, designed to be extended with subthemes.\
"""
categories = ["web-programming", "gui"]
keywords = ["pagetop", "theme", "css", "js"]
@ -15,8 +15,12 @@ authors = { workspace = true }
license = { workspace = true }
[dependencies]
pagetop = { workspace = true }
static-files = { workspace = true }
pagetop.workspace = true
include_dir.workspace = true
static-files.workspace = true
tera = "1.20.0"
[build-dependencies]
pagetop-build = { workspace = true }
pagetop-build.workspace = true

View file

@ -1,16 +1,18 @@
<div align="center">
<h1>PageTop Bootsier</h1>
<h1>PageTop Aliner</h1>
<p>PageTop theme that uses Bootstrap framework for versatile styles and components.</p>
<p>PageTop's default theme for schematic layouts, designed to be extended with subthemes.</p>
[![License](https://img.shields.io/badge/license-MIT%2FApache-blue.svg?style=for-the-badge)](#-license)
[![API Docs](https://img.shields.io/docsrs/pagetop-bootsier?label=API%20Docs&style=for-the-badge&logo=Docs.rs)](https://docs.rs/pagetop-bootsier)
[![Crates.io](https://img.shields.io/crates/v/pagetop-bootsier.svg?style=for-the-badge&logo=ipfs)](https://crates.io/crates/pagetop-bootsier)
[![Downloads](https://img.shields.io/crates/d/pagetop-bootsier.svg?style=for-the-badge&logo=transmission)](https://crates.io/crates/pagetop-bootsier)
[![API Docs](https://img.shields.io/docsrs/pagetop-aliner?label=API%20Docs&style=for-the-badge&logo=Docs.rs)](https://docs.rs/pagetop-aliner)
[![Crates.io](https://img.shields.io/crates/v/pagetop-aliner.svg?style=for-the-badge&logo=ipfs)](https://crates.io/crates/pagetop-aliner)
[![Downloads](https://img.shields.io/crates/d/pagetop-aliner.svg?style=for-the-badge&logo=transmission)](https://crates.io/crates/pagetop-aliner)
</div>
PageTop Aliner is the default theme designed to provide schematic layout for easily extending.
# 📦 About PageTop
[PageTop](https://docs.rs/pagetop) is an opinionated web framework to build modular *Server-Side

View file

@ -1,19 +0,0 @@
use pagetop_build::StaticFilesBundle;
use std::env;
use std::path::Path;
fn main() -> std::io::Result<()> {
StaticFilesBundle::from_scss("./static/bootstrap-5.3.3/bootstrap.scss", "bootstrap.css")
.with_name("bootsier")
.build()?;
StaticFilesBundle::from_dir("./static/js", Some(bootstrap_js_files))
.with_name("bootsier-js")
.build()
}
fn bootstrap_js_files(path: &Path) -> bool {
// No filtering during development, only on "release" compilation.
env::var("PROFILE").unwrap_or_else(|_| "release".to_string()) != "release"
|| path.file_name().map_or(false, |n| n == "bootstrap.min.js")
}

View file

@ -0,0 +1,7 @@
use pagetop_build::StaticFilesBundle;
fn main() -> std::io::Result<()> {
StaticFilesBundle::from_dir("./static", None)
.with_name("aliner")
.build()
}

View file

@ -1,8 +1,46 @@
use pagetop::prelude::*;
use include_dir::{include_dir, Dir};
use tera::Tera;
use std::sync::LazyLock;
static_locales!(LOCALES_ALINER);
//static_files!(bootsier);
static_files!(aliner);
// ALINER THEME ************************************************************************************
pub const TEMPLATE_GLOB: &str = concat!(env!("CARGO_MANIFEST_DIR"), "/templates/**/*.html");
pub const TEMPLATE_BASE_DIR: Dir = include_dir!("$CARGO_MANIFEST_DIR/templates");
/// Static instance of Tera used for rendering HTML templates for components.
///
/// - In `debug` mode, templates are dynamically loaded from the file system, allowing for rapid
/// iteration.
/// - In `release` mode (`cargo build --release`), templates are embedded directly into the binary
/// for optimal performance and portability.
pub static ALINER_THEME: LazyLock<Tera> = LazyLock::new(|| {
if cfg!(debug_assertions) {
// In debug mode, load templates directly from the file system.
Tera::new(TEMPLATE_GLOB).expect("Failed to initialize Tera from disk in debug mode")
} else {
// In release mode (cargo build --release), embed templates into the binary.
let mut tera = Tera::default();
for file in TEMPLATE_BASE_DIR.files() {
if let Some(path) = file.path().to_str() {
let content = file
.contents_utf8()
.expect("Non UTF-8 content in template file");
tera.add_raw_template(path, content)
.expect("Failed to add template to Tera");
}
}
tera
}
});
// ALINER DEFINITION *******************************************************************************
pub struct Aliner;
@ -10,184 +48,10 @@ impl PackageTrait for Aliner {
fn theme(&self) -> Option<ThemeRef> {
Some(&Aliner)
}
/*
fn actions(&self) -> Vec<ActionBox> {
actions![
action::theme::BeforePrepare::<Icon>::new(&Self, before_prepare_icon),
action::theme::BeforePrepare::<Button>::new(&Self, before_prepare_button),
action::theme::BeforePrepare::<Heading>::new(&Self, before_prepare_heading),
action::theme::BeforePrepare::<Paragraph>::new(&Self, before_prepare_paragraph),
action::theme::RenderComponent::<Error404>::new(&Self, render_error404),
]
}
fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
static_files_service!(scfg, bootsier => "/bootsier");
} */
}
impl ThemeTrait for Aliner { /*
#[rustfmt::skip]
fn regions(&self) -> Vec<(&'static str, L10n)> {
vec![
("header", L10n::t("header", &LOCALES_BOOTSIER)),
("nav_branding", L10n::t("nav_branding", &LOCALES_BOOTSIER)),
("nav_main", L10n::t("nav_main", &LOCALES_BOOTSIER)),
("nav_additional", L10n::t("nav_additional", &LOCALES_BOOTSIER)),
("breadcrumb", L10n::t("breadcrumb", &LOCALES_BOOTSIER)),
("content", L10n::t("breadcrumb", &LOCALES_BOOTSIER)),
("sidebar_first", L10n::t("sidebar_first", &LOCALES_BOOTSIER)),
("sidebar_second", L10n::t("sidebar_second", &LOCALES_BOOTSIER)),
("footer", L10n::t("footer", &LOCALES_BOOTSIER)),
]
}
fn prepare_body(&self, page: &mut Page) -> PrepareMarkup {
let skip_to_id = page.body_skip_to().get().unwrap_or("content".to_owned());
PrepareMarkup::With(html! {
body id=[page.body_id().get()] class=[page.body_classes().get()] {
@if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) {
div class="skip__to_content" {
a href=(concat_string!("#", skip_to_id)) { (skip) }
}
}
(match page.context().layout() {
"admin" => flex::Container::new()
.add_item(flex::Item::region().with_id("top-menu"))
.add_item(flex::Item::region().with_id("side-menu"))
.add_item(flex::Item::region().with_id("content")),
_ => flex::Container::new()
.add_item(flex::Item::region().with_id("header"))
.add_item(flex::Item::region().with_id("nav_branding"))
.add_item(flex::Item::region().with_id("nav_main"))
.add_item(flex::Item::region().with_id("nav_additional"))
.add_item(flex::Item::region().with_id("breadcrumb"))
.add_item(flex::Item::region().with_id("content"))
.add_item(flex::Item::region().with_id("sidebar_first"))
.add_item(flex::Item::region().with_id("sidebar_second"))
.add_item(flex::Item::region().with_id("footer")),
}.render(page.context()))
}
})
}
fn after_prepare_body(&self, page: &mut Page) {
page.set_assets(AssetsOp::SetFaviconIfNone(
Favicon::new().with_icon("/base/favicon.ico"),
))
.set_assets(AssetsOp::AddStyleSheet(
StyleSheet::from("/bootsier/css/bootstrap.min.css")
.with_version("5.1.3")
.with_weight(-99),
))
.set_assets(AssetsOp::AddJavaScript(
JavaScript::defer("/bootsier/js/bootstrap.bundle.min.js")
.with_version("5.1.3")
.with_weight(-99),
))
.set_assets(AssetsOp::AddBaseAssets)
.set_assets(AssetsOp::AddStyleSheet(
StyleSheet::from("/bootsier/css/styles.css").with_version("0.0.1"),
));
static_files_service!(scfg, aliner => "/aliner");
}
}
fn before_prepare_icon(i: &mut Icon, _cx: &mut Context) {
i.set_classes(
ClassesOp::Replace(i.font_size().to_string()),
with_font(i.font_size()),
);
}
#[rustfmt::skip]
fn before_prepare_button(b: &mut Button, _cx: &mut Context) {
b.set_classes(ClassesOp::Replace("button__tap".to_owned()), "btn");
b.set_classes(
ClassesOp::Replace(b.style().to_string()),
match b.style() {
StyleBase::Default => "btn-primary",
StyleBase::Info => "btn-info",
StyleBase::Success => "btn-success",
StyleBase::Warning => "btn-warning",
StyleBase::Danger => "btn-danger",
StyleBase::Light => "btn-light",
StyleBase::Dark => "btn-dark",
StyleBase::Link => "btn-link",
},
);
b.set_classes(
ClassesOp::Replace(b.font_size().to_string()),
with_font(b.font_size()),
);
}
#[rustfmt::skip]
fn before_prepare_heading(h: &mut Heading, _cx: &mut Context) {
h.set_classes(
ClassesOp::Replace(h.size().to_string()),
match h.size() {
HeadingSize::ExtraLarge => "display-1",
HeadingSize::XxLarge => "display-2",
HeadingSize::XLarge => "display-3",
HeadingSize::Large => "display-4",
HeadingSize::Medium => "display-5",
_ => "",
},
);
}
fn before_prepare_paragraph(p: &mut Paragraph, _cx: &mut Context) {
p.set_classes(
ClassesOp::Replace(p.font_size().to_string()),
with_font(p.font_size()),
);
}
fn render_error404(_: &Error404, cx: &mut Context) -> Option<Markup> {
Some(html! {
div class="jumbotron" {
div class="media" {
img
src="/bootsier/images/caution.png"
class="mr-4"
style="width: 20%; max-width: 188px"
alt="Caution!";
div class="media-body" {
h1 class="display-4" { ("RESOURCE NOT FOUND") }
p class="lead" {
(L10n::t("e404-description", &LOCALES_BOOTSIER)
.escaped(cx.langid()))
}
hr class="my-4";
p {
(L10n::t("e404-description", &LOCALES_BOOTSIER)
.escaped(cx.langid()))
}
a
class="btn btn-primary btn-lg"
href="/"
role="button"
{
(L10n::t("back-homepage", &LOCALES_BOOTSIER)
.escaped(cx.langid()))
}
}
}
}
})
*/
}
/*
#[rustfmt::skip]
fn with_font(font_size: &FontSize) -> String {
String::from(match font_size {
FontSize::ExtraLarge => "fs-1",
FontSize::XxLarge => "fs-2",
FontSize::XLarge => "fs-3",
FontSize::Large => "fs-4",
FontSize::Medium => "fs-5",
_ => "",
})
}
*/
impl ThemeTrait for Aliner {}

View file

@ -0,0 +1,356 @@
html {
background-color: white;
padding: 1px 3px;
}
body {
padding: 1px 3px;
}
div {
padding: 1px 3px;
margin: 5px;
}
h1, h2, h3, h4,h5, h6, p {
background-color: snow;
}
* * {
outline: 5px solid rgba(255,0,0,.1);
}
* * * {
outline: 3px dashed rgba(255,0,0,.4);
}
* * * * {
outline: 2px dotted rgba(255,0,0,.6);
}
* * * * * {
outline: 1px dotted rgba(255,0,0,.9);
}
* * * * * * {
outline-color: gray;
}
*::before, *::after {
background: #faa;
border-radius: 3px;
font: normal normal 400 10px/1.2 monospace;
vertical-align: middle;
padding: 1px 3px;
margin: 0 3px;
}
*::before {
content: "(";
}
*::after {
content: ")";
}
a::before { content: "<a>"; }
a::after { content: "</a>"; }
abbr::before { content: "<abbr>"; }
abbr::after { content: "</abbr>"; }
acronym::before { content: "<acronym>"; }
acronym::after { content: "</acronym>"; }
address::before { content: "<address>"; }
address::after { content: "</address>"; }
applet::before { content: "<applet>"; }
applet::after { content: "</applet>"; }
area::before { content: "<area>"; }
area::after { content: "</area>"; }
article::before { content: "<article>"; }
article::after { content: "</article>"; }
aside::before { content: "<aside>"; }
aside::after { content: "</aside>"; }
audio::before { content: "<audio>"; }
audio::after { content: "</audio>"; }
b::before { content: "<b>"; }
b::after { content: "</b>"; }
base::before { content: "<base>"; }
base::after { content: "</base>"; }
basefont::before { content: "<basefont>"; }
basefont::after { content: "</basefont>"; }
bdi::before { content: "<bdi>"; }
bdi::after { content: "</bdi>"; }
bdo::before { content: "<bdo>"; }
bdo::after { content: "</bdo>"; }
bgsound::before { content: "<bgsound>"; }
bgsound::after { content: "</bgsound>"; }
big::before { content: "<big>"; }
big::after { content: "</big>"; }
blink::before { content: "<blink>"; }
blink::after { content: "</blink>"; }
blockquote::before { content: "<blockquote>"; }
blockquote::after { content: "</blockquote>"; }
body::before { content: "<body>"; }
body::after { content: "</body>"; }
br::before { content: "<br>"; }
br::after { content: "</br>"; }
button::before { content: "<button>"; }
button::after { content: "</button>"; }
caption::before { content: "<caption>"; }
caption::after { content: "</caption>"; }
canvas::before { content: "<canvas>"; }
canvas::after { content: "</canvas>"; }
center::before { content: "<center>"; }
center::after { content: "</center>"; }
cite::before { content: "<cite>"; }
cite::after { content: "</cite>"; }
code::before { content: "<code>"; }
code::after { content: "</code>"; }
col::before { content: "<col>"; }
col::after { content: "</col>"; }
colgroup::before { content: "<colgroup>"; }
colgroup::after { content: "</colgroup>"; }
command::before { content: "<command>"; }
command::after { content: "</command>"; }
content::before { content: "<content>"; }
content::after { content: "</content>"; }
data::before { content: "<data>"; }
data::after { content: "</data>"; }
datalist::before { content: "<datalist>"; }
datalist::after { content: "</datalist>"; }
dd::before { content: "<dd>"; }
dd::after { content: "</dd>"; }
del::before { content: "<del>"; }
del::after { content: "</del>"; }
details::before { content: "<details>"; }
details::after { content: "</details>"; }
dfn::before { content: "<dfn>"; }
dfn::after { content: "</dfn>"; }
dialog::before { content: "<dialog>"; }
dialog::after { content: "</dialog>"; }
dir::before { content: "<dir>"; }
dir::after { content: "</dir>"; }
div::before { content: "<div>"; }
div::after { content: "</div>"; }
dl::before { content: "<dl>"; }
dl::after { content: "</dl>"; }
dt::before { content: "<dt>"; }
dt::after { content: "</dt>"; }
element::before { content: "<element>"; }
element::after { content: "</element>"; }
em::before { content: "<em>"; }
em::after { content: "</em>"; }
embed::before { content: "<embed>"; }
embed::after { content: "</embed>"; }
fieldset::before { content: "<fieldset>"; }
fieldset::after { content: "</fieldset>"; }
figcaption::before { content: "<figcaption>"; }
figcaption::after { content: "</figcaption>"; }
figure::before { content: "<figure>"; }
figure::after { content: "</figure>"; }
font::before { content: "<font>"; }
font::after { content: "</font>"; }
footer::before { content: "<footer>"; }
footer::after { content: "</footer>"; }
form::before { content: "<form>"; }
form::after { content: "</form>"; }
frame::before { content: "<frame>"; }
frame::after { content: "</frame>"; }
frameset::before { content: "<frameset>"; }
frameset::after { content: "</frameset>"; }
h1::before { content: "<h1>"; }
h1::after { content: "</h1>"; }
h2::before { content: "<h2>"; }
h2::after { content: "</h2>"; }
h3::before { content: "<h3>"; }
h3::after { content: "</h3>"; }
h4::before { content: "<h4>"; }
h4::after { content: "</h4>"; }
h5::before { content: "<h5>"; }
h5::after { content: "</h5>"; }
h6::before { content: "<h6>"; }
h6::after { content: "</h6>"; }
head::before { content: "<head>"; }
head::after { content: "</head>"; }
header::before { content: "<header>"; }
header::after { content: "</header>"; }
hgroup::before { content: "<hgroup>"; }
hgroup::after { content: "</hgroup>"; }
hr::before { content: "<hr>"; }
hr::after { content: "</hr>"; }
html::before { content: "<html>"; }
html::after { content: "</html>"; }
i::before { content: "<i>"; }
i::after { content: "</i>"; }
iframe::before { content: "<iframe>"; }
iframe::after { content: "</iframe>"; }
image::before { content: "<image>"; }
image::after { content: "</image>"; }
img::before { content: "<img>"; }
img::after { content: "</img>"; }
input::before { content: "<input>"; }
input::after { content: "</input>"; }
ins::before { content: "<ins>"; }
ins::after { content: "</ins>"; }
isindex::before { content: "<isindex>"; }
isindex::after { content: "</isindex>"; }
kbd::before { content: "<kbd>"; }
kbd::after { content: "</kbd>"; }
keygen::before { content: "<keygen>"; }
keygen::after { content: "</keygen>"; }
label::before { content: "<label>"; }
label::after { content: "</label>"; }
legend::before { content: "<legend>"; }
legend::after { content: "</legend>"; }
li::before { content: "<li>"; }
li::after { content: "</li>"; }
link::before { content: "<link>"; }
link::after { content: "</link>"; }
listing::before { content: "<listing>"; }
listing::after { content: "</listing>"; }
main::before { content: "<main>"; }
main::after { content: "</main>"; }
map::before { content: "<map>"; }
map::after { content: "</map>"; }
mark::before { content: "<mark>"; }
mark::after { content: "</mark>"; }
marquee::before { content: "<marquee>"; }
marquee::after { content: "</marquee>"; }
menu::before { content: "<menu>"; }
menu::after { content: "</menu>"; }
menuitem::before { content: "<menuitem>"; }
menuitem::after { content: "</menuitem>"; }
meta::before { content: "<meta>"; }
meta::after { content: "</meta>"; }
meter::before { content: "<meter>"; }
meter::after { content: "</meter>"; }
multicol::before { content: "<multicol>"; }
multicol::after { content: "</multicol>"; }
nav::before { content: "<nav>"; }
nav::after { content: "</nav>"; }
nextid::before { content: "<nextid>"; }
nextid::after { content: "</nextid>"; }
nobr::before { content: "<nobr>"; }
nobr::after { content: "</nobr>"; }
noembed::before { content: "<noembed>"; }
noembed::after { content: "</noembed>"; }
noframes::before { content: "<noframes>"; }
noframes::after { content: "</noframes>"; }
noscript::before { content: "<noscript>"; }
noscript::after { content: "</noscript>"; }
object::before { content: "<object>"; }
object::after { content: "</object>"; }
ol::before { content: "<ol>"; }
ol::after { content: "</ol>"; }
optgroup::before { content: "<optgroup>"; }
optgroup::after { content: "</optgroup>"; }
option::before { content: "<option>"; }
option::after { content: "</option>"; }
output::before { content: "<output>"; }
output::after { content: "</output>"; }
p::before { content: "<p>"; }
p::after { content: "</p>"; }
param::before { content: "<param>"; }
param::after { content: "</param>"; }
picture::before { content: "<picture>"; }
picture::after { content: "</picture>"; }
plaintext::before { content: "<plaintext>"; }
plaintext::after { content: "</plaintext>"; }
pre::before { content: "<pre>"; }
pre::after { content: "</pre>"; }
progress::before { content: "<progress>"; }
progress::after { content: "</progress>"; }
q::before { content: "<q>"; }
q::after { content: "</q>"; }
rb::before { content: "<rb>"; }
rb::after { content: "</rb>"; }
rp::before { content: "<rp>"; }
rp::after { content: "</rp>"; }
rt::before { content: "<rt>"; }
rt::after { content: "</rt>"; }
rtc::before { content: "<rtc>"; }
rtc::after { content: "</rtc>"; }
ruby::before { content: "<ruby>"; }
ruby::after { content: "</ruby>"; }
s::before { content: "<s>"; }
s::after { content: "</s>"; }
samp::before { content: "<samp>"; }
samp::after { content: "</samp>"; }
script::before { content: "<script>"; }
script::after { content: "</script>"; }
section::before { content: "<section>"; }
section::after { content: "</section>"; }
select::before { content: "<select>"; }
select::after { content: "</select>"; }
shadow::before { content: "<shadow>"; }
shadow::after { content: "</shadow>"; }
slot::before { content: "<slot>"; }
slot::after { content: "</slot>"; }
small::before { content: "<small>"; }
small::after { content: "</small>"; }
source::before { content: "<source>"; }
source::after { content: "</source>"; }
spacer::before { content: "<spacer>"; }
spacer::after { content: "</spacer>"; }
span::before { content: "<span>"; }
span::after { content: "</span>"; }
strike::before { content: "<strike>"; }
strike::after { content: "</strike>"; }
strong::before { content: "<strong>"; }
strong::after { content: "</strong>"; }
style::before { content: "<style>"; }
style::after { content: "<\/style>"; }
sub::before { content: "<sub>"; }
sub::after { content: "</sub>"; }
summary::before { content: "<summary>"; }
summary::after { content: "</summary>"; }
sup::before { content: "<sup>"; }
sup::after { content: "</sup>"; }
table::before { content: "<table>"; }
table::after { content: "</table>"; }
tbody::before { content: "<tbody>"; }
tbody::after { content: "</tbody>"; }
td::before { content: "<td>"; }
td::after { content: "</td>"; }
template::before { content: "<template>"; }
template::after { content: "</template>"; }
textarea::before { content: "<textarea>"; }
textarea::after { content: "</textarea>"; }
tfoot::before { content: "<tfoot>"; }
tfoot::after { content: "</tfoot>"; }
th::before { content: "<th>"; }
th::after { content: "</th>"; }
thead::before { content: "<thead>"; }
thead::after { content: "</thead>"; }
time::before { content: "<time>"; }
time::after { content: "</time>"; }
title::before { content: "<title>"; }
title::after { content: "</title>"; }
tr::before { content: "<tr>"; }
tr::after { content: "</tr>"; }
track::before { content: "<track>"; }
track::after { content: "</track>"; }
tt::before { content: "<tt>"; }
tt::after { content: "</tt>"; }
u::before { content: "<u>"; }
u::after { content: "</u>"; }
ul::before { content: "<ul>"; }
ul::after { content: "</ul>"; }
var::before { content: "<var>"; }
var::after { content: "</var>"; }
video::before { content: "<video>"; }
video::after { content: "</video>"; }
wbr::before { content: "<wbr>"; }
wbr::after { content: "</wbr>"; }
xmp::before { content: "<xmp>"; }
xmp::after { content: "</xmp>"; }

View file

@ -0,0 +1,23 @@
use pagetop_aliner::{TEMPLATE_BASE_DIR, TEMPLATE_GLOB};
use tera::Tera;
/// Test to ensure Tera can initialize templates from the file system in debug mode.
#[test]
fn aliner_initialization_in_debug_mode() {
let tera = Tera::new(TEMPLATE_GLOB);
assert!(tera.is_ok(), "Failed to initialize Tera in debug mode");
}
/// Test to ensure templates embedded in the binary can be properly loaded in release mode.
#[test]
fn aliner_initialization_in_release_mode() {
for file in TEMPLATE_BASE_DIR.files() {
let content = file.contents_utf8();
assert!(
content.is_some(),
"File {:?} contains non-UTF-8 content",
file.path()
);
}
}