feat: language component
This commit is contained in:
parent
83e3e2d86e
commit
5744816f08
GPG key ID:
8C30176798F1A6BA
1 changed files with 266 additions and 0 deletions
266
src/routes/languages.svelte
Normal file
266
src/routes/languages.svelte
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
<script lang="ts">
|
||||
export let repositoryUrl: string;
|
||||
|
||||
interface LanguageData {
|
||||
[key: string]: number;
|
||||
}
|
||||
|
||||
interface ParsedRepo {
|
||||
platform: 'github' | 'gitlab' | 'codeberg' | 'forgejo';
|
||||
owner: string;
|
||||
repo: string;
|
||||
}
|
||||
|
||||
let languages: LanguageData = {};
|
||||
let loading = true;
|
||||
let error = '';
|
||||
|
||||
// Parse repository URL to determine platform and extract owner/repo
|
||||
function parseRepoUrl(url: string): ParsedRepo | null {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
const hostname = urlObj.hostname;
|
||||
const pathParts = urlObj.pathname.split('/').filter((p) => p);
|
||||
|
||||
if (pathParts.length < 2) return null;
|
||||
|
||||
let platform: ParsedRepo['platform'];
|
||||
if (hostname.includes('github.com')) {
|
||||
platform = 'github';
|
||||
} else if (hostname.includes('gitlab.com')) {
|
||||
platform = 'gitlab';
|
||||
} else if (hostname.includes('codeberg.org')) {
|
||||
platform = 'codeberg';
|
||||
} else {
|
||||
platform = 'forgejo'; // Assume forgejo for custom instances
|
||||
}
|
||||
|
||||
return {
|
||||
platform,
|
||||
owner: pathParts[0],
|
||||
repo: pathParts[1].replace('.git', '')
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch language data from GitHub API
|
||||
async function fetchGitHub(owner: string, repo: string) {
|
||||
const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/languages`);
|
||||
if (!response.ok) throw new Error('Failed to fetch from GitHub');
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Fetch language data from GitLab API
|
||||
async function fetchGitLab(owner: string, repo: string) {
|
||||
const projectPath = encodeURIComponent(`${owner}/${repo}`);
|
||||
const response = await fetch(`https://gitlab.com/api/v4/projects/${projectPath}/languages`);
|
||||
if (!response.ok) throw new Error('Failed to fetch from GitLab');
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Fetch language data from Codeberg API (Gitea-based)
|
||||
async function fetchCodeberg(owner: string, repo: string) {
|
||||
// Codeberg uses Gitea API which doesn't have direct language stats
|
||||
// We'll use GitHub's linguist approach or fallback
|
||||
const response = await fetch(`https://codeberg.org/api/v1/repos/${owner}/${repo}/languages`);
|
||||
if (!response.ok) throw new Error('Failed to fetch from Codeberg');
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
// Calculate percentages
|
||||
function calculatePercentages(data: LanguageData) {
|
||||
const total = Object.values(data).reduce((sum, val) => sum + val, 0);
|
||||
return Object.entries(data)
|
||||
.map(([name, bytes]) => ({
|
||||
name,
|
||||
bytes,
|
||||
percentage: ((bytes / total) * 100).toFixed(1)
|
||||
}))
|
||||
.sort((a, b) => b.bytes - a.bytes);
|
||||
}
|
||||
|
||||
// Color mapping for common languages
|
||||
const languageColors: { [key: string]: string } = {
|
||||
'C++': '#f34b7d',
|
||||
CMake: '#da3434',
|
||||
Shell: '#89e051',
|
||||
JavaScript: '#f1e05a',
|
||||
TypeScript: '#3178c6',
|
||||
Python: '#3572A5',
|
||||
Java: '#b07219',
|
||||
Go: '#00ADD8',
|
||||
Rust: '#dea584',
|
||||
HTML: '#e34c26',
|
||||
CSS: '#563d7c',
|
||||
Other: '#858585'
|
||||
};
|
||||
|
||||
// Fetch languages on mount or when URL changes
|
||||
$: if (repositoryUrl) {
|
||||
fetchLanguages();
|
||||
}
|
||||
|
||||
async function fetchLanguages() {
|
||||
loading = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const parsed = parseRepoUrl(repositoryUrl);
|
||||
if (!parsed) {
|
||||
throw new Error('Invalid repository URL');
|
||||
}
|
||||
|
||||
let data: LanguageData;
|
||||
switch (parsed.platform) {
|
||||
case 'github':
|
||||
data = await fetchGitHub(parsed.owner, parsed.repo);
|
||||
break;
|
||||
case 'gitlab':
|
||||
data = await fetchGitLab(parsed.owner, parsed.repo);
|
||||
break;
|
||||
case 'codeberg':
|
||||
data = await fetchCodeberg(parsed.owner, parsed.repo);
|
||||
break;
|
||||
default:
|
||||
throw new Error('Unsupported platform');
|
||||
}
|
||||
|
||||
languages = data;
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to fetch language data';
|
||||
languages = {};
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: languageStats = calculatePercentages(languages);
|
||||
$: otherLanguages = languageStats.slice(3);
|
||||
$: otherPercentage = otherLanguages
|
||||
.reduce((sum, lang) => sum + parseFloat(lang.percentage), 0)
|
||||
.toFixed(1);
|
||||
$: displayedLanguages = (() => {
|
||||
const topThree = languageStats.slice(0, 3);
|
||||
if (otherLanguages.length > 0) {
|
||||
return [
|
||||
...topThree,
|
||||
{
|
||||
name: 'Other',
|
||||
bytes: otherLanguages.reduce((sum, lang) => sum + lang.bytes, 0),
|
||||
percentage: otherPercentage
|
||||
}
|
||||
];
|
||||
}
|
||||
return topThree;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div class="language-stats block">
|
||||
{#if loading}
|
||||
<div class="loading">Loading...</div>
|
||||
{:else if error}
|
||||
<div class="error">{error}</div>
|
||||
{:else if languageStats.length > 0}
|
||||
<div class="progress-bar">
|
||||
{#each displayedLanguages as lang}
|
||||
<div
|
||||
class="progress-segment"
|
||||
style="width: {lang.percentage}%; background-color: {languageColors[lang.name] ||
|
||||
'#858585'}"
|
||||
title="{lang.name}: {lang.percentage}%"
|
||||
></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<ul class="language-list">
|
||||
{#each displayedLanguages as lang}
|
||||
<li>
|
||||
<span
|
||||
class="language-dot"
|
||||
style="background-color: {languageColors[lang.name] || '#858585'}"
|
||||
></span>
|
||||
<span class="language-name">{lang.name}</span>
|
||||
<span class="language-percentage">{lang.percentage}%</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<div class="no-data">No language data available</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.language-stats {
|
||||
background-color: #282828;
|
||||
color: #c9d1d9;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #30363d;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
height: 8px;
|
||||
background-color: #21262d;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-segment {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.language-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.language-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.language-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.language-name {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.language-percentage {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error,
|
||||
.no-data {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f85149;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue