Function renderPluginsHtml

website/src/scripts/pages/plugins-render.ts:59–100

(items: RenderablePlugin[])

}

export function renderPluginsHtml(items: RenderablePlugin[]): string {
  if (items.length === 0) {
    return renderEmptyStateHtml('No plugins found', 'Try different tags or clear the current filters');
  }

  return items
    .map((item) => {
      const isExternal = item.external === true;
      const metaTag = isExternal
        ? '<span class="resource-tag resource-tag-external">🔗 External</span>'
        : `<span class="resource-tag">${item.itemCount} items</span>`;
      const authorTag =
        isExternal && item.author?.name
          ? `<span class="resource-tag">by ${escapeHtml(item.author.name)}</span>`
          : '';
      const githubHref = isExternal
        ? escapeHtml(getExternalPluginUrl(item))
        : getGitHubUrl(item.path);
      const metaHtml = `
        ${metaTag}
        ${authorTag}
        ${item.tags?.slice(0, 4).map((tag) => `<span class="resource-tag">${escapeHtml(tag)}</span>`).join('') || ''}
        ${item.tags && item.tags.length > 4 ? `<span class="resource-tag">+${item.tags.length - 4} more</span>` : ''}
      `;

      const actionsHtml = `
        <a href="${githubHref}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()" title="${isExternal ? 'View repository' : 'View on GitHub'}">${isExternal ? 'Repository' : 'GitHub'}</a>
      `;

      return renderSharedCardHtml({
        title: item.name,
        description: item.description || 'No description',
        articleClassName: isExternal ? 'resource-item-external' : '',
        articleAttributes: {
          'data-path': item.path,
        },
        metaHtml,
        actionsHtml,
      });
    })
    .join('');
}