Añade nuevo tema para pruebas llamado Aliner

This commit is contained in:
Manuel Cillero 2025-10-11 21:36:06 +02:00
parent 3f394769db
commit 485974b437
7 changed files with 761 additions and 142 deletions

View file

@ -0,0 +1,21 @@
[package]
name = "pagetop-aliner"
version = "0.0.9"
edition = "2021"
description = """
Tema para PageTop que muestra esquemáticamente la composición de las páginas HTML
"""
categories = ["web-programming", "gui"]
keywords = ["pagetop", "theme", "css"]
repository.workspace = true
homepage.workspace = true
license.workspace = true
authors.workspace = true
[dependencies]
pagetop.workspace = true
[build-dependencies]
pagetop-build.workspace = true

View file

@ -0,0 +1,100 @@
<div align="center">
<h1>PageTop Aliner</h1>
<p>Tema para <strong>PageTop</strong> que muestra esquemáticamente la composición de las páginas HTML.</p>
[![Licencia](https://img.shields.io/badge/license-MIT%2FApache-blue.svg?label=Licencia&style=for-the-badge)](#-licencia)
[![Doc API](https://img.shields.io/docsrs/pagetop-aliner?label=Doc%20API&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)
[![Descargas](https://img.shields.io/crates/d/pagetop-aliner.svg?label=Descargas&style=for-the-badge&logo=transmission)](https://crates.io/crates/pagetop-aliner)
<br>
</div>
## Sobre PageTop
[PageTop](https://docs.rs/pagetop) es un entorno de desarrollo que reivindica la esencia de la web
clásica para crear soluciones web SSR (*renderizadas en el servidor*) modulares, extensibles y
configurables, basadas en HTML, CSS y JavaScript.
# ⚡️ Guía rápida
Igual que con otras extensiones, **añade la dependencia** a tu `Cargo.toml`:
```toml
[dependencies]
pagetop-aliner = "..."
```
**Declara la extensión** en tu aplicación (o extensión que la requiera). Recuerda que el orden en
`dependencies()` determina la prioridad relativa frente a las otras extensiones:
```rust,no_run
use pagetop::prelude::*;
struct MyApp;
impl Extension for MyApp {
fn dependencies(&self) -> Vec<ExtensionRef> {
vec![
// ...
&pagetop_aliner::Aliner,
// ...
]
}
}
#[pagetop::main]
async fn main() -> std::io::Result<()> {
Application::prepare(&MyApp).run()?.await
}
```
Y **selecciona el tema en la configuración** de la aplicación:
```toml
[app]
theme = "Aliner"
```
…o **fuerza el tema por código** en una página concreta:
```rust,no_run
use pagetop::prelude::*;
async fn homepage(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
Page::new(request)
.with_theme("Aliner")
.add_component(
Block::new()
.with_title(L10n::l("sample_title"))
.add_component(Html::with(|cx| html! {
p { (L10n::l("sample_content").using(cx)) }
})),
)
.render()
}
```
# 🚧 Advertencia
**PageTop** es un proyecto personal para aprender [Rust](https://www.rust-lang.org/es) y conocer su
ecosistema. Su API está sujeta a cambios frecuentes. No se recomienda su uso en producción, al menos
hasta que se libere la versión **1.0.0**.
# 📜 Licencia
El código está disponible bajo una doble licencia:
* **Licencia MIT**
([LICENSE-MIT](LICENSE-MIT) o también https://opensource.org/licenses/MIT)
* **Licencia Apache, Versión 2.0**
([LICENSE-APACHE](LICENSE-APACHE) o también https://www.apache.org/licenses/LICENSE-2.0)
Puedes elegir la licencia que prefieras. Este enfoque de doble licencia es el estándar de facto en
el ecosistema Rust.

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

@ -0,0 +1,118 @@
/*!
<div align="center">
<h1>PageTop Aliner</h1>
<p>Tema para <strong>PageTop</strong> que muestra esquemáticamente la composición de las páginas HTML.</p>
[![Licencia](https://img.shields.io/badge/license-MIT%2FApache-blue.svg?label=Licencia&style=for-the-badge)](#-licencia)
[![Doc API](https://img.shields.io/docsrs/pagetop-aliner?label=Doc%20API&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)
[![Descargas](https://img.shields.io/crates/d/pagetop-aliner.svg?label=Descargas&style=for-the-badge&logo=transmission)](https://crates.io/crates/pagetop-aliner)
<br>
</div>
## Sobre PageTop
[PageTop](https://docs.rs/pagetop) es un entorno de desarrollo que reivindica la esencia de la web
clásica para crear soluciones web SSR (*renderizadas en el servidor*) modulares, extensibles y
configurables, basadas en HTML, CSS y JavaScript.
# Guía rápida
Igual que con otras extensiones, **añade la dependencia** a tu `Cargo.toml`:
```toml
[dependencies]
pagetop-aliner = "..."
```
**Declara la extensión** en tu aplicación (o extensión que la requiera). Recuerda que el orden en
`dependencies()` determina la prioridad relativa frente a las otras extensiones:
```rust,no_run
use pagetop::prelude::*;
struct MyApp;
impl Extension for MyApp {
fn dependencies(&self) -> Vec<ExtensionRef> {
vec![
// ...
&pagetop_aliner::Aliner,
// ...
]
}
}
#[pagetop::main]
async fn main() -> std::io::Result<()> {
Application::prepare(&MyApp).run()?.await
}
```
Y **selecciona el tema en la configuración** de la aplicación:
```toml
[app]
theme = "Aliner"
```
o **fuerza el tema por código** en una página concreta:
```rust,no_run
use pagetop::prelude::*;
async fn homepage(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
Page::new(request)
.with_theme("Aliner")
.add_component(
Block::new()
.with_title(L10n::l("sample_title"))
.add_component(Html::with(|cx| html! {
p { (L10n::l("sample_content").using(cx)) }
})),
)
.render()
}
```
*/
use pagetop::prelude::*;
/// El tema usa las mismas regiones predefinidas por [`ThemeRegion`].
pub type AlinerRegion = ThemeRegion;
/// Implementa el tema para usar en pruebas que muestran el esquema de páginas HTML.
///
/// Tema mínimo ideal para **pruebas y demos** que renderiza el **esqueleto HTML** con las mismas
/// regiones básicas definidas por [`ThemeRegion`]. No pretende ser un tema para producción, está
/// pensado para:
///
/// - Verificar integración de componentes y composiciones (*layouts*) sin estilos complejos.
/// - Realizar pruebas de renderizado rápido con salida estable y predecible.
/// - Preparar ejemplos y documentación, sin dependencias visuales (CSS/JS) innecesarias.
pub struct Aliner;
impl Extension for Aliner {
fn theme(&self) -> Option<ThemeRef> {
Some(&Self)
}
fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
static_files_service!(scfg, [aliner] => "/aliner");
}
}
impl Theme for Aliner {
fn before_render_page_body(&self, page: &mut Page) {
page.alter_param("include_basic_css", true)
.alter_assets(ContextOp::AddStyleSheet(
StyleSheet::from("/aliner/css/styles.css")
.with_version(env!("CARGO_PKG_VERSION"))
.with_weight(-90),
));
}
}

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>"; }