@xrow/docusaurus-changelog 4.158.1 → 4.159.0

package/README.md

@@ -6,4 +6,11 @@ Render a GitLab releases Atom feed in Docusaurus MDX.
 <Changelog url="https://gitlab.com/group/project/-/releases.atom">Changelog</Changelog>
 ```
 
+The CI Tools Docusaurus build image registers the component in Docusaurus
+`MDXComponents` automatically when the site does not provide a custom
+`src/theme/MDXComponents/index.js`.
+
+The feed is loaded in the browser, so the static Docusaurus build remains stable
+even when the release feed is temporarily unavailable.
+
 The package is published to npmjs.com from ci-tools semver tag pipelines when `NPM_TOKEN` is configured.

package/index.d.ts

@@ -0,0 +1,18 @@
+import type {ReactNode} from 'react';
+
+export interface ReleaseEntry {
+  title: string;
+  href: string;
+  updated: string;
+  summary: string;
+}
+
+export interface ChangelogProps {
+  url: string;
+  children?: ReactNode;
+  limit?: number;
+}
+
+export function releasesFromAtomDocument(document: Document): ReleaseEntry[];
+
+export default function Changelog(props: ChangelogProps): ReactNode;

package/index.js

@@ -0,0 +1,148 @@
+import React, {useEffect, useState} from 'react';
+
+function elementText(parent, tagName) {
+  const element = parent.getElementsByTagName(tagName)[0];
+  return element?.textContent?.trim() ?? '';
+}
+
+function releaseLink(entry) {
+  const links = Array.from(entry.getElementsByTagName('link'));
+  const alternate = links.find((link) => {
+    const rel = link.getAttribute('rel');
+    return !rel || rel === 'alternate';
+  });
+
+  return alternate?.getAttribute('href') ?? links[0]?.getAttribute('href') ?? '';
+}
+
+export function releasesFromAtomDocument(document) {
+  return Array.from(document.getElementsByTagName('entry')).map((entry) => ({
+    title: elementText(entry, 'title') || 'Untitled release',
+    href: releaseLink(entry),
+    updated: elementText(entry, 'updated') || elementText(entry, 'published'),
+    summary: elementText(entry, 'summary') || elementText(entry, 'content'),
+  }));
+}
+
+function parseAtomFeed(text) {
+  if (typeof DOMParser === 'undefined') {
+    throw new Error('DOMParser is not available in this environment.');
+  }
+
+  const document = new DOMParser().parseFromString(text, 'application/xml');
+  const parserError = document.getElementsByTagName('parsererror')[0];
+  if (parserError) {
+    throw new Error(parserError.textContent || 'Could not parse Atom feed.');
+  }
+
+  return releasesFromAtomDocument(document);
+}
+
+function formatDate(value) {
+  if (!value) {
+    return '';
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  }).format(date);
+}
+
+export default function Changelog({url, children, limit = 10}) {
+  const [state, setState] = useState({
+    status: 'idle',
+    releases: [],
+    error: '',
+  });
+
+  useEffect(() => {
+    if (!url) {
+      setState({status: 'error', releases: [], error: 'A release feed URL is required.'});
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    setState({status: 'loading', releases: [], error: ''});
+
+    fetch(url, {
+      headers: {
+        Accept: 'application/atom+xml, application/xml, text/xml',
+      },
+      signal: controller.signal,
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Release feed returned HTTP ${response.status}.`);
+        }
+        return response.text();
+      })
+      .then((text) => {
+        setState({
+          status: 'ready',
+          releases: parseAtomFeed(text).slice(0, limit),
+          error: '',
+        });
+      })
+      .catch((error) => {
+        if (error.name === 'AbortError') {
+          return;
+        }
+        setState({status: 'error', releases: [], error: error.message});
+      });
+
+    return () => controller.abort();
+  }, [url, limit]);
+
+  return React.createElement(
+    'section',
+    {className: 'ci-tools-changelog', 'data-feed-url': url},
+    children ? React.createElement('h2', null, children) : null,
+    state.status === 'loading' || state.status === 'idle'
+      ? React.createElement('p', null, 'Loading changelog...')
+      : null,
+    state.status === 'error'
+      ? React.createElement(
+          'p',
+          {role: 'status'},
+          'Changelog is unavailable.',
+          state.error ? ` ${state.error}` : '',
+        )
+      : null,
+    state.status === 'ready' && state.releases.length === 0
+      ? React.createElement('p', null, 'No releases found.')
+      : null,
+    state.status === 'ready' && state.releases.length > 0
+      ? React.createElement(
+          'ol',
+          {className: 'ci-tools-changelog__list'},
+          state.releases.map((release) =>
+            React.createElement(
+              'li',
+              {key: release.href || release.title, className: 'ci-tools-changelog__item'},
+              React.createElement(
+                'a',
+                {href: release.href || url},
+                release.title,
+              ),
+              release.updated
+                ? React.createElement(
+                    'time',
+                    {dateTime: release.updated},
+                    formatDate(release.updated),
+                  )
+                : null,
+              release.summary
+                ? React.createElement('p', null, release.summary)
+                : null,
+            ),
+          ),
+        )
+      : null,
+  );
+}

package/package.json

@@ -1,16 +1,31 @@
 {
   "name": "@xrow/docusaurus-changelog",
-  "version": "4.158.1",
+  "version": "4.159.0",
   "description": "Docusaurus MDX changelog component for GitLab release Atom feeds.",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "scripts": {
+    "test": "node --test"
+  },
   "files": [
-    "dist"
+    "index.js",
+    "index.d.ts"
   ],
   "peerDependencies": {
     "react": ">=18"
   },
+  "devDependencies": {
+    "@xmldom/xmldom": "0.9.10",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
   "license": "MIT"
 }