Do not intercept anchors with rel="external" (#238)

* disable router with rel="external"

* Add docs

docs/next/advanced/routing.md

@@ -274,3 +274,15 @@ template! {
     }
 }
 ```
+
+## `rel="external"`
+
+By default, the router will intercept all `<a>` elements that have the same origin as the current
+page. Sometimes, we just want the browser to handle navigation without being intercepted by the
+router. To bypass the router, we can add the `rel="external"` attribute to the anchor tag.
+
+```rust
+template! {
+    a(href="path", rel="external") { "Path" }
+}
+```

packages/sycamore-router/src/router.rs

@@ -71,6 +71,13 @@ impl Integration for HistoryIntegration {
                 let location = web_sys::window().unwrap().location();
 
                 let a = a.unchecked_into::<HtmlAnchorElement>();
+
+                // Check if a has `rel="external"`.
+                if a.rel() == "external" {
+                    // Use default browser behaviour.
+                    return;
+                }
+
                 let origin = a.origin();
                 let path = a.pathname();
                 let hash = a.hash();

website/src/versions.rs

@@ -52,6 +52,7 @@ fn versioned_docs_link_view(
             a(
                 class="hover:text-yellow-500 transition-colors",
                 href="/api/sycamore/index.html",
+                rel="external"
             ) { "API" }
         },
     }