init
This commit is contained in:
Josh
commit
d69342b2e9
160 changed files with 28681 additions and 0 deletions
127
internal/build/assets/js/main.js
Normal file
127
internal/build/assets/js/main.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Live reload when studio saves settings
|
||||
const channel = new BroadcastChannel('writekit-studio');
|
||||
channel.onmessage = function(event) {
|
||||
if (event.data.type === 'settings-changed') {
|
||||
location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initSearch);
|
||||
|
||||
function initSearch() {
|
||||
const trigger = document.getElementById('search-trigger');
|
||||
const modal = document.getElementById('search-modal');
|
||||
const backdrop = modal?.querySelector('.search-modal-backdrop');
|
||||
const input = document.getElementById('search-input');
|
||||
const results = document.getElementById('search-results');
|
||||
|
||||
if (!trigger || !modal || !input || !results) return;
|
||||
|
||||
let debounceTimer;
|
||||
|
||||
function open() {
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
input.value = '';
|
||||
results.innerHTML = '';
|
||||
setTimeout(() => input.focus(), 10);
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', open);
|
||||
backdrop.addEventListener('click', close);
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === '/' && !modal.classList.contains('active') &&
|
||||
!['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
|
||||
e.preventDefault();
|
||||
open();
|
||||
}
|
||||
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
||||
close();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('input', function() {
|
||||
const query = this.value.trim();
|
||||
clearTimeout(debounceTimer);
|
||||
|
||||
if (query.length < 2) {
|
||||
results.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
debounceTimer = setTimeout(() => search(query), 150);
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', function(e) {
|
||||
const items = results.querySelectorAll('.search-result');
|
||||
const focused = results.querySelector('.search-result.focused');
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
if (!focused && items.length) {
|
||||
items[0].classList.add('focused');
|
||||
} else if (focused?.nextElementSibling) {
|
||||
focused.classList.remove('focused');
|
||||
focused.nextElementSibling.classList.add('focused');
|
||||
}
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
if (focused?.previousElementSibling) {
|
||||
focused.classList.remove('focused');
|
||||
focused.previousElementSibling.classList.add('focused');
|
||||
}
|
||||
} else if (e.key === 'Enter' && focused) {
|
||||
e.preventDefault();
|
||||
const link = focused.querySelector('a');
|
||||
if (link) window.location.href = link.href;
|
||||
}
|
||||
});
|
||||
|
||||
async function search(query) {
|
||||
try {
|
||||
const res = await fetch('/api/reader/search?q=' + encodeURIComponent(query));
|
||||
const data = await res.json();
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
results.innerHTML = '<div class="search-no-results">No results found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
results.innerHTML = data.map(r => `
|
||||
<div class="search-result">
|
||||
<a href="${r.url}">
|
||||
<div class="search-result-title">${highlight(r.title, query)}</div>
|
||||
${r.description ? `<div class="search-result-snippet">${highlight(r.description, query)}</div>` : ''}
|
||||
</a>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (e) {
|
||||
results.innerHTML = '<div class="search-no-results">Search failed</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function highlight(text, query) {
|
||||
if (!text) return '';
|
||||
const escaped = escapeHtml(text);
|
||||
const tokens = query.split(/\s+/).filter(t => t.length > 0);
|
||||
if (!tokens.length) return escaped;
|
||||
const pattern = tokens.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
|
||||
return escaped.replace(new RegExp(`(${pattern})`, 'gi'), '<mark>$1</mark>');
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
})();
|
||||
197
internal/build/assets/js/post.js
Normal file
197
internal/build/assets/js/post.js
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
var WriteKit = (function() {
|
||||
'use strict';
|
||||
|
||||
let config = {};
|
||||
let user = null;
|
||||
|
||||
async function init(opts) {
|
||||
config = opts;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/reader/me');
|
||||
const data = await res.json();
|
||||
if (data.logged_in) {
|
||||
user = data.user;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
if (config.reactions) initReactions();
|
||||
if (config.comments) initComments();
|
||||
}
|
||||
|
||||
async function initReactions() {
|
||||
const container = document.querySelector('.reactions-container');
|
||||
if (!container) return;
|
||||
|
||||
const res = await fetch(`/api/reader/posts/${config.slug}/reactions`);
|
||||
const data = await res.json();
|
||||
|
||||
const counts = data.counts || {};
|
||||
const userReactions = data.user || [];
|
||||
|
||||
if (config.reactionMode === 'upvote') {
|
||||
const emoji = config.reactionEmojis[0] || '👍';
|
||||
const count = counts[emoji] || 0;
|
||||
const active = userReactions.includes(emoji);
|
||||
|
||||
container.innerHTML = `
|
||||
<button class="reaction-btn ${active ? 'active' : ''}" data-emoji="${emoji}">
|
||||
<span class="emoji">${emoji}</span>
|
||||
<span class="count">${count}</span>
|
||||
</button>
|
||||
`;
|
||||
} else {
|
||||
container.innerHTML = config.reactionEmojis.map(emoji => {
|
||||
const count = counts[emoji] || 0;
|
||||
const active = userReactions.includes(emoji);
|
||||
return `
|
||||
<button class="reaction-btn ${active ? 'active' : ''}" data-emoji="${emoji}">
|
||||
<span class="emoji">${emoji}</span>
|
||||
<span class="count">${count}</span>
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
container.querySelectorAll('.reaction-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => toggleReaction(btn));
|
||||
});
|
||||
}
|
||||
|
||||
async function toggleReaction(btn) {
|
||||
if (config.requireAuth && !user) {
|
||||
showAuthPrompt('reactions');
|
||||
return;
|
||||
}
|
||||
|
||||
const emoji = btn.dataset.emoji;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/reader/posts/${config.slug}/reactions`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ emoji })
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
showAuthPrompt('reactions');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const countEl = btn.querySelector('.count');
|
||||
const current = parseInt(countEl.textContent) || 0;
|
||||
|
||||
if (data.added) {
|
||||
btn.classList.add('active');
|
||||
countEl.textContent = current + 1;
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
countEl.textContent = Math.max(0, current - 1);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to toggle reaction', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function initComments() {
|
||||
const section = document.querySelector('.comments');
|
||||
if (!section) return;
|
||||
|
||||
const list = section.querySelector('.comments-list');
|
||||
const formContainer = section.querySelector('.comment-form-container');
|
||||
|
||||
const res = await fetch(`/api/reader/posts/${config.slug}/comments`);
|
||||
const comments = await res.json();
|
||||
|
||||
if (comments && comments.length > 0) {
|
||||
list.innerHTML = comments.map(renderComment).join('');
|
||||
} else {
|
||||
list.innerHTML = '<p class="no-comments">No comments yet. Be the first!</p>';
|
||||
}
|
||||
|
||||
if (user) {
|
||||
formContainer.innerHTML = `
|
||||
<form class="comment-form">
|
||||
<textarea placeholder="Write a comment..." rows="3" required></textarea>
|
||||
<button type="submit">Post Comment</button>
|
||||
</form>
|
||||
`;
|
||||
formContainer.querySelector('form').addEventListener('submit', submitComment);
|
||||
} else {
|
||||
formContainer.innerHTML = `
|
||||
<div class="auth-prompt">
|
||||
<a href="/api/reader/login/github?redirect=${encodeURIComponent(window.location.pathname)}">Sign in</a> to leave a comment
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderComment(comment) {
|
||||
const date = new Date(comment.created_at).toLocaleDateString('en-US', {
|
||||
year: 'numeric', month: 'short', day: 'numeric'
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="comment" data-id="${comment.id}">
|
||||
<div class="comment-header">
|
||||
${comment.avatar_url ? `<img src="${comment.avatar_url}" alt="" class="comment-avatar">` : ''}
|
||||
<span class="comment-author">${escapeHtml(comment.name || 'Anonymous')}</span>
|
||||
<span class="comment-date">${date}</span>
|
||||
</div>
|
||||
<div class="comment-content">${comment.content_html || escapeHtml(comment.content)}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function submitComment(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const textarea = form.querySelector('textarea');
|
||||
const content = textarea.value.trim();
|
||||
|
||||
if (!content) return;
|
||||
|
||||
const btn = form.querySelector('button');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Posting...';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/reader/posts/${config.slug}/comments`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content })
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
showAuthPrompt('comments');
|
||||
return;
|
||||
}
|
||||
|
||||
const comment = await res.json();
|
||||
const list = document.querySelector('.comments-list');
|
||||
const noComments = list.querySelector('.no-comments');
|
||||
if (noComments) noComments.remove();
|
||||
|
||||
list.insertAdjacentHTML('beforeend', renderComment(comment));
|
||||
textarea.value = '';
|
||||
} catch (e) {
|
||||
console.error('Failed to post comment', e);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Post Comment';
|
||||
}
|
||||
}
|
||||
|
||||
function showAuthPrompt(feature) {
|
||||
alert(`Please sign in to use ${feature}`);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
return { init };
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue