mirror of
https://github.com/JimenezJC/mshj_blog.git
synced 2026-03-07 23:34:36 -05:00
blog .8 (also comments added)
This commit is contained in:
Juan
parent
7027ce8623
commit
b4be1547cf
36 changed files with 1778 additions and 142 deletions
|
|
@ -14,19 +14,30 @@
|
|||
<aside id="menu">
|
||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||
|
||||
<h3>go home</h3>
|
||||
<h3><a href="/">go home</a></h3>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>blog posts</li>
|
||||
<br>
|
||||
<li>categories</li>
|
||||
<li><strong>useful links</strong></li>
|
||||
<!-- Add your links here -->
|
||||
</ul>
|
||||
<ul>
|
||||
<li><strong>blog categories</strong></li>
|
||||
{{ range .Site.Taxonomies.categories.Alphabetical }}
|
||||
<li>
|
||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
|
||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title | lower }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="neocities-buttons">
|
||||
<strong>buttons</strong>
|
||||
<div class="button-slideshow">
|
||||
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<div class = "main-content">
|
||||
|
|
|
|||
|
|
@ -21,9 +21,85 @@
|
|||
{{ end }}
|
||||
<br>
|
||||
|
||||
{{ .Content }}
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
{{ with .Site.Params.isso }}
|
||||
<div class="comments-container">
|
||||
<h3>comments</h3>
|
||||
<section id="isso-thread">
|
||||
<script data-isso="{{ .url }}"
|
||||
data-isso-require-email="false"
|
||||
data-isso-require-author="false"
|
||||
data-isso-reply-notifications="false"
|
||||
data-isso-input-type="textarea"
|
||||
src="{{ .url }}js/embed.min.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var avatars = [
|
||||
'/images/avatars/avatar1.jpg',
|
||||
'/images/avatars/avatar2.png',
|
||||
'/images/avatars/avatar3.png'
|
||||
];
|
||||
|
||||
function hashName(str) {
|
||||
var hash = 0;
|
||||
str = (str || 'anonymous').toLowerCase().trim();
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
||||
hash |= 0;
|
||||
}
|
||||
return Math.abs(hash);
|
||||
}
|
||||
|
||||
function replaceAvatars() {
|
||||
var comments = document.querySelectorAll('#isso-thread .isso-comment');
|
||||
comments.forEach(function(comment) {
|
||||
if (comment.dataset.avatarSet) return;
|
||||
var authorEl = comment.querySelector('.isso-author');
|
||||
var avatarEl = comment.querySelector('.isso-avatar, svg');
|
||||
if (avatarEl) {
|
||||
var name = authorEl ? authorEl.textContent : 'anonymous';
|
||||
var idx = hashName(name) % avatars.length;
|
||||
var img = document.createElement('img');
|
||||
img.src = avatars[idx];
|
||||
img.alt = name;
|
||||
img.className = 'isso-custom-avatar';
|
||||
avatarEl.parentNode.replaceChild(img, avatarEl);
|
||||
comment.dataset.avatarSet = '1';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fix name input placeholder + hide label
|
||||
var check = setInterval(function() {
|
||||
var nameInput = document.querySelector('#isso-thread .isso-postbox-author input, #isso-thread .isso-input-wrapper:first-of-type input[type="text"]');
|
||||
if (nameInput) {
|
||||
nameInput.placeholder = 'Name (optional)';
|
||||
var label = nameInput.closest('.isso-input-wrapper, .isso-postbox-author');
|
||||
if (label) {
|
||||
var labelEl = label.querySelector('label');
|
||||
if (labelEl) labelEl.style.display = 'none';
|
||||
}
|
||||
clearInterval(check);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Watch for new comments and replace avatars
|
||||
var observer = new MutationObserver(replaceAvatars);
|
||||
var waitForThread = setInterval(function() {
|
||||
var thread = document.getElementById('isso-thread');
|
||||
if (thread) {
|
||||
observer.observe(thread, { childList: true, subtree: true });
|
||||
replaceAvatars();
|
||||
clearInterval(waitForThread);
|
||||
}
|
||||
}, 200);
|
||||
})();
|
||||
</script>
|
||||
<noscript>javascript is required to view comments.</noscript>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
16
themes/terminal/layouts/_shortcodes/chat.html
Normal file
16
themes/terminal/layouts/_shortcodes/chat.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{{ if .Site.Params.cactusComments.enabled }}
|
||||
<section id="cactus-comments" class="comments-section">
|
||||
<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
|
||||
<link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
|
||||
<div id="comment-section"></div>
|
||||
<script>
|
||||
initComments({
|
||||
node: document.getElementById("comment-section"),
|
||||
defaultHomeserverUrl: "https://{{ .Site.Params.cactusComments.serverName }}",
|
||||
serverName: "{{ .Site.Params.cactusComments.serverName }}",
|
||||
siteName: "{{ .Site.Params.cactusComments.siteName }}",
|
||||
commentSectionId: "{{ index .Params 0 }}"
|
||||
})
|
||||
</script>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -302,6 +302,260 @@ body {
|
|||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Neocities button slideshow */
|
||||
.neocities-buttons {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.neocities-buttons strong {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.button-slideshow {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button-slideshow a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
animation: buttonFade 12s infinite;
|
||||
}
|
||||
|
||||
.button-slideshow a:nth-child(1) { animation-delay: 0s; }
|
||||
.button-slideshow a:nth-child(2) { animation-delay: 3s; }
|
||||
.button-slideshow a:nth-child(3) { animation-delay: 6s; }
|
||||
.button-slideshow a:nth-child(4) { animation-delay: 9s; }
|
||||
|
||||
.button-slideshow a img {
|
||||
display: block;
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
@keyframes buttonFade {
|
||||
0% { opacity: 0; }
|
||||
4% { opacity: 1; }
|
||||
21% { opacity: 1; }
|
||||
25% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Comments container */
|
||||
.comments-container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.comments-container h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Isso form overrides */
|
||||
#isso-thread {
|
||||
color: #ecf0f1 !important;
|
||||
}
|
||||
|
||||
/* Hide email, website, and preview */
|
||||
.isso-postbox-email,
|
||||
.isso-postbox-website,
|
||||
.isso-preview,
|
||||
.isso-post-action input[name="preview"],
|
||||
div[class*="isso-postbox-email"],
|
||||
div[class*="isso-postbox-website"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Fallback: hide email/website input wrappers by input name */
|
||||
.isso-input-wrapper:has(input[name="email"]),
|
||||
.isso-input-wrapper:has(input[name="website"]),
|
||||
.isso-input-wrapper:has(input[placeholder*="mail"]),
|
||||
.isso-input-wrapper:has(input[placeholder*="ebsite"]) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Postbox layout */
|
||||
#isso-thread .isso-postbox {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
/* Textarea (comment box) */
|
||||
#isso-thread .isso-textarea-wrapper {
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-textarea,
|
||||
#isso-thread textarea {
|
||||
background: #1a1d23 !important;
|
||||
color: #ecf0f1 !important;
|
||||
border: 1px solid #2c3e50 !important;
|
||||
border-radius: 12px !important;
|
||||
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||
font-size: 0.9rem !important;
|
||||
padding: 0.75rem !important;
|
||||
min-height: 100px !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
resize: vertical !important;
|
||||
}
|
||||
|
||||
/* Author name input */
|
||||
#isso-thread .isso-postbox-author,
|
||||
#isso-thread .isso-input-wrapper:first-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#isso-thread input[type="text"],
|
||||
#isso-thread .isso-input-wrapper input {
|
||||
background: #1a1d23 !important;
|
||||
color: #ecf0f1 !important;
|
||||
border: 1px solid #2c3e50 !important;
|
||||
border-radius: 12px !important;
|
||||
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||
font-size: 0.9rem !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
#isso-thread textarea:focus,
|
||||
#isso-thread .isso-textarea:focus,
|
||||
#isso-thread input[type="text"]:focus {
|
||||
border-color: #62c4ff !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
#isso-thread textarea::placeholder,
|
||||
#isso-thread input::placeholder {
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
/* Name + submit aligned on same row via JS-injected wrapper isn't possible,
|
||||
so use CSS grid on the postbox to place them */
|
||||
#isso-thread .isso-postbox {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 0.75rem !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-textarea-wrapper {
|
||||
grid-column: 1 !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-auth-section {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-postbox-author,
|
||||
#isso-thread .isso-auth-section .isso-input-wrapper:first-of-type {
|
||||
flex: 1 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-post-action {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-post-action:first-of-type {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-post-action ~ .isso-post-action {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-post-action input[type="submit"],
|
||||
#isso-thread .isso-postbox-author input,
|
||||
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||
height: 36px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-postbox-author input,
|
||||
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||
width: 100% !important;
|
||||
min-width: 180px !important;
|
||||
}
|
||||
|
||||
#isso-thread input[type="submit"] {
|
||||
background: #62c4ff !important;
|
||||
color: #222225 !important;
|
||||
border: none !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 0.5rem 1.25rem !important;
|
||||
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: 600 !important;
|
||||
cursor: pointer !important;
|
||||
transition: background 0.2s ease !important;
|
||||
}
|
||||
|
||||
#isso-thread input[type="submit"]:hover {
|
||||
background: #4ab0ed !important;
|
||||
}
|
||||
|
||||
/* Custom comment avatars */
|
||||
.isso-custom-avatar {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
border-radius: 50% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
/* Comment styling */
|
||||
#isso-thread .isso-comment {
|
||||
border-left: 2px solid #2c3e50 !important;
|
||||
padding: 0.75rem !important;
|
||||
padding-left: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-comment-header {
|
||||
color: #a3abba !important;
|
||||
font-size: 0.8rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-text-wrapper {
|
||||
color: #ecf0f1 !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-comment-footer {
|
||||
color: #666 !important;
|
||||
font-size: 0.75rem !important;
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-comment-footer a {
|
||||
color: #a3abba !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
#isso-thread .isso-comment-footer a:hover {
|
||||
color: #62c4ff !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--global-font-size: 15px;
|
||||
--global-line-height: 1.4em;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const miniHeader = document.getElementById('mini-header');
|
||||
const texts = ['use linux', 'i hate css', 'gpl everything', 'made with love']; // add your random text here
|
||||
const texts = ['use linux', 'soup for my family', 'gpl everything']; // add your random text here
|
||||
const text = texts[Math.floor(Math.random() * texts.length)];
|
||||
let charIndex = 0;
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ function typeText() {
|
|||
if (charIndex < text.length) {
|
||||
miniHeader.textContent += text.charAt(charIndex);
|
||||
charIndex++;
|
||||
setTimeout(typeText, 50); // adjust the typing speed here
|
||||
setTimeout(typeText, 50);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue