Update
This commit is contained in:
parent
7ba32ea7c0
commit
b62636ed0e
21
app.js
21
app.js
@ -6,7 +6,6 @@ import Localdrive from 'localdrive';
|
|||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import Hyperdrive from 'hyperdrive';
|
import Hyperdrive from 'hyperdrive';
|
||||||
import Corestore from 'corestore';
|
import Corestore from 'corestore';
|
||||||
|
|
||||||
const store = new Corestore('./storage');
|
const store = new Corestore('./storage');
|
||||||
const drive = new Hyperdrive(store);
|
const drive = new Hyperdrive(store);
|
||||||
|
|
||||||
@ -236,8 +235,13 @@ function sendMessage(e) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// appends element to #messages element with content set to sender and message
|
function scrollToBottom() {
|
||||||
|
var container = document.getElementById("messages-container");
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
function onMessageAdded(from, message, avatar) {
|
function onMessageAdded(from, message, avatar) {
|
||||||
|
|
||||||
const $div = document.createElement('div');
|
const $div = document.createElement('div');
|
||||||
$div.classList.add('message');
|
$div.classList.add('message');
|
||||||
|
|
||||||
@ -255,21 +259,18 @@ function onMessageAdded(from, message, avatar) {
|
|||||||
const $text = document.createElement('div');
|
const $text = document.createElement('div');
|
||||||
$text.classList.add('message-text');
|
$text.classList.add('message-text');
|
||||||
|
|
||||||
// Split message by line breaks and create a new paragraph for each line
|
// Render Markdown content
|
||||||
const lines = message.split('\n');
|
const md = window.markdownit();
|
||||||
lines.forEach(line => {
|
$text.innerHTML = md.render(message);
|
||||||
const $line = document.createElement('p');
|
|
||||||
$line.textContent = line;
|
|
||||||
$text.appendChild($line);
|
|
||||||
});
|
|
||||||
|
|
||||||
$content.appendChild($header);
|
$content.appendChild($header);
|
||||||
$content.appendChild($text);
|
$content.appendChild($text);
|
||||||
$div.appendChild($content);
|
$div.appendChild($content);
|
||||||
|
|
||||||
document.querySelector('#messages').appendChild($div);
|
document.querySelector('#messages').appendChild($div);
|
||||||
}
|
scrollToBottom();
|
||||||
|
|
||||||
|
}
|
||||||
async function updateIcon(username, avatarBuffer) {
|
async function updateIcon(username, avatarBuffer) {
|
||||||
// Update the icon in the local HTML if necessary
|
// Update the icon in the local HTML if necessary
|
||||||
// This can be adjusted as per your needs
|
// This can be adjusted as per your needs
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<title>LinkUp</title>
|
<title>LinkUp</title>
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
<script type="module" src="./app.js"></script>
|
<script type="module" src="./app.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -53,7 +54,9 @@
|
|||||||
<!-- User list will be populated here -->
|
<!-- User list will be populated here -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="messages-container">
|
||||||
<div id="messages"></div>
|
<div id="messages"></div>
|
||||||
|
</div>
|
||||||
<form id="message-form">
|
<form id="message-form">
|
||||||
<textarea id="message" rows="4"></textarea>
|
<textarea id="message" rows="4"></textarea>
|
||||||
<input type="submit" value="Send" />
|
<input type="submit" value="Send" />
|
||||||
|
@ -27,6 +27,7 @@
|
|||||||
"hyperdrive": "^11.8.1",
|
"hyperdrive": "^11.8.1",
|
||||||
"hyperswarm": "^4.7.14",
|
"hyperswarm": "^4.7.14",
|
||||||
"localdrive": "^1.11.4",
|
"localdrive": "^1.11.4",
|
||||||
|
"marked": "^12.0.2",
|
||||||
"serve-drive": "^5.0.8"
|
"serve-drive": "^5.0.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,11 @@ body {
|
|||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#messages-container {
|
||||||
|
height: 45vh; /* Adjust as needed */
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* Header styles */
|
/* Header styles */
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Loading…
Reference in New Issue
Block a user