@erinjs/core 1.0.0

package/core/apps/docs/src/pages/GuidePage.vue

@@ -0,0 +1,279 @@
+<template>
+  <article v-if="guide" class="guide-page">
+    <div class="guide-content">
+      <nav class="breadcrumbs" aria-label="Breadcrumb">
+        <router-link :to="versionedPath('/guides')">Guides</router-link>
+        <span class="breadcrumb-sep">/</span>
+        <span class="breadcrumb-category">{{ getCategoryLabel(guide.category) }}</span>
+        <span class="breadcrumb-sep">/</span>
+        <span class="breadcrumb-current">{{ guide.title }}</span>
+      </nav>
+      <div class="guide-header">
+        <span class="guide-category">{{ getCategoryLabel(guide.category) }}</span>
+        <h1 class="guide-title">{{ guide.title }}</h1>
+        <p class="guide-desc">{{ guide.description }}</p>
+      </div>
+
+      <template v-for="(section, i) in guide.sections" :key="i">
+        <section
+          class="guide-section"
+          :class="{ 'guide-section--discord-compat': section.discordJsCompat }"
+          :id="sectionId(section, i)">
+          <h2 v-if="section.title" class="section-title">
+            {{ section.title }}
+            <GuideDiscordCompat
+              v-if="section.discordJsCompat"
+              :href="
+                typeof section.discordJsCompat === 'string' ? section.discordJsCompat : undefined
+              " />
+          </h2>
+          <GuideDiscordCompatCallout
+            v-if="typeof section.discordJsCompat === 'string'"
+            :href="section.discordJsCompat" />
+          <p v-if="section.description" class="section-desc">{{ section.description }}</p>
+          <GuideTable
+            v-if="section.table"
+            :headers="section.table.headers"
+            :rows="section.table.rows"
+            :code-columns="section.table.codeColumns" />
+          <GuideTip v-if="section.tip" :tip="section.tip" />
+          <GuideCodeBlock
+            v-if="section.code"
+            :code="section.code"
+            :language="section.language"
+            :alternate-code="section.alternateCode" />
+        </section>
+      </template>
+
+      <nav class="guide-nav">
+        <router-link
+          v-if="prevGuide"
+          :to="versionedPath(`/guides/${prevGuide.slug}`)"
+          class="guide-nav-link guide-prev">
+          ← {{ prevGuide.title }}
+        </router-link>
+        <router-link
+          v-if="nextGuide"
+          :to="versionedPath(`/guides/${nextGuide.slug}`)"
+          class="guide-nav-link guide-next">
+          {{ nextGuide.title }} →
+        </router-link>
+      </nav>
+    </div>
+    <nav v-if="tocItems.length" class="guide-toc" aria-label="On this page">
+      <span class="toc-title">On this page</span>
+      <a v-for="item in tocItems" :key="item.id" :href="`#${item.id}`" class="toc-link">
+        {{ item.label }}
+      </a>
+    </nav>
+  </article>
+  <div v-else class="not-found">
+    <p>Guide not found.</p>
+    <router-link :to="versionedPath('/guides')">Back to guides</router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { getCategoryLabel } from '../data/guides';
+import { useGuidesStore } from '../stores/guides';
+import { useVersionedPath } from '../composables/useVersionedPath';
+import GuideCodeBlock from '../components/GuideCodeBlock.vue';
+import GuideDiscordCompat from '../components/GuideDiscordCompat.vue';
+import GuideDiscordCompatCallout from '../components/GuideDiscordCompatCallout.vue';
+import GuideTable from '../components/GuideTable.vue';
+import GuideTip from '../components/GuideTip.vue';
+
+const route = useRoute();
+const guidesStore = useGuidesStore();
+const { path: versionedPath } = useVersionedPath();
+const slug = computed(() => route.params.slug as string);
+
+const guide = computed(() => guidesStore.getGuideBySlug(slug.value));
+
+const guideIndex = computed(() => {
+  const guides = guidesStore.guides;
+  const idx = guides.findIndex((g) => g.slug === slug.value);
+  return idx >= 0 ? idx : -1;
+});
+
+const prevGuide = computed(() => {
+  const guides = guidesStore.guides;
+  const i = guideIndex.value;
+  return i > 0 ? guides[i - 1] : null;
+});
+
+const nextGuide = computed(() => {
+  const guides = guidesStore.guides;
+  const i = guideIndex.value;
+  return i >= 0 && i < guides.length - 1 ? guides[i + 1] : null;
+});
+
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '');
+}
+
+function sectionId(section: { title?: string }, i: number): string {
+  if (section.title) return `section-${slugify(section.title)}-${i}`;
+  return `section-${i}`;
+}
+
+const tocItems = computed(() => {
+  if (!guide.value) return [];
+  return guide.value.sections
+    .map((s, i) => (s.title ? { id: sectionId(s, i), label: s.title } : null))
+    .filter((x): x is { id: string; label: string } => x !== null);
+});
+</script>
+
+<style scoped>
+.breadcrumbs {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.breadcrumbs a {
+  color: var(--text-secondary);
+}
+
+.breadcrumbs a:hover {
+  color: var(--accent);
+}
+
+.breadcrumb-sep {
+  margin: 0 0.4rem;
+  opacity: 0.6;
+}
+
+.breadcrumb-current {
+  color: var(--text-primary);
+}
+
+.guide-header {
+  margin-bottom: 1.5rem;
+}
+
+.guide-category {
+  display: inline-block;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--badge-enum);
+  margin-bottom: 0.5rem;
+}
+
+.guide-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+}
+
+.guide-desc {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.guide-section {
+  margin-bottom: 1.5rem;
+}
+
+.guide-section--discord-compat {
+  padding: 1rem 1.25rem;
+  background: var(--discord-compat-bg);
+  border: 1px solid var(--discord-compat-border);
+  border-radius: var(--radius);
+}
+
+.section-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.section-desc {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+  line-height: 1.5;
+}
+
+.guide-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.guide-nav-link {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.guide-nav-link:hover {
+  text-decoration: underline;
+}
+
+.guide-page {
+  display: flex;
+  gap: 2rem;
+  width: 100%;
+}
+
+.guide-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.guide-toc {
+  flex-shrink: 0;
+  width: 220px;
+  position: sticky;
+  top: 1.5rem;
+  align-self: flex-start;
+  padding: 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+}
+
+.guide-toc .toc-title {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+
+.guide-toc .toc-link {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  padding: 0.25rem 0;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.guide-toc .toc-link:hover {
+  color: var(--accent);
+}
+
+.not-found {
+  color: var(--text-muted);
+}
+
+.not-found a {
+  display: inline-block;
+  margin-top: 0.5rem;
+}
+</style>

package/core/apps/docs/src/pages/GuidesIndex.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="guides-index">
+    <div class="hero">
+      <h1>Guides</h1>
+      <p class="lead">Learn how to build bots with erin.js. Pick a guide to get started.</p>
+      <div class="quick-links">
+        <span class="quick-links-label">Quick links:</span>
+        <router-link :to="versionedPath('/api')" class="quick-link">REST API</router-link>
+        <router-link
+          v-for="g in quickLinks"
+          :key="g.id"
+          :to="versionedPath(`/guides/${g.slug}`)"
+          class="quick-link">
+          {{ g.title }}
+        </router-link>
+      </div>
+    </div>
+    <div v-for="(items, cat) in sortedGroupedGuides" :key="cat" class="guide-group">
+      <h2 class="group-title">{{ getCategoryLabel(cat) }}</h2>
+      <div class="guide-cards">
+        <router-link
+          v-for="g in items"
+          :key="g.id"
+          :to="versionedPath(`/guides/${g.slug}`)"
+          class="guide-card">
+          <h3 class="guide-card-title">{{ g.title }}</h3>
+          <p class="guide-card-desc">{{ g.description }}</p>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getCategoryLabel, CATEGORY_ORDER, QUICK_LINK_SLUGS } from '../data/guides';
+import { useGuidesStore } from '../stores/guides';
+import { useVersionedPath } from '../composables/useVersionedPath';
+import { Guide } from '../data/guides';
+
+const guidesStore = useGuidesStore();
+const { path: versionedPath } = useVersionedPath();
+
+const groupedGuides = computed(() => {
+  const groups: Record<string, Guide[]> = {};
+  for (const g of guidesStore.guides) {
+    const cat = g.category;
+    if (!groups[cat]) groups[cat] = [];
+    groups[cat].push(g);
+  }
+  return groups;
+});
+
+const sortedGroupedGuides = computed(() => {
+  const groups = groupedGuides.value;
+  const sorted: Record<string, Guide[]> = {};
+  for (const cat of CATEGORY_ORDER) {
+    if (groups[cat]?.length) sorted[cat] = groups[cat];
+  }
+  for (const cat of Object.keys(groups)) {
+    if (!CATEGORY_ORDER.includes(cat)) sorted[cat] = groups[cat];
+  }
+  return sorted;
+});
+
+const quickLinks = computed(() => {
+  const bySlug = new Map(guidesStore.guides.map((g) => [g.slug, g]));
+  return QUICK_LINK_SLUGS.map((slug) => bySlug.get(slug)).filter((g): g is Guide => g != null);
+});
+</script>
+
+<style scoped>
+.hero {
+  margin-bottom: 2.5rem;
+}
+
+.hero h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+}
+
+.lead {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.quick-links {
+  margin-top: 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.quick-links-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.quick-link {
+  font-size: 0.9rem;
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.quick-link:hover {
+  text-decoration: underline;
+}
+
+.guide-group {
+  margin-bottom: 2rem;
+}
+
+.guide-group:last-child {
+  margin-bottom: 0;
+}
+
+.group-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.guide-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.guide-card {
+  display: block;
+  padding: 1.25rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  text-decoration: none;
+  color: var(--text-primary);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.guide-card:hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+.guide-card-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.guide-card-desc {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+</style>

package/core/apps/docs/src/pages/GuidesLayout.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="guides-layout">
+    <button
+      type="button"
+      class="sidebar-toggle"
+      aria-label="Toggle navigation menu"
+      @click="sidebarOpen = !sidebarOpen">
+      <span class="toggle-icon">{{ sidebarOpen ? '✕' : '☰' }}</span>
+    </button>
+    <div
+      v-if="sidebarOpen"
+      class="sidebar-backdrop"
+      aria-hidden="true"
+      @click="sidebarOpen = false" />
+    <aside class="guides-sidebar sidebar-base" :class="{ 'is-open': sidebarOpen }">
+      <h3 class="sidebar-title">Guides</h3>
+      <CommunityCallout variant="sidebar" />
+      <router-link :to="versionedPath('/api')" class="guides-rest-api-link">REST API →</router-link>
+      <div class="sidebar-filter-wrap">
+        <input
+          v-model="filter"
+          type="search"
+          placeholder="Search guides..."
+          class="sidebar-filter" />
+      </div>
+      <nav class="guides-nav">
+        <div v-for="(items, cat) in filteredGroupedGuides" :key="cat" class="guide-group">
+          <span class="sidebar-group-label">{{ getCategoryLabel(cat) }}</span>
+          <router-link
+            v-for="g in items"
+            :key="g.id"
+            :to="versionedPath(`/guides/${g.slug}`)"
+            class="sidebar-link"
+            active-class="active">
+            {{ g.title }}
+          </router-link>
+        </div>
+      </nav>
+    </aside>
+    <main class="guides-content">
+      <div class="guides-content-scroll">
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </div>
+      <Footer class="content-footer" />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import Footer from '../components/Footer.vue';
+import CommunityCallout from '../components/CommunityCallout.vue';
+import { getCategoryLabel, CATEGORY_ORDER, Guide } from '../data/guides';
+import { useGuidesStore } from '../stores/guides';
+import { useVersionedPath } from '../composables/useVersionedPath';
+
+const route = useRoute();
+const guidesStore = useGuidesStore();
+const { path: versionedPath } = useVersionedPath();
+const filter = ref('');
+const sidebarOpen = ref(false);
+
+watch(
+  () => route.path,
+  () => {
+    sidebarOpen.value = false;
+  },
+);
+
+const groupedGuides = computed(() => {
+  const groups: Record<string, Guide[]> = {};
+  for (const g of guidesStore.guides) {
+    const cat = g.category;
+    if (!groups[cat]) groups[cat] = [];
+    groups[cat].push(g);
+  }
+  return groups;
+});
+
+const sortGroupedByCategory = (groups: Record<string, Guide[]>): Record<string, Guide[]> => {
+  const sorted: Record<string, Guide[]> = {};
+  for (const cat of CATEGORY_ORDER) {
+    if (groups[cat]?.length) sorted[cat] = groups[cat];
+  }
+  for (const cat of Object.keys(groups)) {
+    if (!CATEGORY_ORDER.includes(cat)) sorted[cat] = groups[cat];
+  }
+  return sorted;
+};
+
+const filteredGroupedGuides = computed(() => {
+  const q = filter.value.toLowerCase().trim();
+  if (!q) return sortGroupedByCategory(groupedGuides.value);
+
+  const filtered: Record<string, Guide[]> = {};
+  for (const [cat, items] of Object.entries(groupedGuides.value)) {
+    const matched = items.filter(
+      (g) =>
+        g.title.toLowerCase().includes(q) ||
+        g.description.toLowerCase().includes(q) ||
+        getCategoryLabel(cat).toLowerCase().includes(q),
+    );
+    if (matched.length) filtered[cat] = matched;
+  }
+  return sortGroupedByCategory(filtered);
+});
+</script>
+
+<style scoped>
+.guides-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.guides-sidebar {
+  /* Shared styles from .sidebar-base in main.css */
+}
+
+.guides-rest-api-link {
+  display: block;
+  margin: 0 var(--sidebar-padding-x) 1rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: none;
+  background: rgba(99, 179, 237, 0.1);
+  border: 1px solid rgba(99, 179, 237, 0.25);
+  border-radius: var(--radius-sm);
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.guides-rest-api-link:hover {
+  background: rgba(99, 179, 237, 0.18);
+  border-color: var(--accent);
+}
+
+.guides-sidebar .sidebar-filter-wrap {
+  margin: 0 var(--sidebar-padding-x) 1rem;
+}
+
+.guides-sidebar .sidebar-filter {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.5rem var(--sidebar-padding-x);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 0.85rem;
+}
+
+.guides-sidebar .sidebar-filter::placeholder {
+  color: var(--text-muted);
+}
+
+.guides-sidebar .sidebar-filter:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.guide-group {
+  margin-bottom: 0.5rem;
+}
+
+.guides-content {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.guides-content-scroll {
+  flex: 1;
+  padding: 1.5rem 2rem;
+  max-width: 1600px;
+  width: 100%;
+  min-width: 0;
+}
+
+.content-footer {
+  flex-shrink: 0;
+}
+
+.sidebar-toggle {
+  display: none;
+  position: fixed;
+  bottom: 1.25rem;
+  left: 1.25rem;
+  z-index: 99;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  background: var(--accent);
+  color: var(--bg-primary);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 1.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition:
+    transform 0.2s,
+    background 0.2s;
+}
+
+.sidebar-toggle:hover {
+  background: var(--accent-hover);
+  transform: scale(1.05);
+}
+
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+@media (max-width: 900px) {
+  .sidebar-toggle,
+  .sidebar-backdrop {
+    display: block;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>