@timmo001/docs-kit 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +9 -9
- package/src/brand-images.ts +19 -1
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@timmo001/docs-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Shared branding, layout and config for timmo001 documentation sites",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"repository": {
|
|
28
28
|
"type": "git",
|
|
29
|
-
"url": "git+https://github.com/timmo001/
|
|
29
|
+
"url": "git+https://github.com/timmo001/groundwork.git",
|
|
30
30
|
"directory": "packages/docs-kit"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
@@ -40,15 +40,15 @@
|
|
|
40
40
|
"sharp": "0.35.5"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"blume": "2.2.
|
|
43
|
+
"blume": "2.2.6"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@oxlint/plugins": "1.
|
|
47
|
-
"@timmo001/oxlint-rules": "0.6.
|
|
48
|
-
"@types/bun": "1.4.
|
|
49
|
-
"blume": "2.2.
|
|
50
|
-
"oxlint": "1.
|
|
51
|
-
"oxlint-tsgolint": "7.0.
|
|
46
|
+
"@oxlint/plugins": "1.90.0",
|
|
47
|
+
"@timmo001/oxlint-rules": "0.6.3",
|
|
48
|
+
"@types/bun": "1.4.4",
|
|
49
|
+
"blume": "2.2.6",
|
|
50
|
+
"oxlint": "1.90.0",
|
|
51
|
+
"oxlint-tsgolint": "7.0.2005",
|
|
52
52
|
"prettier": "3.9.10",
|
|
53
53
|
"typescript": "7.0.2"
|
|
54
54
|
}
|
package/src/brand-images.ts
CHANGED
|
@@ -35,6 +35,15 @@ const fontStack = "Inter, 'Liberation Sans', 'DejaVu Sans', Arial, sans-serif";
|
|
|
35
35
|
|
|
36
36
|
const svgOpenTag = /^<svg\b[^>]*>/;
|
|
37
37
|
|
|
38
|
+
/** The card title's largest font size, used whenever the title fits. */
|
|
39
|
+
const titleMaxSize = 104;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Roughly how wide a bold title character is, as a share of its font size.
|
|
43
|
+
* On the generous side, so a long title shrinks before it runs off the card.
|
|
44
|
+
*/
|
|
45
|
+
const titleCharWidth = 0.6;
|
|
46
|
+
|
|
38
47
|
const escapeXml = (text: string) =>
|
|
39
48
|
text.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">");
|
|
40
49
|
|
|
@@ -69,6 +78,15 @@ export const writeBrandImages = async (
|
|
|
69
78
|
const textX = logoX + logoSize + 60;
|
|
70
79
|
const top = Math.round(height / 2 - 25);
|
|
71
80
|
|
|
81
|
+
// Shrink a long title to fit beside the logo, keeping the same margin on
|
|
82
|
+
// the right as between the logo and the text
|
|
83
|
+
const titleSize = Math.min(
|
|
84
|
+
titleMaxSize,
|
|
85
|
+
Math.floor(
|
|
86
|
+
(width - textX - 60) / (options.title.length * titleCharWidth),
|
|
87
|
+
),
|
|
88
|
+
);
|
|
89
|
+
|
|
72
90
|
const taglineLines = options.tagline
|
|
73
91
|
.map(
|
|
74
92
|
(line, index) =>
|
|
@@ -83,7 +101,7 @@ export const writeBrandImages = async (
|
|
|
83
101
|
<rect width="${width}" height="10" fill="${options.accent}"/>
|
|
84
102
|
${logoAt(logoX, logoY, logoSize)}
|
|
85
103
|
<g font-family="${fontStack}" fill="#ffffff">
|
|
86
|
-
<text x="${textX}" y="${top}" font-size="
|
|
104
|
+
<text x="${textX}" y="${top}" font-size="${titleSize}" font-weight="700">${escapeXml(options.title)}</text>
|
|
87
105
|
${taglineLines}
|
|
88
106
|
<text x="${textX + 4}" y="${siteY}" font-size="30" fill="${options.accent}">${escapeXml(options.site)}</text>
|
|
89
107
|
</g>
|