Skip to content

Instantly share code, notes, and snippets.

@ssadler
Created March 16, 2026 13:21
Show Gist options
  • Select an option

  • Save ssadler/655ddaf83c840514668d61640b03e7fa to your computer and use it in GitHub Desktop.

Select an option

Save ssadler/655ddaf83c840514668d61640b03e7fa to your computer and use it in GitHub Desktop.
Host BeastieBoard on your domain
<!--
-- Enter your config below, then drop on your server and serve index.html for all requests as with an SPA.
-->
<!doctype html><html><head>
<script type="text/javascript">
/*
* Configure here
*/
// Beastie instance uri with protocol
const appOrigin = 'https://gnosis.beastie.xyz/'
// Address of your top board
const boardAddress = "0xCe17Cf72180E493a64CE65cD28b35669DC3101f4"
/*
* No touchie
*/
window.addEventListener("DOMContentLoaded", function() {
const appHost = new URL(appOrigin).host
const app = document.getElementById('app')
app.src = appOrigin
const post = (data) => app.contentWindow.postMessage(data, appOrigin)
window.addEventListener('message', (event) => {
if (event.origin.indexOf(appHost) < 0) return;
const data = event.data;
if (data.action == 'app.init') {
post({ action: "beastie.init", board: boardAddress })
} else if (data.action == 'history.init') {
post({
action: 'history.urichange',
pathname: window.location.pathname,
state: history.state
})
} else if (data.action === 'history.pushState') {
window.history.pushState(data.data, '', data.url);
window.requestAnimationFrame(() => {
post({
action: 'history.urichange',
pathname: window.location.pathname,
state: history.state
})
})
} else if (data.action === 'history.back') {
window.history.back()
} else if (data.action === 'history.forward') {
window.history.forward()
} else if (data.action == 'history.replaceState') {
window.history.replaceState(data.state, "")
}
})
window.addEventListener('popstate', (event) => {
post({
action: 'history.popstate',
pathname: window.location.pathname,
state: history.state
})
})
})
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body { margin: 0 !important; padding: 0; height: 100%; overflow: hidden; }
.appFrame { margin: 0; padding: 0; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
</style>
</head>
<body>
<iframe id="app" src="" frameborder="0" className="appFrame" width="100%" height="100%" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment