Logo Collection — Vite + React + TypeScript

This project renders a searchable collection of brand SVGs grouped by folders and localized names. It uses Vite, React 19, Tailwind CSS v4, and shadcn/ui components.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Development

• Install: npm ci
• Start: npm run dev (or npm run dev:alt, npm run dev:https)
• Build: npm run build then preview via npm run preview

Sync logos locally

To pull the latest SVGs from rolloutrf/logos into this app:

1. Run npm run sync:logos (uses git if available, otherwise npx degit).
2. It copies all *.svg into src/logos preserving folder structure.
3. The app loads local assets automatically (no GitHub network needed in dev).

Deployment (GitHub Actions → Yandex Object Storage)

Every push to main builds the app and syncs dist/ to a Yandex S3 bucket via .github/workflows/build-and-deploy.yml.

Required configuration:

• Secrets: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY
• Variables (or secrets fallback): BUCKET_NAME (punycode), AWS_REGION (e.g. ru-central1), optional ENDPOINT_URL.
• In the bucket, enable Static Website Hosting with index.html as both Index and Error documents.

Your website will be available at https://<bucket>.website.yandexcloud.net.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])