feat: add community publishing and news syndication
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
let { article, kind = 'guide', prominent = false } = $props();
|
||||
</script>
|
||||
<article class="article-card" class:prominent>
|
||||
<a class="article-card-cover" href={`/${kind === 'guide' ? 'guides' : 'news'}/${encodeURIComponent(article.slug)}`}>
|
||||
{#if article.coverUrl}<img src={article.coverUrl} alt=""/>{:else}<div><span>SHD // {kind === 'guide' ? 'FIELD MANUAL' : 'TRANSMISSION'}</span><b>{article.tags?.[0]?.name ?? article.channel ?? 'COMMUNITY INTELLIGENCE'}</b></div>{/if}
|
||||
</a>
|
||||
<div class="article-card-body">
|
||||
<header><span>{article.channel ?? article.tags?.[0]?.name ?? kind.toUpperCase()}</span>{#if article.recommended}<b>RECOMMENDED</b>{/if}{#if article.featured}<b>FEATURED</b>{/if}</header>
|
||||
<h2><a href={`/${kind === 'guide' ? 'guides' : 'news'}/${encodeURIComponent(article.slug)}`}>{article.title}</a></h2>
|
||||
<p>{article.deck}</p>
|
||||
<footer><span>BY {(article.source?.name ?? article.author).toUpperCase()} · {new Date(article.publishedAt).toLocaleDateString()}</span>{#if kind === 'guide'}<b>{article.votes ? `★ ${article.rating.toFixed(1)} · ${article.votes}` : 'UNRATED'}</b>{/if}</footer>
|
||||
</div>
|
||||
</article>
|
||||
<style>
|
||||
.article-card{min-width:0;display:grid;grid-template-rows:220px 1fr;border:1px solid var(--shd-border);background:var(--shd-surface)}.article-card-cover{min-height:0;display:block;overflow:hidden;border-bottom:1px solid var(--shd-border);background:#090b0c}.article-card-cover img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.78) contrast(1.06)}.article-card-cover>div{height:100%;display:grid;align-content:space-between;padding:16px;background:linear-gradient(145deg,#15191a 0 58%,#0d1011 58%);color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.8px}.article-card-cover>div b{color:var(--shd-orange);font-size:1rem}.article-card-body{display:grid;grid-template-rows:auto auto 1fr auto;gap:9px;padding:16px}.article-card-body header{position:static;z-index:auto;width:auto;height:auto;min-height:0;padding:0;border:0;background:transparent}.article-card-body header,.article-card-body footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.article-card-body header span,.article-card-body header b,.article-card-body footer{font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.65px}.article-card-body header span,.article-card-body footer b{color:var(--shd-orange)}.article-card-body header b,.article-card-body footer span{color:var(--shd-text-muted)}.article-card-body h2,.article-card-body p{margin:0}.article-card-body h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.02}.article-card-body h2 a{color:var(--shd-text)}.article-card-body p{color:var(--shd-text-muted);font-family:var(--shd-font-editorial);line-height:1.5}.article-card-body footer{padding-top:10px;border-top:1px solid var(--shd-border)}.article-card:hover,.article-card:focus-within{border-color:var(--shd-border-strong);background:var(--shd-surface-active)}.article-card:hover h2 a,.article-card h2 a:focus-visible{color:var(--shd-orange)}.article-card.prominent{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(310px,auto)}.article-card.prominent .article-card-cover{border-right:1px solid var(--shd-border);border-bottom:0}.article-card.prominent .article-card-body{padding:clamp(20px,4vw,48px)}.article-card.prominent h2{font-size:clamp(2.2rem,5vw,4.5rem)}.article-card.prominent p{font-size:1.1rem}@media(max-width:720px){.article-card.prominent{grid-template-columns:1fr;grid-template-rows:220px auto}.article-card.prominent .article-card-cover{border-right:0;border-bottom:1px solid var(--shd-border)}}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script lang="ts">
|
||||
import ArticleEditor from '$lib/components/ArticleEditor.svelte';
|
||||
import PendingForm from '$lib/components/PendingForm.svelte';
|
||||
import SegmentedChoice from '$lib/components/SegmentedChoice.svelte';
|
||||
import ModerationDisclosure from '$lib/components/ModerationDisclosure.svelte';
|
||||
import { toast } from '$lib/toast';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
let { data, form = null } = $props();
|
||||
type ComposerTag = { id: string; name: string; group: string };
|
||||
let title = $state(untrack(() => data.draft.title));
|
||||
let deck = $state(untrack(() => data.draft.deck));
|
||||
let document = $state(untrack(() => data.draft.document));
|
||||
let selectedTags = $state<string[]>(untrack(() => [...data.draft.tagIds]));
|
||||
let channel = $state(untrack(() => data.draft.channel || data.newsChannels?.[0] || ''));
|
||||
let visibility = $state(untrack(() => data.article.visibility));
|
||||
let coverImageId = $state(untrack(() => data.draft.coverImageId || ''));
|
||||
let coverUrl = $state(untrack(() => data.draft.coverUrl || ''));
|
||||
let coverAlt = $state(untrack(() => data.draft.coverAlt || ''));
|
||||
let coverCaption = $state(untrack(() => data.draft.coverCaption || ''));
|
||||
let version = $state(untrack(() => data.draft.version));
|
||||
let saveState = $state<'saved' | 'saving' | 'error' | 'conflict'>('saved');
|
||||
let coverUploading = $state(false);
|
||||
let initialized = $state(false);
|
||||
let lastContent = '';
|
||||
let saveSequence = 0;
|
||||
const groupedTags = $derived.by(() => {
|
||||
const groups: Record<string, ComposerTag[]> = {};
|
||||
for (const tag of data.tags as ComposerTag[]) (groups[tag.group] ??= []).push(tag);
|
||||
return Object.entries(groups);
|
||||
});
|
||||
|
||||
function payload() {
|
||||
return { articleId: data.article.id, title, deck, document, tagIds: selectedTags, channel,
|
||||
coverImageId, coverAlt, coverCaption, version };
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const content = JSON.stringify({ title, deck, document, selectedTags, channel, coverImageId, coverAlt, coverCaption });
|
||||
if (!initialized) {
|
||||
initialized = true;
|
||||
lastContent = content;
|
||||
return;
|
||||
}
|
||||
if (content === lastContent) return;
|
||||
lastContent = content;
|
||||
const sequence = ++saveSequence;
|
||||
saveState = 'saving';
|
||||
const timer = window.setTimeout(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/articles/draft', {
|
||||
method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload())
|
||||
});
|
||||
const result = await response.json();
|
||||
if (sequence !== saveSequence) return;
|
||||
if (response.status === 409) {
|
||||
saveState = 'conflict';
|
||||
return;
|
||||
}
|
||||
if (!response.ok) throw new Error(result.message || 'Draft save failed.');
|
||||
version = result.version;
|
||||
saveState = 'saved';
|
||||
} catch (error) {
|
||||
if (sequence !== saveSequence) return;
|
||||
saveState = 'error';
|
||||
toast.error('Draft not saved', error instanceof Error ? error.message : 'Try again.');
|
||||
}
|
||||
}, 900);
|
||||
return () => window.clearTimeout(timer);
|
||||
});
|
||||
|
||||
function toggleTag(id: string) {
|
||||
selectedTags = selectedTags.includes(id) ? selectedTags.filter((tag) => tag !== id) : [...selectedTags, id].slice(0, 12);
|
||||
}
|
||||
|
||||
async function uploadCover(event: Event) {
|
||||
const file = (event.currentTarget as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
coverUploading = true;
|
||||
const body = new FormData();
|
||||
body.set('articleId', data.article.id);
|
||||
body.set('image', file);
|
||||
try {
|
||||
const response = await fetch('/api/articles/media', { method: 'POST', body });
|
||||
const result = await response.json();
|
||||
if (!response.ok) throw new Error(result.message || 'Cover upload failed.');
|
||||
coverImageId = result.id;
|
||||
coverUrl = `/images/library/${result.id}`;
|
||||
toast.success('Cover uploaded', 'Add alternative text before publishing.');
|
||||
} catch (error) {
|
||||
toast.error('Cover not uploaded', error instanceof Error ? error.message : 'Try another image.');
|
||||
} finally {
|
||||
coverUploading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="app-page article-compose-page">
|
||||
<header class="article-compose-command">
|
||||
<div><p>{data.article.kind === 'guide' ? 'GUIDE COMPOSER' : 'NEWSROOM'}</p><h1>{data.article.kind === 'guide' ? 'AUTHOR FIELD INTELLIGENCE' : 'PREPARE A TRANSMISSION'}</h1></div>
|
||||
<div class="article-save-state" class:error={saveState === 'error' || saveState === 'conflict'}><i></i><span>{saveState === 'saving' ? 'SAVING DRAFT' : saveState === 'saved' ? 'DRAFT SAVED' : saveState === 'conflict' ? 'DRAFT CONFLICT · RELOAD' : 'SAVE FAILED'}</span></div>
|
||||
</header>
|
||||
{#if form?.articleError}<p class="error" role="alert">{form.articleError}</p>{/if}
|
||||
{#if form?.articleMessage}<p class="success" role="status">{form.articleMessage}</p>{/if}
|
||||
|
||||
<section class="article-compose-lede" aria-label="Article headline">
|
||||
<label class="article-title-field"><span>TITLE</span><textarea bind:value={title} maxlength="140" rows="1" placeholder="Give readers a clear reason to open this article"></textarea></label>
|
||||
<label class="article-deck-field"><span>SUMMARY</span><textarea bind:value={deck} maxlength="320" rows="2" placeholder="Describe what the reader will learn."></textarea></label>
|
||||
</section>
|
||||
|
||||
<section class="article-publication-dock" aria-label="Publication controls">
|
||||
<div class="article-publication-ident"><span>PUBLICATION</span><strong>{data.article.kind.toUpperCase()}</strong></div>
|
||||
<SegmentedChoice legend="VISIBILITY" name="composer-visibility" options={[{value:'private',label:'PRIVATE'},{value:'unlisted',label:'UNLISTED'},{value:'public',label:'PUBLIC'}]} value={visibility} onchange={(values) => visibility = values[0]}/>
|
||||
{#if data.article.kind === 'news'}<label class="article-channel-field">NEWS CHANNEL<select bind:value={channel}>{#each data.newsChannels as item}<option>{item}</option>{/each}</select></label>{/if}
|
||||
<div class="article-publication-note"><p>{visibility === 'private' ? 'Only you can open this draft.' : visibility === 'unlisted' ? 'Anyone with the direct URL can read it.' : 'Listed in discovery and visible to everyone.'}</p>{#if data.article.pendingRevisionId}<strong>MODERATION REVIEW PENDING</strong>{/if}</div>
|
||||
<PendingForm action="?/publish" class="article-publish-form">
|
||||
<input type="hidden" name="articleId" value={data.article.id}/><input type="hidden" name="title" value={title}/><input type="hidden" name="deck" value={deck}/><input type="hidden" name="document" value={document}/><input type="hidden" name="tagIds" value={JSON.stringify(selectedTags)}/><input type="hidden" name="channel" value={channel}/><input type="hidden" name="coverImageId" value={coverImageId}/><input type="hidden" name="coverAlt" value={coverAlt}/><input type="hidden" name="coverCaption" value={coverCaption}/><input type="hidden" name="version" value={version}/><input type="hidden" name="visibility" value={visibility}/>
|
||||
<button class="primary">{visibility === 'private' ? 'SAVE AS PRIVATE' : data.article.kind === 'guide' ? 'SUBMIT FOR PUBLICATION' : 'PUBLISH ARTICLE'}</button>
|
||||
</PendingForm>
|
||||
</section>
|
||||
|
||||
<div class="article-compose-grid">
|
||||
<section class="article-compose-main">
|
||||
<ArticleEditor bind:value={document} articleId={data.article.id} builds={data.builds}/>
|
||||
</section>
|
||||
<aside class="article-compose-rail">
|
||||
<section><header><span>COVER IMAGE</span></header>{#if coverUrl}<img class="article-cover-preview" src={coverUrl} alt="Selected article cover"/>{/if}<label class="article-file-action">{coverUploading ? 'UPLOADING…' : 'CHOOSE COVER'}<input type="file" accept="image/jpeg,image/png,image/webp,image/avif,image/svg+xml" disabled={coverUploading} onchange={uploadCover}/></label><label>ALTERNATIVE TEXT<input bind:value={coverAlt} maxlength="300"/></label><label>CAPTION · OPTIONAL<input bind:value={coverCaption} maxlength="500"/></label></section>
|
||||
{#if data.article.kind === 'guide'}<section><header><span>DISCOVERY TAGS</span><b>{selectedTags.length}/12</b></header>{#each groupedTags as [group,tags]}<fieldset class="article-tag-group"><legend>{String(group).replace('_',' ').toUpperCase()}</legend><div>{#each tags as tag}<button type="button" class:selected={selectedTags.includes(tag.id)} aria-pressed={selectedTags.includes(tag.id)} onclick={() => toggleTag(tag.id)}>{tag.name}</button>{/each}</div></fieldset>{/each}</section>{/if}
|
||||
{#if data.article.kind === 'guide'}<ModerationDisclosure/>{/if}
|
||||
<PendingForm action="?/delete" class="article-delete-form"><input type="hidden" name="articleId" value={data.article.id}/><button class="danger" onclick={(event) => { if (!window.confirm('Delete this article? Its public page will be removed.')) event.preventDefault(); }}>DELETE ARTICLE</button></PendingForm>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.article-compose-page{padding-top:18px}.article-compose-command{position:static;width:auto;height:auto;display:flex;align-items:end;justify-content:space-between;gap:20px;padding:12px 0 16px;border-bottom:1px solid var(--shd-border);background:transparent}.article-compose-command p,.article-compose-command h1{margin:0}.article-compose-command p{color:var(--shd-orange);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:1px}.article-compose-command h1{font-size:clamp(1.6rem,4vw,3rem)}.article-save-state{display:flex;align-items:center;gap:7px;color:var(--shd-success);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.article-save-state i{width:7px;height:7px;background:currentColor}.article-save-state.error{color:var(--shd-danger)}
|
||||
.article-compose-lede{display:grid;gap:10px;padding:22px 0}.article-title-field,.article-deck-field{display:grid;gap:5px}.article-title-field span,.article-deck-field span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.8px}.article-title-field textarea,.article-deck-field textarea{field-sizing:content;overflow:hidden;resize:none}.article-title-field textarea{min-height:1.9em;padding:14px 0;border:0;border-bottom:1px solid var(--shd-border-strong);background:transparent;color:var(--shd-text);font-family:var(--shd-font);font-size:clamp(2.6rem,6vw,5.5rem);font-weight:700;line-height:.92;letter-spacing:-.035em}.article-deck-field textarea{min-height:3.2em;max-width:76ch;padding:8px 0;border:0;background:transparent;color:var(--shd-text-muted);font-family:var(--shd-font-editorial);font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.5}
|
||||
.article-publication-dock{display:grid;grid-template-columns:auto minmax(280px,340px) minmax(190px,240px) minmax(180px,1fr) auto;align-items:end;gap:12px;padding:12px;border:1px solid var(--shd-border-strong);background:var(--shd-surface)}.article-publication-ident{align-self:center;display:grid;gap:3px;padding-right:12px;border-right:1px solid var(--shd-border)}.article-publication-ident span,.article-publication-ident strong,.article-channel-field,.article-publication-note{font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.article-publication-ident span,.article-channel-field,.article-publication-note p{color:var(--shd-text-muted)}.article-publication-ident strong{color:var(--shd-text)}.article-channel-field{display:grid;gap:5px}.article-publication-note{align-self:center;display:grid;gap:3px}.article-publication-note p{margin:0;line-height:1.4}.article-publication-note strong{color:var(--shd-orange)}.article-publication-dock :global(.article-publish-form button){min-width:176px;min-height:44px}
|
||||
.article-compose-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:12px;margin-top:12px}.article-compose-main{min-width:0}.article-compose-rail{position:sticky;top:86px;display:grid;gap:8px}.article-compose-rail>section,.article-compose-rail :global(.moderation-disclosure){display:grid;gap:9px;padding:10px;border:1px solid var(--shd-border);background:var(--shd-surface)}.article-compose-rail section>header{position:static;z-index:auto;width:auto;height:auto;min-height:0;display:flex;justify-content:space-between;gap:8px;padding:0 0 7px;border-bottom:1px solid var(--shd-border);background:transparent}.article-compose-rail section>header span,.article-compose-rail section>header b,.article-compose-rail label{font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.article-compose-rail section>header span{color:var(--shd-text-muted)}.article-compose-rail label{display:grid;gap:5px;color:var(--shd-text-muted)}.article-cover-preview{width:100%;max-height:180px;object-fit:cover}.article-file-action{min-height:40px;display:flex!important;align-items:center;justify-content:center;border:1px solid var(--shd-border-strong);color:var(--shd-text)!important;cursor:pointer}.article-file-action input{position:absolute;opacity:0;pointer-events:none}.article-tag-group{display:grid;gap:5px;margin:0;padding:0;border:0}.article-tag-group legend{color:var(--shd-text-dim);font-size:var(--shd-type-telemetry);font-weight:900}.article-tag-group>div{display:flex;flex-wrap:wrap;gap:4px}.article-tag-group button{min-height:32px;padding:0 7px;border:1px solid var(--shd-border);background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900}.article-tag-group button.selected{border-color:var(--shd-orange);background:#211a0e;color:var(--shd-orange)}.article-compose-rail :global(.article-delete-form button){width:100%;min-height:44px;border:1px solid #6f3b34;background:#1b1110;color:var(--shd-danger);font-weight:900}.article-compose-rail :global(.article-delete-form button:hover),.article-compose-rail :global(.article-delete-form button:focus-visible){border-color:var(--shd-danger);background:#2a1714;color:#f4a18e}
|
||||
@media(max-width:1180px){.article-publication-dock{grid-template-columns:auto minmax(280px,1fr) minmax(200px,1fr) auto}.article-publication-note{grid-column:2/4}.article-compose-grid{grid-template-columns:minmax(0,1fr) 290px}}
|
||||
@media(max-width:900px){.article-publication-dock{grid-template-columns:1fr 1fr}.article-publication-ident{padding:0 0 8px;border-right:0;border-bottom:1px solid var(--shd-border)}.article-publication-note{grid-column:1/-1}.article-publication-dock :global(.article-publish-form),.article-publication-dock :global(.article-publish-form button){width:100%}.article-compose-grid{grid-template-columns:1fr}.article-compose-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.article-compose-rail :global(.article-delete-form),.article-compose-rail :global(.moderation-disclosure){grid-column:1/-1}}
|
||||
@media(max-width:650px){.article-compose-command{align-items:start;flex-direction:column}.article-compose-lede{padding:18px 0}.article-title-field textarea{font-size:clamp(2.25rem,12vw,3.5rem)}.article-publication-dock,.article-compose-rail{grid-template-columns:1fr}.article-publication-ident,.article-publication-note,.article-publication-dock :global(.article-publish-form),.article-compose-rail :global(.article-delete-form),.article-compose-rail :global(.moderation-disclosure){grid-column:1}.article-publication-dock :global(.article-publish-form button){width:100%}}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import type { ArticleMark, ArticleNode } from '$lib/articles/document';
|
||||
import BuildEmbed from '$lib/components/BuildEmbed.svelte';
|
||||
|
||||
let {
|
||||
document,
|
||||
builds = {},
|
||||
images = {}
|
||||
}: {
|
||||
document: ArticleNode;
|
||||
builds?: Record<string, {
|
||||
buildId: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
author: string;
|
||||
ownerShared: boolean;
|
||||
available: boolean;
|
||||
weapons: Array<{ name: string; category: string }>;
|
||||
gear: Array<{ name: string; slot: string }>;
|
||||
}>;
|
||||
images?: Record<string, { url: string; alt: string; caption: string }>;
|
||||
} = $props();
|
||||
|
||||
function link(mark: ArticleMark) {
|
||||
return mark.type === 'link' ? mark.attrs?.href ?? '#' : '#';
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet renderText(text: string, marks: ArticleMark[], index = 0)}
|
||||
{#if index >= marks.length}{text}{:else}
|
||||
{@const mark = marks[index]}
|
||||
{#if mark.type === 'bold'}<strong>{@render renderText(text, marks, index + 1)}</strong>
|
||||
{:else if mark.type === 'italic'}<em>{@render renderText(text, marks, index + 1)}</em>
|
||||
{:else if mark.type === 'code'}<code>{@render renderText(text, marks, index + 1)}</code>
|
||||
{:else}<a href={link(mark)} rel="nofollow ugc noopener noreferrer">{@render renderText(text, marks, index + 1)}</a>{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(node: ArticleNode)}
|
||||
{#each node.content ?? [] as child}{@render renderNode(child)}{/each}
|
||||
{/snippet}
|
||||
|
||||
{#snippet renderNode(node: ArticleNode)}
|
||||
{#if node.type === 'text'}{@render renderText(node.text ?? '', node.marks ?? [])}
|
||||
{:else if node.type === 'paragraph'}<p>{@render children(node)}</p>
|
||||
{:else if node.type === 'heading' && Number(node.attrs?.level) === 2}<h2>{@render children(node)}</h2>
|
||||
{:else if node.type === 'heading'}<h3>{@render children(node)}</h3>
|
||||
{:else if node.type === 'bulletList'}<ul>{@render children(node)}</ul>
|
||||
{:else if node.type === 'orderedList'}<ol>{@render children(node)}</ol>
|
||||
{:else if node.type === 'listItem'}<li>{@render children(node)}</li>
|
||||
{:else if node.type === 'blockquote'}<blockquote>{@render children(node)}</blockquote>
|
||||
{:else if node.type === 'horizontalRule'}<hr/>
|
||||
{:else if node.type === 'hardBreak'}<br/>
|
||||
{:else if node.type === 'buildEmbed' && builds[String(node.attrs?.embedKey ?? '')]}
|
||||
<BuildEmbed embed={builds[String(node.attrs?.embedKey ?? '')]}/>
|
||||
{:else if node.type === 'articleImage' && images[String(node.attrs?.imageId ?? '')]}
|
||||
{@const image = images[String(node.attrs?.imageId ?? '')]}
|
||||
<figure><img src={image.url} alt={image.alt}/>{#if image.caption}<figcaption>{image.caption}</figcaption>{/if}</figure>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<div class="article-content">{@render children(document)}</div>
|
||||
|
||||
<style>
|
||||
.article-content{max-width:76ch;color:var(--shd-text);font-family:var(--shd-font-editorial);font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.72}.article-content :global(p){margin:0 0 1.25em}.article-content :global(h2),.article-content :global(h3){font-family:var(--shd-font);line-height:1.05}.article-content :global(h2){margin:2.1em 0 .6em;font-size:clamp(1.8rem,4vw,2.5rem)}.article-content :global(h3){margin:1.8em 0 .55em;font-size:1.4rem}.article-content :global(ul),.article-content :global(ol){display:grid;gap:7px;margin:0 0 1.35em;padding-left:1.4em}.article-content :global(blockquote){margin:2em 0;padding:18px 22px;border:1px solid var(--shd-border-strong);background:#0d1011;font-size:1.16em;font-style:italic}.article-content :global(hr){margin:38px 0;border:0;border-top:1px solid var(--shd-border-strong)}.article-content :global(a){color:var(--shd-orange);text-decoration:underline;text-underline-offset:3px}.article-content :global(code){padding:1px 4px;background:#080a0b;color:var(--shd-info);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88em}.article-content :global(figure){margin:34px 0}.article-content :global(figure img){max-width:100%;height:auto;display:block}.article-content :global(figcaption){padding:9px 0;color:var(--shd-text-muted);font-family:var(--shd-font);font-size:var(--shd-type-supporting);line-height:1.45}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import AgentIdentityLink from '$lib/components/AgentIdentityLink.svelte';
|
||||
import MarkdownContent from '$lib/components/MarkdownContent.svelte';
|
||||
import CommentComposer from '$lib/components/CommentComposer.svelte';
|
||||
import PendingForm from '$lib/components/PendingForm.svelte';
|
||||
import ContentReport from '$lib/components/ContentReport.svelte';
|
||||
let { comments, viewer, form = null, signInHref } = $props();
|
||||
let replyingTo = $state('');
|
||||
</script>
|
||||
<section class="article-discussion" id="discussion" aria-labelledby="article-discussion-title">
|
||||
<header><div><span>COMMUNITY DISCUSSION</span><h2 id="article-discussion-title">FIELD NOTES & QUESTIONS</h2></div><b>{comments.filter((item:any)=>item.status==='visible').length} COMMENTS</b></header>
|
||||
{#if viewer}
|
||||
<PendingForm action="?/comment"><CommentComposer name="body" label="ADD TO THE DISCUSSION" required/>{#if form?.commentError}<p class="error">{form.commentError}</p>{/if}{#if form?.commentMessage}<p class="success">{form.commentMessage}</p>{/if}<button class="primary">POST COMMENT</button></PendingForm>
|
||||
{:else}<div class="discussion-sign-in"><p>Sign in to add a comment or reply.</p><a class="secondary" href={signInHref}>SIGN IN TO COMMENT</a></div>{/if}
|
||||
<div class="article-comment-list">
|
||||
{#each comments as comment}
|
||||
<article id={`comment-${comment.id}`} class:reply={comment.depth>0} style={`--depth:${comment.depth}`}>
|
||||
{#if comment.status === 'visible'}
|
||||
<header><AgentIdentityLink size="compact" linked={Boolean(comment.author.publicSlug)} agent={comment.author} meta={new Date(comment.createdAt).toLocaleString()}/></header>
|
||||
<MarkdownContent html={comment.bodyHtml} compact/>
|
||||
<div class="article-comment-actions">{#if viewer}<button type="button" onclick={()=>replyingTo=replyingTo===comment.id?'':comment.id}>REPLY</button>{/if}{#if comment.canReport}<ContentReport contentType="comment" contentId={comment.id} result={form} plain/>{/if}{#if comment.canDelete}<PendingForm action="?/removeComment"><input type="hidden" name="commentId" value={comment.id}/><button class="danger">REMOVE</button></PendingForm>{/if}</div>
|
||||
{#if replyingTo===comment.id}<PendingForm action="?/comment"><input type="hidden" name="parentId" value={comment.id}/><CommentComposer name="body" label="WRITE A REPLY" required rows={3}/><button class="primary">POST REPLY</button></PendingForm>{/if}
|
||||
{:else}<div class="removed-comment"><strong>COMMENT REMOVED</strong><span>Replies remain visible to preserve the conversation.</span></div>{/if}
|
||||
</article>
|
||||
{:else}<div class="discussion-empty"><strong>NO COMMENTS YET</strong><span>Start the discussion with a useful question or field observation.</span></div>{/each}
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
.article-discussion{display:grid;gap:18px;margin-top:54px;padding-top:24px;border-top:1px solid var(--shd-border)}.article-discussion header{position:static;z-index:auto;width:auto;height:auto;min-height:0;padding:0;border:0;background:transparent}.article-discussion>header{display:flex;align-items:end;justify-content:space-between;gap:16px}.article-discussion>header span,.article-discussion>header b{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.8px}.article-discussion>header h2{margin:4px 0 0;font-size:clamp(1.6rem,4vw,2.5rem)}.discussion-sign-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--shd-border)}.discussion-sign-in p{margin:0;color:var(--shd-text-muted)}.article-comment-list{max-width:980px;display:grid}.article-comment-list>article{display:grid;gap:8px;margin:20px 0 0 calc(min(var(--depth),4) * 24px);padding-left:calc(var(--depth) * 0px);scroll-margin-top:96px}.article-comment-list>article.reply{padding-left:14px;border-left:1px solid var(--shd-border-strong)}.article-comment-list article :global(.markdown-content),.article-comment-actions,.article-comment-list article :global(.comment-composer){margin-left:47px}.article-comment-actions{display:flex;align-items:center;gap:12px}.article-comment-actions>button,.article-comment-actions :global(button){min-height:32px;padding:0;border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900}.article-comment-actions>button:hover,.article-comment-actions>button:focus-visible{color:var(--shd-orange)}.removed-comment{display:grid;gap:3px;padding:6px 0;color:var(--shd-text-dim)}.removed-comment strong{font-size:var(--shd-type-telemetry);letter-spacing:.7px}.discussion-empty{display:grid;gap:4px;padding:24px 0;color:var(--shd-text-muted)}.discussion-empty strong{color:var(--shd-text)}@media(max-width:650px){.article-discussion>header,.discussion-sign-in{align-items:start;flex-direction:column}.article-comment-list>article{margin-left:calc(min(var(--depth),3) * 10px)}.article-comment-list article :global(.markdown-content),.article-comment-actions,.article-comment-list article :global(.comment-composer){margin-left:0}}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import type { Editor, JSONContent } from '@tiptap/core';
|
||||
import { EMPTY_ARTICLE_DOCUMENT, ARTICLE_DOCUMENT_VERSION } from '$lib/articles/document';
|
||||
import { ArticleImageNode, BuildEmbedNode } from '$lib/articles/editor-extensions';
|
||||
|
||||
let {
|
||||
value = $bindable(JSON.stringify(EMPTY_ARTICLE_DOCUMENT)),
|
||||
articleId,
|
||||
builds = [],
|
||||
disabled = false
|
||||
}: {
|
||||
value?: string;
|
||||
articleId: string;
|
||||
builds?: Array<{ id: string; title: string; visibility: string; owner: boolean }>;
|
||||
disabled?: boolean;
|
||||
} = $props();
|
||||
|
||||
let holder: HTMLDivElement;
|
||||
let editor = $state<Editor>();
|
||||
let buildSearch = $state('');
|
||||
let showBuilds = $state(false);
|
||||
let uploadOpen = $state(false);
|
||||
let uploadError = $state('');
|
||||
let uploading = $state(false);
|
||||
let altText = $state('');
|
||||
let caption = $state('');
|
||||
let uploadFile = $state<File>();
|
||||
|
||||
const filteredBuilds = $derived(builds.filter((build) =>
|
||||
build.title.toLocaleLowerCase().includes(buildSearch.trim().toLocaleLowerCase())
|
||||
).slice(0, 30));
|
||||
|
||||
function envelope(): JSONContent {
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
if (parsed?.version === ARTICLE_DOCUMENT_VERSION && parsed.document?.type === 'doc') return parsed.document;
|
||||
} catch {
|
||||
// The server remains authoritative; an invalid local draft starts empty.
|
||||
}
|
||||
return EMPTY_ARTICLE_DOCUMENT.document;
|
||||
}
|
||||
|
||||
function updateValue(instance: Editor) {
|
||||
value = JSON.stringify({ version: ARTICLE_DOCUMENT_VERSION, document: instance.getJSON() });
|
||||
}
|
||||
|
||||
function toggleLink() {
|
||||
if (!editor) return;
|
||||
if (editor.isActive('link')) {
|
||||
editor.chain().focus().unsetLink().run();
|
||||
return;
|
||||
}
|
||||
const href = window.prompt('Paste an HTTP or HTTPS link');
|
||||
if (href) editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
|
||||
}
|
||||
|
||||
function insertBuild(buildId: string) {
|
||||
if (!editor) return;
|
||||
const embedKey = `build-${crypto.randomUUID()}`;
|
||||
editor.chain().focus().insertContent({ type: 'buildEmbed', attrs: { buildId, embedKey } }).insertContent({ type: 'paragraph' }).run();
|
||||
showBuilds = false;
|
||||
buildSearch = '';
|
||||
}
|
||||
|
||||
async function uploadImage() {
|
||||
if (!uploadFile || !altText.trim() || !editor) {
|
||||
uploadError = 'Choose an image and provide descriptive alternative text.';
|
||||
return;
|
||||
}
|
||||
uploading = true;
|
||||
uploadError = '';
|
||||
const form = new FormData();
|
||||
form.set('articleId', articleId);
|
||||
form.set('image', uploadFile);
|
||||
try {
|
||||
const response = await fetch('/api/articles/media', { method: 'POST', body: form });
|
||||
const result = await response.json();
|
||||
if (!response.ok) throw new Error(result.message || 'Image upload failed.');
|
||||
editor.chain().focus().insertContent({
|
||||
type: 'articleImage',
|
||||
attrs: { imageId: result.id, alt: altText.trim(), caption: caption.trim() }
|
||||
}).insertContent({ type: 'paragraph' }).run();
|
||||
uploadFile = undefined;
|
||||
altText = '';
|
||||
caption = '';
|
||||
uploadOpen = false;
|
||||
} catch (error) {
|
||||
uploadError = error instanceof Error ? error.message : 'Image upload failed.';
|
||||
} finally {
|
||||
uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
let disposed = false;
|
||||
void Promise.all([import('@tiptap/core'), import('@tiptap/starter-kit'), import('@tiptap/extensions')]).then(([core, starter, extensions]) => {
|
||||
if (disposed) return;
|
||||
editor = new core.Editor({
|
||||
element: holder,
|
||||
content: envelope(),
|
||||
editable: !disabled,
|
||||
enableContentCheck: true,
|
||||
injectCSS: false,
|
||||
extensions: [
|
||||
starter.StarterKit.configure({
|
||||
heading: { levels: [2, 3] },
|
||||
codeBlock: false,
|
||||
strike: false,
|
||||
underline: false,
|
||||
link: { openOnClick: false, autolink: true, protocols: ['http', 'https'] }
|
||||
}),
|
||||
BuildEmbedNode,
|
||||
ArticleImageNode,
|
||||
extensions.Placeholder.configure({
|
||||
placeholder: 'Start writing. Use the toolbar to add structure, images, or Builds.'
|
||||
})
|
||||
],
|
||||
editorProps: { attributes: { 'aria-label': 'Article body', 'aria-multiline': 'true' } },
|
||||
onUpdate: ({ editor: instance }) => updateValue(instance)
|
||||
});
|
||||
});
|
||||
return () => {
|
||||
disposed = true;
|
||||
editor?.destroy();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="article-editor-shell" aria-label="Article editor">
|
||||
<div class="article-editor-toolbar" aria-label="Formatting controls">
|
||||
<button type="button" aria-label="Paragraph" class:active={editor?.isActive('paragraph')} onclick={() => editor?.chain().focus().setParagraph().run()}>TEXT</button>
|
||||
<button type="button" aria-label="Heading level 2" class:active={editor?.isActive('heading', { level: 2 })} onclick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}>H2</button>
|
||||
<button type="button" aria-label="Heading level 3" class:active={editor?.isActive('heading', { level: 3 })} onclick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}>H3</button>
|
||||
<button type="button" aria-label="Bold" class:active={editor?.isActive('bold')} onclick={() => editor?.chain().focus().toggleBold().run()}><strong>B</strong></button>
|
||||
<button type="button" aria-label="Italic" class:active={editor?.isActive('italic')} onclick={() => editor?.chain().focus().toggleItalic().run()}><em>I</em></button>
|
||||
<button type="button" aria-label="Inline code" class:active={editor?.isActive('code')} onclick={() => editor?.chain().focus().toggleCode().run()}>CODE</button>
|
||||
<button type="button" aria-label="Bulleted list" class:active={editor?.isActive('bulletList')} onclick={() => editor?.chain().focus().toggleBulletList().run()}>LIST</button>
|
||||
<button type="button" aria-label="Numbered list" class:active={editor?.isActive('orderedList')} onclick={() => editor?.chain().focus().toggleOrderedList().run()}>1.</button>
|
||||
<button type="button" aria-label="Quote" class:active={editor?.isActive('blockquote')} onclick={() => editor?.chain().focus().toggleBlockquote().run()}>QUOTE</button>
|
||||
<button type="button" aria-label="Link" class:active={editor?.isActive('link')} onclick={toggleLink}>LINK</button>
|
||||
<button type="button" aria-label="Divider" onclick={() => editor?.chain().focus().setHorizontalRule().run()}>RULE</button>
|
||||
<button type="button" aria-expanded={showBuilds} onclick={() => { showBuilds = !showBuilds; uploadOpen = false; }}>+ BUILD</button>
|
||||
<button type="button" aria-expanded={uploadOpen} onclick={() => { uploadOpen = !uploadOpen; showBuilds = false; }}>+ IMAGE</button>
|
||||
<span></span>
|
||||
<button type="button" aria-label="Undo" disabled={!editor?.can().undo()} onclick={() => editor?.chain().focus().undo().run()}>UNDO</button>
|
||||
<button type="button" aria-label="Redo" disabled={!editor?.can().redo()} onclick={() => editor?.chain().focus().redo().run()}>REDO</button>
|
||||
</div>
|
||||
{#if showBuilds}
|
||||
<div class="article-insert-panel">
|
||||
<label>FIND A BUILD<input bind:value={buildSearch} placeholder="Search your Builds and the public archive"/></label>
|
||||
<div class="article-build-results">
|
||||
{#each filteredBuilds as build}
|
||||
<button type="button" onclick={() => insertBuild(build.id)}><span>{build.owner ? 'YOUR BUILD' : 'PUBLIC BUILD'} · {build.visibility.toUpperCase()}</span><strong>{build.title}</strong><b>INSERT →</b></button>
|
||||
{:else}<p>No eligible Builds match this search.</p>{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if uploadOpen}
|
||||
<div class="article-insert-panel article-image-insert">
|
||||
<label>IMAGE<input type="file" accept="image/jpeg,image/png,image/webp,image/avif,image/svg+xml" onchange={(event) => uploadFile = (event.currentTarget as HTMLInputElement).files?.[0]}/></label>
|
||||
<label>ALTERNATIVE TEXT<input bind:value={altText} maxlength="300" placeholder="Describe the image for readers who cannot see it"/></label>
|
||||
<label>CAPTION · OPTIONAL<input bind:value={caption} maxlength="500"/></label>
|
||||
{#if uploadError}<p class="error" role="alert">{uploadError}</p>{/if}
|
||||
<button type="button" class="primary" disabled={uploading} onclick={uploadImage}>{uploading ? 'UPLOADING…' : 'INSERT IMAGE'}</button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="article-editor-canvas" bind:this={holder}></div>
|
||||
<input type="hidden" name="document" {value}/>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.article-editor-shell{border:1px solid var(--shd-border-strong);background:var(--shd-surface)}
|
||||
.article-editor-toolbar{position:sticky;top:76px;z-index:4;display:flex;flex-wrap:wrap;border-bottom:1px solid var(--shd-border);background:#111415}
|
||||
.article-editor-toolbar button{min-width:42px;min-height:40px;padding:0 10px;border:0;border-right:1px solid var(--shd-border);background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.5px;cursor:pointer}
|
||||
.article-editor-toolbar button:hover,.article-editor-toolbar button:focus-visible,.article-editor-toolbar button.active{background:var(--shd-surface-active);color:var(--shd-orange)}
|
||||
.article-editor-toolbar button:active{transform:translateY(1px)}.article-editor-toolbar button:disabled{opacity:.4;cursor:not-allowed}.article-editor-toolbar>span{flex:1}
|
||||
.article-editor-canvas{min-height:580px;padding:clamp(24px,5vw,68px)}
|
||||
.article-editor-canvas :global(.tiptap){max-width:76ch;min-height:500px;margin:0 auto;outline:0;color:var(--shd-text);font-family:var(--shd-font-editorial);font-size:1.08rem;line-height:1.72}
|
||||
.article-editor-canvas :global(.tiptap p){margin:0 0 1.2em}.article-editor-canvas :global(.tiptap h2){margin:2.2em 0 .6em;font-family:var(--shd-font);font-size:2rem;line-height:1.05}.article-editor-canvas :global(.tiptap h3){margin:1.8em 0 .55em;font-family:var(--shd-font);font-size:1.35rem}
|
||||
.article-editor-canvas :global(.tiptap p.is-editor-empty:first-child::before){height:0;float:left;color:var(--shd-text-dim);font-family:var(--shd-font-editorial);font-style:italic;content:attr(data-placeholder);pointer-events:none}
|
||||
.article-editor-canvas :global(.tiptap blockquote){margin:2em 0;padding:16px 20px;border:1px solid var(--shd-border-strong);background:#0d1011;font-size:1.15rem;font-style:italic}.article-editor-canvas :global(.tiptap hr){margin:32px 0;border:0;border-top:1px solid var(--shd-border-strong)}
|
||||
.article-editor-canvas :global(.article-editor-embed){display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;margin:24px 0;padding:18px;border:1px solid var(--shd-orange);background:#17140e;font-family:var(--shd-font);cursor:grab}.article-editor-canvas :global(.article-editor-embed span){color:var(--shd-orange);font-size:var(--shd-type-telemetry);font-weight:900}.article-editor-canvas :global(.article-editor-embed strong){overflow:hidden;text-overflow:ellipsis}
|
||||
.article-editor-canvas :global(.article-editor-image){margin:28px 0}.article-editor-canvas :global(.article-editor-image img){max-width:100%;display:block}.article-editor-canvas :global(.article-editor-image figcaption){padding:8px 0;color:var(--shd-text-muted);font-family:var(--shd-font);font-size:var(--shd-type-supporting)}
|
||||
.article-insert-panel{display:grid;gap:10px;padding:12px;border-bottom:1px solid var(--shd-border);background:#0d1011}.article-insert-panel label{display:grid;gap:5px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.6px}.article-insert-panel input{width:100%}.article-build-results{max-height:280px;display:grid;overflow:auto;border:1px solid var(--shd-border)}.article-build-results button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:10px;border:0;border-top:1px solid var(--shd-border);background:var(--shd-surface);color:var(--shd-text);text-align:left}.article-build-results button:first-child{border-top:0}.article-build-results button:hover,.article-build-results button:focus-visible{background:var(--shd-surface-active)}.article-build-results span{grid-column:1/-1;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900}.article-build-results b{color:var(--shd-orange);font-size:var(--shd-type-telemetry)}.article-image-insert{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}.article-image-insert .error{grid-column:1/-1}
|
||||
@media(max-width:760px){.article-editor-toolbar{top:64px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.article-editor-toolbar>span{display:none}.article-editor-toolbar button{flex:none;min-width:46px;min-height:44px}.article-editor-canvas{min-height:440px;padding:24px 16px}.article-editor-canvas :global(.tiptap){min-height:390px}.article-image-insert{grid-template-columns:1fr}.article-insert-panel{padding:10px}}
|
||||
@media(prefers-reduced-motion:reduce){.article-editor-toolbar button{transition:none}}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
import ArticleContent from '$lib/components/ArticleContent.svelte';
|
||||
import ArticleDiscussion from '$lib/components/ArticleDiscussion.svelte';
|
||||
import AgentIdentityLink from '$lib/components/AgentIdentityLink.svelte';
|
||||
import PendingForm from '$lib/components/PendingForm.svelte';
|
||||
import { untrack } from 'svelte';
|
||||
let { data, form = null } = $props();
|
||||
let reportOpen = $state(untrack(() => Boolean(form?.articleReportError)));
|
||||
const path = $derived(data.article.kind === 'guide' ? 'guides' : 'news');
|
||||
const publicationMeta = $derived(data.article.source
|
||||
? `PUBLISHED ${new Date(data.article.source.publishedAt).toLocaleDateString()} · VIA ${data.article.source.name.toUpperCase()}`
|
||||
: new Date(data.article.updatedAt).getTime() > new Date(data.article.publishedAt).getTime()
|
||||
? `UPDATED ${new Date(data.article.updatedAt).toLocaleDateString()}`
|
||||
: `PUBLISHED ${new Date(data.article.publishedAt).toLocaleDateString()}`);
|
||||
</script>
|
||||
<svelte:head>
|
||||
<title>{data.article.title} — SHD.build</title>
|
||||
<meta name="description" content={data.article.deck}/>
|
||||
<meta property="og:title" content={data.article.title}/><meta property="og:description" content={data.article.deck}/>
|
||||
{#if data.article.coverUrl}<meta property="og:image" content={data.article.coverUrl}/>{/if}
|
||||
{#if data.article.source}<link rel="canonical" href={data.article.source.url}/>{/if}
|
||||
{#if data.turnstileSiteKey && form?.articleChallengeRequired}<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>{/if}
|
||||
</svelte:head>
|
||||
<main class="page article-reader">
|
||||
<header class="article-reader-head">
|
||||
<div class="article-reader-channel"><span>{data.article.channel ?? (data.article.kind === 'guide' ? 'COMMUNITY GUIDE' : 'NEWS')}</span>{#if data.article.featured}<b>FEATURED</b>{/if}{#if data.article.recommended}<b>RECOMMENDED</b>{/if}</div>
|
||||
<h1>{data.article.title}</h1><p>{data.article.deck}</p>
|
||||
<div class="article-reader-byline">{#if data.article.source}<div class="article-source-identity"><strong>{data.article.source.name}</strong><span>{publicationMeta}</span></div>{:else}<AgentIdentityLink size="compact" linked={Boolean(data.article.authorPublicSlug)} agent={{id:data.article.ownerId,displayName:data.article.author,publicSlug:data.article.authorPublicSlug,avatarUrl:`/avatars/user/${data.article.ownerId}`}} meta={publicationMeta}/>{/if}<div>{#if data.article.kind === 'guide' && data.article.owner}<a class="secondary" href={`/guides/${encodeURIComponent(data.article.slug)}/edit`}>EDIT GUIDE</a>{:else if data.article.kind === 'news' && data.canManageNews && !data.article.source}<a class="secondary" href={`/news/${encodeURIComponent(data.article.slug)}/edit`}>OPEN NEWSROOM</a>{/if}</div></div>
|
||||
{#if data.article.source}<aside class="article-source-notice"><div><span>OFFICIAL SOURCE</span><strong>Originally published by {data.article.source.name}</strong></div><a href={data.article.source.url} target="_blank" rel="noopener noreferrer">READ ON UBISOFT</a></aside>{/if}
|
||||
{#if data.tags.length}<nav class="article-reader-tags" aria-label="Article tags">{#each data.tags as tag}<a href={`/${path}?tag=${encodeURIComponent(tag.slug)}`}>{tag.name}</a>{/each}</nav>{/if}
|
||||
</header>
|
||||
{#if data.article.coverUrl}<figure class="article-hero-image"><img src={data.article.coverUrl} alt={data.article.coverAlt}/>{#if data.article.coverCaption}<figcaption>{data.article.coverCaption}</figcaption>{/if}</figure>{/if}
|
||||
<div class="article-reader-layout" class:article-reader-layout-wide={data.article.kind === 'news'}>
|
||||
<article><ArticleContent document={data.document} builds={data.builds} images={data.images}/></article>
|
||||
{#if data.article.kind === 'guide'}<aside>
|
||||
<section class="guide-rating"><span>RATE THIS GUIDE</span><strong>{data.article.votes ? `${data.article.rating.toFixed(1)} / 5` : 'UNRATED'}</strong><small>{data.article.votes} RATING{data.article.votes===1?'':'S'}</small><PendingForm action="?/rate" class="rating-form"><div class="rating-stars">{#each [1,2,3,4,5] as value}<button name="value" {value} aria-label={`Rate ${value} out of 5`}>★<span>{value}</span></button>{/each}</div>{#if form?.ratingError}<p class="error">{form.ratingError}</p>{/if}{#if form?.articleChallengeRequired && data.turnstileSiteKey}<div class="cf-turnstile" data-sitekey={data.turnstileSiteKey}></div>{/if}</PendingForm></section>
|
||||
<section class="guide-report"><button type="button" aria-expanded={reportOpen} onclick={()=>reportOpen=!reportOpen}>REPORT GUIDE</button>{#if reportOpen}<PendingForm action="?/reportArticle"><label>CONCERN<select name="category" required><option value="">CHOOSE REASON</option><option value="spam">SPAM</option><option value="harassment">HARASSMENT</option><option value="hate">HATE</option><option value="sexual">SEXUAL CONTENT</option><option value="violence">VIOLENCE</option><option value="self_harm">SELF-HARM</option><option value="privacy">PRIVACY</option><option value="other">OTHER</option></select></label><label>DETAILS · OPTIONAL<textarea name="details" maxlength="500" rows="4"></textarea></label>{#if form?.articleReportError}<p class="error">{form.articleReportError}</p>{/if}{#if form?.articleChallengeRequired && data.turnstileSiteKey}<div class="cf-turnstile" data-sitekey={data.turnstileSiteKey}></div>{/if}<button class="danger">SEND REPORT</button></PendingForm>{/if}</section>
|
||||
{#if data.canCurate}<section class="guide-curation"><span>COMMUNITY OVERSIGHT</span>{#each [['pinned',data.article.pinned],['featured',data.article.featured],['recommended',data.article.recommended]] as item}<PendingForm action="?/curate"><input type="hidden" name="placement" value={item[0]}/><input type="hidden" name="enabled" value={item[1]?'0':'1'}/><button>{item[1]?'REMOVE ':''}{String(item[0]).toUpperCase()}</button></PendingForm>{/each}</section>{/if}
|
||||
</aside>{/if}
|
||||
</div>
|
||||
<ArticleDiscussion comments={data.comments} viewer={data.viewer} {form} signInHref={`/sign-in?returnTo=${encodeURIComponent(`/${path}/${data.article.slug}`)}`}/>
|
||||
</main>
|
||||
<style>
|
||||
.article-reader{padding-top:34px}.article-reader-head{position:static;z-index:auto;width:auto;height:auto;min-height:0;max-width:1100px;display:grid;gap:14px;margin:0 auto;padding:26px 0 34px;border:0;background:transparent;text-align:center}.article-reader-channel{display:flex;justify-content:center;gap:8px}.article-reader-channel span,.article-reader-channel b{font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.9px}.article-reader-channel span{color:var(--shd-orange)}.article-reader-channel b{color:var(--shd-text-muted)}.article-reader-head h1,.article-reader-head>p{margin:0}.article-reader-head h1{font-size:clamp(3rem,7vw,6rem);line-height:.86;letter-spacing:-.035em;text-wrap:balance}.article-reader-head>p{max-width:68ch;justify-self:center;color:var(--shd-text-muted);font-family:var(--shd-font-editorial);font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.5}.article-reader-byline{display:flex;align-items:center;justify-content:flex-start;gap:20px;text-align:left}.article-reader-byline>div{display:flex;gap:6px}.article-source-identity{display:grid!important;gap:2px!important}.article-source-identity strong{font-size:.95rem}.article-source-identity span,.article-source-notice span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.article-source-notice{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);text-align:left}.article-source-notice>div{display:grid;gap:3px}.article-source-notice a{padding:9px 12px;border:1px solid var(--shd-orange);color:var(--shd-orange);font-size:var(--shd-type-telemetry);font-weight:900;white-space:nowrap}.article-source-notice a:hover,.article-source-notice a:focus-visible{background:var(--shd-orange);color:#090b0c}.article-reader-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}.article-reader-tags a{padding:5px 8px;border:1px solid var(--shd-border);color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900}.article-reader-tags a:hover,.article-reader-tags a:focus-visible{border-color:var(--shd-orange);color:var(--shd-orange)}
|
||||
.article-hero-image{max-width:1380px;margin:0 auto 30px}.article-hero-image img{width:100%;max-height:660px;display:block;object-fit:cover}.article-hero-image figcaption{padding:8px 0;color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}.article-reader-layout{display:grid;grid-template-columns:minmax(0,76ch) 250px;justify-content:center;align-items:start;gap:clamp(30px,6vw,90px)}.article-reader-layout-wide{grid-template-columns:minmax(0,1100px)}.article-reader-layout>aside{position:sticky;top:90px;display:grid;gap:8px}.article-reader-layout>aside>section{display:grid;gap:7px;padding:11px;border:1px solid var(--shd-border);background:var(--shd-surface)}.article-reader-layout>aside section>span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}
|
||||
.guide-rating>strong{font-size:1.5rem}.rating-stars{display:grid;grid-template-columns:repeat(5,1fr)}.rating-stars button{min-width:0;height:40px;padding:0;border:1px solid var(--shd-border);border-left:0;background:transparent;color:var(--shd-text-dim);font-size:18px}.rating-stars button:first-child{border-left:1px solid var(--shd-border)}.rating-stars button:hover,.rating-stars button:focus-visible{color:var(--shd-orange)}.rating-stars span{display:block;font-size:8px}.guide-report>button{min-height:38px;border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;text-align:left}.guide-report :global(form){display:grid;gap:8px}.guide-report label{display:grid;gap:4px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900}.guide-curation :global(form button){width:100%;min-height:36px}
|
||||
@media(max-width:900px){.article-reader-layout{grid-template-columns:1fr}.article-reader-layout>article{display:grid;justify-content:center}.article-reader-layout>aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.article-reader-head{text-align:left}.article-reader-channel,.article-reader-tags{justify-content:flex-start}.article-reader-byline{align-items:flex-start;flex-direction:column}.article-source-notice{align-items:stretch;flex-direction:column}.article-source-notice a{text-align:center}.article-reader-head h1{font-size:3.4rem}.article-reader-layout>aside{grid-template-columns:1fr}}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
embed
|
||||
}: {
|
||||
embed: {
|
||||
buildId: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
author: string;
|
||||
ownerShared: boolean;
|
||||
available: boolean;
|
||||
weapons: Array<{ name: string; category: string }>;
|
||||
gear: Array<{ name: string; slot: string }>;
|
||||
};
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<aside class="build-embed" aria-label={`Embedded Build: ${embed.title}`}>
|
||||
<header>
|
||||
<div><span>SHD BUILD EMBED</span><strong>{embed.title}</strong><small>BY {embed.author.toUpperCase()}</small></div>
|
||||
<b>{embed.ownerShared ? 'AUTHOR-SHARED' : 'PUBLIC ARCHIVE'}</b>
|
||||
</header>
|
||||
{#if embed.available}
|
||||
<div class="build-embed-matrix">
|
||||
<section><span>WEAPONS</span>{#each embed.weapons as weapon}<div><strong>{weapon.name}</strong><small>{weapon.category}</small></div>{/each}</section>
|
||||
<section><span>GEAR</span>{#each embed.gear.slice(0,6) as item}<div><strong>{item.name}</strong><small>{item.slot}</small></div>{/each}</section>
|
||||
</div>
|
||||
{#if !embed.ownerShared}<a href={`/builds/${encodeURIComponent(embed.slug)}`}>OPEN CURRENT BUILD →</a>{/if}
|
||||
{:else}
|
||||
<div class="build-embed-unavailable"><strong>BUILD UNAVAILABLE</strong><span>The source Build is no longer public.</span></div>
|
||||
{/if}
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.build-embed{margin:32px 0;border:1px solid var(--shd-border-strong);background:#0d1011;font-family:var(--shd-font)}
|
||||
.build-embed>header{position:static;z-index:auto;width:auto;height:auto;min-height:0;display:flex;align-items:start;justify-content:space-between;gap:16px;padding:14px;border-bottom:1px solid var(--shd-border);background:var(--shd-surface-raised)}.build-embed>header>div{display:grid;gap:3px}.build-embed span,.build-embed small,.build-embed b,.build-embed>a{font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.build-embed>header span,.build-embed>a{color:var(--shd-orange)}.build-embed>header strong{font-size:1.18rem}.build-embed>header small,.build-embed>header>b{color:var(--shd-text-muted)}
|
||||
.build-embed-matrix{display:grid;grid-template-columns:.45fr 1fr}.build-embed-matrix section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--shd-border)}.build-embed-matrix section:first-child{border-left:0}.build-embed-matrix section>span{grid-column:1/-1;padding:7px 10px;border-bottom:1px solid var(--shd-border);color:var(--shd-text-muted)}.build-embed-matrix section>div{min-width:0;display:grid;gap:2px;padding:9px 10px;border-left:1px solid var(--shd-border);border-top:1px solid var(--shd-border)}.build-embed-matrix section>div:nth-child(2),.build-embed-matrix section>div:nth-child(3){border-top:0}.build-embed-matrix section>div:nth-child(even){border-left:0}.build-embed-matrix strong,.build-embed-matrix small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.build-embed-matrix small{color:var(--shd-text-muted)}
|
||||
.build-embed>a{min-height:42px;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;border-top:1px solid var(--shd-border)}.build-embed>a:hover,.build-embed>a:focus-visible{background:var(--shd-surface-active);color:var(--shd-orange-hover)}.build-embed-unavailable{display:grid;gap:4px;padding:22px}.build-embed-unavailable strong{color:var(--shd-danger)}.build-embed-unavailable span{color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}
|
||||
@media(max-width:700px){.build-embed>header{display:grid}.build-embed-matrix{grid-template-columns:1fr}.build-embed-matrix section{border-top:1px solid var(--shd-border);border-left:0}.build-embed-matrix section:first-child{border-top:0}}
|
||||
</style>
|
||||
@@ -7,7 +7,8 @@
|
||||
label = 'REPORT',
|
||||
result,
|
||||
plain = false,
|
||||
menuItem = false
|
||||
menuItem = false,
|
||||
itemId = ''
|
||||
}: {
|
||||
contentType: 'comment' | 'profile_bio' | 'guide' | 'avatar';
|
||||
contentId: string;
|
||||
@@ -15,6 +16,7 @@
|
||||
result?: Record<string, unknown> | null;
|
||||
plain?: boolean;
|
||||
menuItem?: boolean;
|
||||
itemId?: string;
|
||||
} = $props();
|
||||
|
||||
const categories = [
|
||||
@@ -48,6 +50,7 @@
|
||||
{#snippet children(pending)}
|
||||
<input type="hidden" name="contentType" value={contentType}/>
|
||||
<input type="hidden" name="contentId" value={contentId}/>
|
||||
{#if itemId}<input type="hidden" name="itemId" value={itemId}/>{/if}
|
||||
<label class="field">CONCERN
|
||||
<select name="category" required>
|
||||
{#each categories as category}<option value={category.value}>{category.label}</option>{/each}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { tick } from 'svelte';
|
||||
import type { DatabaseItem } from '$lib/database/items';
|
||||
import DatabaseItemCard from './DatabaseItemCard.svelte';
|
||||
import GameDataDiscussion from './GameDataDiscussion.svelte';
|
||||
|
||||
let { item, comments, viewer, form, signInHref, closeHref }: {
|
||||
item: DatabaseItem;
|
||||
comments: Array<any>;
|
||||
viewer: { id: string | null; canComment: boolean; canPin: boolean };
|
||||
form?: Record<string, any> | null;
|
||||
signInHref: string;
|
||||
closeHref: string;
|
||||
} = $props();
|
||||
let dialog = $state<HTMLDivElement | null>(null);
|
||||
let closeButton = $state<HTMLButtonElement | null>(null);
|
||||
|
||||
$effect(() => { void tick().then(() => closeButton?.focus()); });
|
||||
const close = () => goto(closeHref, { noScroll: true });
|
||||
const trapFocus = (event: KeyboardEvent) => {
|
||||
if (event.key !== 'Tab' || !dialog) return;
|
||||
const focusable = [...dialog.querySelectorAll<HTMLElement>('a[href],button:not(:disabled),textarea,input:not([type="hidden"]),[tabindex]:not([tabindex="-1"])')].filter((element) => !element.hasAttribute('hidden'));
|
||||
const first = focusable[0];
|
||||
const last = focusable.at(-1);
|
||||
if (!first || !last) return;
|
||||
if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
|
||||
else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={(event) => { if (event.key === 'Escape') void close(); }}/>
|
||||
|
||||
<div class="database-discussion-backdrop" role="presentation" onclick={(event) => { if (event.target === event.currentTarget) void close(); }}>
|
||||
<div class="database-discussion-dialog" bind:this={dialog} role="dialog" aria-modal="true" aria-labelledby="database-discussion-title" tabindex="-1" onkeydown={trapFocus}>
|
||||
<header class="database-discussion-command"><div><small>DATABASE RECORD / COMMUNITY DISCUSSION</small><strong id="database-discussion-title">{item.name}</strong></div><button type="button" bind:this={closeButton} aria-label="Close discussion" onclick={() => void close()}>×</button></header>
|
||||
<div class="database-discussion-scroll">
|
||||
<section class="database-discussion-context" aria-label={`${item.name} record context`}><DatabaseItemCard {item} hideDiscussionUtility anchor={false}/></section>
|
||||
<GameDataDiscussion itemName={item.name} itemId={item.id} {comments} count={item.discussionCount ?? 0} {viewer} {form} {signInHref} embedded/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.database-discussion-backdrop{position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,5,5,.86);backdrop-filter:blur(3px)}.database-discussion-dialog{width:min(920px,100%);max-height:calc(100vh - 40px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid var(--shd-border-strong);border-top:2px solid var(--shd-orange);background:var(--shd-bg);box-shadow:0 18px 60px #000}.database-discussion-command{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-bottom:1px solid var(--shd-border);background:var(--shd-surface-active)}.database-discussion-command>div{display:grid;gap:3px}.database-discussion-command small{color:var(--shd-text-dim);font-size:var(--shd-type-telemetry);letter-spacing:.8px}.database-discussion-command strong{font-size:var(--shd-type-body);letter-spacing:.2px}.database-discussion-command button{width:34px;height:34px;padding:0;border:1px solid var(--shd-border-strong);background:var(--shd-surface);color:var(--shd-text-muted);font-size:var(--shd-type-title);line-height:1;cursor:pointer}.database-discussion-command button:hover,.database-discussion-command button:focus-visible{border-color:var(--shd-orange);color:var(--shd-orange);background:var(--shd-surface-active)}.database-discussion-command button:focus-visible{outline:2px solid var(--shd-orange);outline-offset:2px}.database-discussion-scroll{min-height:0;overflow:auto;padding:14px 14px 190px}.database-discussion-context{width:min(720px,100%);margin:0 auto}.database-discussion-context :global(.database-item-card){box-shadow:none}.database-discussion-scroll :global(.public-discussion){width:min(720px,100%);margin:24px auto 0}
|
||||
@media(max-width:650px){.database-discussion-backdrop{padding:0}.database-discussion-dialog{width:100%;height:100%;max-height:none;border-right:0;border-bottom:0;border-left:0}.database-discussion-command{min-height:64px}.database-discussion-command button{width:44px;height:44px}.database-discussion-scroll{padding:10px 10px 190px}.database-discussion-context{width:100%}}
|
||||
</style>
|
||||
@@ -5,15 +5,20 @@
|
||||
import DatabaseFacts from './DatabaseFacts.svelte';
|
||||
import type { GameIconName } from '$lib/game-icons';
|
||||
import type { DatabaseItem } from '$lib/database/items';
|
||||
import MarkdownContent from './MarkdownContent.svelte';
|
||||
|
||||
let {
|
||||
item
|
||||
item,
|
||||
hideDiscussionUtility = false,
|
||||
anchor = true
|
||||
}: {
|
||||
item: DatabaseItem & { gameIcon?: GameIconName }
|
||||
item: DatabaseItem & { gameIcon?: GameIconName };
|
||||
hideDiscussionUtility?: boolean;
|
||||
anchor?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<article class="database-item-card" class:talent-card={item.variant === 'talent'}>
|
||||
<article id={anchor ? `database-item-${item.id}` : undefined} class="database-item-card" class:talent-card={item.variant === 'talent'}>
|
||||
<header>
|
||||
{#if item.renderUrl}<img class="database-item-render" src={item.renderUrl} alt="" loading="lazy"/>{/if}
|
||||
<div class="database-item-icon">
|
||||
@@ -55,7 +60,30 @@
|
||||
{#if item.afterLines?.length}
|
||||
<div class="database-item-lines after-description">{#each item.afterLines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>
|
||||
{/if}
|
||||
{#if item.actions?.length}
|
||||
<footer class="database-item-actions">{#each item.actions as action}<a href={action.href}>{action.label} →</a>{/each}</footer>
|
||||
{#if item.pinnedCommunityNoteHtml}<aside class="database-community-note"><strong>COMMUNITY NOTE</strong><MarkdownContent html={item.pinnedCommunityNoteHtml} compact/></aside>{/if}
|
||||
{#if item.actions?.length || item.correctionHref || (!hideDiscussionUtility && item.discussionHref)}
|
||||
<footer class="database-item-footer">
|
||||
{#if item.actions?.length}<div class="database-item-actions">{#each item.actions as action}<a href={action.href}>{action.label} →</a>{/each}</div>{/if}
|
||||
<div class="database-item-utilities" aria-label="Community actions">
|
||||
{#if item.correctionHref}
|
||||
<a class="database-utility-button correction" href={item.correctionHref} aria-label={`Report an inaccuracy in ${item.name}`} title="Report an inaccuracy">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 21V4M6 5h11l-2.75 3L17 11H6"/></svg>
|
||||
</a>
|
||||
{/if}
|
||||
{#if !hideDiscussionUtility && item.discussionHref}
|
||||
<a class="database-utility-button discussion" href={item.discussionHref} aria-label={`Open discussion for ${item.name}${item.discussionCount ? `, ${item.discussionCount} messages` : ', no messages yet'}`} title="Open discussion" aria-haspopup="dialog">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5.75h14v9.5H9.25L5 18.75v-13Z"/><path d="M8.25 9h7.5M8.25 12h5"/></svg>
|
||||
{#if item.discussionCount}<span>{item.discussionCount}</span>{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</footer>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.database-community-note{display:grid;gap:5px;margin:12px 0 0;padding:10px;border:1px solid var(--shd-border);border-left:2px solid var(--shd-armor-border);background:linear-gradient(90deg,var(--shd-armor-surface),var(--shd-surface-raised))}.database-community-note>strong{color:var(--shd-armor-label);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.database-community-note :global(.markdown-content){color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}.database-community-note :global(.markdown-content a){color:var(--shd-armor-text)}
|
||||
.database-item-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:10px 12px 12px;padding-top:9px;border-top:1px solid var(--shd-border)}.database-item-footer .database-item-actions{min-width:0;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}.database-item-utilities{display:flex;align-items:center;gap:4px;margin-left:auto}.database-utility-button{height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 7px;border:1px solid var(--shd-border);background:var(--shd-surface);color:var(--shd-text-dim)}.database-utility-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}.database-utility-button span{min-width:10px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:800;line-height:1;text-align:center}.database-utility-button:hover,.database-utility-button:focus-visible{border-color:var(--shd-border-strong);background:var(--shd-surface-active);color:var(--shd-text)}.database-utility-button:focus-visible{outline:2px solid var(--shd-orange);outline-offset:2px}.database-utility-button:active{transform:translateY(1px);filter:brightness(.84)}
|
||||
@media(max-width:650px){.database-item-footer{align-items:stretch}.database-item-utilities{align-self:end}.database-utility-button{width:44px;height:44px;padding:0}.database-utility-button.discussion:has(span){width:auto;min-width:44px;padding:0 10px}}
|
||||
@media(prefers-reduced-motion:reduce){.database-utility-button{transition:none}}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import AgentIdentityLink from './AgentIdentityLink.svelte';
|
||||
import CommentComposer from './CommentComposer.svelte';
|
||||
import MarkdownContent from './MarkdownContent.svelte';
|
||||
import ModerationDisclosure from './ModerationDisclosure.svelte';
|
||||
import PendingForm from './PendingForm.svelte';
|
||||
import OverflowMenu from './OverflowMenu.svelte';
|
||||
import ContentReport from './ContentReport.svelte';
|
||||
import { tick } from 'svelte';
|
||||
|
||||
let { itemName, itemId, comments, count, viewer, form, signInHref, embedded = false }: {
|
||||
itemName: string;
|
||||
itemId: string;
|
||||
comments: Array<any>;
|
||||
count: number;
|
||||
viewer: { id: string | null; canComment: boolean; canPin: boolean };
|
||||
form?: Record<string, any> | null;
|
||||
signInHref: string;
|
||||
embedded?: boolean;
|
||||
} = $props();
|
||||
let draft = $state('');
|
||||
let activeComposer = $state<string | null>(null);
|
||||
let handledToken = $state('');
|
||||
let activeMenuId = $state('');
|
||||
let deletingCommentId = $state('');
|
||||
const parentForResult = $derived(String(form?.discussionParentId ?? '') || 'root');
|
||||
|
||||
$effect(() => {
|
||||
const token = String(form?.discussionResultToken ?? '');
|
||||
if (!token || token === handledToken) return;
|
||||
handledToken = token;
|
||||
if (form?.discussionSaved) { draft = ''; activeComposer = null; }
|
||||
});
|
||||
async function openComposer(id: string) {
|
||||
activeComposer = activeComposer === id ? null : id;
|
||||
draft = '';
|
||||
if (!activeComposer) return;
|
||||
await tick();
|
||||
document.getElementById(`discussion-editor-${activeComposer}`)?.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet composer(parentId: string | null, label: string)}
|
||||
<PendingForm action="?/commentDiscussion" class="discussion-form">
|
||||
<input type="hidden" name="itemId" value={itemId}/>
|
||||
{#if parentId}<input type="hidden" name="parentId" value={parentId}/>{/if}
|
||||
<CommentComposer id={`discussion-editor-${parentId ?? 'root'}`} name="body" {label} maxLength={2000} rows={4} required bind:value={draft}/>
|
||||
<ModerationDisclosure compact/>
|
||||
{#if parentForResult === (parentId ?? 'root') && form?.discussionError}<p class="error">{form.discussionError}</p>{/if}
|
||||
<div class="discussion-form-actions"><button type="button" class="secondary" onclick={() => openComposer(parentId ?? 'root')}>CANCEL</button><button class="primary" disabled={!draft.trim()}>{parentId ? 'POST REPLY →' : 'POST NOTE →'}</button></div>
|
||||
</PendingForm>
|
||||
{/snippet}
|
||||
|
||||
<section class="public-discussion" class:embedded id="discussion">
|
||||
<header><div><p class="eyebrow">COMMUNITY INTELLIGENCE</p><h2>FIELD DISCUSSION</h2></div><span>{count} {count === 1 ? 'NOTE' : 'NOTES'}</span></header>
|
||||
{#if viewer.canComment}
|
||||
<button type="button" class="discussion-trigger" aria-expanded={activeComposer === 'root'} onclick={() => openComposer('root')}>{activeComposer === 'root' ? 'CLOSE EDITOR' : `DISCUSS ${itemName.toUpperCase()}`}</button>
|
||||
{#if activeComposer === 'root'}{@render composer(null, 'NEW COMMUNITY NOTE')}{/if}
|
||||
{:else if !viewer.id}
|
||||
<div class="discussion-access"><strong>SIGN-IN REQUIRED</strong><p>Sign in to discuss this data record or propose a correction.</p><a class="secondary" href={signInHref}>SIGN IN →</a></div>
|
||||
{/if}
|
||||
<div class="discussion-list">
|
||||
{#each comments as comment}
|
||||
<article id={`discussion-comment-${comment.id}`} class:reply={comment.depth > 0} class:removed={comment.status === 'removed'} class:pinned={comment.isPinned} style={`--thread-depth:${Math.min(comment.depth, 4)}`}>
|
||||
{#if comment.status === 'visible'}
|
||||
<header><AgentIdentityLink agent={comment.author} roles={comment.author.roles} meta={new Date(comment.createdAt).toLocaleDateString().toUpperCase()}/>{#if comment.isPinned}<b>COMMUNITY NOTE</b>{/if}</header>
|
||||
<MarkdownContent html={comment.bodyHtml} compact/>
|
||||
<div class="discussion-actions">
|
||||
{#if viewer.canComment}<button type="button" onclick={() => openComposer(comment.id)}>REPLY</button>{/if}
|
||||
{#if viewer.id}
|
||||
<OverflowMenu label={`Actions for ${comment.author.displayName}'s message`} bind:open={() => activeMenuId === comment.id, (open) => activeMenuId = open ? comment.id : ''}>
|
||||
{#snippet children(close)}
|
||||
<PendingForm action="?/toggleDiscussionFollow" successMessage={comment.isFollowing ? 'Conversation unfollowed.' : 'Conversation followed.'}>
|
||||
<input type="hidden" name="itemId" value={itemId}/>
|
||||
<input type="hidden" name="commentId" value={comment.id}/>
|
||||
<input type="hidden" name="intent" value={comment.isFollowing ? 'unfollow' : 'follow'}/>
|
||||
<button>{comment.isFollowing ? 'UNFOLLOW THREAD' : 'FOLLOW THREAD'}</button>
|
||||
</PendingForm>
|
||||
{#if comment.canReport}<ContentReport contentType="comment" contentId={comment.id} {itemId} result={form} plain menuItem/>{/if}
|
||||
{#if viewer.canPin && comment.depth === 0}
|
||||
<PendingForm action="?/setPinnedCommunityNote">
|
||||
<input type="hidden" name="itemId" value={itemId}/>
|
||||
<input type="hidden" name="commentId" value={comment.id}/>
|
||||
<input type="hidden" name="intent" value={comment.isPinned ? 'unpin' : 'pin'}/>
|
||||
<button>{comment.isPinned ? 'UNPIN COMMUNITY NOTE' : 'PIN AS COMMUNITY NOTE'}</button>
|
||||
</PendingForm>
|
||||
{/if}
|
||||
{#if comment.canDelete}<button type="button" class="danger" onclick={() => { deletingCommentId = comment.id; close(); }}>REMOVE MESSAGE</button>{/if}
|
||||
{/snippet}
|
||||
</OverflowMenu>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}<div class="discussion-removed"><strong>{comment.removalReason === 'Removed by Community Oversight' ? 'MESSAGE REMOVED BY COMMUNITY OVERSIGHT' : 'MESSAGE REMOVED BY POSTER'}</strong><span>Replies remain visible to preserve the conversation.</span></div>{/if}
|
||||
{#if activeComposer === comment.id}<div class="discussion-reply">{@render composer(comment.id, `REPLY TO ${comment.author.displayName.toUpperCase()}`)}</div>{/if}
|
||||
{#if deletingCommentId === comment.id}
|
||||
<div class="discussion-delete-confirm" role="alert">
|
||||
<p>Remove this message? It remains as a labeled placeholder only when replies depend on it.</p>
|
||||
<div><button type="button" class="secondary" onclick={() => deletingCommentId = ''}>CANCEL</button><PendingForm action="?/deleteDiscussionComment"><input type="hidden" name="itemId" value={itemId}/><input type="hidden" name="commentId" value={comment.id}/><button class="primary">CONFIRM REMOVE</button></PendingForm></div>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{:else}<p class="discussion-empty">No active field discussion. Use a note to document an observation or help verify this record.</p>{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.public-discussion.embedded{padding:0 0 2px;border:0;background:transparent}.public-discussion.embedded>header{padding:0;border:0;background:transparent}
|
||||
.public-discussion{margin-top:28px;padding-top:18px;border-top:1px solid var(--shd-border)}.public-discussion>header{display:flex;justify-content:space-between;gap:12px;align-items:end}.public-discussion h2,.public-discussion p{margin:0}.public-discussion h2{font-size:var(--shd-type-title)}.public-discussion>header span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.discussion-trigger{width:100%;min-height:46px;margin-top:14px;padding:0 12px;border:1px solid var(--shd-border-strong);background:transparent;color:var(--shd-text-muted);text-align:left;cursor:pointer}.discussion-trigger:hover,.discussion-trigger:focus-visible{border-color:var(--shd-orange);color:var(--shd-text);background:var(--shd-surface-active)}:global(form.discussion-form){display:grid;gap:9px;margin-top:12px}.discussion-form-actions{display:flex;justify-content:end;gap:7px}.discussion-list{width:100%;display:grid;margin-top:26px;overflow:visible}.discussion-list article{position:relative;display:grid;gap:8px;margin:18px 0 0 calc(var(--thread-depth) * 22px);padding:0;border:0;background:transparent}.discussion-list article.reply{padding-left:14px;border-left:1px solid var(--shd-border-strong)}.discussion-list article.pinned{box-shadow:none}.discussion-list article>header{position:static;z-index:auto;width:auto;height:auto;min-height:0;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0;border:0;background:transparent}.discussion-list article>header>b{margin-left:auto;color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.discussion-list :global(.markdown-content){max-width:75ch;margin-left:53px}.discussion-actions{min-height:32px;display:flex;align-items:center;gap:14px;margin-left:53px}.discussion-reply,.discussion-delete-confirm{margin:6px 0 0 53px}.discussion-reply :global(form.discussion-form){padding-top:0}.discussion-actions button{border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.65px;cursor:pointer}.discussion-actions button:hover,.discussion-actions button:focus-visible{color:var(--shd-orange);text-decoration:underline;text-underline-offset:3px}.discussion-removed{display:grid;gap:3px;margin-left:53px;padding:2px 0;color:var(--shd-text-dim)}.discussion-removed strong{font-size:var(--shd-type-telemetry);letter-spacing:.7px}.discussion-removed span,.discussion-empty,.discussion-access{color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}.discussion-delete-confirm{width:min(520px,calc(100% - 53px));display:grid;gap:8px}.discussion-delete-confirm>div{display:flex;justify-content:flex-end;gap:7px}
|
||||
.discussion-access,.discussion-empty{display:grid;gap:5px;padding:12px;border:1px solid var(--shd-border);background:var(--shd-surface-raised);color:var(--shd-text-muted)}.discussion-access strong{color:var(--shd-text);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.discussion-access{margin-top:14px}.discussion-access a{justify-self:start}.discussion-empty{margin-top:16px;font-family:var(--shd-font-editorial)}@media(max-width:650px){.public-discussion>header{align-items:flex-start;flex-direction:column}.discussion-list article{margin-left:calc(var(--thread-depth) * 10px)}.discussion-list article.reply{padding-left:10px}.discussion-list :global(.markdown-content),.discussion-actions,.discussion-reply,.discussion-removed,.discussion-delete-confirm{margin-left:0}.discussion-delete-confirm{width:100%}.discussion-form-actions{display:grid;grid-template-columns:1fr 1fr}.discussion-form-actions button{width:100%;min-height:44px}.discussion-actions>button{min-height:44px}.discussion-access .secondary{min-height:44px}.discussion-list article>header>b{align-self:start}}
|
||||
</style>
|
||||
@@ -73,7 +73,7 @@
|
||||
aria-expanded={open}
|
||||
onclick={toggle}
|
||||
>
|
||||
<span aria-hidden="true">•••</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</button>
|
||||
{#if open}
|
||||
<div class="overflow-menu-panel" role="toolbar" aria-label={label} tabindex="-1" onkeydown={navigate}>
|
||||
@@ -83,7 +83,7 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overflow-menu{position:relative}.overflow-menu-trigger{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid transparent;background:transparent;color:var(--shd-text-muted);font-size:15px;font-weight:900;letter-spacing:2px;cursor:pointer}.overflow-menu-trigger:hover,.overflow-menu-trigger:focus-visible,.overflow-menu-trigger[aria-expanded=true]{border-color:var(--shd-border-strong);background:var(--shd-surface-active);color:var(--shd-orange)}.overflow-menu-panel{position:absolute;z-index:7;top:calc(100% + 4px);left:0;width:max-content;min-width:210px;display:grid;padding:4px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:8px 12px 28px #0009}.overflow-menu-panel :global(form>fieldset>button),.overflow-menu-panel :global(details>summary),.overflow-menu-panel :global(>button){width:100%;min-height:40px;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.65px;text-align:left;cursor:pointer}.overflow-menu-panel :global(form>fieldset>button:hover),.overflow-menu-panel :global(form>fieldset>button:focus-visible),.overflow-menu-panel :global(details>summary:hover),.overflow-menu-panel :global(details>summary:focus-visible),.overflow-menu-panel :global(>button:hover),.overflow-menu-panel :global(>button:focus-visible){background:var(--shd-surface-active);color:var(--shd-orange)}.overflow-menu-panel :global(>button.danger:hover),.overflow-menu-panel :global(>button.danger:focus-visible){color:var(--shd-danger)}
|
||||
.overflow-menu{position:relative}.overflow-menu-trigger{width:auto;min-width:32px;height:32px;display:grid;place-items:center;padding:0 3px;border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-supporting);font-weight:900;letter-spacing:1px;cursor:pointer}.overflow-menu-trigger:hover,.overflow-menu-trigger:focus-visible,.overflow-menu-trigger[aria-expanded=true]{background:transparent;color:var(--shd-orange);text-decoration:underline;text-underline-offset:3px}.overflow-menu-panel{position:absolute;z-index:7;top:calc(100% + 4px);left:0;width:max-content;min-width:210px;display:grid;padding:4px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:8px 12px 28px #0009}.overflow-menu-panel :global(form>fieldset>button),.overflow-menu-panel :global(details>summary),.overflow-menu-panel :global(>button){width:100%;min-height:40px;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;border:0;background:transparent;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.65px;text-align:left;cursor:pointer}.overflow-menu-panel :global(form>fieldset>button:hover),.overflow-menu-panel :global(form>fieldset>button:focus-visible),.overflow-menu-panel :global(details>summary:hover),.overflow-menu-panel :global(details>summary:focus-visible),.overflow-menu-panel :global(>button:hover),.overflow-menu-panel :global(>button:focus-visible){background:var(--shd-surface-active);color:var(--shd-orange)}.overflow-menu-panel :global(>button.danger:hover),.overflow-menu-panel :global(>button.danger:focus-visible){color:var(--shd-danger)}
|
||||
@media(max-width:650px){.overflow-menu-panel{position:fixed;z-index:12;top:auto;right:12px;bottom:12px;left:12px;width:auto;padding:6px}.overflow-menu-panel :global(form>fieldset>button),.overflow-menu-panel :global(details>summary),.overflow-menu-panel :global(>button){min-height:48px}}
|
||||
@media(prefers-reduced-motion:reduce){.overflow-menu-trigger{transition:none}}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user