ElnuDev/soudan
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Add support for multiple websites, contents, etc.

Browse source
This commit is contained in:
Elnu 2022-07-14 17:05:45 -07:00
parent 0de8921306
commit 5d70793e2b
10 changed files with 1034 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

8
demo/a/index.html Normal file
View file

@ -0,0 +1,8 @@
<meta name="soudan-content-id" content="a">
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" type="text/css">
<link rel="stylesheet" href="/style.css">
<h1>Page A</h1>
<p>This is Page A.</p>
<div id="soudan"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/soudan.js"></script>

8
demo/b/index.html Normal file
View file

@ -0,0 +1,8 @@
<meta name="soudan-content-id" content="b">
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" type="text/css">
<link rel="stylesheet" href="/style.css">
<h1>Page B</h1>
<p>This is Page B.</h2>
<div id="soudan"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/soudan.js"></script>

22
demo/index.html
View file

@ -1,14 +1,10 @@
<meta name="soudan-content-id" content="test">
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" type="text/css">
<link rel="stylesheet" href="style.css">
<h3>Make a comment</h3>
<form id="commentForm">
<label for="author">Name:</label> <input type="text" id="author" name="author" placeholder="Anonymous">
<label for="email">Email:</label> <input type="email" id="email" name="email">
<label for="text">Comment:</label>
<textarea id="text" name="text" required></textarea>
<input type="submit">
</form>
<h3 id="commentsHeader">Comments</h3>
<div id="comments"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="soudan.js"></script>
<link rel="stylesheet" href="/style.css">
<h1>Soudan demo</h1>
<p>Welcome to the Soudan demo!</h1>
<p>Check out the following example pages, each with their own comment section:</p>
<ul>
<li><a href="/a">Page A</a></li>
<li><a href="/b">Page B</a></li>
</ul>

50
demo/soudan.js
View file

@ -1,24 +1,44 @@
const form = document.getElementById("commentForm");
const commentContainer = document.getElementById("comments");
const commentContainerHeader = document.getElementById("commentsHeader");
document.getElementById("soudan").innerHTML = `<h3>Make a comment</h3>
<form id="soudan-comment-form">
<label for="author">Name:</label> <input type="text" name="author" placeholder="Anonymous">
<label for="email">Email:</label> <input type="email" name="email">
<label for="text">Comment:</label>
<textarea name="text" required></textarea>
<input type="submit">
</form>
<h3 id="soudan-comments-header">Comments</h3>
<div id="soudan-comments"></div>`;
document.write(`<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>`);
const url = "http://127.0.0.1:8080";
const form = document.getElementById("soudan-comment-form");
const commentContainer = document.getElementById("soudan-comments");
const commentContainerHeader = document.getElementById("soudan-comments-header");
const contentId = document.querySelector("meta[name=\"soudan-content-id\"]").getAttribute("content");
form.addEventListener("submit", e => {
let data = {};
let data = {
url: window.location.href,
comment: { contentId }
};
new FormData(form).forEach((value, key) => {
data[key] = value === "" ? null : value;
data.comment[key] = value === "" ? null : value;
});
var request = new XMLHttpRequest();
request.open("POST", "http:/127.0.0.1:8080");
request.send(JSON.stringify(data));
request.addEventListener("load", () => {
form.querySelector("textarea").value = "";
reloadComments()
});
request.addEventListener("error", () => alert("Comment posting failed!"));
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: { "Content-Type": "application/json" }
})
.then(response => {
if (!response.ok) {
return;
}
form.querySelector("textarea").value = "";
reloadComments();
})
e.preventDefault();
});
function reloadComments() {
fetch("http://127.0.0.1:8080")
fetch(`${url}/${contentId}`)
.then(response => {
return response.json().then(json => {
return response.ok ? json : Promise.reject(json);
@ -31,7 +51,7 @@ function reloadComments() {
html = "<p>No comments yet! Be the first to make one.</p>";
} else {
comments.forEach(comment => {
html += `<div><img class="avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${comment.text}</div></div></div>`;
html += `<div><img class="soudan-avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${comment.text}</div></div></div>`;
});
}
commentContainer.innerHTML = html;

4
demo/style.css
View file

@ -1,8 +1,8 @@
#comments > div {
#soudan-comments > div {
display: flex;
gap: 0.5em;
}
#comments .avatar {
.soudan-avatar {
border-radius: 100%;
width: 80px;
height: 80px;