feat(gioser): sol detrás, título central, drawers MD + pluma agnóstico
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>
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
//! Pluma — parser markdown agnóstico, listo para envolver en cualquier viewer.
|
||||
//!
|
||||
//! Es deliberadamente delgado: wrappea `pulldown-cmark` (todas las
|
||||
//! extensiones GFM habilitadas) y emite HTML envuelto en `<div class="pluma-doc">`
|
||||
//! con un `data-pluma-theme="…"` para que el CSS del viewer aplique colores
|
||||
//! por tema sin necesidad de re-renderear.
|
||||
//!
|
||||
//! No tiene deps de web/DOM/wasm: corre igual en server, terminal, WASM o
|
||||
//! tests. Si necesitás emitir Markdown-AST en lugar de HTML, usá la API
|
||||
//! `events()` y construí tu propio renderer.
|
||||
|
||||
use pulldown_cmark::{html, Event, Options, Parser};
|
||||
|
||||
/// Opciones por default — GFM completo: tables, footnotes, tasklists, strikethrough,
|
||||
/// smart punctuation, heading anchors.
|
||||
pub fn default_options() -> Options {
|
||||
Options::ENABLE_TABLES
|
||||
| Options::ENABLE_FOOTNOTES
|
||||
| Options::ENABLE_STRIKETHROUGH
|
||||
| Options::ENABLE_TASKLISTS
|
||||
| Options::ENABLE_SMART_PUNCTUATION
|
||||
| Options::ENABLE_HEADING_ATTRIBUTES
|
||||
}
|
||||
|
||||
/// Markdown → HTML "crudo" (sin wrapper de tema).
|
||||
pub fn to_html(md: &str) -> String {
|
||||
let mut out = String::with_capacity(md.len() * 2);
|
||||
let parser = Parser::new_ext(md, default_options());
|
||||
html::push_html(&mut out, parser);
|
||||
out
|
||||
}
|
||||
|
||||
/// Markdown → HTML envuelto en `<div class="pluma-doc" data-pluma-theme="…">`.
|
||||
/// El `theme` es un string opaco (ej. "aire", "fuego") que el CSS del viewer
|
||||
/// matchea via `[data-pluma-theme="aire"]`.
|
||||
pub fn to_themed_html(md: &str, theme: &str) -> String {
|
||||
let body = to_html(md);
|
||||
let safe_theme: String = theme
|
||||
.chars()
|
||||
.filter(|c| c.is_ascii_alphanumeric() || *c == '-' || *c == '_')
|
||||
.collect();
|
||||
format!(
|
||||
r#"<article class="pluma-doc" data-pluma-theme="{theme}">{body}</article>"#,
|
||||
theme = safe_theme,
|
||||
body = body
|
||||
)
|
||||
}
|
||||
|
||||
/// Devuelve un iterador de eventos pulldown-cmark (AST stream).
|
||||
/// Útil si querés renderear a algo distinto que HTML.
|
||||
pub fn events(md: &str) -> impl Iterator<Item = Event<'_>> {
|
||||
Parser::new_ext(md, default_options())
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn renders_h1() {
|
||||
let html = to_html("# Hola");
|
||||
assert!(html.contains("<h1>Hola</h1>"), "got {}", html);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn renders_list() {
|
||||
let html = to_html("- a\n- b\n");
|
||||
assert!(html.contains("<li>a</li>"));
|
||||
assert!(html.contains("<li>b</li>"));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn themed_wrapper_sanitizes_theme_name() {
|
||||
let html = to_themed_html("# x", "aire<script>");
|
||||
assert!(html.contains(r#"data-pluma-theme="airescript""#));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn renders_code_fence() {
|
||||
let html = to_html("```rust\nfn main(){}\n```");
|
||||
assert!(html.contains("<pre><code") && html.contains("fn main"));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn renders_table_gfm() {
|
||||
let md = "| a | b |\n|---|---|\n| 1 | 2 |\n";
|
||||
let html = to_html(md);
|
||||
assert!(html.contains("<table>"), "got {}", html);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user