Monorepo for Tangled
tangled.org
ogre/language-circles: use proportional area instead of linear
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
![]()
tangled.org
date
(Apr 9, 2026, 6:22 AM UTC)
commit
3e74eb7e
3e74eb7e955e3bf42e8d59ea0a0da4391c0a763c
parent
3bbab0bf
3bbab0bf1adc45bd0f9b7ffcc14d4fd98a5890f6
+82
-50
+6
-1
ogre/src/__tests__/render.test.ts
+6
-1
ogre/src/__tests__/render.test.ts
···
43
43
writeFileSync(join(outputDir, filename), buffer);
44
44
};
45
45
46
+
const saveSvg = (filename: string, svg: string) => {
47
+
writeFileSync(join(outputDir, filename), svg);
48
+
};
49
+
46
50
const renderAndSave = async <P>(component: VNode<P>, filename: string) => {
47
-
const { png } = await renderCard(component as VNode);
51
+
const { svg, png } = await renderCard(component as VNode);
52
+
saveSvg(filename.replace(".png", ".svg"), svg);
48
53
savePng(filename, png);
49
54
};
50
55
+14
-6
ogre/src/components/cards/repository.tsx
+14
-6
ogre/src/components/cards/repository.tsx
···
8
8
import type { RepositoryCardData } from "../../validation";
9
9
10
10
function repoNameFontSize(name: string): number {
11
-
// Available width ~1000px (1104px card content minus language circles area).
11
+
// Available width ~756px
12
12
// Inter 600 average char width is ~0.58× the font size.
13
13
const maxSize = TYPOGRAPHY.repoName.fontSize;
14
-
const fitted = Math.floor(1000 / (name.length * 0.58));
14
+
const fitted = Math.floor(756 / (name.length * 0.58));
15
15
return Math.min(maxSize, Math.max(fitted, 48));
16
16
}
17
17
···
19
19
const fontSize = repoNameFontSize(data.repoName);
20
20
return (
21
21
<Card>
22
-
<LanguageCircles languages={data.languages} />
22
+
<div
23
+
style={{
24
+
display: "flex",
25
+
position: "absolute",
26
+
right: -380,
27
+
top: -380,
28
+
}}>
29
+
<LanguageCircles width={760} languages={data.languages} />
30
+
</div>
23
31
24
32
<Col style={{ gap: 64 }}>
25
-
<Col style={{ gap: 24 }}>
26
-
<span style={{ ...TYPOGRAPHY.repoName, fontSize, color: "#000000" }}>
33
+
<Col style={{ gap: 24, maxWidth: 756 }}>
34
+
<div style={{ ...TYPOGRAPHY.repoName, fontSize, color: "#000000" }}>
27
35
{data.repoName}
28
-
</span>
36
+
</div>
29
37
30
38
<Row style={{ gap: 16 }}>
31
39
<Avatar src={data.avatarUrl} size={64} />
+30
-1
ogre/wrangler.jsonc
+30
-1
ogre/wrangler.jsonc
···
6
6
"observability": {
7
7
"enabled": true,
8
8
},
9
+
"limits": {
10
+
"cpu_ms": 300000
11
+
},
9
12
"routes": [
10
13
{
11
14
"pattern": "ogre.tangled.network",
···
18
21
"rules": [
19
22
{
20
23
"type": "Data",
21
-
"globs": ["**/*.woff"],
24
+
"globs": ["**/*.wasm", "**/*.woff"],
22
25
"fallthrough": true,
23
26
},
24
27
],
28
+
"env": {
29
+
"dev": {
30
+
"name": "ogre-dev",
31
+
"vars": {
32
+
"ENVIRONMENT": "development"
33
+
},
34
+
"routes": [
35
+
{
36
+
"pattern": "ogre-dev.tangled.network",
37
+
"custom_domain": true
38
+
}
39
+
]
40
+
},
41
+
"production": {
42
+
"name": "ogre",
43
+
"vars": {
44
+
"ENVIRONMENT": "production"
45
+
},
46
+
"routes": [
47
+
{
48
+
"pattern": "ogre.tangled.network",
49
+
"custom_domain": true
50
+
}
51
+
]
52
+
}
53
+
}
25
54
}