diff --git a/_docs/img/bridge.png b/_docs/img/bridge.png
new file mode 100644
index 0000000..81b8b69
Binary files /dev/null and b/_docs/img/bridge.png differ
diff --git a/_docs/img/bridge_added.png b/_docs/img/bridge_added.png
new file mode 100644
index 0000000..f8e5261
Binary files /dev/null and b/_docs/img/bridge_added.png differ
diff --git a/_docs/index.html b/_docs/index.html
index 1c4e5da..a605d56 100644
--- a/_docs/index.html
+++ b/_docs/index.html
@@ -6,9 +6,11 @@
Spearhead
-
-
-
+
+
+
+
+
diff --git a/_docs/js/components.js b/_docs/js/components.js
index d0fa8d2..cab2766 100644
--- a/_docs/js/components.js
+++ b/_docs/js/components.js
@@ -1,2 +1,5 @@
import * as header from "./components/header.js";
import * as sidebar from "./components/sidebar.js";
+import './components/code-block.js';
+import './components/code-inline.js';
+import './components/note.js';
diff --git a/_docs/js/components/code-block.js b/_docs/js/components/code-block.js
new file mode 100644
index 0000000..d21ec5d
--- /dev/null
+++ b/_docs/js/components/code-block.js
@@ -0,0 +1,29 @@
+class CodeBlock extends HTMLElement {
+ connectedCallback() {
+ // Get the code content as text, preserving whitespace
+ let code = this.textContent.replace(/\r\n?/g, "\n");
+ // Remove leading/trailing blank lines
+ code = code.replace(/^\s*\n/, '').replace(/\n\s*$/, '');
+ // Find leading spaces from the first non-empty line
+ const lines = code.split("\n");
+ const firstLine = lines.find(line => line.trim().length > 0) || '';
+ const leadingSpaces = firstLine.match(/^\s*/)[0].length;
+ // Remove that many leading spaces from all lines
+ const stripped = lines.map(line => line.slice(leadingSpaces)).join("\n");
+ // Escape HTML special characters
+ const escaped = stripped
+ .replace(/&/g, "&")
+ .replace(//g, ">");
+ const lang = this.getAttribute('lang') || '';
+ const langClass = lang ? `language-${lang}` : '';
+ this.innerHTML = `${escaped}
`;
+ // If Prism or highlight.js is present, trigger highlighting
+ if (window.Prism && Prism.highlightElement) {
+ Prism.highlightElement(this.querySelector('code'));
+ } else if (window.hljs && hljs.highlightElement) {
+ hljs.highlightElement(this.querySelector('code'));
+ }
+ }
+}
+customElements.define('code-block', CodeBlock);
diff --git a/_docs/js/components/code-inline.js b/_docs/js/components/code-inline.js
new file mode 100644
index 0000000..a5f1627
--- /dev/null
+++ b/_docs/js/components/code-inline.js
@@ -0,0 +1,32 @@
+class CodeInline extends HTMLElement {
+ connectedCallback() {
+ // Get the code content as text
+ let code = this.textContent;
+
+ // Escape HTML special characters
+ code = code
+ .replace(/&/g, "&")
+ .replace(//g, ">");
+
+ // Highlight variables: $variable, {variable}, or %variable%
+ code = code.replace(/(\$[a-zA-Z_][\w]*)|(\{[^\}]+\})|(%[^%]+%)/g, match =>
+ `${match}`
+ );
+
+ // Get language attribute for potential syntax highlighting
+ const lang = this.getAttribute('lang') || '';
+ const langClass = lang ? `language-${lang}` : '';
+
+ this.innerHTML = `${code}`;
+
+ // If Prism or highlight.js is present, trigger highlighting
+ if (window.Prism && Prism.highlightElement) {
+ Prism.highlightElement(this.querySelector('code'));
+ } else if (window.hljs && hljs.highlightElement) {
+ hljs.highlightElement(this.querySelector('code'));
+ }
+ }
+}
+
+customElements.define('code-inline', CodeInline);
diff --git a/_docs/js/components/header.js b/_docs/js/components/header.js
index 9487930..8dadac3 100644
--- a/_docs/js/components/header.js
+++ b/_docs/js/components/header.js
@@ -9,6 +9,7 @@ class Header extends HTMLElement {
this.innerHTML = `