@erinjs/core 1.0.0

package/core/apps/docs/src/components/ApiEndpointCard.vue

@@ -0,0 +1,313 @@
+<template>
+  <article class="api-endpoint-card" :id="endpointId">
+    <div class="api-endpoint-header">
+      <span :class="['api-method', `api-method-${endpoint.method.toLowerCase()}`]">
+        {{ endpoint.method }}
+      </span>
+      <code class="api-path">{{ fullPath }}</code>
+      <button
+        type="button"
+        class="api-copy-btn"
+        :aria-label="copied ? 'Copied' : 'Copy path'"
+        :class="{ 'is-copied': copied }"
+        @click="copyPath">
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+    <div class="api-endpoint-meta">
+      <span v-if="endpoint.summary" class="api-summary">{{ endpoint.summary }}</span>
+      <span class="api-auth-badge" :class="`api-auth-${endpoint.auth}`">{{ authLabel }}</span>
+    </div>
+    <p v-if="endpoint.description" class="api-description">{{ endpoint.description }}</p>
+
+    <div v-if="endpoint.queryParams?.length" class="api-section">
+      <button
+        type="button"
+        class="api-toggle"
+        :aria-expanded="showQuery"
+        @click="showQuery = !showQuery">
+        Query parameters
+      </button>
+      <ApiSchemaBlock v-if="showQuery" :fields="queryAsFields" class="api-toggle-content" />
+    </div>
+
+    <div v-if="endpoint.requestBody?.length" class="api-section">
+      <button
+        type="button"
+        class="api-toggle"
+        :aria-expanded="showRequest"
+        @click="showRequest = !showRequest">
+        Request body
+      </button>
+      <ApiSchemaBlock
+        v-if="showRequest"
+        title="Request body"
+        :fields="endpoint.requestBody"
+        class="api-toggle-content" />
+    </div>
+
+    <div class="api-section">
+      <button
+        type="button"
+        class="api-toggle"
+        :aria-expanded="showResponse"
+        @click="showResponse = !showResponse">
+        Response
+      </button>
+      <ApiSchemaBlock
+        v-if="showResponse"
+        :fields="endpoint.responseBody"
+        :response-ref="endpoint.responseRef"
+        :response-code="endpoint.responseCode"
+        class="api-toggle-content" />
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ApiEndpoint, ApiSchemaField } from '../data/apiEndpoints';
+import ApiSchemaBlock from './ApiSchemaBlock.vue';
+
+const props = defineProps<{
+  endpoint: ApiEndpoint;
+  basePath?: string;
+}>();
+
+const basePath = computed(() => props.basePath ?? '/v1');
+const fullPath = computed(() => basePath.value + props.endpoint.path);
+const endpointId = computed(
+  () =>
+    props.endpoint.path
+      .replace(/^\//, '')
+      .replace(/:[a-z_]+/g, (m) => m.slice(1))
+      .replace(/\//g, '-') + `-${props.endpoint.method.toLowerCase()}`,
+);
+
+const authLabel = computed(() => {
+  switch (props.endpoint.auth) {
+    case 'bot':
+      return 'Bot token';
+    case 'webhook-token':
+      return 'Webhook token';
+    default:
+      return 'None';
+  }
+});
+
+const showQuery = ref(false);
+const showRequest = ref(false);
+const showResponse = ref(true);
+
+const queryAsFields = computed((): ApiSchemaField[] => {
+  if (!props.endpoint.queryParams?.length) return [];
+  return props.endpoint.queryParams.map((q) => ({
+    name: q.name,
+    type: q.type,
+    required: q.required,
+    description: q.description,
+  }));
+});
+
+const copied = ref(false);
+async function copyPath() {
+  try {
+    await navigator.clipboard.writeText(fullPath.value);
+    copied.value = true;
+    setTimeout(() => {
+      copied.value = false;
+    }, 1500);
+  } catch {
+    // ignore
+  }
+}
+</script>
+
+<style scoped>
+.api-endpoint-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem 1.75rem;
+  margin-bottom: 1.25rem;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.api-endpoint-card:hover {
+  border-color: var(--border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.api-endpoint-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.api-method {
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.3em 0.6em;
+  border-radius: var(--radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  flex-shrink: 0;
+}
+
+.api-method-get {
+  background: rgba(34, 197, 94, 0.15);
+  color: #6ee7b7;
+}
+
+.api-method-post {
+  background: rgba(99, 179, 237, 0.2);
+  color: #7dc3f4;
+}
+
+.api-method-put {
+  background: rgba(251, 146, 60, 0.15);
+  color: #fdba74;
+}
+
+.api-method-patch {
+  background: rgba(234, 179, 8, 0.15);
+  color: #fde047;
+}
+
+.api-method-delete {
+  background: rgba(248, 113, 113, 0.15);
+  color: #fca5a5;
+}
+
+.api-path {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  flex: 1;
+  min-width: 0;
+  padding: 0.2em 0;
+  overflow-x: auto;
+}
+
+.api-copy-btn {
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.35em 0.7em;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.api-copy-btn:hover {
+  color: var(--accent);
+  border-color: rgba(99, 179, 237, 0.4);
+  background: rgba(99, 179, 237, 0.06);
+}
+
+.api-copy-btn.is-copied {
+  color: #6ee7b7;
+  border-color: rgba(52, 211, 153, 0.4);
+}
+
+.api-endpoint-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.api-summary {
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.api-description {
+  font-size: 0.88rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin: 0 0 0.75rem;
+}
+
+.api-auth-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.25em 0.55em;
+  border-radius: var(--radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.api-auth-bot {
+  background: rgba(99, 179, 237, 0.12);
+  color: var(--accent);
+}
+
+.api-auth-webhook-token {
+  background: rgba(199, 146, 234, 0.12);
+  color: #c792ea;
+}
+
+.api-auth-none {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+
+.api-section {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.api-toggle {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  padding: 0.5rem 0;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.api-toggle:hover {
+  color: var(--accent);
+}
+
+.api-toggle::before {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+  margin-right: 0.5rem;
+  transition: transform 0.2s;
+  opacity: 0.7;
+}
+
+.api-toggle[aria-expanded='true']::before {
+  transform: rotate(90deg);
+}
+
+.api-toggle-content {
+  margin-top: 0.75rem;
+}
+</style>

package/core/apps/docs/src/components/ApiSchemaBlock.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="api-schema-block">
+    <div v-if="title" class="api-schema-title">{{ title }}</div>
+    <div v-if="fields?.length" class="api-schema-fields">
+      <div v-for="(field, i) in fields" :key="`${field.name}-${i}`" class="api-schema-row">
+        <code class="api-schema-name">{{ field.name }}</code>
+        <span v-if="field.required" class="api-schema-required">required</span>
+        <code class="api-schema-type">{{ field.type }}</code>
+        <span v-if="field.description" class="api-schema-desc">{{ field.description }}</span>
+      </div>
+    </div>
+    <div v-if="responseRef" class="api-schema-ref">
+      Returns: <code>{{ responseRef }}</code>
+    </div>
+    <div v-else-if="responseCode" class="api-schema-code">
+      Response: <code>{{ responseCode }} No Content</code>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ApiSchemaField } from '../data/apiEndpoints';
+
+defineProps<{
+  title?: string;
+  fields?: ApiSchemaField[];
+  responseRef?: string;
+  responseCode?: number;
+}>();
+</script>
+
+<style scoped>
+.api-schema-block {
+  font-size: 0.875rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.api-schema-title {
+  font-weight: 600;
+  color: var(--text-muted);
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.api-schema-fields {
+  padding: 0.25rem 0;
+}
+
+.api-schema-row {
+  display: grid;
+  grid-template-columns: minmax(140px, auto) auto minmax(100px, auto) 1fr;
+  gap: 0.75rem 1.25rem;
+  align-items: baseline;
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+}
+
+.api-schema-row:hover {
+  background: var(--bg-hover);
+}
+
+.api-schema-name {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  color: var(--ts-string);
+  font-size: 0.9em;
+}
+
+.api-schema-required {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.api-schema-type {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  color: var(--ts-type);
+  font-size: 0.85em;
+}
+
+.api-schema-desc {
+  color: var(--text-muted);
+  font-size: 0.85em;
+  line-height: 1.4;
+}
+
+.api-schema-ref,
+.api-schema-code {
+  padding: 0.6rem 1rem;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.api-schema-ref code,
+.api-schema-code code {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  color: var(--accent);
+}
+
+@media (max-width: 600px) {
+  .api-schema-row {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+  }
+
+  .api-schema-name {
+    grid-column: 1;
+  }
+
+  .api-schema-type {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .api-schema-required {
+    grid-column: 1;
+  }
+
+  .api-schema-desc {
+    grid-column: 1 / -1;
+  }
+}
+</style>

package/core/apps/docs/src/components/CodeBlock.vue

@@ -0,0 +1,177 @@
+<template>
+  <div ref="blockRef" class="code-block">
+    <div class="code-header">
+      <span v-if="title" class="code-title">{{ title }}</span>
+      <button type="button" class="copy-btn" :class="{ copied }" @click="copy">
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </button>
+    </div>
+    <pre><code
+      v-if="linkTypes && highlightedHtml"
+      :class="['code-with-links', `language-${lang}`]"
+      v-html="highlightedHtml"
+    ></code><code
+      v-else
+      ref="codeRef"
+      :class="`language-${lang}`"
+    >{{ normalizedCode() }}</code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import Prism from 'prismjs';
+import { useDocsStore } from '../stores/docs';
+
+const props = withDefaults(
+  defineProps<{
+    code: string;
+    language?: string;
+    title?: string;
+    linkTypes?: boolean;
+  }>(),
+  { language: 'javascript', linkTypes: false },
+);
+
+const store = useDocsStore();
+const lang = computed(() => props.language);
+const blockRef = ref<HTMLElement | null>(null);
+const codeRef = ref<HTMLElement | null>(null);
+const copied = ref(false);
+const highlightedHtml = ref('');
+
+function getKnownTypes(): { name: string; path: string }[] {
+  const doc = store.currentDoc;
+  if (!doc) return [];
+  const out: { name: string; path: string }[] = [];
+  for (const c of doc.classes ?? []) out.push({ name: c.name, path: `/docs/classes/${c.name}` });
+  for (const i of doc.interfaces ?? [])
+    out.push({ name: i.name, path: `/docs/typedefs/${i.name}` });
+  for (const e of doc.enums ?? []) out.push({ name: e.name, path: `/docs/typedefs/${e.name}` });
+  return out.sort((a, b) => b.name.length - a.name.length); // longer first to avoid partial matches
+}
+
+function addLinks(html: string): string {
+  const types = getKnownTypes();
+  let out = html;
+  const tokenClasses = ['class-name', 'constant', 'variable']; // class-name for Client/EmbedBuilder, constant for Events
+  for (const { name, path } of types) {
+    for (const tok of tokenClasses) {
+      const re = new RegExp(
+        `(<span class="[^"]*token[^"]*${escapeRegex(tok)}[^"]*"[^>]*)>${escapeRegex(name)}</span>`,
+        'g',
+      );
+      out = out.replace(re, `$1><a href="${path}" class="doc-link">${name}</a></span>`);
+    }
+  }
+  return out;
+}
+
+function escapeRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function dedent(code: string): string {
+  const lines = code.split('\n');
+  const nonEmpty = lines.filter((l) => l.trim().length > 0);
+  if (nonEmpty.length === 0) return code;
+  const minIndent = Math.min(
+    ...nonEmpty.map((l) => {
+      const m = l.match(/^(\s*)/);
+      return m ? m[1].length : 0;
+    }),
+  );
+  return lines
+    .map((l) => (l.length >= minIndent ? l.slice(minIndent) : l))
+    .join('\n')
+    .trim();
+}
+
+function normalizedCode(): string {
+  return dedent(props.code);
+}
+
+function highlight() {
+  nextTick(() => {
+    const code = normalizedCode();
+    const gram = Prism.languages[props.language === 'bash' ? 'bash' : 'javascript'];
+    if (props.linkTypes && gram) {
+      const html = Prism.highlight(code, gram, props.language);
+      highlightedHtml.value = store.currentDoc ? addLinks(html) : html;
+    } else {
+      highlightedHtml.value = '';
+      if (codeRef.value) Prism.highlightElement(codeRef.value);
+    }
+  });
+}
+
+onMounted(highlight);
+watch(() => [props.code, props.language, props.linkTypes], highlight);
+watch(() => store.currentDoc, highlight);
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(normalizedCode());
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 2000);
+  } catch {
+    // fallback
+  }
+}
+</script>
+
+<style scoped>
+.code-block {
+  position: relative;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 0.8rem;
+}
+
+.code-title {
+  color: var(--text-muted);
+}
+
+.copy-btn {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 0.25rem 0.6rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.copy-btn:hover {
+  color: var(--text-primary);
+  border-color: var(--accent);
+}
+
+.copy-btn.copied {
+  color: #6ee7b7;
+  border-color: #6ee7b7;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 1rem 1.25rem;
+  border: none;
+  border-radius: 0;
+}
+
+.code-block pre code {
+  background: transparent;
+  padding: 0;
+}
+</style>

package/core/apps/docs/src/components/CommunityCallout.vue

@@ -0,0 +1,90 @@
+<template>
+  <a
+    href="https://fluxer.gg/fluxer-js"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="community-callout"
+    :class="variant"
+    aria-label="Join our erin.js community">
+    <span class="community-text">
+      <strong>Join our erin.js community</strong>
+      <span v-if="variant === 'sidebar'" class="community-arrow"> →</span>
+      <span v-else class="community-external" aria-hidden="true"> ↗</span>
+    </span>
+  </a>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    variant?: 'sidebar' | 'hero';
+  }>(),
+  { variant: 'sidebar' },
+);
+</script>
+
+<style scoped>
+.community-callout {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.community-callout.sidebar {
+  margin: 0 var(--sidebar-padding-x) 1rem;
+  padding: 0.6rem 0.9rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--accent);
+  background: rgba(99, 179, 237, 0.12);
+  border: 1px solid rgba(99, 179, 237, 0.3);
+  border-radius: var(--radius-sm);
+}
+
+.community-callout.sidebar:hover {
+  background: rgba(99, 179, 237, 0.2);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.community-callout.hero {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--accent);
+  background: transparent;
+  border: 2px solid var(--accent);
+  border-radius: var(--radius);
+}
+
+.community-callout.hero:hover {
+  background: var(--accent);
+  color: var(--bg-primary);
+}
+
+.community-text {
+  line-height: 1;
+}
+
+.community-text strong {
+  font-weight: 600;
+}
+
+.community-arrow {
+  opacity: 0.9;
+}
+
+.community-external {
+  font-size: 0.85em;
+  opacity: 0.8;
+}
+</style>