Publish to a website built with code

GET https://rankai.ai/api/v1/{projectId}/articles?page=[page-num]&limit=[limit]

{
  "success": true,
  "data": [
    {
      "id": "article-id-1",
      "slug": "article-slug-1",
      "title": "Article Title",
      "description": "Article description",
      "publishedDate": "2025-01-15T10:00:00Z",
      "featuredImageUrl": "https://example.com/image.jpg"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 25,
    "totalPages": 3
  }
}

// JavaScript/Node.js example
const response = await fetch('https://rankai.ai/api/v1/{projectId}/articles?page=1&limit=10');
const data = await response.json();

if (data.success) {
  data.data.forEach(article => {
    console.log(article.title);
  });
}

GET https://rankai.ai/api/v1/{projectId}/articles/{slug}?format=[html|markdown]&publishedUrl=[your-url]

{
  "success": true,
  "data": {
    "id": "article-id",
    "title": "Complete Article Title",
    "description": "Article description",
    "publishedDate": "2025-01-15T10:00:00Z",
    "content": "<div>Full article content in HTML or Markdown...</div>",
    "featuredImageUrl": "https://example.com/image.jpg"
  }
}

// JavaScript/Node.js example
const publishedUrl = encodeURIComponent('https://yourdomain.com/blog/my-article-slug');
const response = await fetch(
  `https://rankai.ai/api/v1/{projectId}/articles/my-article-slug?format=html&publishedUrl=${publishedUrl}`
);
const data = await response.json();

if (data.success) {
  console.log(data.data.title);
  console.log(data.data.content); // Full HTML content
}

// Server Component Example (Next.js 13+)
async function fetchArticles(projectId: string, page: number = 1, limit: number = 10) {
  const res = await fetch(
    `https://rankai.ai/api/v1/${projectId}/articles?page=${page}&limit=${limit}`,
    {
      next: { revalidate: 86400 } // Revalidate every 24 hours (86400 seconds), change this based on your need
    }
  );

  if (!res.ok) {
    throw new Error('Failed to fetch articles');
  }

  const response = await res.json();
  return response;
}

export default async function ArticleList({
  projectId,
  searchParams
}: {
  projectId: string;
  searchParams: { page?: string };
}) {
  const currentPage = parseInt(searchParams.page || '1', 10);
  const response = await fetchArticles(projectId, currentPage, 10);
  const articlesToDisplay = response.data;
  const pagination = response.pagination;

  return (
    <div>
      {articlesToDisplay.map((article: any) => (
        <article key={article.slug || article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
          {article.featuredImageUrl && (
            <img src={article.featuredImageUrl} alt={article.title} />
          )}
          <time>{new Date(article.publishedDate).toLocaleDateString()}</time>
        </article>
      ))}
    </div>
  );
}

// Single Article Server Component Example (Next.js 13+)
async function fetchArticle(projectId: string, articleId: string, publishedUrl: string) {
  const baseUrl = `https://rankai.ai/api/v1/${projectId}/articles/${articleId}`;
  const url = publishedUrl
    ? `${baseUrl}?publishedUrl=${encodeURIComponent(publishedUrl)}`
    : baseUrl;

  const res = await fetch(
    url,
    {
      next: { revalidate: 86400 } // Revalidate every 24 hours (86400 seconds), change this based on your need
    }
  );

  if (!res.ok) {
    throw new Error('Failed to fetch article');
  }

  const response = await res.json();
  return response.data;
}

export async function generateMetadata({
  params
}: {
  params: { articleId: string };
}) {
  const publishedUrl = `https://yourdomain.com/articles/${params.articleId}`;
  const article = await fetchArticle('YOUR_PROJECT_ID', params.articleId, publishedUrl);
  const imageUrl = article.featuredImageUrl || '';

  return {
    title: article.h1Title || article.title,
    description: article.description,
    openGraph: {
      title: article.h1Title || article.title,
      description: article.description,
      url: `/articles/${params.articleId}`,
      images: imageUrl
        ? [{ url: imageUrl, width: 1200, height: 660 }]
        : [],
      locale: 'en_US',
      type: 'article',
    },
  };
}

export default async function ArticlePage({
  params
}: {
  params: { articleId: string };
}) {
  const publishedUrl = `https://yourdomain.com/articles/${params.articleId}`;
  const article = await fetchArticle('YOUR_PROJECT_ID', params.articleId, publishedUrl);

  return (
    <div dangerouslySetInnerHTML={{ __html: article.content }} />
  );
}