fce630c8d0
Visual de la chacana retrabajado contra chakana.png de referencia:
- Sol detrás (gauss + corona, masked al interior de la chacana — sólo
asoma por la superficie de la cruz, no se cuela afuera).
- Doble outline dorado (línea principal + paralela offset 0.020), color
CHACANA_LINE pasa de cyan helado a dorado-ámbar del logo.
- Interior con niebla violeta-noche (u_dark_color) y rayos radiales
sutiles desde el centro, modulados por sin(t * 0.3).
- Aro doble exterior: ring fino interior + ring grueso con 4 grupos de
3 puntos cardinales (calculados angularmente, no rayos largos).
- WORLD_SCALE 1.45→1.05, MAX_TILT 35°→28° (más sólido, menos caricaturesco).
Título "GioSer" centrado dentro de la superficie de la chacana, sin
subtítulo. Se inclina junto con la chacana vía CSS perspective +
rotateX/rotateY desde u-tilt-x/y inyectadas cada frame por WASM.
Botones (4 tips):
- Reposicionados a `arm_extent * 1.32` (entre punta y aro grueso).
- Bigger: min-width 168px, glyph 54px, label Cinzel 0.95rem.
- Doble anillo en hover (::before con border + glow).
- Cuando un drawer se abre, fade-out de tips + canvas + brand.
Drawers MD (uno por elemento):
- `<aside class="drawer drawer-{element}">` con transform-origin desde
CSS vars (--origin-x/y) seteadas por WASM al click — crece desde la
posición exacta del botón hasta fullscreen en 700ms con cubic-bezier.
- Ambience por elemento: AIRE (radial drift), FUEGO (flicker keyframe),
AGUA (tide vertical), TIERRA (warm earth gradient).
- Cerrado con botón X, Escape o data-close-drawer.
- Carga MD desde ./md/{element}.md via spawn_local + Reader::open_url.
Pluma (visor MD agnóstico, dos crates nuevos):
- `crates/modules/pluma/pluma-md` — wrapper sobre pulldown-cmark 0.12.
API: to_html(), to_themed_html(md, theme) con sanitización del theme,
events() para AST stream. GFM completo. No deps web. 5 tests.
- `crates/modules/pluma/pluma-reader-web` — toma HtmlElement, expone
open_url async (fetch via wasm-bindgen-futures), render_md sync,
show_loading/show_error. NO inyecta CSS — el host estiliza
`.pluma-doc[data-pluma-theme="..."]` con sus colores.
CSS pluma-doc completo: h1/h2/h3, code/pre con border-left accent,
blockquote, tables, lists, hr gradient. Loader spinner + error state.
Placeholders en md/{aire,fuego,tierra,agua}.md con texto seed.
Workspace verde + 18 tests (6 geom + 4 palette + 3 physics + 5 pluma-md).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
89 lines
2.9 KiB
Rust
89 lines
2.9 KiB
Rust
//! Pluma reader — visor de markdown elegante para WASM/web.
|
|
//!
|
|
//! Toma un `<div>` que actúa como contenedor y le inyecta el HTML
|
|
//! producido por `pluma-md`. El styling (fonts, colores, animaciones)
|
|
//! lo provee el CSS del host: este crate no inyecta estilos, sólo
|
|
//! marcado y `data-pluma-theme="…"` para que el CSS reaccione.
|
|
//!
|
|
//! Patrón de uso:
|
|
//!
|
|
//! ```ignore
|
|
//! let container = document.get_element_by_id("drawer-aire-content")?
|
|
//! .dyn_into::<HtmlElement>()?;
|
|
//! let reader = Reader::new(container);
|
|
//! reader.show_loading();
|
|
//! wasm_bindgen_futures::spawn_local(async move {
|
|
//! let _ = reader.open_url("./md/aire.md", "aire").await;
|
|
//! });
|
|
//! ```
|
|
|
|
use wasm_bindgen::prelude::*;
|
|
use wasm_bindgen::JsCast;
|
|
use wasm_bindgen_futures::JsFuture;
|
|
use web_sys::{HtmlElement, Response};
|
|
|
|
pub struct Reader {
|
|
container: HtmlElement,
|
|
}
|
|
|
|
impl Reader {
|
|
pub fn new(container: HtmlElement) -> Self {
|
|
Self { container }
|
|
}
|
|
|
|
pub fn container(&self) -> &HtmlElement {
|
|
&self.container
|
|
}
|
|
|
|
/// Inyecta un mensaje de carga mientras se resuelve `open_url`.
|
|
pub fn show_loading(&self) {
|
|
self.container.set_inner_html(
|
|
r#"<div class="pluma-loading" aria-live="polite">…</div>"#,
|
|
);
|
|
}
|
|
|
|
/// Inyecta un mensaje de error visible.
|
|
pub fn show_error(&self, msg: &str) {
|
|
let safe: String = msg.replace('<', "<").replace('>', ">");
|
|
self.container.set_inner_html(&format!(
|
|
r#"<div class="pluma-error">{}</div>"#,
|
|
safe
|
|
));
|
|
}
|
|
|
|
/// Renderea un string markdown directamente, sin fetch.
|
|
pub fn render_md(&self, md: &str, theme: &str) {
|
|
let html = pluma_md::to_themed_html(md, theme);
|
|
self.container.set_inner_html(&html);
|
|
}
|
|
|
|
/// Inyecta HTML pre-renderizado (sin parsear). Útil si el caller ya
|
|
/// hizo el parse en otro lado.
|
|
pub fn render_html(&self, html: &str) {
|
|
self.container.set_inner_html(html);
|
|
}
|
|
|
|
/// Limpia el contenedor.
|
|
pub fn clear(&self) {
|
|
self.container.set_inner_html("");
|
|
}
|
|
|
|
/// Fetcha la URL, parsea el markdown y lo renderea con el tema dado.
|
|
/// El loader muestra un placeholder mientras la promesa está pendiente.
|
|
pub async fn open_url(&self, url: &str, theme: &str) -> Result<(), JsValue> {
|
|
let window = web_sys::window().ok_or_else(|| JsValue::from_str("no window"))?;
|
|
self.show_loading();
|
|
let resp_value = JsFuture::from(window.fetch_with_str(url)).await?;
|
|
let resp: Response = resp_value.dyn_into()?;
|
|
if !resp.ok() {
|
|
let err = format!("HTTP {} para {}", resp.status(), url);
|
|
self.show_error(&err);
|
|
return Err(JsValue::from_str(&err));
|
|
}
|
|
let text_value = JsFuture::from(resp.text()?).await?;
|
|
let md = text_value.as_string().unwrap_or_default();
|
|
self.render_md(&md, theme);
|
|
Ok(())
|
|
}
|
|
}
|