starlight-package-managers 0.2.0 → 0.4.0

package/PackageManagers.astro

@@ -1,30 +1,48 @@
 ---
-import { Tabs, TabItem } from '@astrojs/starlight/components'
-import { Code } from 'astro/components'
-
-import { type CommandType, getCommand, type CommandOptions, getSupportedPkgManagers, type PackageManager } from './pkg'
+import { Code, Tabs, TabItem } from '@astrojs/starlight/components'
+import type { ComponentProps } from 'astro/types'
+
+import {
+  type CommandOptions,
+  type CommandType,
+  getCommand,
+  getSupportedPkgManagers,
+  type PackageManager,
+  getIcon,
+} from './pkg'
 
 export type PackageManagersProps = Props
 
 interface Props extends CommandOptions {
+  frame?: 'none' | 'terminal'
+  icons?: boolean
   pkg?: string | undefined
   pkgManagers?: PackageManager[]
+  title?: string | undefined
   type?: CommandType
 }
 
-const { pkg, pkgManagers, type = 'add', ...options } = Astro.props
+const { frame = 'terminal', icons = true, pkg, pkgManagers, title = undefined, type = 'add', ...options } = Astro.props
 const singlePkgManager = pkgManagers?.length === 1 ? pkgManagers[0] : undefined
+const ecFrame = frame === 'terminal' ? 'terminal' : 'code'
+
+function getTabItemProps(pkgManager: PackageManager) {
+  const props: ComponentProps<typeof TabItem> = { label: pkgManager }
+  const icon = getIcon(pkgManager) as ComponentProps<typeof TabItem>['icon']
+  if (icons && icon) props.icon = icon
+  return props
+}
 ---
 
 {
   singlePkgManager ? (
-    <Code code={getCommand(singlePkgManager, type, pkg, options)} lang="sh" theme="css-variables" />
+    <Code code={getCommand(singlePkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
   ) : (
     <starlight-package-managers>
       <Tabs>
         {getSupportedPkgManagers(type, pkgManagers).map((pkgManager) => (
-          <TabItem label={pkgManager}>
-            <Code code={getCommand(pkgManager, type, pkg, options)} lang="sh" theme="css-variables" />
+          <TabItem {...getTabItemProps(pkgManager)}>
+            <Code code={getCommand(pkgManager, type, pkg, options)} lang="sh" {title} frame={ecFrame} />
           </TabItem>
         ))}
       </Tabs>

package/README.md

@@ -2,8 +2,8 @@
   <h1>starlight-package-managers 🗃</h1>
   <p>Quickly display npm related commands for multiple package managers in your Starlight documentation site.</p>
   <p>
-    <a href="https://github.com/HiDeoo/vercel-env-push/assets/494699/a5ac0d80-984c-418f-8ecd-41a034b2e25a" title="Demo of starlight-package-managers">
-      <img alt="Demo of starlight-package-managers" src="https://github.com/HiDeoo/vercel-env-push/assets/494699/a5ac0d80-984c-418f-8ecd-41a034b2e25a" width="520" />
+    <a href="https://github.com/HiDeoo/starlight-package-managers/assets/494699/5666eb82-4e80-4ce9-ac07-3f711e51062c" title="Demo of starlight-package-managers">
+      <img alt="Demo of starlight-package-managers" src="https://github.com/HiDeoo/starlight-package-managers/assets/494699/5666eb82-4e80-4ce9-ac07-3f711e51062c" width="520" />
     </a>
   </p>
 </div>
@@ -20,7 +20,7 @@
 
 ## Getting Started
 
-Want to get started immediately? Check out the [getting started guide](https://starlight-package-managers.vercel.app/guides/getting-started/) or a [live demo](https://starlight-package-managers.vercel.app/demo/).
+Want to get started immediately? Check out the [getting started guide](https://starlight-package-managers.vercel.app/getting-started/) or a [live demo](https://starlight-package-managers.vercel.app/demo/).
 
 ## Description
 
@@ -61,9 +61,9 @@ By this one:
 ## Features
 
 - Support for various package managers: [npm](https://www.npmjs.com), [yarn](https://yarnpkg.com), [pnpm](https://pnpm.io), [bun](https://bun.sh) & [ni](https://github.com/antfu/ni).
-- Support for various types of command: [`add`](https://starlight-package-managers.vercel.app/guides/usage/#add), [`create`](https://starlight-package-managers.vercel.app/guides/usage/#create), [`exec`](https://starlight-package-managers.vercel.app/guides/usage/#exec) & [`run`](https://starlight-package-managers.vercel.app/guides/usage/#run).
+- Support for various types of command: [`add`](https://starlight-package-managers.vercel.app/usage/#add), [`create`](https://starlight-package-managers.vercel.app/usage/#create), [`exec`](https://starlight-package-managers.vercel.app/usage/#exec) & [`run`](https://starlight-package-managers.vercel.app/usage/#run).
 - Synced tabs between each instance on the same page.
-- Customizable output with [extra arguments](https://starlight-package-managers.vercel.app/guides/usage/#extra-arguments), [comments](https://starlight-package-managers.vercel.app/guides/usage/#comment) & [prefixes](https://starlight-package-managers.vercel.app/guides/usage/#prefix).
+- Customizable output with [extra arguments](https://starlight-package-managers.vercel.app/usage/#extra-arguments), [comments](https://starlight-package-managers.vercel.app/usage/#comment) & [prefixes](https://starlight-package-managers.vercel.app/usage/#prefix).
 
 ## Documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-package-managers",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "Quickly display npm related commands for multiple package managers in your Starlight documentation site.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",
@@ -10,14 +10,14 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@astrojs/starlight": "0.10.1",
+    "@astrojs/starlight": "0.21.0",
     "@playwright/test": "1.36.2",
-    "astro": "3.1.1",
+    "astro": "4.3.7",
     "vitest": "0.33.0"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.9.0",
-    "astro": ">=3.0.0"
+    "@astrojs/starlight": ">=0.21.0",
+    "astro": ">=4.2.7"
   },
   "engines": {
     "node": ">=18.14.1"

package/pkg.ts

@@ -38,10 +38,22 @@ const commands: Commands = {
   },
 }
 
+const icons: Record<PackageManager, string | undefined> = {
+  npm: 'seti:npm',
+  yarn: 'seti:yarn',
+  pnpm: 'pnpm',
+  bun: 'bun',
+  ni: undefined,
+}
+
 export function getSupportedPkgManagers(type: CommandType, userPkgManagers: PackageManager[] | undefined) {
   return (userPkgManagers ?? defaultPkgManagers).filter((pkgManager) => commands[pkgManager][type] !== undefined)
 }
 
+export function getIcon(pkgManager: PackageManager) {
+  return icons[pkgManager]
+}
+
 export function getCommand(
   pkgManager: PackageManager,
   type: CommandType,