Skip to content

Commit 0b0addd

Browse files
andrey-helldarandrey-helldar
committed
Refactor getImages to use a single <picture> element for dark and light theme support, remove unused suffix parameter, and update related utilities.
1 parent 8b29d10 commit 0b0addd

4 files changed

Lines changed: 53 additions & 31 deletions

File tree

‎dist/index.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34621,7 +34621,7 @@ const packageManager = (config) => {
3462134621
}
3462234622
};
3462334623
const packageName = (image) => image.packageManager !== 'none' ? image.packageName : '';
34624-
const render = (config, theme, suffix = '') => {
34624+
const render = (config, theme) => {
3462534625
const image = config.image.parameters;
3462634626
const params = new URLSearchParams({
3462734627
theme: theme,
@@ -34633,13 +34633,16 @@ const render = (config, theme, suffix = '') => {
3463334633
packageName: packageName(image),
3463434634
description: image.description
3463534635
});
34636-
return config.image.url.replace('{title}', encodeUri(image.title)) + '?' + params.toString() + suffix;
34636+
return config.image.url.replace('{title}', encodeUri(image.title)) + '?' + params.toString();
3463734637
};
34638-
const format = (title, url) => `![${title}](${url})`;
3463934638
const getImages = (config) => {
34640-
const light = format(config.image.parameters.title, render(config, 'light', '#gh-light-mode-only'));
34641-
const dark = format(config.image.parameters.title, render(config, 'dark', '#gh-dark-mode-only'));
34642-
return [light, dark];
34639+
const title = config.image.parameters.title;
34640+
const light = render(config, 'light');
34641+
const dark = render(config, 'dark');
34642+
return `<picture>
34643+
<source media="(prefers-color-scheme: dark)" srcset="${dark}">
34644+
<img src="${light}" alt="${title}">
34645+
</picture>`;
3464334646
};
3464434647
exports.getImages = getImages;
3464534648

@@ -34741,7 +34744,7 @@ const setPreview = (content, config) => {
3474134744
const title = (0, strings_1.titleCase)(config.image.parameters.title);
3474234745
content = `# ${title}\n\n${content}`;
3474334746
}
34744-
const images = (0, image_1.getImages)(config).join('\n');
34747+
const images = (0, image_1.getImages)(config);
3474534748
return cleanUp(content).replace(/^(#\s+.+\n\n)/, '$1' + images + '\n\n');
3474634749
};
3474734750
exports.setPreview = setPreview;

‎src/utils/image.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const packageManager = (config: Config): string => {
4545

4646
const packageName = (image: ImageParameters): string => image.packageManager !== 'none' ? image.packageName : ''
4747

48-
const render = (config: Config, theme: 'light' | 'dark', suffix: string = ''): string => {
48+
const render = (config: Config, theme: 'light' | 'dark'): string => {
4949
const image = config.image.parameters
5050

5151
const params = new URLSearchParams({
@@ -59,14 +59,17 @@ const render = (config: Config, theme: 'light' | 'dark', suffix: string = ''): s
5959
description: image.description
6060
})
6161

62-
return config.image.url.replace('{title}', encodeUri(image.title)) + '?' + params.toString() + suffix
62+
return config.image.url.replace('{title}', encodeUri(image.title)) + '?' + params.toString()
6363
}
6464

65-
const format = (title: string, url: string): string => `![${ title }](${ url })`
65+
export const getImages = (config: Config): string => {
66+
const title = config.image.parameters.title
6667

67-
export const getImages = (config: Config): string[] => {
68-
const light = format(config.image.parameters.title, render(config, 'light', '#gh-light-mode-only'))
69-
const dark = format(config.image.parameters.title, render(config, 'dark', '#gh-dark-mode-only'))
68+
const light = render(config, 'light')
69+
const dark = render(config, 'dark')
7070

71-
return [light, dark]
71+
return `<picture>
72+
<source media="(prefers-color-scheme: dark)" srcset="${ dark }">
73+
<img src="${ light }" alt="${ title }">
74+
</picture>`
7275
}

‎src/utils/preview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const setPreview = (content: string, config: Config) => {
1515
content = `# ${ title }\n\n${ content }`
1616
}
1717

18-
const images = getImages(config).join('\n')
18+
const images: string = getImages(config)
1919

2020
return cleanUp(content).replace(/^(#\s+.+\n\n)/, '$1' + images + '\n\n')
2121
}

‎tests/unit/__snapshots__/preview.test.ts.snap‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@
33
exports[`empty 1`] = `
44
"# Preview Updater
55
6-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
7-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
6+
<picture>
7+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
8+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
9+
</picture>
810
911
"
1012
`;
1113
1214
exports[`just-text 1`] = `
1315
"# Preview Updater
1416
15-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
16-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
17+
<picture>
18+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
19+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
20+
</picture>
1721
1822
Something
1923
"
@@ -22,8 +26,10 @@ Something
2226
exports[`with-one-image 1`] = `
2327
"# Preview Updater
2428
25-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
26-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
29+
<picture>
30+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
31+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
32+
</picture>
2733
2834
2935
## Usage
@@ -35,8 +41,10 @@ Something
3541
exports[`with-one-image-without-header 1`] = `
3642
"# Preview Updater
3743
38-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
39-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
44+
<picture>
45+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
46+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
47+
</picture>
4048
4149
4250
## Usage
@@ -48,8 +56,10 @@ Something
4856
exports[`with-two-images 1`] = `
4957
"# Preview Updater
5058
51-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
52-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
59+
<picture>
60+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
61+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
62+
</picture>
5363
5464
5565
## Usage
@@ -61,8 +71,10 @@ Something
6171
exports[`with-two-images-without-header 1`] = `
6272
"# Preview Updater
6373
64-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
65-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
74+
<picture>
75+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
76+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
77+
</picture>
6678
6779
6880
## Usage
@@ -74,8 +86,10 @@ Something
7486
exports[`without-all 1`] = `
7587
"# Preview Updater
7688
77-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
78-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
89+
<picture>
90+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
91+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
92+
</picture>
7993
8094
## Usage
8195
@@ -86,8 +100,10 @@ Something
86100
exports[`without-images 1`] = `
87101
"# Preview Updater
88102
89-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-light-mode-only)
90-
![Preview Updater](https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository#gh-dark-mode-only)
103+
<picture>
104+
<source media="(prefers-color-scheme: dark)" srcset="https://banners.beyondco.de/Preview%20Updater.png?theme=dark&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository">
105+
<img src="https://banners.beyondco.de/Preview%20Updater.png?theme=light&pattern=topography&style=style_2&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg&packageManager=npm+install&packageName=TheDragonCode%2Fpreview-updater&description=Lightweight+preview+update+in+your+repository" alt="Preview Updater">
106+
</picture>
91107
92108
## Usage
93109

0 commit comments

Comments
 (0)