@xrow/docusaurus-changelog 4.172.1 → 4.174.0

package/README.md

@@ -20,4 +20,8 @@ The CI Tools Docusaurus build image registers the component in Docusaurus
 The feed is loaded in the browser, so the static Docusaurus build remains stable
 even when the release feed is temporarily unavailable.
 
+GitLab API descriptions produced by semantic-release are displayed as release
+cards with their full categorized notes and commit links. Atom feeds fall back to
+their summary because they do not expose the structured GitLab description.
+
 The package is published to npmjs.com from ci-tools semver tag pipelines when `NPM_TOKEN` is configured.

package/index.d.ts

@@ -5,6 +5,15 @@ export interface ReleaseEntry {
   href: string;
   updated: string;
   summary: string;
+  description: string;
+}
+
+export interface ReleaseNotes {
+  intro: string[];
+  sections: Array<{
+    title: string;
+    items: string[];
+  }>;
 }
 
 export interface ChangelogProps {
@@ -17,4 +26,6 @@ export function releasesFromAtomDocument(document: Document): ReleaseEntry[];
 
 export function releasesFromGitLabApiResponse(releases: unknown[]): ReleaseEntry[];
 
+export function releaseNotesFromMarkdown(value: string, releaseTitle?: string): ReleaseNotes;
+
 export default function Changelog(props: ChangelogProps): ReactNode;

package/index.js

@@ -21,6 +21,7 @@ export function releasesFromAtomDocument(document) {
     href: releaseLink(entry),
     updated: elementText(entry, 'updated') || elementText(entry, 'published'),
     summary: elementText(entry, 'summary') || elementText(entry, 'content'),
+    description: '',
   }));
 }
 
@@ -45,9 +46,111 @@ export function releasesFromGitLabApiResponse(releases) {
     href: release?._links?.self || release?.assets?.links?.[0]?.url || '',
     updated: release.released_at || release.created_at || '',
     summary: plainSummary(release.description),
+    description: release.description || '',
   }));
 }
 
+function inlineMarkdownText(value) {
+  return (value ?? '')
+    .replace(/!\[([^\]]*)]\([^)]+\)/g, '$1')
+    .replace(/\[([^\]]+)]\([^)]+\)/g, '$1')
+    .replace(/[*_`~]/g, '');
+}
+
+function plainInlineMarkdown(value) {
+  return inlineMarkdownText(value).trim();
+}
+
+export function releaseNotesFromMarkdown(value, releaseTitle = '') {
+  const intro = [];
+  const sections = [];
+  let currentSection;
+
+  for (const rawLine of (value ?? '').split('\n')) {
+    const line = rawLine.trim();
+    if (!line || /^-{3,}$/.test(line)) {
+      continue;
+    }
+
+    const heading = line.match(/^#{1,6}\s+(.+)$/);
+    if (heading) {
+      const title = plainInlineMarkdown(heading[1]);
+      if (sections.length === 0 && intro.length === 0 && releaseTitle && title.startsWith(releaseTitle)) {
+        continue;
+      }
+      currentSection = {title, items: []};
+      sections.push(currentSection);
+      continue;
+    }
+
+    const listItem = line.match(/^(?:[-*+] |\d+[.)] )(.+)$/);
+    const item = listItem?.[1] ?? line;
+    if (currentSection) {
+      currentSection.items.push(item);
+    } else {
+      intro.push(item);
+    }
+  }
+
+  return {
+    intro,
+    sections: sections.filter((section) => section.title || section.items.length > 0),
+  };
+}
+
+function inlineMarkdown(value) {
+  const nodes = [];
+  const linkPattern = /\[([^\]]+)]\((https?:\/\/[^)\s]+)\)/g;
+  let cursor = 0;
+  let match;
+
+  while ((match = linkPattern.exec(value)) !== null) {
+    if (match.index > cursor) {
+      nodes.push(inlineMarkdownText(value.slice(cursor, match.index)));
+    }
+    nodes.push(React.createElement('a', {href: match[2], key: `${match.index}-${match[2]}`}, match[1]));
+    cursor = match.index + match[0].length;
+  }
+
+  if (cursor < value.length) {
+    nodes.push(inlineMarkdownText(value.slice(cursor)));
+  }
+
+  return nodes;
+}
+
+function ReleaseNotes({description, releaseTitle, summary}) {
+  const notes = releaseNotesFromMarkdown(description, releaseTitle);
+
+  if (notes.intro.length === 0 && notes.sections.length === 0) {
+    return summary ? React.createElement('p', null, summary) : null;
+  }
+
+  return React.createElement(
+    'div',
+    {className: 'ci-tools-changelog__notes'},
+    notes.intro.map((line, index) =>
+      React.createElement('p', {key: `intro-${index}`}, inlineMarkdown(line)),
+    ),
+    notes.sections.map((section, sectionIndex) =>
+      React.createElement(
+        'section',
+        {className: 'ci-tools-changelog__section', key: `${section.title}-${sectionIndex}`},
+        React.createElement('h4', null, section.title),
+        section.items.length > 0
+          ? React.createElement(
+              'ul',
+              null,
+              section.items.map((item, itemIndex) =>
+                React.createElement('li', {key: `${itemIndex}-${item}`}, inlineMarkdown(item)),
+              ),
+            )
+          : null,
+      ),
+    ),
+  );
+}
+
 function parseAtomFeed(text) {
   if (typeof DOMParser === 'undefined') {
     throw new Error('DOMParser is not available in this environment.');
@@ -148,26 +251,59 @@ export default function Changelog({url, children, limit = 10}) {
     state.status === 'ready' && state.releases.length > 0
       ? React.createElement(
           'ol',
-          {className: 'ci-tools-changelog__list'},
+          {
+            className: 'ci-tools-changelog__list',
+            style: {display: 'grid', gap: '1.5rem', listStyle: 'none', padding: 0},
+          },
           state.releases.map((release) =>
             React.createElement(
               'li',
-              {key: release.href || release.title, className: 'ci-tools-changelog__item'},
+              {
+                key: release.href || release.title,
+                className: 'ci-tools-changelog__item',
+                style: {
+                  border: '1px solid var(--ifm-color-emphasis-300, #d0d7de)',
+                  borderRadius: 'var(--ifm-card-border-radius, 0.5rem)',
+                  padding: '1.25rem 1.5rem',
+                },
+              },
               React.createElement(
-                'a',
-                {href: release.href || url},
-                release.title,
+                'article',
+                null,
+                React.createElement(
+                  'header',
+                  {
+                    style: {
+                      alignItems: 'baseline',
+                      display: 'flex',
+                      flexWrap: 'wrap',
+                      gap: '0.5rem 1rem',
+                      justifyContent: 'space-between',
+                    },
+                  },
+                  React.createElement(
+                    'h3',
+                    {style: {marginBottom: '0.5rem'}},
+                    React.createElement(
+                      'a',
+                      {href: release.href || url},
+                      release.title,
+                    ),
+                  ),
+                  release.updated
+                    ? React.createElement(
+                        'time',
+                        {dateTime: release.updated},
+                        formatDate(release.updated),
+                      )
+                    : null,
+                ),
+                React.createElement(ReleaseNotes, {
+                  description: release.description,
+                  releaseTitle: release.title,
+                  summary: release.summary,
+                }),
               ),
-              release.updated
-                ? React.createElement(
-                    'time',
-                    {dateTime: release.updated},
-                    formatDate(release.updated),
-                  )
-                : null,
-              release.summary
-                ? React.createElement('p', null, release.summary)
-                : null,
             ),
           ),
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrow/docusaurus-changelog",
-  "version": "4.172.1",
+  "version": "4.174.0",
   "description": "Docusaurus MDX changelog component for GitLab release Atom feeds.",
   "type": "module",
   "main": "index.js",