From a5b65bb4dfb9b83066d2018903b8406be82e7686 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Sun, 23 Nov 2025 14:42:14 +0300 Subject: [PATCH] feat: Add package name formatting for Windows packages and update contribution docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Format Windows winget package IDs for better display (e.g., "Microsoft.VisualStudioCode" → "Visual Studio Code") - Extract last segment from dotted package names and convert CamelCase to spaced format - Add title attribute to package names for full name on hover - Update README with optional icon addition step in contribution guide - Document Simple Icons integration process for new package submissions - Add package icons --- README.md | 20 +++++++++++++++++++- README.tr.md | 20 +++++++++++++++++++- src/components/RecommendationCard.tsx | 17 ++++++++++++++++- src/components/RecommendationListItem.tsx | 17 ++++++++++++++++- 4 files changed, 70 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6c595c9..b5bb41d 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ RepoHub provides a unified interface for package discovery and installation acro - **Cross-Platform Support**: Works on Linux (Debian, Ubuntu, Arch, Fedora), Windows, and macOS. - **Official Repositories**: Access software strictly from trusted, official sources. +- **Package Icons**: Visual icons for popular packages for easy recognition. - **Script Generation**: Generate idempotent installation scripts for your selected platform. - **Smart Filtering**: efficiently browse and filter packages. @@ -200,7 +201,24 @@ windows: { } ``` -#### 5. Test Your Changes +#### 5. Add an Icon (Optional) + +To make the package look better in recommendations, add an icon mapping in `PACKAGE_ICONS`: + +1. Find the package slug on [Simple Icons](https://simpleicons.org/) +2. Add it to the `PACKAGE_ICONS` object in `src/data/recommendationPresets.ts`: + +```typescript +export const PACKAGE_ICONS: Record = { + // ... + "Docker.DockerDesktop": "docker", // Key matches package name, Value is Simple Icons slug + // ... +}; +``` + +If no icon is added, a default package icon will be used. + +#### 6. Test Your Changes 1. Run validation: ```bash diff --git a/README.tr.md b/README.tr.md index 10095b5..48add44 100644 --- a/README.tr.md +++ b/README.tr.md @@ -12,6 +12,7 @@ RepoHub, farklı işletim sistemlerinde paket keşfi ve kurulumu için birleşik - **Resmi Depolar**: Yazılımlara yalnızca güvenilir, resmi kaynaklardan erişin. - **Script Oluşturma**: Seçtiğiniz platform için idempotent kurulum scriptleri oluşturun. - **Akıllı Filtreleme**: Paketleri verimli bir şekilde bulun ve filtreleyin. +- **Paket İkonları**: Popüler paketler için görsel ikonlar ile kolay tanıma. ## 🛠️ Teknoloji Yığını @@ -200,7 +201,24 @@ windows: { } ``` -#### 5. Değişikliklerinizi Test Edin +#### 5. İkon Ekleyin (İsteğe Bağlı) + +Paketin önerilerde daha iyi görünmesi için `PACKAGE_ICONS` içine bir ikon eşlemesi ekleyin: + +1. [Simple Icons](https://simpleicons.org/)'da paket slug'ını bulun +2. `src/data/recommendationPresets.ts` dosyasındaki `PACKAGE_ICONS` nesnesine ekleyin: + +```typescript +export const PACKAGE_ICONS: Record = { + // ... + "Docker.DockerDesktop": "docker", // Anahtar paket adıyla eşleşmeli, Değer Simple Icons slug'ı olmalı + // ... +}; +``` + +İkon eklenmezse, varsayılan paket ikonu kullanılacaktır. + +#### 6. Değişikliklerinizi Test Edin 1. Doğrulamayı çalıştırın: ```bash diff --git a/src/components/RecommendationCard.tsx b/src/components/RecommendationCard.tsx index 3e72a92..21ad65f 100644 --- a/src/components/RecommendationCard.tsx +++ b/src/components/RecommendationCard.tsx @@ -15,6 +15,21 @@ export function RecommendationCard({ pkg, isSelected, onToggle }: Recommendation const { t } = useLocale() const [iconError, setIconError] = useState(false) + // Helper to format package name for display + const getDisplayName = (name: string, platformId?: string) => { + if (platformId === 'windows' && name.includes('.')) { + // Handle winget IDs like "Microsoft.VisualStudioCode" or "Git.Git" + const parts = name.split('.') + const appName = parts[parts.length - 1] // Take the last part + + // Add spaces to CamelCase (e.g. "VisualStudioCode" -> "Visual Studio Code") + return appName.replace(/([A-Z])/g, ' $1').trim() + } + return name + } + + const displayName = getDisplayName(pkg.name, pkg.platform_id) + return ( )}
-

{pkg.name}

+

{displayName}

{pkg.version}

diff --git a/src/components/RecommendationListItem.tsx b/src/components/RecommendationListItem.tsx index d9430fa..6986493 100644 --- a/src/components/RecommendationListItem.tsx +++ b/src/components/RecommendationListItem.tsx @@ -12,6 +12,21 @@ interface RecommendationListItemProps { export function RecommendationListItem({ pkg, isSelected, onToggle }: RecommendationListItemProps) { const [iconError, setIconError] = useState(false) + // Helper to format package name for display + const getDisplayName = (name: string, platformId?: string) => { + if (platformId === 'windows' && name.includes('.')) { + // Handle winget IDs like "Microsoft.VisualStudioCode" or "Git.Git" + const parts = name.split('.') + const appName = parts[parts.length - 1] // Take the last part + + // Add spaces to CamelCase (e.g. "VisualStudioCode" -> "Visual Studio Code") + return appName.replace(/([A-Z])/g, ' $1').trim() + } + return name + } + + const displayName = getDisplayName(pkg.name, pkg.platform_id) + return (
-

{pkg.name}

+

{displayName}

{pkg.version}