Release 0.3.33

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ
Head preloads: latin font, wordmark, content-host preconnect
2026-09-02 11:48:42 +02:00 · 2026-09-02 11:48:11 +02:00 · 2026-09-01 22:12:20 +02:00 · 2026-09-01 22:12:20 +02:00 · 2026-09-01 21:48:25 +02:00 · 2026-09-01 21:48:25 +02:00
5 changed files with 173 additions and 7 deletions
@@ -2948,7 +2948,7 @@ dependencies = [

 [[package]]
 name = "portal"
-version = "0.3.26"
+version = "0.3.33"
 dependencies = [
 "anyhow",
 "arc-swap",
@@ -1,6 +1,6 @@
 [package]
 name = "portal"
-version = "0.3.27"
+version = "0.3.33"
 edition = "2021"

 [lib]
@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use leptos_meta::{provide_meta_context, HashedStylesheet, Html, MetaTags, Stylesheet, Title};
+use leptos_meta::{provide_meta_context, HashedStylesheet, Html, Link, MetaTags, Stylesheet, Title};
 use leptos_router::{
    components::{Route, Router, Routes},
    hooks::{use_location, use_navigate, use_query_map},
@@ -40,6 +40,20 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
                // once loaded via <link>/<img> on Safari/iOS.
                <link rel="icon" media="(prefers-color-scheme: light)" href="/favicon-light.svg" type="image/svg+xml"/>
                <link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.svg" type="image/svg+xml"/>
+                // Fonts hide behind the stylesheet: the browser must
+                // fetch and parse CSS before it discovers them. The
+                // latin subset is on every page's critical path, so
+                // announce it up front; latin-ext and vietnamese stay
+                // unicode-range-gated and load only when script needs
+                // them - preloading those would tax everyone for a few.
+                // (Font preloads require crossorigin even same-origin.)
+                <link
+                    rel="preload"
+                    href="/fonts/quicksand-semibold-latin.woff2"
+                    r#as="font"
+                    type="font/woff2"
+                    crossorigin="anonymous"
+                />
                // Server-side, so it can read hash.txt and link the
                // content-hashed stylesheet (hash-files = true).
                <HashedStylesheet id="leptos" options=options.clone()/>
@@ -89,10 +103,34 @@ pub fn App() -> impl IntoView {
            .and_then(|s| s.stylesheet)
            .map(|p| format!("/site/{p}"))
    });
+    // The wordmark paints in the hero on first view; announcing it in
+    // the head starts the fetch during hydration instead of after. On
+    // redoal.com it lives on the content host, so a preconnect opens
+    // that TLS session while the preload is still queued.
+    let wordmark_href = Memo::new(move |_| {
+        site.get().and_then(|r| r.ok()).and_then(|s| s.wordmark)
+    });
+    let wordmark_origin = Memo::new(move |_| {
+        wordmark_href.get().and_then(|w| {
+            let rest = w.strip_prefix("https://")?;
+            Some(format!("https://{}", rest.split('/').next()?))
+        })
+    });
+    // A content-shipped favicon overrides the built-in one; injected
+    // into the head after the static defaults, so it wins.
+    let favicon = Memo::new(move |_| {
+        site.get()
+            .and_then(|r| r.ok())
+            .and_then(|s| s.favicon)
+            .map(|p| format!("/site/{p}"))
+    });

    view! {
        <Html attr:lang=move || lang.get()/>
+        {move || wordmark_origin.get().map(|href| view! { <Link rel="preconnect" href=href crossorigin="anonymous"/> })}
+        {move || wordmark_href.get().map(|href| view! { <Link rel="preload" as_="image" href=href/> })}
        {move || custom_css.get().map(|href| view! { <Stylesheet id="site-custom" href=href/> })}
+        {move || favicon.get().map(|href| view! { <Link rel="icon" href=href/> })}
        <Suspense fallback=|| ()>
            {move || {
                site.get()
@@ -687,7 +725,7 @@ fn Hero(title: String, description: String, landing: bool, site: SiteConfig, cur
                    <img src=wordmark alt=site_title style=wordmark_style/>
                </a>
                <h1>{title}</h1>
-                <p>{description}</p>
+                <p inner_html=render_inline_markdown(&description)></p>
            </div>
        </header>
    }
@@ -191,6 +191,7 @@ pub fn render_inline_markdown(text: &str) -> String {
        Event::Start(Tag::Link { dest_url, .. })
            if !(dest_url.starts_with("https://")
                || dest_url.starts_with("mailto:")
+                || dest_url.starts_with("tel:")
                || dest_url.starts_with('/')) =>
        {
            in_link += 1;
@@ -219,7 +220,73 @@ pub fn render_inline_markdown(text: &str) -> String {
    });
    let mut out = String::new();
    html::push_html(&mut out, filtered);
-    out.trim().to_string()
+    apply_image_hints(out.trim())
+}
+
+/// Translate a markdown image's title (`![alt](url "right 9rem")`)
+/// into layout: `left`/`right` float via a class, a bare number
+/// (optionally with `rem`) into a validated `max-width`. Unknown
+/// tokens are ignored; the title attribute is dropped either way.
+/// Only touches `<img>` tags in our own render output, and only ever
+/// emits a numeric max-width - no arbitrary CSS reaches the page.
+fn apply_image_hints(html: &str) -> String {
+    let mut out = String::new();
+    let mut rest = html;
+    while let Some(pos) = rest.find("<img ") {
+        out.push_str(&rest[..pos]);
+        let after = &rest[pos..];
+        let end = after.find('>').map(|e| e + 1).unwrap_or(after.len());
+        out.push_str(&rewrite_img_tag(&after[..end]));
+        rest = &after[end..];
+    }
+    out.push_str(rest);
+    out
+}
+
+fn rewrite_img_tag(tag: &str) -> String {
+    // Pull the title value, if any.
+    let title = tag
+        .find("title=\"")
+        .map(|i| &tag[i + 7..])
+        .and_then(|r| r.find('"').map(|e| &r[..e]))
+        .unwrap_or("");
+
+    let mut class = String::new();
+    let mut max_rem: Option<f32> = None;
+    for tok in title.split_whitespace() {
+        match tok {
+            "left" => class = "md-float-left".into(),
+            "right" => class = "md-float-right".into(),
+            other => {
+                if let Ok(n) = other.trim_end_matches("rem").parse::<f32>() {
+                    if n > 0.0 && n <= 60.0 {
+                        max_rem = Some(n);
+                    }
+                }
+            }
+        }
+    }
+
+    // Strip the title attribute from the tag.
+    let mut cleaned = tag.to_string();
+    if let Some(i) = cleaned.find(" title=\"") {
+        if let Some(e) = cleaned[i + 8..].find('"') {
+            cleaned.replace_range(i..i + 8 + e + 1, "");
+        }
+    }
+
+    // Inject class/style right after `<img`.
+    let mut attrs = String::new();
+    if !class.is_empty() {
+        attrs.push_str(&format!(" class=\"{class}\""));
+    }
+    if let Some(n) = max_rem {
+        attrs.push_str(&format!(" style=\"max-width:{n}rem\""));
+    }
+    if attrs.is_empty() {
+        return cleaned;
+    }
+    cleaned.replacen("<img", &format!("<img{attrs}"), 1)
 }

 /// Directory-scoped defaults: a `_section.yaml` file applies to every
@@ -544,6 +611,10 @@ pub struct SiteConfig {
    /// same-origin at `/site/<path>`; plain path only.
    #[serde(default)]
    pub stylesheet: Option<String>,
+    /// A content-repo-relative favicon (svg/png/ico), served at
+    /// `/site/<path>` and used in place of the built-in one.
+    #[serde(default)]
+    pub favicon: Option<String>,
    #[serde(default)]
    pub hero: HeroConfig,
 }
@@ -606,6 +677,14 @@ impl SiteConfig {
                );
            }
        }
+        if let Some(icon) = &self.favicon {
+            let ok = [".svg", ".png", ".ico"].iter().any(|e| icon.ends_with(e));
+            if !is_safe_site_path(icon) || !ok {
+                anyhow::bail!(
+                    "site.yaml: favicon {icon:?} must be a plain repo-relative .svg/.png/.ico path"
+                );
+            }
+        }
        Ok(())
    }
 }
@@ -1469,6 +1548,8 @@ pub async fn site_asset_handler(
        Some("json") => "application/json",
        Some("png") => "image/png",
        Some("webp") => "image/webp",
+        Some("avif") => "image/avif",
+        Some("ico") => "image/x-icon",
        Some("woff2") => "font/woff2",
        _ => "application/octet-stream",
    };
@@ -2079,6 +2160,10 @@ alternatives:
    fn markdown_drops_html_and_unsafe_links() {
        assert_eq!(render_inline_markdown("x <script>y</script> z"), "x y z");
        assert_eq!(render_inline_markdown("[bad](javascript:alert(1))"), "bad");
+        assert_eq!(
+            render_inline_markdown("[ring](tel:+4791180485)"),
+            "<a href=\"tel:+4791180485\">ring</a>"
+        );
        assert_eq!(
            render_inline_markdown("![site](https://x.no/a.jpg)"),
            "<img src=\"https://x.no/a.jpg\" alt=\"site\" />"
@@ -2088,6 +2173,21 @@ alternatives:
            render_inline_markdown("![local](/images/a.jpg)"),
            "<img src=\"/images/a.jpg\" alt=\"local\" />"
        );
+        // Image title hints: float + max-width, title dropped.
+        assert_eq!(
+            render_inline_markdown("![J](https://x.no/j.jpg \"right 9rem\")"),
+            "<img class=\"md-float-right\" style=\"max-width:9rem\" src=\"https://x.no/j.jpg\" alt=\"J\" />"
+        );
+        assert_eq!(
+            render_inline_markdown("![J](https://x.no/j.jpg \"12\")"),
+            "<img style=\"max-width:12rem\" src=\"https://x.no/j.jpg\" alt=\"J\" />"
+        );
+        // Unknown hint tokens are ignored; a safe image with no title
+        // is untouched.
+        assert_eq!(
+            render_inline_markdown("![J](https://x.no/j.jpg \"wat\")"),
+            "<img src=\"https://x.no/j.jpg\" alt=\"J\" />"
+        );
        assert_eq!(render_inline_markdown("[ok](/shape)"), "<a href=\"/shape\">ok</a>");
        assert_eq!(render_inline_markdown("[mail](mailto:bl@uhhm.no)"), "<a href=\"mailto:bl@uhhm.no\">mail</a>");
    }
@@ -368,8 +368,12 @@ main.not-found {
 .alt-image {
  display: block;
  width: 100%;
-  max-height: 14rem;
-  object-fit: cover;
+  height: auto;
+  /* Natural aspect, not a cropped band; a very tall image is still
+     bounded so it can't tower. The deck below overrides for its
+     fixed-height cards. */
+  max-height: 32rem;
+  object-fit: contain;
  border-radius: calc(var(--radius) - 0.3rem);
  margin-bottom: 1.1rem;
 }
@@ -552,6 +556,30 @@ main.not-found {
  border: 0.06rem solid var(--line);
 }

+/* Content hint via a markdown image title (`![alt](url "right 9rem")`):
+   float and shrink so text wraps around a portrait. */
+.alt-description img.md-float-left,
+.item-card-description img.md-float-left,
+.feature p img.md-float-left,
+.alt-description img.md-float-right,
+.item-card-description img.md-float-right,
+.feature p img.md-float-right {
+  width: auto;
+  max-width: 45%;
+}
+.alt-description img.md-float-left,
+.item-card-description img.md-float-left,
+.feature p img.md-float-left {
+  float: left;
+  margin: 0.2rem 1.1rem 0.5rem 0;
+}
+.alt-description img.md-float-right,
+.item-card-description img.md-float-right,
+.feature p img.md-float-right {
+  float: right;
+  margin: 0.2rem 0 0.5rem 1.1rem;
+}
+
 .alt-description code,
 .feature p code {
  font-size: 0.9em;
Author	SHA1	Message	Date
Bendik Aagaard LynghaugandClaude Fable 5	bd12dd4e99	Release 0.3.33 Test / test (push) Successful in 27s Details Publish release / publish (push) Successful in 1m41s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-02 11:48:42 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	b044780e61	Head preloads: latin font, wordmark, content-host preconnect Fonts hide behind the stylesheet - the browser parses CSS before it finds them - so the latin Quicksand subset (every page's critical path) is announced in the shell head; latin-ext/vietnamese stay unicode-range-gated. The wordmark preloads from the resolved site config, with a preconnect to its origin when it lives on the content host (redoal.com's does), opening that TLS session early. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-02 11:48:11 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	9c22b52fda	Release 0.3.32 Test / test (push) Successful in 26s Details Publish release / publish (push) Successful in 1m43s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 22:12:20 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	01504fb120	Per-site favicon via site.yaml A content repo can ship a favicon (svg/png/ico) named in site.yaml; portal serves it at /site/<path> and injects a <link rel=icon> after the static defaults so it wins. Also serves .ico assets. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 22:12:20 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	b25a5839b0	Release 0.3.31 Test / test (push) Successful in 27s Details Publish release / publish (push) Successful in 1m45s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 21:48:25 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	c4609f4370	Markdown links allow tel: Phone numbers can now be [+47 …](tel:+47…) links in descriptions, same gate as https/mailto/relative. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 21:48:25 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	2c94ba4379	Release 0.3.30 Test / test (push) Successful in 28s Details Publish release / publish (push) Successful in 1m50s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 21:42:20 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	065bd0a86a	Single alt-image shows natural height Was cropped to a 14rem band via object-fit: cover; now shows the whole image at natural aspect, bounded at 32rem so a tall one can't tower. The image deck keeps its fixed-height cards. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 21:42:20 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	035ad7830b	Release 0.3.29 Test / test (push) Successful in 27s Details Publish release / publish (push) Successful in 1m45s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 21:36:57 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	bf7f2e11e7	Markdown image layout hints + AVIF assets Content-only image control: a markdown image title carries layout — left/right to float text around it, a number for max-width in rem (validated, capped) — translated to md-float-* classes and a numeric inline max-width. No arbitrary CSS reaches the page. Portal also now serves .avif site assets. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 21:36:57 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	57b70c8445	Release 0.3.28 Test / test (push) Successful in 27s Details Publish release / publish (push) Successful in 1m41s Details Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 20:31:02 +02:00
Bendik Aagaard LynghaugandClaude Fable 5	0d3221c22f	Hero description renders inline markdown The question-level description (hero subtitle) was plain text, so bold showed literal asterisks. Now it runs through render_inline_markdown like every other description. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ	2026-09-01 20:31:02 +02:00