Skip to main content

ArticlesState

Reactive list of public articles. Reads from the library provider — no auth, safe in any route.

Usage

src/routes/help/+page.svelte
<script>
  import { ArticlesState } from '@cstar.help/svelte';

  // First arg is the client (undefined = read from CStarLibraryProvider).
  // Second arg is the list params: { categorySlug, limit, offset }.
  const articles = new ArticlesState(undefined, { categorySlug: 'billing', limit: 10 });
</script>

{#if articles.isLoading}
  <p>Loading…</p>
{:else if articles.error}
  <p>Couldn't load — try again?</p>
{:else}
  <ul>
    {#each articles.articles as a (a.id)}
      <li><a href="/help/{a.slug}">{a.title}</a></li>
    {/each}
  </ul>
{/if}

Single-article fetches

There's no per-article rune class. Either use the getArticle(slug) instance method on an ArticlesState, or — for a dedicated article page — load the article in +page.js via getLibraryClient().article(slug) and pass it through data.

src/routes/help/[slug]/+page.js
import { getLibraryClient } from '@cstar.help/svelte';

export async function load({ params }) {
  const article = await getLibraryClient().article(params.slug);
  return { article };
}
src/routes/help/[slug]/+page.svelte
<script>
  let { data } = $props();
</script>

<h1>{data.article.title}</h1>
{@html data.article.contentHtml}

Next up