@events.com/swagger-styling

Events.com branded Swagger UI theme with modern styling.

Features

• Modern Design: Rounded corners, subtle shadows, smooth transitions
• Events.com Color Palette:
  • Primary Blue (#0066FF) - GET requests, buttons, primary actions
  • Orange/Coral (#FF5C35) - PUT requests, CTAs, accents
  • Success Green (#00C48C) - POST requests, authorization
  • Dark Navy (#1A1F36) - Text, headers
  • Light Background (#F7F9FC) - Body background
• Typography: Inter font family with JetBrains Mono for code
• Pill-shaped buttons matching events.com aesthetic

Installation

npm install @events.com/swagger-styling

Usage

NestJS with @nestjs/swagger

import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { readFileSync } from 'fs';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('My API')
    .setDescription('API Description')
    .setVersion('1.0')
    .build();

  const document = SwaggerModule.createDocument(app, config);

  // Load the custom CSS
  const customCss = readFileSync(
    require.resolve('@events.com/swagger-styling'),
    'utf8'
  );

  SwaggerModule.setup('api', app, document, {
    customCss,
    customSiteTitle: 'My API Documentation',
  });

  await app.listen(3000);
}
bootstrap();

Express with swagger-ui-express

import swaggerUi from 'swagger-ui-express';
import { readFileSync } from 'fs';

const customCss = readFileSync(
  require.resolve('@events.com/swagger-styling'),
  'utf8'
);

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec, {
  customCss,
}));

Direct Import Path

const cssPath = require.resolve('@events.com/swagger-styling');
// Returns: node_modules/@events.com/swagger-styling/dist/swagger-blue.css

Fastify with @fastify/swagger-ui

import { readFileSync } from 'fs';

await app.register(fastifySwaggerUi, {
  routePrefix: '/docs',
  theme: {
    css: [
      {
        filename: 'swagger-blue.css',
        content: readFileSync(
          require.resolve('@events.com/swagger-styling'),
          'utf8'
        ),
      },
    ],
  },
});

Development

Build

npm run build

Releasing (Automated with Semantic Release)

This package uses Semantic Release for fully automated versioning and publishing. Releases are triggered automatically when commits are pushed to main.

How it works:

1. Push commits to main using conventional commit format
2. Semantic Release analyzes commits and determines version bump
3. Automatically updates CHANGELOG.md, creates GitHub release, and publishes to npm

Conventional Commits

Use these commit prefixes to trigger releases:

| Commit Type | Description | Version Bump | |-------------|-------------|--------------| | fix: | Bug fixes | Patch (1.0.0 → 1.0.1) | | feat: | New features | Minor (1.0.0 → 1.1.0) | | feat!: or BREAKING CHANGE: | Breaking changes | Major (1.0.0 → 2.0.0) | | docs: | Documentation only | No release | | chore: | Maintenance | No release | | style: | Code style changes | No release | | refactor: | Code refactoring | No release |

Examples:

# Patch release (1.0.0 → 1.0.1)
git commit -m "fix: correct button hover color"

# Minor release (1.0.0 → 1.1.0)
git commit -m "feat: add dark mode theme variant"

# Major release (1.0.0 → 2.0.0)
git commit -m "feat!: change main export path"

# No release
git commit -m "docs: update installation instructions"
git commit -m "chore: update dependencies"

CI/CD Configuration for Consuming Projects

No special configuration needed - just install like any other npm package:

- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: '20'

- name: Install dependencies
  run: npm ci