feat: contribute feed, reactions, and edit flow
This commit is contained in:
Jonathan
parent
caab3ab187
commit
40aed88525
4 changed files with 786 additions and 0 deletions
37
src/pages/api/contributions/[id]/edit.ts
Normal file
37
src/pages/api/contributions/[id]/edit.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import type { APIRoute } from 'astro';
|
||||||
|
import { getContributionById, updateContribution } from '../../../../lib/db';
|
||||||
|
import { withinMinutes } from '../../../../lib/markdown';
|
||||||
|
|
||||||
|
export const POST: APIRoute = ({ locals, params, request }) => {
|
||||||
|
const user = locals.user;
|
||||||
|
const id = Number(params.id);
|
||||||
|
|
||||||
|
if (!id || isNaN(id)) {
|
||||||
|
return new Response('Not found', { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const contribution = getContributionById(id);
|
||||||
|
if (!contribution || contribution.hidden_at) {
|
||||||
|
return new Response('Not found', { status: 404 });
|
||||||
|
}
|
||||||
|
if (contribution.user_id !== user.id) {
|
||||||
|
return new Response('Forbidden', { status: 403 });
|
||||||
|
}
|
||||||
|
if (!withinMinutes(contribution.created_at, 10)) {
|
||||||
|
return new Response('Edit window closed', { status: 403 });
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Response(null, { status: 200 });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GET: APIRoute = async ({ locals, params }) => {
|
||||||
|
const user = locals.user;
|
||||||
|
const id = Number(params.id);
|
||||||
|
|
||||||
|
const contribution = getContributionById(id);
|
||||||
|
if (!contribution || contribution.user_id !== user.id || !withinMinutes(contribution.created_at, 10)) {
|
||||||
|
return new Response(null, { status: 302, headers: { Location: '/contribute' } });
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Response(null, { status: 302, headers: { Location: '/contribute' } });
|
||||||
|
};
|
||||||
28
src/pages/api/contributions/[id]/react.ts
Normal file
28
src/pages/api/contributions/[id]/react.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import type { APIRoute } from 'astro';
|
||||||
|
import { addReaction, removeReaction, hasReaction, getContributionById } from '../../../../lib/db';
|
||||||
|
|
||||||
|
export const POST: APIRoute = ({ locals, params, request }) => {
|
||||||
|
const user = locals.user;
|
||||||
|
const id = Number(params.id);
|
||||||
|
|
||||||
|
if (!id || isNaN(id)) {
|
||||||
|
return new Response('Not found', { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const contribution = getContributionById(id);
|
||||||
|
if (!contribution || contribution.hidden_at) {
|
||||||
|
return new Response('Not found', { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasReaction(user.id, id)) {
|
||||||
|
removeReaction(user.id, id);
|
||||||
|
} else {
|
||||||
|
addReaction(user.id, id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const referer = request.headers.get('referer') ?? '/contribute';
|
||||||
|
return new Response(null, {
|
||||||
|
status: 302,
|
||||||
|
headers: { Location: `${referer}#c-${id}` },
|
||||||
|
});
|
||||||
|
};
|
||||||
527
src/pages/contribute.astro
Normal file
527
src/pages/contribute.astro
Normal file
|
|
@ -0,0 +1,527 @@
|
||||||
|
---
|
||||||
|
import AppLayout from '../layouts/AppLayout.astro';
|
||||||
|
import { getContributions, getReactedIds } from '../lib/db';
|
||||||
|
import { renderMd, fmtDateTime, withinMinutes } from '../lib/markdown';
|
||||||
|
import type { ContributionType } from '../lib/db';
|
||||||
|
|
||||||
|
const user = Astro.locals.user;
|
||||||
|
|
||||||
|
const rawType = Astro.url.searchParams.get('type') as ContributionType | null;
|
||||||
|
const validTypes: ContributionType[] = ['idea', 'inspiration', 'question'];
|
||||||
|
const filterType = rawType && validTypes.includes(rawType) ? rawType : undefined;
|
||||||
|
|
||||||
|
const rawSort = Astro.url.searchParams.get('sort');
|
||||||
|
const sort = rawSort === 'top' ? 'top' : 'newest';
|
||||||
|
|
||||||
|
const contributions = getContributions({ type: filterType, sort });
|
||||||
|
const reactedIds = getReactedIds(user.id);
|
||||||
|
|
||||||
|
// Handle POST (new contribution)
|
||||||
|
let postError: string | null = null;
|
||||||
|
if (Astro.request.method === 'POST') {
|
||||||
|
const data = await Astro.request.formData();
|
||||||
|
const type = data.get('type') as string;
|
||||||
|
const body = String(data.get('body') ?? '').trim();
|
||||||
|
|
||||||
|
if (!validTypes.includes(type as ContributionType)) {
|
||||||
|
postError = 'Select a type.';
|
||||||
|
} else if (body.length < 10) {
|
||||||
|
postError = 'Your contribution must be at least 10 characters.';
|
||||||
|
} else if (body.length > 2000) {
|
||||||
|
postError = 'Keep it under 2000 characters.';
|
||||||
|
} else {
|
||||||
|
const { createContribution } = await import('../lib/db');
|
||||||
|
createContribution({ user_id: user.id, type: type as ContributionType, body_md: body });
|
||||||
|
return Astro.redirect('/contribute');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const typeLabels: Record<ContributionType, string> = {
|
||||||
|
idea: 'Idea',
|
||||||
|
inspiration: 'Inspiration',
|
||||||
|
question: 'Question',
|
||||||
|
};
|
||||||
|
|
||||||
|
const typeColors: Record<ContributionType, string> = {
|
||||||
|
idea: 'var(--pigment-copper)',
|
||||||
|
inspiration: 'var(--pigment-ochre)',
|
||||||
|
question: 'var(--pigment-indigo)',
|
||||||
|
};
|
||||||
|
---
|
||||||
|
<AppLayout title="Contribute" user={user}>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<header class="page-header">
|
||||||
|
<p class="label-sm eyebrow">Contribute</p>
|
||||||
|
<h1 class="display-md page-title">The feed.</h1>
|
||||||
|
<p class="lead subtitle">
|
||||||
|
Share an idea, a question, or something that inspired you.
|
||||||
|
Everything posted here is visible to everyone in the hub.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="layout">
|
||||||
|
|
||||||
|
<!-- Post form -->
|
||||||
|
<section class="post-section">
|
||||||
|
<h2 class="label-sm section-heading">Add something</h2>
|
||||||
|
{postError && (
|
||||||
|
<p class="form-error body-sm" role="alert">{postError}</p>
|
||||||
|
)}
|
||||||
|
<form method="POST" class="post-form" novalidate>
|
||||||
|
<div class="type-select">
|
||||||
|
{validTypes.map((t) => (
|
||||||
|
<label class="type-label">
|
||||||
|
<input type="radio" name="type" value={t} class="sr-only" required />
|
||||||
|
<span class="type-chip label-sm"
|
||||||
|
style={`--chip-color: ${typeColors[t]}`}
|
||||||
|
>
|
||||||
|
{typeLabels[t]}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="body" class="sr-only">Contribution</label>
|
||||||
|
<textarea
|
||||||
|
id="body"
|
||||||
|
name="body"
|
||||||
|
class="textarea body-md"
|
||||||
|
placeholder="Share what is on your mind. Markdown supported."
|
||||||
|
rows="4"
|
||||||
|
required
|
||||||
|
maxlength="2000"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-footer">
|
||||||
|
<span class="label-sm char-hint">Markdown supported. Max 2000 characters.</span>
|
||||||
|
<button type="submit" class="btn-primary label-sm">Post</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Feed controls -->
|
||||||
|
<div class="feed-controls">
|
||||||
|
<div class="filter-tabs">
|
||||||
|
<a
|
||||||
|
href="/contribute"
|
||||||
|
class:list={['filter-tab label-sm', { active: !filterType }]}
|
||||||
|
>All</a>
|
||||||
|
{validTypes.map((t) => (
|
||||||
|
<a
|
||||||
|
href={`/contribute?type=${t}${sort === 'top' ? '&sort=top' : ''}`}
|
||||||
|
class:list={['filter-tab label-sm', { active: filterType === t }]}
|
||||||
|
>
|
||||||
|
{typeLabels[t]}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div class="sort-tabs">
|
||||||
|
<a
|
||||||
|
href={`/contribute${filterType ? `?type=${filterType}&` : '?'}sort=newest`}
|
||||||
|
class:list={['sort-tab label-sm', { active: sort === 'newest' }]}
|
||||||
|
>Newest</a>
|
||||||
|
<a
|
||||||
|
href={`/contribute${filterType ? `?type=${filterType}&` : '?'}sort=top`}
|
||||||
|
class:list={['sort-tab label-sm', { active: sort === 'top' }]}
|
||||||
|
>Most acknowledged</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feed -->
|
||||||
|
<ol class="feed" reversed aria-live="polite">
|
||||||
|
{contributions.length === 0 && (
|
||||||
|
<li class="empty-state body-md">
|
||||||
|
No contributions yet. Be the first to post.
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{contributions.map((c) => {
|
||||||
|
const isMine = c.user_id === user.id;
|
||||||
|
const canEdit = isMine && withinMinutes(c.created_at, 10);
|
||||||
|
const isReacted = reactedIds.has(c.id);
|
||||||
|
return (
|
||||||
|
<li class="contribution" id={`c-${c.id}`}>
|
||||||
|
<div class="c-header">
|
||||||
|
<span
|
||||||
|
class="c-type label-sm"
|
||||||
|
style={`color: ${typeColors[c.type]}`}
|
||||||
|
>
|
||||||
|
{typeLabels[c.type]}
|
||||||
|
</span>
|
||||||
|
<time class="label-sm c-time" datetime={c.created_at}>
|
||||||
|
{fmtDateTime(c.created_at)}
|
||||||
|
</time>
|
||||||
|
{c.edited_at && (
|
||||||
|
<span class="label-sm c-edited">edited</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c-body prose" set:html={renderMd(c.body_md)} />
|
||||||
|
|
||||||
|
<div class="c-footer">
|
||||||
|
<span class="c-author label-sm">
|
||||||
|
{c.author_name}
|
||||||
|
<span class="c-org">· {c.author_organisation}</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="c-actions">
|
||||||
|
{canEdit && (
|
||||||
|
<a href={`/contribute/edit/${c.id}`} class="action-link label-sm">
|
||||||
|
Edit
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
<form method="POST" action={`/api/contributions/${c.id}/react`} class="react-form">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class:list={['react-btn label-sm', { reacted: isReacted }]}
|
||||||
|
aria-label={isReacted ? 'Remove acknowledgement' : 'Acknowledge'}
|
||||||
|
>
|
||||||
|
+1 {c.reaction_count > 0 ? `· ${c.reaction_count}` : ''}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: var(--space-12) var(--space-20) var(--space-16);
|
||||||
|
max-width: var(--content-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Header ──────────────────────────────────────────────────────── */
|
||||||
|
.page-header {
|
||||||
|
max-width: 44rem;
|
||||||
|
margin-bottom: var(--space-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title { margin-bottom: var(--space-5); }
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
max-width: var(--reading-max);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Layout ──────────────────────────────────────────────────────── */
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-8);
|
||||||
|
max-width: 52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Post form ───────────────────────────────────────────────────── */
|
||||||
|
.section-heading {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-error {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: rgba(185, 107, 88, 0.08);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--pigment-terracotta);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-4);
|
||||||
|
background: var(--surface-container-lowest);
|
||||||
|
padding: var(--space-6);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Type chips */
|
||||||
|
.type-select {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-chip {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25em var(--space-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: var(--surface-container);
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background var(--duration-fast) var(--ease-standard),
|
||||||
|
color var(--duration-fast) var(--ease-standard);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-label input:checked + .type-chip {
|
||||||
|
background: var(--surface-container-highest);
|
||||||
|
color: var(--chip-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-label:hover .type-chip {
|
||||||
|
background: var(--surface-container-high);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Textarea */
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: var(--background);
|
||||||
|
border: var(--ghost-border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-body-md);
|
||||||
|
color: var(--on-surface);
|
||||||
|
outline: none;
|
||||||
|
resize: vertical;
|
||||||
|
transition: border-color var(--duration-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--duration-fast) var(--ease-standard);
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
.textarea:focus {
|
||||||
|
border-color: var(--secondary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
|
||||||
|
}
|
||||||
|
.textarea::placeholder { color: var(--on-surface-muted); }
|
||||||
|
|
||||||
|
.form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-hint {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
padding: var(--space-2) var(--space-5);
|
||||||
|
background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
|
||||||
|
color: var(--on-secondary);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { opacity: 0.9; }
|
||||||
|
|
||||||
|
/* ── Feed controls ───────────────────────────────────────────────── */
|
||||||
|
.feed-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tabs,
|
||||||
|
.sort-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tab,
|
||||||
|
.sort-tab {
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition: background var(--duration-fast) var(--ease-standard),
|
||||||
|
color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.filter-tab:hover,
|
||||||
|
.sort-tab:hover {
|
||||||
|
background: var(--surface-container-low);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.filter-tab.active,
|
||||||
|
.sort-tab.active {
|
||||||
|
background: var(--surface-container);
|
||||||
|
color: var(--on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Feed items ──────────────────────────────────────────────────── */
|
||||||
|
.feed {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contribution {
|
||||||
|
padding: var(--space-6) 0;
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.contribution:last-child {
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-type {
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-time {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-edited {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Prose in feed ───────────────────────────────────────────────── */
|
||||||
|
.prose :global(p) {
|
||||||
|
margin: 0 0 var(--space-3);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
font-size: var(--text-body-md);
|
||||||
|
}
|
||||||
|
.prose :global(p:last-child) { margin-bottom: 0; }
|
||||||
|
|
||||||
|
.prose :global(strong) {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :global(em) { font-style: italic; }
|
||||||
|
|
||||||
|
.prose :global(code) {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.875em;
|
||||||
|
background: var(--surface-container);
|
||||||
|
padding: 0.15em 0.4em;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Footer ──────────────────────────────────────────────────────── */
|
||||||
|
.c-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-author {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-org {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-link {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.action-link:hover {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-form { display: inline; }
|
||||||
|
|
||||||
|
.react-btn {
|
||||||
|
background: none;
|
||||||
|
border: var(--ghost-border);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
padding: 0.2em var(--space-3);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-label-md);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background var(--duration-fast) var(--ease-standard),
|
||||||
|
color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.react-btn:hover {
|
||||||
|
background: var(--surface-container-low);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
}
|
||||||
|
.react-btn.reacted {
|
||||||
|
background: var(--surface-container);
|
||||||
|
color: var(--secondary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Empty state ─────────────────────────────────────────────────── */
|
||||||
|
.empty-state {
|
||||||
|
padding: var(--space-8) 0;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Screen reader only ──────────────────────────────────────────── */
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
194
src/pages/contribute/edit/[id].astro
Normal file
194
src/pages/contribute/edit/[id].astro
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
---
|
||||||
|
import AppLayout from '../../../layouts/AppLayout.astro';
|
||||||
|
import { getContributionById, updateContribution } from '../../../lib/db';
|
||||||
|
import { withinMinutes } from '../../../lib/markdown';
|
||||||
|
|
||||||
|
const user = Astro.locals.user;
|
||||||
|
const id = Number(Astro.params.id);
|
||||||
|
|
||||||
|
const contribution = getContributionById(id);
|
||||||
|
|
||||||
|
if (
|
||||||
|
!contribution ||
|
||||||
|
contribution.user_id !== user.id ||
|
||||||
|
contribution.hidden_at ||
|
||||||
|
!withinMinutes(contribution.created_at, 10)
|
||||||
|
) {
|
||||||
|
return Astro.redirect('/contribute');
|
||||||
|
}
|
||||||
|
|
||||||
|
let error: string | null = null;
|
||||||
|
|
||||||
|
if (Astro.request.method === 'POST') {
|
||||||
|
const data = await Astro.request.formData();
|
||||||
|
const body = String(data.get('body') ?? '').trim();
|
||||||
|
|
||||||
|
if (body.length < 10) {
|
||||||
|
error = 'Contribution must be at least 10 characters.';
|
||||||
|
} else if (body.length > 2000) {
|
||||||
|
error = 'Keep it under 2000 characters.';
|
||||||
|
} else {
|
||||||
|
updateContribution(id, body);
|
||||||
|
return Astro.redirect(`/contribute#c-${id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
---
|
||||||
|
<AppLayout title="Edit contribution" user={user}>
|
||||||
|
<div class="page">
|
||||||
|
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||||||
|
<a href="/contribute" class="crumb label-sm">Contribute</a>
|
||||||
|
<span class="crumb-sep" aria-hidden="true">›</span>
|
||||||
|
<span class="crumb label-sm crumb-current">Edit</span>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="headline-md title">Edit contribution</h1>
|
||||||
|
<p class="body-md subtitle">
|
||||||
|
You have 10 minutes from the time of posting to edit. After that, it locks.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p class="form-error body-sm" role="alert">{error}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form method="POST" class="edit-form" novalidate>
|
||||||
|
<div class="field">
|
||||||
|
<label for="body" class="label-sm field-label">Content</label>
|
||||||
|
<textarea
|
||||||
|
id="body"
|
||||||
|
name="body"
|
||||||
|
class="textarea body-md"
|
||||||
|
rows="6"
|
||||||
|
required
|
||||||
|
maxlength="2000"
|
||||||
|
>{contribution.body_md}</textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-actions">
|
||||||
|
<a href="/contribute" class="cancel-link body-sm">Cancel</a>
|
||||||
|
<button type="submit" class="btn-primary body-md">Save</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: var(--space-10) var(--space-20) var(--space-16);
|
||||||
|
max-width: var(--content-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.crumb {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
a.crumb:hover { color: var(--on-surface-variant); border-bottom: none; }
|
||||||
|
.crumb-sep { color: var(--on-surface-muted); }
|
||||||
|
.crumb-current { color: var(--on-surface-variant); }
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 36rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-snug);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-error {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: rgba(185, 107, 88, 0.08);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--pigment-terracotta);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: var(--surface-container-lowest);
|
||||||
|
border: var(--ghost-border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-body-md);
|
||||||
|
color: var(--on-surface);
|
||||||
|
outline: none;
|
||||||
|
resize: vertical;
|
||||||
|
transition: border-color var(--duration-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--duration-fast) var(--ease-standard);
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
.textarea:focus {
|
||||||
|
border-color: var(--secondary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-link {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.cancel-link:hover { color: var(--on-surface-variant); border-bottom: none; }
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
|
||||||
|
color: var(--on-secondary);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-body-md);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.btn-primary:hover { opacity: 0.9; }
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue