25 lines
7.2 KiB
Svelte
25 lines
7.2 KiB
Svelte
<script lang="ts">
|
||
import ArticleCard from '$lib/components/ArticleCard.svelte';
|
||
let { data } = $props();
|
||
const pinned = $derived(data.items.filter((item: any) => item.pinnedOrder !== null).sort((a: any,b: any) => a.pinnedOrder-b.pinnedOrder));
|
||
const featured = $derived(data.items.filter((item: any) => item.featured && item.pinnedOrder === null));
|
||
const regular = $derived(data.items.filter((item: any) => item.pinnedOrder === null && !item.featured));
|
||
function tagHref(slug: string) { const params = new URLSearchParams(); if (data.query) params.set('q',data.query); for (const tag of data.selectedTags) if (tag !== slug) params.append('tag',tag); if (!data.selectedTags.includes(slug)) params.append('tag',slug); params.set('sort',data.sort); return `?${params}`; }
|
||
</script>
|
||
<svelte:head><title>Community Guides — SHD.build</title><meta name="description" content="Search tactical Guides, Build walkthroughs, specialization strategies, PvE, PvP, Dark Zone, and weapon advice from SHD.build Agents."/></svelte:head>
|
||
<main class="page guide-index-page">
|
||
<header class="guide-index-command"><div><p class="eyebrow"><span></span> SHD FIELD MANUAL</p><h1>TACTICS,<br/><em>AUTHORED.</em></h1><p>Search community intelligence by objective, specialization, Focus, weapon, or exact field terminology.</p></div><div><p><strong>{data.total}</strong><span>PUBLISHED GUIDES</span></p>{#if data.canCreate}<a class="secondary" href="/account/articles">YOUR ARTICLES</a><a class="primary" href="/guides/new">WRITE A GUIDE ＋</a>{:else}<a class="primary" href="/sign-in?returnTo=%2Fguides%2Fnew">SIGN IN TO WRITE</a>{/if}</div></header>
|
||
<form class="guide-discovery" method="GET"><label><span>SEARCH TITLE AND CONTENT</span><input name="q" value={data.query} placeholder="Search tactics, equipment, activities…"/></label><label><span>SORT</span><select name="sort" value={data.sort}><option value="relevance">BEST MATCH</option><option value="newest">NEWEST</option><option value="rating">HIGHEST RATED</option><option value="rated">MOST RATED</option></select></label>{#each data.selectedTags as tag}<input type="hidden" name="tag" value={tag}/>{/each}<button class="primary">SEARCH</button></form>
|
||
<nav class="guide-tag-filter" aria-label="Guide filters">{#each data.tags as tag}<a class:active={data.selectedTags.includes(tag.slug)} href={tagHref(tag.slug)}>{tag.name}</a>{/each}</nav>
|
||
{#if pinned.length}<section class="guide-pinned"><header><span>PINNED BY COMMUNITY OVERSIGHT</span><b>{pinned.length} ACTIVE</b></header>{#each pinned as article}<ArticleCard {article} kind="guide" prominent={pinned.length === 1}/>{/each}</section>{/if}
|
||
{#if featured.length}<section class="guide-featured"><header><div><span>FEATURED FIELD GUIDES</span><h2>OVERSIGHT SELECTION</h2></div></header><div>{#each featured as article}<ArticleCard {article} kind="guide"/>{/each}</div></section>{/if}
|
||
<section class="guide-results"><header><div><span>{data.query ? 'SEARCH RESULTS' : 'LATEST INTELLIGENCE'}</span><h2>{data.total} GUIDE{data.total === 1 ? '' : 'S'}</h2></div></header><div>{#each regular as article}<ArticleCard {article} kind="guide"/>{:else}{#if !pinned.length && !featured.length}<div class="catalogue-empty"><span>◇</span><strong>NO GUIDES MATCH THIS QUERY</strong><p>Adjust the search or filters, or publish the first Guide for this subject.</p></div>{/if}{/each}</div></section>
|
||
{#if data.pageCount > 1}<nav class="guide-pagination" aria-label="Guide pages">{#each Array(data.pageCount) as _,index}<a class:active={data.page===index+1} href={`?page=${index+1}`}>{index+1}</a>{/each}</nav>{/if}
|
||
</main>
|
||
<style>
|
||
.guide-index-page{padding-top:28px}.guide-index-command{position:static;z-index:auto;width:auto;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;padding:24px 0 30px;border-bottom:1px solid var(--shd-border);background:transparent}.guide-index-command h1,.guide-index-command p{margin:0}.guide-index-command h1{max-width:10ch;font-size:clamp(3.5rem,7vw,6rem);line-height:.84;letter-spacing:-.035em}.guide-index-command>div:first-child>p:last-child{max-width:64ch;margin-top:18px;color:var(--shd-text-muted);font-family:var(--shd-font-editorial);font-size:1.12rem}.guide-index-command>div:last-child{min-width:190px;display:grid;grid-template-columns:1fr;justify-items:stretch;gap:7px}.guide-index-command>div:last-child>p{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;margin-bottom:5px}.guide-index-command>div:last-child strong{color:var(--shd-orange);font-size:2.25rem;line-height:1}.guide-index-command>div:last-child span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.8px}.guide-index-command>div:last-child a{text-align:center}
|
||
.guide-discovery{display:grid;grid-template-columns:minmax(260px,1fr) 190px auto;align-items:end;gap:8px;padding:10px;border:1px solid var(--shd-border);border-top:0;background:var(--shd-surface)}.guide-discovery label{display:grid;gap:5px}.guide-discovery label span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.guide-discovery button{min-height:40px}.guide-tag-filter{display:flex;gap:5px;padding:10px 0;overflow:auto}.guide-tag-filter a{min-height:34px;display:flex;align-items:center;padding:0 9px;border:1px solid var(--shd-border);color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;white-space:nowrap}.guide-tag-filter a.active,.guide-tag-filter a:hover,.guide-tag-filter a:focus-visible{border-color:var(--shd-orange);background:#211a0e;color:var(--shd-orange)}
|
||
.guide-pinned,.guide-featured,.guide-results{display:grid;gap:10px;margin-top:20px}.guide-pinned>header,.guide-featured>header,.guide-results>header{display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid var(--shd-border)}.guide-pinned>header span,.guide-pinned>header b,.guide-featured>header span,.guide-results>header span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.8px}.guide-pinned>header span{color:var(--shd-orange)}.guide-featured h2,.guide-results h2{margin:3px 0 0}.guide-featured>div,.guide-results>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.guide-pagination{display:flex;justify-content:center;gap:4px;margin-top:24px}.guide-pagination a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--shd-border);color:var(--shd-text-muted);font-weight:900}.guide-pagination a.active{border-color:var(--shd-orange);color:var(--shd-orange)}
|
||
@media(max-width:1000px){.guide-featured>div,.guide-results>div{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.guide-index-page{padding-top:12px}.guide-index-command{grid-template-columns:1fr;gap:24px;padding:20px 0 24px}.guide-index-command>div:last-child{min-width:0;grid-template-columns:1fr 1fr}.guide-index-command>div:last-child>p{grid-column:1/-1;justify-content:flex-start}.guide-discovery{grid-template-columns:1fr;padding:8px}.guide-discovery button{min-height:48px}.guide-tag-filter{margin-inline:-18px;padding:10px 18px;scroll-padding-inline:18px}.guide-featured>div,.guide-results>div{grid-template-columns:1fr}.guide-index-command h1{font-size:clamp(3.25rem,17vw,4.5rem)}}
|
||
</style>
|