Merge pull request #14 from trueberryless-org/npm-packages

Add support for NPM packages and GitLab repositories

.changeset/lemon-ties-think.md

@@ -0,0 +1,24 @@
+---
+"starlight-plugin-show-latest-version": minor
+---
+
+Add version support for NPM and GitLab.
+
+⚠️ **BREAKING CHANGE:** The configuration interface changed.
+
+Please follow the steps below to use the plugin like before or read the [documentation](https://starlight-plugin-show-latest-version.trueberryless.org/configuration/#source) for the newly defined API.
+
+Change the removed `repo` configuration to the new [`source`](https://starlight-plugin-show-latest-version.trueberryless.org/configuration/#source) configuration object:
+
+```diff
+ // astro.config.ts
+ starlightPluginShowLatestVersion({
+-  repo: "${slug}",
++  source: {
++    type: "github",
++    slug: "${slug}",
++  },
+ }),
+```
+
+Note that you can now use `"npm"`, `"github"` or `"gitlab"` as the source type. This means that the plugin can be better customised to where you publish and release your packages.

.changeset/small-boxes-hunt.md

@@ -0,0 +1,5 @@
+---
+"starlight-plugin-show-latest-version-docs": minor
+---
+
+Update documentation for new `source` configuration

docs/astro.config.ts

@@ -20,7 +20,10 @@ export default defineConfig({
       plugins: [
         starlightLinksValidator(),
         starlightPluginShowLatestVersion({
-          repo: "trueberryless-org/starlight-plugin-show-latest-version",
+          source: {
+            type: "github",
+            slug: "trueberryless-org/starlight-plugin-show-latest-version",
+          },
         }),
         starlightPluginsDocsComponents({
           pluginName: "starlight-plugin-show-latest-version",

docs/src/content/docs/configuration.mdx

@@ -4,6 +4,7 @@ description: An overview of all the configuration options supported by the Starl
 ---
 
 import { Badge } from "@astrojs/starlight/components";
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 The Starlight Plugin Show Latest Version plugin can be configured inside the `astro.config.mjs` configuration file of your project:
 
@@ -31,25 +32,94 @@ export default defineConfig({
 
 The Starlight Plugin Show Latest Version plugin accepts the following configuration options:
 
-### `repo`
+### `source`
 
-**Type:** `string`  
+**Type:** `{ type: "npm" | "github" | "gitlab", slug: string }`  
 **Required**
 
-Provide the repository slug where your Starlight plugin is released.  
-This slug must follow the syntax:
+Provide the source where your package is released. 
+This is necessary to fetch the latest version of your package.
 
-```ansi
-{owner}/{repo}
-```
+<div id="repo">
+:::note
+Please note that the `repo` configuration has been <span style="color: var(--sl-color-red)">removed</span> in favour of the new `source` configuration object. To upgrade the plugin, please follow the [upgrade guide](https://github.com/trueberryless-org/starlight-plugin-show-latest-version/releases/tag/starlight-plugin-show-latest-version%400.3.0).
+:::
+</div>
 
-Here is an example for [this exact repo](https://github.com/trueberryless-org/starlight-plugin-show-latest-version):
+#### `type`
+
+**Type:** `"npm" | "github" | "gitlab"`  
+**Default:** `"npm"`
+
+The type of the source where your package is released. 
+You can choose between `"npm"`, `"github"` or `"gitlab"`. This allows you to better customise the plugin to where you publish and release your packages.
+
+#### `slug`
+
+**Type:** `string`  
+**Required**
+
+The slug of the source where your package is released.
+Depending on the [source `type`](#type), the slug must follow the syntax:
+
+<Tabs>
+  <TabItem label="NPM">
+
+  ```ansi
+  {package}
+  ```
+
+  Here is an example for [this exact package](https://www.npmjs.com/package/starlight-plugin-show-latest-version):
+
+  ```ts
+  starlightPluginShowLatestVersion({
+    source: {
+      type: "npm",
+      slug: "starlight-plugin-show-latest-version",
+    },
+  }),
+  ```
+
+
+  </TabItem>
+  <TabItem label="GitHub">
+
+  ```ansi
+  {owner}/{repo}
+  ```
+
+  Here is an example for [this exact repo](https://github.com/trueberryless-org/starlight-plugin-show-latest-version):
+
+  ```ts
+  starlightPluginShowLatestVersion({
+    source: {
+      type: "github",
+      slug: "trueberryless-org/starlight-plugin-show-latest-version",
+    },
+  }),
+  ```
+
+  </TabItem>
+  <TabItem label="GitLab">
+
+  ```ansi
+  {owner}/{repo}
+  ```
+
+  Here is an example for [the GitLab repo](https://gitlab.com/gitlab-org/gitlab):
+
+  ```ts
+  starlightPluginShowLatestVersion({
+    source: {
+      type: "gitlab",
+      slug: "gitlab-org/gitlab",
+    },
+  }),
+  ```
+
+  </TabItem>
+</Tabs>
 
-```ts
-starlightPluginShowLatestVersion({
-    repo: "trueberryless-org/starlight-plugin-show-latest-version",
-}),
-```
 
 ### `badge`
 

packages/starlight-plugin-show-latest-version/components/VersionBadge.astro

@@ -5,18 +5,21 @@
 
 <script>
   import fetchVersion from '../libs/utils';
+  import { releasePageUrls } from "../libs/urlBuilder";
   import pluginConfig from 'virtual:starlight-plugin-show-latest-version-config';
 
   (async () => {
     let version = await fetchVersion(pluginConfig);
+    const sourceUrl = releasePageUrls[pluginConfig.source.type](pluginConfig.source.slug);
+    console.log("sourceUrl", sourceUrl);
 
     const container = document.querySelector('#starlight-plugin-show-latest-version');
 
     if (version.versionAvailable) {
       console.log("got version");
       if (container) {
         container.innerHTML = `
-          <a href="https://github.com/${pluginConfig.repo}/releases" id="starlight-plugin-show-latest-version-link">
+          <a href="${sourceUrl}" id="starlight-plugin-show-latest-version-link">
             <span class="sl-badge ${pluginConfig.badge.variant} ${pluginConfig.badge.size} starlight-plugin-show-latest-version-badge">${version.version}</span>
           </a>
         `;

packages/starlight-plugin-show-latest-version/libs/config.ts

@@ -2,7 +2,10 @@ import { AstroError } from "astro/errors";
 import { z } from "astro/zod";
 
 const configSchema = z.object({
-  repo: z.string(),
+  source: z.object({
+    type: z.enum(["github", "gitlab", "npm"]).default("npm"),
+    slug: z.string().min(1, "Slug cannot be empty"),
+  }),
   badge: z
     .object({
       variant: z

packages/starlight-plugin-show-latest-version/libs/urlBuilder.ts

@@ -0,0 +1,27 @@
+export const releasePageUrls: Record<
+  "github" | "gitlab" | "npm",
+  (slug: string) => string
+> = {
+  github: (slug) => `https://github.com/${slug}/releases`,
+  gitlab: (slug) => `https://gitlab.com/${slug}/-/releases`,
+  npm: (slug) => `https://www.npmjs.com/package/${slug}?activeTab=versions`,
+};
+
+export const latestReleaseApis: Record<
+  "github" | "gitlab" | "npm",
+  (slug: string) => string
+> = {
+  github: (slug) => `https://api.github.com/repos/${slug}/releases/latest`,
+  gitlab: (slug) =>
+    `https://gitlab.com/api/v4/projects/${encodeURIComponent(slug)}/releases`,
+  npm: (slug) => `https://registry.npmjs.org/${slug}/latest`,
+};
+
+export const extractVersion: Record<
+  "github" | "gitlab" | "npm",
+  (data: any) => string | null
+> = {
+  github: (data) => data?.tag_name || null,
+  gitlab: (data) => data?.[0]?.tag_name || null,
+  npm: (data) => data?.version || null,
+};

packages/starlight-plugin-show-latest-version/libs/utils.ts

@@ -1,12 +1,12 @@
 import { SEMVER_PATTERN } from "../consts/semantic.version.pattern";
 import type { StarlightPluginShowLatestVersionConfig } from "./config";
 import type { StarlightPluginShowLatestVersionContext } from "./types";
+import { latestReleaseApis, extractVersion } from "../libs/urlBuilder";
 
 export default async function fetchVersion(
   config: StarlightPluginShowLatestVersionConfig
 ): Promise<StarlightPluginShowLatestVersionContext> {
-  const repo = config.repo;
-  const apiUrl = `https://api.github.com/repos/${repo}/releases/latest`;
+  const apiUrl = latestReleaseApis[config.source.type](config.source.slug);
 
   try {
     const data = await fetch(apiUrl).then((response) => {
@@ -15,7 +15,7 @@ export default async function fetchVersion(
       return response.json();
     });
 
-    const tagName = data.tag_name || "";
+    const tagName = extractVersion[config.source.type](data);
     if (!tagName) {
       return { versionAvailable: false }; // No release available
     }
@@ -33,7 +33,7 @@ export default async function fetchVersion(
     const prerelease = match.groups?.prerelease;
     const isPrereleaseVersion = !!prerelease;
     const version = isPrereleaseVersion
-      ? `${versionWithoutPrefix}-${prerelease}`
+      ? `v${versionWithoutPrefix}-${prerelease}`
       : `v${versionWithoutPrefix}`;
 
     const prefixMatch = tagName.match(/^(.*?)v?[0-9]/);