Revamp soudan
This commit is contained in:
parent
e00e6162ac
commit
109bc0bdd6
3 changed files with 74 additions and 40 deletions
|
|
@ -1,6 +1,10 @@
|
|||
.soudan-comment
|
||||
display: flex
|
||||
gap: 0.5em
|
||||
.description
|
||||
font-weight: 300
|
||||
p:first-of-type
|
||||
margin-top: 0;
|
||||
& > div
|
||||
width: 100%
|
||||
@keyframes
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "syntax.scss"
|
||||
@import "stork.sass"
|
||||
@import "soudan.sass"
|
||||
@import "_everforest.sass"
|
||||
@import "_topography.sass"
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ $dim: $ef-bg5
|
|||
$fg: $ef-fg
|
||||
$primary: $ef-green
|
||||
$padding: 1rem
|
||||
$shadow-size: 4px
|
||||
|
||||
html
|
||||
color: $fg
|
||||
|
|
@ -58,11 +60,11 @@ a
|
|||
color: $primary
|
||||
&:not(:hover)
|
||||
text-decoration: none
|
||||
pre, #_content
|
||||
box-shadow: 4px 4px $shadow
|
||||
img
|
||||
pre, .page
|
||||
box-shadow: $shadow-size $shadow-size $shadow
|
||||
img, button, input[type=submit]
|
||||
max-width: 100%
|
||||
box-shadow: 4px 4px $bg0
|
||||
box-shadow: $shadow-size $shadow-size $bg0
|
||||
border: 2px solid $bg0
|
||||
header
|
||||
h2
|
||||
|
|
@ -103,5 +105,30 @@ nav
|
|||
.disabled, footer
|
||||
color: $dim
|
||||
footer
|
||||
margin-top: 2em;
|
||||
margin-top: 2em
|
||||
text-align: center
|
||||
button, input[type=submit]
|
||||
border: none
|
||||
cursor: pointer
|
||||
background: $dim
|
||||
color: $fg
|
||||
padding: 0.125em 0.5em
|
||||
&:active
|
||||
box-shadow: none;
|
||||
transform: translate($shadow-size, $shadow-size)
|
||||
form
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5em
|
||||
textarea, input
|
||||
font-size: inherit
|
||||
font-family: inherit
|
||||
color: inherit
|
||||
textarea, input[type=text], input[type=email], input[type=number]
|
||||
border: none
|
||||
background: $bg0
|
||||
padding: 0.5em
|
||||
&:focus
|
||||
outline: 1px solid $primary
|
||||
textarea
|
||||
resize: vertical
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ function commentForm(parentId) {
|
|||
</form>`;
|
||||
}
|
||||
function commentDisplay(comment, replies) {
|
||||
return `<div id="${comment.id}" class="soudan-comment"><img class="soudan-avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div>${typeof replies === "string" ? `<button title="Reply" style="float: right; margin-left: 0.5em" onclick="this.disabled = true; reply(${comment.id})"><svg xmlns="http://www.w3.org/2000/svg" style="width: 20px" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg></button>` : ""}<button title="Share" style="float: right" onclick="navigator.clipboard.writeText('${document.location.origin}${document.location.pathname}#${comment.id}'); alert('Copied comment share link to clipboard!')"><svg xmlns="http://www.w3.org/2000/svg" style="diplay: inline; width: 20px" viewBox="0 0 20 20" fill="currentColor"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" /></svg></button><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${md.render(comment.text)}</div>${typeof replies === "string" ? `<div class="soudan-replies">${replies ? replies : ""}</div>` : ""}</div></div>`;
|
||||
return `<div id="${comment.id}" class="soudan-comment"><img class="soudan-avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}?d=mp"><div>${typeof replies === "string" ? `<button title="Reply" style="float: right; margin-left: 0.5em" onclick="this.disabled = true; reply(${comment.id})"><svg xmlns="http://www.w3.org/2000/svg" style="width: 20px" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg></button>` : ""}<button title="Share" style="float: right" onclick="navigator.clipboard.writeText('${document.location.origin}${document.location.pathname}#${comment.id}'); alert('Copied comment share link to clipboard!')"><svg xmlns="http://www.w3.org/2000/svg" style="diplay: inline; width: 20px" viewBox="0 0 20 20" fill="currentColor"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" /></svg></button><span class="description"><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:</span><br><div>${md.render(comment.text)}</div>${typeof replies === "string" ? `<div class="soudan-replies">${replies ? replies : ""}</div>` : ""}</div></div>`;
|
||||
}
|
||||
const container = document.getElementById("soudan");
|
||||
container.style.display = "none";
|
||||
|
|
@ -51,6 +51,41 @@ function submitForm(form, e) {
|
|||
e.preventDefault();
|
||||
}
|
||||
|
||||
function renderComments(jump, comments, debug) {
|
||||
let commentCount = comments.length;
|
||||
comments.forEach(comment => {
|
||||
if (comment.replies) {
|
||||
commentCount += comment.replies.length;
|
||||
}
|
||||
});
|
||||
commentContainerHeader.innerHTML = `${commentCount} Comment${commentCount == 1 ? "" : "s"}${debug ? " (Debug)" : ""}`;
|
||||
let html = "";
|
||||
if (comments.length == 0) {
|
||||
html = "<p>No comments yet! Be the first to make one.</p>";
|
||||
} else {
|
||||
comments.forEach(comment => {
|
||||
if (comment.replies) {
|
||||
let replies = "";
|
||||
comment.replies.forEach(reply => {
|
||||
replies += commentDisplay(reply);
|
||||
});
|
||||
html += commentDisplay(comment, replies);
|
||||
} else {
|
||||
html += commentDisplay(comment, "");
|
||||
}
|
||||
});
|
||||
}
|
||||
commentContainer.innerHTML = html;
|
||||
soudan.style.display = "";
|
||||
if (jump && window.location.hash) {
|
||||
const target = document.getElementById(window.location.hash.substring(1));
|
||||
if (target) {
|
||||
window.scrollTo(0, target.offsetTop);
|
||||
target.classList.add("soudan-highlighted");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reloadComments(jump) {
|
||||
fetch(`${url}/${contentId}`)
|
||||
.then(response => {
|
||||
|
|
@ -58,40 +93,8 @@ function reloadComments(jump) {
|
|||
return response.ok ? json : Promise.reject(json);
|
||||
});
|
||||
})
|
||||
.then(comments => {
|
||||
let commentCount = comments.length;
|
||||
comments.forEach(comment => {
|
||||
if (comment.replies) {
|
||||
commentCount += comment.replies.length;
|
||||
}
|
||||
});
|
||||
commentContainerHeader.innerHTML = `${commentCount} Comment${commentCount == 1 ? "" : "s"}`;
|
||||
let html = "";
|
||||
if (comments.length == 0) {
|
||||
html = "<p>No comments yet! Be the first to make one.</p>";
|
||||
} else {
|
||||
comments.forEach(comment => {
|
||||
if (comment.replies) {
|
||||
let replies = "";
|
||||
comment.replies.forEach(reply => {
|
||||
replies += commentDisplay(reply);
|
||||
});
|
||||
html += commentDisplay(comment, replies);
|
||||
} else {
|
||||
html += commentDisplay(comment, "");
|
||||
}
|
||||
});
|
||||
}
|
||||
commentContainer.innerHTML = html;
|
||||
soudan.style.display = "";
|
||||
if (jump && window.location.hash) {
|
||||
const target = document.getElementById(window.location.hash.substring(1));
|
||||
if (target) {
|
||||
window.scrollTo(0, target.offsetTop);
|
||||
target.classList.add("soudan-highlighted");
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(comments => renderComments(jump, comments))
|
||||
.catch(error => renderComments(jump, [{"id":9,"text":"yoo thanks for this little guide. Might be useful to add a few lines for Wayland users out there to activate the firefox PWA wayland support n stuff, but yea thanks","timestamp":1672748214},{"id":1,"author":"Elnu","gravatar":"1cfb9e38feea40e5150bc0fa69faf693","text":"Nice post, me!","timestamp":1658541512,"replies":[{"id":2,"author":"Drago","text":"HELLO ELNU","timestamp":1658541674},{"id":3,"author":"Elnu","gravatar":"1cfb9e38feea40e5150bc0fa69faf693","text":"HELLO DRAGO","timestamp":1658541732},{"id":4,"author":"Drago","text":"You should get to drawing ( ͡° ͜ʖ ͡°)","timestamp":1658541778},{"id":5,"author":"Elnu","gravatar":"1cfb9e38feea40e5150bc0fa69faf693","text":"*soon™*","timestamp":1658541863}]}], true))
|
||||
}
|
||||
|
||||
function reply(id) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue