Code Examples

// app/blog/page.tsx
import { SimplyStack } from '@simplystack/sdk';

const client = new SimplyStack({
  apiKey: process.env.SIMPLYSTACK_API_KEY!
});

export default async function BlogPage() {
  const { data: posts, pagination } = await client.content.list({
    type: 'blog',
    status: 'published',
    limit: 10,
    sort_by: 'published_at',
    sort_order: 'desc'
  });

  return (
    <div className="blog-grid">
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <a href={`/blog/${post.slug}`}>Read more</a>
        </article>
      ))}
    </div>
  );
}

// app/blog/[slug]/page.tsx
import { SimplyStack } from '@simplystack/sdk';
import { renderEditorJSBlock } from '@/lib/editor-renderer';

const client = new SimplyStack({
  apiKey: process.env.SIMPLYSTACK_API_KEY!
});

export default async function BlogPost({ params }) {
  const { data: post } = await client.content.get(params.slug, {
    type: 'blog',
    include_content: true
  });

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{new Date(post.published_at).toLocaleDateString()}</time>
      <div className="content">
        {post.content.blocks.map((block, i) => (
          <div key={i}>{renderEditorJSBlock(block)}</div>
        ))}
      </div>
    </article>
  );
}

import { SimplyStack } from '@simplystack/sdk';
import { useState } from 'react';

function FileUploader() {
  const [progress, setProgress] = useState(0);
  const client = new SimplyStack({ apiKey: 'your-api-key' });

  const handleUpload = async (file: File) => {
    try {
      const result = await client.storage.upload(file, {
        onProgress: (percent) => setProgress(percent)
      });
      
      console.log('File uploaded:', result.url);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

  return (
    <div>
      <input
        type="file"
        onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
      />
      {progress > 0 && <progress value={progress} max={100} />}
    </div>
  );
}

import { SimplyStack } from '@simplystack/sdk';
import { useState, useEffect } from 'react';
import { useDebounce } from '@/hooks/useDebounce';

function SearchBar() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const debouncedQuery = useDebounce(query, 300);
  const client = new SimplyStack({ apiKey: 'your-api-key' });

  useEffect(() => {
    if (debouncedQuery.length < 3) {
      setResults([]);
      return;
    }

    const search = async () => {
      const { data } = await client.content.list({
        query: debouncedQuery,
        limit: 10
      });
      setResults(data);
    };

    search();
  }, [debouncedQuery]);

  return (
    <div>
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map(result => (
          <li key={result.id}>
            <a href={`/docs/${result.slug}`}>{result.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { SimplyStack } from '@simplystack/sdk';

const client = new SimplyStack({ apiKey: 'your-api-key' });

async function sendWelcomeEmail(user: { email: string; name: string }) {
  const result = await client.emails.send({
    to: user.email,
    subject: `Welcome to Our App, ${user.name}!`,
    html: `
      <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;">
        <h1>Welcome, ${user.name}!</h1>
        <p>Thanks for signing up. We're excited to have you on board.</p>
        <a href="https://yourapp.com/get-started" style="display: inline-block; padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">Get Started</a>
      </div>
    `
  });

  console.log('Email sent:', result.id);
}

import { SimplyStack } from '@simplystack/sdk';

const client = new SimplyStack({ apiKey: 'your-api-key' });

async function generateDocsNav() {
  const { data: docs } = await client.content.list({
    type: 'docs',
    status: 'published',
    sort_by: 'sidebar_position',
    sort_order: 'asc',
    limit: 100
  });

  // Group by category
  const nav = docs.reduce((acc, doc) => {
    const category = doc.category || 'General';
    if (!acc[category]) {
      acc[category] = [];
    }
    acc[category].push({
      title: doc.nav_title || doc.title,
      slug: doc.slug,
      position: doc.sidebar_position
    });
    return acc;
  }, {});

  return nav;
}

// Usage in component
export default async function DocsNav() {
  const nav = await generateDocsNav();

  return (
    <nav>
      {Object.entries(nav).map(([category, items]) => (
        <div key={category}>
          <h3>{category}</h3>
          <ul>
            {items.map(item => (
              <li key={item.slug}>
                <a href={`/docs/${item.slug}`}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </nav>
  );
}