astro-font-loader 0.1.6 → 0.2.0
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 +74 -0
- package/components/FontLoader.astro +91 -0
- package/dist/components/types.d.ts +7 -0
- package/dist/components/types.d.ts.map +1 -0
- package/dist/components/types.js +2 -0
- package/dist/components/types.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -109,6 +109,80 @@ fontsIntegration({
|
|
|
109
109
|
})
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
+
### FontLoader Component
|
|
113
|
+
|
|
114
|
+
The library provides a `FontLoader` Astro component that generates `<link rel="preload">` tags and inline `@font-face` CSS for your fonts. Use it alongside the integration — the integration copies font files to the build output, while the component injects the HTML needed to load them.
|
|
115
|
+
|
|
116
|
+
```astro
|
|
117
|
+
---
|
|
118
|
+
// src/layouts/Layout.astro
|
|
119
|
+
import FontLoader from 'astro-font-loader/FontLoader.astro';
|
|
120
|
+
---
|
|
121
|
+
<html>
|
|
122
|
+
<head>
|
|
123
|
+
<FontLoader packages={['@company/design-system-fonts']} />
|
|
124
|
+
</head>
|
|
125
|
+
<body><slot /></body>
|
|
126
|
+
</html>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
The component accepts the same `filter` and `outputDir` options as the integration:
|
|
130
|
+
|
|
131
|
+
```astro
|
|
132
|
+
---
|
|
133
|
+
import FontLoader from 'astro-font-loader/FontLoader.astro';
|
|
134
|
+
|
|
135
|
+
const fontFilter = (filename: string) =>
|
|
136
|
+
filename.toLowerCase().includes('roboto');
|
|
137
|
+
---
|
|
138
|
+
<FontLoader
|
|
139
|
+
packages={['@company/design-system-fonts']}
|
|
140
|
+
filter={fontFilter}
|
|
141
|
+
outputDir="assets/fonts"
|
|
142
|
+
/>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
#### Selective Preloading with Media Queries
|
|
146
|
+
|
|
147
|
+
The `preload` prop accepts an array of configurations for fine-grained control over which fonts are preloaded and with what media queries. This is useful for responsive font loading — for example, preloading a bold weight only on desktop:
|
|
148
|
+
|
|
149
|
+
```astro
|
|
150
|
+
---
|
|
151
|
+
import FontLoader from 'astro-font-loader/FontLoader.astro';
|
|
152
|
+
|
|
153
|
+
const fontFilter = (filename: string) =>
|
|
154
|
+
filename.toLowerCase().includes('roboto');
|
|
155
|
+
---
|
|
156
|
+
<FontLoader
|
|
157
|
+
packages={['@company/design-system-fonts']}
|
|
158
|
+
filter={fontFilter}
|
|
159
|
+
preload={[
|
|
160
|
+
{
|
|
161
|
+
filter: (f) => f.includes('roboto-regular'),
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
filter: (f) => f.includes('roboto-bold'),
|
|
165
|
+
media: '(min-width: 641px)',
|
|
166
|
+
},
|
|
167
|
+
]}
|
|
168
|
+
/>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
| Prop | Type | Default | Description |
|
|
172
|
+
|------|------|---------|-------------|
|
|
173
|
+
| `packages` | `string[]` | (required) | Font package names to load |
|
|
174
|
+
| `filter` | `(filename: string) => boolean` | `undefined` | Filter function to select font files |
|
|
175
|
+
| `outputDir` | `string` | `"fonts"` | Output directory name in generated URLs |
|
|
176
|
+
| `preload` | `boolean \| PreloadConfig[]` | `true` | Whether/how to generate preload link tags |
|
|
177
|
+
| `root` | `string` | `process.cwd()` | Root directory for resolving font packages |
|
|
178
|
+
|
|
179
|
+
**`PreloadConfig`**
|
|
180
|
+
|
|
181
|
+
| Property | Type | Required | Description |
|
|
182
|
+
|----------|------|----------|-------------|
|
|
183
|
+
| `filter` | `(filename: string) => boolean` | Yes | Filter to select which fonts to preload |
|
|
184
|
+
| `media` | `string` | No | Media query for the preload link |
|
|
185
|
+
|
|
112
186
|
## Additional Documentation
|
|
113
187
|
|
|
114
188
|
* [API Reference](./docs/API.md)
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getFontsPackageInfo, getAvailableFonts, getFontsCss } from 'astro-font-loader';
|
|
3
|
+
|
|
4
|
+
interface PreloadConfig {
|
|
5
|
+
/** Filter function to select which fonts to preload. */
|
|
6
|
+
filter: (filename: string) => boolean;
|
|
7
|
+
/** Optional media query for the preload link (e.g., "(min-width: 641px)"). */
|
|
8
|
+
media?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface Props {
|
|
12
|
+
/** Array of font package names to load. */
|
|
13
|
+
packages: string[];
|
|
14
|
+
/** Optional filter function to select which font files to include in CSS. */
|
|
15
|
+
filter?: (filename: string) => boolean;
|
|
16
|
+
/** Output directory name used in generated font URLs. Defaults to "fonts". */
|
|
17
|
+
outputDir?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Controls preload link generation.
|
|
20
|
+
* - `true`: Preload all filtered fonts (default).
|
|
21
|
+
* - `false`: No preload links.
|
|
22
|
+
* - `PreloadConfig[]`: Selective preloading with optional media queries.
|
|
23
|
+
*/
|
|
24
|
+
preload?: boolean | PreloadConfig[];
|
|
25
|
+
/** Root directory to resolve font packages from. Defaults to process.cwd(). */
|
|
26
|
+
root?: string;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const MIME_TYPES: Record<string, string> = {
|
|
30
|
+
woff2: 'font/woff2',
|
|
31
|
+
woff: 'font/woff',
|
|
32
|
+
ttf: 'font/ttf',
|
|
33
|
+
otf: 'font/otf',
|
|
34
|
+
eot: 'application/vnd.ms-fontobject',
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
function getMimeType(filename: string): string {
|
|
38
|
+
const ext = filename.split('.').pop()?.toLowerCase() ?? '';
|
|
39
|
+
return MIME_TYPES[ext] ?? 'font/woff2';
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const {
|
|
43
|
+
packages,
|
|
44
|
+
filter,
|
|
45
|
+
outputDir = 'fonts',
|
|
46
|
+
preload = true,
|
|
47
|
+
root = process.cwd(),
|
|
48
|
+
} = Astro.props;
|
|
49
|
+
|
|
50
|
+
let css = '';
|
|
51
|
+
const seen = new Set<string>();
|
|
52
|
+
const preloadHrefs: Array<{ href: string; type: string; media?: string }> = [];
|
|
53
|
+
|
|
54
|
+
for (const packageName of packages) {
|
|
55
|
+
const packageInfo = getFontsPackageInfo(packageName, root);
|
|
56
|
+
if (!packageInfo) continue;
|
|
57
|
+
|
|
58
|
+
css += getFontsCss({ filter, outputDir }, packageInfo);
|
|
59
|
+
|
|
60
|
+
if (preload === true) {
|
|
61
|
+
let fonts = getAvailableFonts(packageInfo.fontsDir);
|
|
62
|
+
if (filter) {
|
|
63
|
+
fonts = fonts.filter((font) => filter(font.filename));
|
|
64
|
+
}
|
|
65
|
+
for (const font of fonts) {
|
|
66
|
+
const href = `/${outputDir}/${font.filename}`;
|
|
67
|
+
if (!seen.has(href)) {
|
|
68
|
+
seen.add(href);
|
|
69
|
+
preloadHrefs.push({ href, type: getMimeType(font.filename) });
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
} else if (Array.isArray(preload)) {
|
|
73
|
+
const fonts = getAvailableFonts(packageInfo.fontsDir);
|
|
74
|
+
for (const config of preload) {
|
|
75
|
+
const matched = fonts.filter((font) => config.filter(font.filename));
|
|
76
|
+
for (const font of matched) {
|
|
77
|
+
const href = `/${outputDir}/${font.filename}`;
|
|
78
|
+
if (!seen.has(href)) {
|
|
79
|
+
seen.add(href);
|
|
80
|
+
preloadHrefs.push({ href, type: getMimeType(font.filename), media: config.media });
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
{preloadHrefs.map(({ href, type, media }) => (
|
|
89
|
+
<link rel="preload" as="font" crossorigin href={href} type={type} media={media} />
|
|
90
|
+
))}
|
|
91
|
+
{css && <style set:html={css} is:inline />}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface PreloadConfig {
|
|
2
|
+
/** Filter function to select which fonts to preload. */
|
|
3
|
+
filter: (filename: string) => boolean;
|
|
4
|
+
/** Optional media query for the preload link (e.g., "(min-width: 641px)"). */
|
|
5
|
+
media?: string;
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC7B,wDAAwD;IACxD,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,4 +4,5 @@ export { getFontsCss } from "./css/index.ts";
|
|
|
4
4
|
export type { GetFontsCssOptions } from "./css/get.ts";
|
|
5
5
|
export { getFontsPackageInfo, getAvailableFonts } from "./fonts/index.ts";
|
|
6
6
|
export type { FontInfo, FontsPackageInfo } from "./fonts/index.ts";
|
|
7
|
+
export type { PreloadConfig } from "./components/types.ts";
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEnE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"author": "Mikey Sleevi <development@frogman.simplelogin.com>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.2.0",
|
|
8
8
|
"engines": {
|
|
9
9
|
"node": ">=18.0.0"
|
|
10
10
|
},
|
|
@@ -16,11 +16,13 @@
|
|
|
16
16
|
"types": "./dist/index.d.ts",
|
|
17
17
|
"import": "./dist/index.js",
|
|
18
18
|
"default": "./dist/index.js"
|
|
19
|
-
}
|
|
19
|
+
},
|
|
20
|
+
"./FontLoader.astro": "./components/FontLoader.astro"
|
|
20
21
|
},
|
|
21
22
|
"sideEffects": false,
|
|
22
23
|
"files": [
|
|
23
|
-
"dist"
|
|
24
|
+
"dist",
|
|
25
|
+
"components"
|
|
24
26
|
],
|
|
25
27
|
"keywords": [
|
|
26
28
|
"astro-component",
|