Blog Content Renderer

import { ResytechApi, ResytechBlogRenderer } from 'resytech.js';

const api = new ResytechApi();
const renderer = new ResytechBlogRenderer();

// After initialization, the blog controller gets the location GUID automatically
await api.initialization.initialize({ identifier: 'my-session' });

// Fetch and render a blog post
const response = await api.blog.getPost('my-post-slug');

if (response.success) {
  const container = document.getElementById('blog-content');
  renderer.render(container, response.post.content);
}

const renderer = new ResytechBlogRenderer(config?: BlogRendererConfig);

const renderer = new ResytechBlogRenderer({
  classPrefix: 'my-blog',
  injectStyles: true,
  customCss: '.my-blog-container { max-width: 960px; }',
  sanitize: false,
});

render(container: HTMLElement, content: string): void

const container = document.getElementById('blog-content');
renderer.render(container, post.content);

toHtml(content: string): string

const html = renderer.toHtml(post.content);
// Use the HTML string however you need
element.innerHTML = html;

static toHtml(content: string, config?: BlogRendererConfig): string

const html = ResytechBlogRenderer.toHtml(post.content, {
  classPrefix: 'my-blog',
});

getStyles(): string

const renderer = new ResytechBlogRenderer({ injectStyles: false });
const css = renderer.getStyles();

// Inject into a shadow root
const style = document.createElement('style');
style.textContent = css;
shadowRoot.appendChild(style);

{
  "version": 2,
  "blocks": [
    { "id": "abc123", "type": "heading", "props": { "text": "Hello", "level": "h2" } },
    { "id": "def456", "type": "text", "props": { "content": "<p>Some text</p>" } }
  ]
}

interface AccordionItem {
  question: string;  // Trigger text
  answer: string;    // Panel content (HTML)
}

<div class="rsy-blog-block rsy-blog-heading rsy-block-heading"
     data-block-type="heading"
     data-block-id="abc123">
  <h2>...</h2>
</div>

const renderer = new ResytechBlogRenderer({
  customCss: `
    .rsy-blog-container { max-width: 960px; }
    .rsy-blog-heading h2 { color: #1a365d; }
    .rsy-blog-alert-info { background: #eef6ff; }
  `,
});

const renderer = new ResytechBlogRenderer({
  classPrefix: 'company-blog',
});

const renderer = new ResytechBlogRenderer({
  injectStyles: false,
});

const baseCss = renderer.getStyles();
// Modify and inject as needed

[data-block-type="heading"] { margin-top: 3rem; }
[data-block-type="image"] { margin: 2rem 0; }
[data-block-type="alert"] { border-radius: 8px; }

import { ResytechApi, ResytechBlogRenderer } from 'resytech.js';

const api = new ResytechApi({ debug: true });
const renderer = new ResytechBlogRenderer();

async function loadPost(slug: string) {
  // Initialize to get auth token and location GUID
  const init = await api.initialization.initialize({ identifier: 'blog-session' });
  if (!init.success) {
    console.error('Initialization failed:', init.message);
    return;
  }

  // Fetch the post
  const response = await api.blog.getPost(slug);
  if (!response.success) {
    console.error('Failed to load post:', response.message);
    return;
  }

  const post = response.post;

  // Render into the page
  document.querySelector('h1').textContent = post.title;
  document.querySelector('.author').textContent = post.author;
  document.querySelector('.date').textContent =
    new Date(post.publishedAt).toLocaleDateString();

  if (post.featuredImageUri) {
    const img = document.querySelector('.featured-image') as HTMLImageElement;
    img.src = post.featuredImageUri;
    img.alt = post.title;
  }

  const container = document.getElementById('blog-content');
  renderer.render(container, post.content);
}

loadPost('my-first-blog-post');

async function loadBlogListing(page = 1) {
  const response = await api.blog.getPosts(page, 10);
  if (!response.success) return;

  const listEl = document.getElementById('blog-list');
  listEl.innerHTML = response.posts.map(post => `
    <article>
      <img src="${post.featuredImageThumbnailUri}" alt="${post.title}" />
      <h2><a href="/blog/${post.slug}">${post.title}</a></h2>
      <p>${post.excerpt}</p>
      <span>${post.author} &middot; ${new Date(post.publishedAt).toLocaleDateString()}</span>
      <div class="categories">
        ${post.categories.map(c => `<span class="tag">${c.name}</span>`).join('')}
      </div>
    </article>
  `).join('');

  // Pagination
  const totalPages = Math.ceil(response.totalCount / response.pageSize);
  document.getElementById('page-info').textContent =
    `Page ${response.page} of ${totalPages}`;
}

async function loadCategories() {
  const response = await api.blog.getCategories();
  if (!response.success) return;

  const nav = document.getElementById('category-nav');
  nav.innerHTML = response.categories.map(cat => `
    <button onclick="filterByCategory('${cat.slug}')">${cat.name}</button>
  `).join('');
}

async function filterByCategory(categorySlug: string, page = 1) {
  const response = await api.blog.getPostsByCategory(categorySlug, page, 10);
  if (!response.success) return;

  // Render post list (same as above)
}

import { ResytechBlogRenderer } from 'resytech.js';

// In your SSR handler
const html = ResytechBlogRenderer.toHtml(post.content);
const css = new ResytechBlogRenderer().getStyles();

const page = `
  <html>
    <head><style>${css}</style></head>
    <body>
      <div class="rsy-blog-container">${html}</div>
    </body>
  </html>
`;