-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
66 lines (59 loc) · 2.96 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { AstroIntegration } from "astro";
import { fileURLToPath } from "node:url";
import configureRemarkEleventyImagesPlugin from "./src/remark-plugin";
import { createHTML, defaultMarkup } from "./src/markupUtil";
import { RemarkImagesConfig } from "./src/types";
export type { createHTMLProps, MarkupValues } from "./src/types";
export default function remarkEleventyImages(options: Partial<RemarkImagesConfig> = {}): AstroIntegration
{
return {
name: 'astro-remark-eleventy-image',
hooks: {
'astro:config:setup': async ({ command, config, updateConfig }) =>
{
if (command == 'build')
{
// Setup Default Plugin Settings
const defaults: RemarkImagesConfig & { publicDir: string, outDir: string; } = {
publicDir: fileURLToPath(config.publicDir),
outDir: fileURLToPath(config.outDir),
sizes: "(max-width: 700px) 100vw, 700px",
eleventyImageConfig: {
// This used to be JPEG and WebP, but too many issues arose
// around format conversion. Test out 'jpeg', 'webp', for an optimal
// solution, but if errors arise stick with just 'auto'
formats: ['auto'],
widths: ['auto', 600, 1000, 1400],
sharpOptions: {
animated: true,
},
useCache: false
},
altRequired: true,
remoteImages: false,
customMarkup: defaultMarkup
};
const pluginConfig = Object.assign({}, defaults, options);
/*
We need to expect some settings
For example, `widths` needs to contain 'auto' for the plugin to work
since Eleventy doesn't upscale rasters.
Also, the user isn't allowed to change the filename or outputdir. Sorry!
*/
if (options?.eleventyImageConfig?.widths && !options.eleventyImageConfig.widths.includes('auto') && !options.eleventyImageConfig.widths.includes(null))
{
// user overwrote sizes but doesn't have 'auto'
// in there for the optimized original size
pluginConfig.eleventyImageConfig.widths = ['auto', ...options.eleventyImageConfig.widths];
}
const remarkPlugin = configureRemarkEleventyImagesPlugin(pluginConfig);
updateConfig({
markdown: {
remarkPlugins: [remarkPlugin]
},
});
}
}
},
};
};