@railway-logos-jp/cli

CLI tool for adding Japanese railway logo components to your React project.

Usage

Initialize Configuration

npx @railway-logos-jp/cli init

This will create a jprlogo.json file in your project with the following configuration:

{
  "$schema": "./node_modules/@railway-logos-jp/cli/schema.json",
  "version": "1.0.0",
  "typescript": true,
  "componentsPath": "src/components/jprlogo",
  "cssPath": "src/styles/index.css",
  "tailwindConfig": "tailwind.config.ts"
}

Add Components

Add a specific component:

npx @railway-logos-jp/cli add jreast

Or select components interactively:

npx @railway-logos-jp/cli add

Options

• --override: Override existing files and update dependencies to latest versions

npx @railway-logos-jp/cli add jreast --override

What It Does

When you add a component, the CLI will:

1. Fetch the component source from GitHub
2. Copy it to your componentsPath (default: src/components/jprlogo/)
3. Install required font packages (@fontsource/hind, etc.)
4. Update your CSS file with font imports and variables
5. Update Tailwind config (if using Tailwind v3)

Tailwind Support

The CLI supports both Tailwind CSS v3 and v4:

Tailwind v4

Uses the new @theme directive in CSS:

@import "tailwindcss";
@import "@fontsource/hind/600.css";
@import "@fontsource/hind/700.css";

@theme {
  --font-hind: "Hind", sans-serif;
}

Tailwind v3

Updates tailwind.config.js/ts:

export default {
  theme: {
    extend: {
      fontFamily: {
        hind: ['var(--font-hind)', 'sans-serif'],
      },
    },
  },
}

Environment Variables

• JPRLOGO_REGISTRY_REPO: GitHub repository (default: yourusername/railway-logos-jp)
• JPRLOGO_REGISTRY_BRANCH: GitHub branch (default: main)

Available Components

• jreast - JR East railway logo component

More components coming soon!

License

MIT