Fuck web assembly for now, it crash on mobile...

This commit is contained in:
Adrien Bouvais 2024-06-14 23:59:19 +02:00
parent 35d498c6e1
commit 203a44dc34
2 changed files with 84 additions and 11 deletions

BIN
static/jade-v1.wasm Executable file

Binary file not shown.

View File

@ -18,23 +18,96 @@
<script async src="https://js.stripe.com/v3/pricing-table.js"></script> <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<script src="wasm_exec.js"></script> <!-- highlight.js -->
<script> <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css">
const go = new Go(); <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
const wasmModule = WebAssembly.instantiateStreaming(fetch('jade.wasm'), <script>hljs.highlightAll();</script>
go.importObject); <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
WebAssembly.instantiateStreaming(fetch('jade.wasm'),
go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head> </head>
<body hx-ext="sse" sse-connect="/sse"> <body hx-ext="sse" sse-connect="/sse">
{{embed}} {{embed}}
<script>
function generateMessagePlaceholder(content) {
marked.setOptions({
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
});
// Convert the markdown content to HTML
const htmlContent = marked(content);
let userString = `
<div class="message-user mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content" style="width: 100%; overflow-y: hidden;">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto; width: 100%;">
${htmlContent}
</div>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<div style="height: 30px;"></div>
</div>
</div>
</div>
</div>
`;
let botString = `
<div class="message-bot mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content">
<div class='message-header'>
<p>
Waiting...
</p>
</div>
<div class="message-body">
<div class="content">
<br>
<img src="/puff.svg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
return userString + botString;
}
</script>
<script> <script>
function copyToClipboardCode(button) { function copyToClipboardCode(button) {
// Get the code element next to the button // Get the code element next to the button