Skip to content

Commit

Permalink
feat(meta): added xhtml option to introduce self-closing meta tags
Browse files Browse the repository at this point in the history 
Added xhtml option to introduce self-closing xhtml tags. This will be especially handy in JSX
context.

fix #192
  • Loading branch information
@onderceylan
onderceylan committed Apr 14, 2020
1 parent 8030cb2 commit 01bf0cd
Show file tree
Hide file tree
Showing 7 changed files with 505 additions and 69 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,14 @@ $ pwa-asset-generator --help
-r --portrait-only Only generate portrait splash screens [default: false]
-d --dark-mode Generate iOS splash screen meta with (prefers-color-scheme: dark) media attr [default: false]
-u --single-quotes Generate HTML meta tags with single quotes [default: false]
-x --xhtml Generate HTML meta tags by self-closing the tags [default: false]
-g --log Logs the steps of the library process [default: true]
Examples
$ pwa-asset-generator logo.html
$ pwa-asset-generator logo.svg -i ./index.html -m ./manifest.json
$ pwa-asset-generator https://your-cdn-server.com/assets/logo.png ./ -t jpg -q 90 --splash-only --portrait-only
$ pwa-asset-generator logo.svg ./assets --splash-only --xhtml --single-quotes
$ pwa-asset-generator logo.svg ./assets --scrape false --icon-only --path "%PUBLIC_URL%"
$ pwa-asset-generator logo.svg ./assets --icon-only --favicon --opaque false --maskable false
$ pwa-asset-generator logo.svg ./assets --dark-mode --background dimgrey --splash-only --type jpeg --quality 80
Expand All @@ -117,6 +119,7 @@ $ pwa-asset-generator --help
--portrait-only
--dark-mode
--single-quotes
--xhtml
--log false
```

Expand Down
359 changes: 359 additions & 0 deletions src/__snapshots__/main.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1545,6 +1545,365 @@ Object {
}
`;
exports[`generates meta saving meta to index.html creating a favicon meta with xhtml output 1`] = `
Object {
"htmlMeta": Object {
"appleMobileWebAppCapable": "<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\" />
",
"appleTouchIcon": "<link rel=\\"apple-touch-icon\\" sizes=\\"180x180\\" href=\\"temp/apple-icon-180.png\\" />
<link rel=\\"apple-touch-icon\\" sizes=\\"167x167\\" href=\\"temp/apple-icon-167.png\\" />
<link rel=\\"apple-touch-icon\\" sizes=\\"152x152\\" href=\\"temp/apple-icon-152.png\\" />
<link rel=\\"apple-touch-icon\\" sizes=\\"120x120\\" href=\\"temp/apple-icon-120.png\\" />
",
"favicon": "<link rel=\\"icon\\" type=\\"image/png\\" sizes=\\"196x196\\" href=\\"temp/favicon-196.png\\" />
",
},
"manifestJsonContent": Array [
Object {
"purpose": "maskable any",
"sizes": "192x192",
"src": "temp/manifest-icon-192.png",
"type": "image/png",
},
Object {
"purpose": "maskable any",
"sizes": "512x512",
"src": "temp/manifest-icon-512.png",
"type": "image/png",
},
],
"savedImages": Array [
Object {
"height": 180,
"name": "apple-icon-180",
"orientation": null,
"path": "temp/apple-icon-180.png",
"scaleFactor": undefined,
"width": 180,
},
Object {
"height": 167,
"name": "apple-icon-167",
"orientation": null,
"path": "temp/apple-icon-167.png",
"scaleFactor": undefined,
"width": 167,
},
Object {
"height": 152,
"name": "apple-icon-152",
"orientation": null,
"path": "temp/apple-icon-152.png",
"scaleFactor": undefined,
"width": 152,
},
Object {
"height": 120,
"name": "apple-icon-120",
"orientation": null,
"path": "temp/apple-icon-120.png",
"scaleFactor": undefined,
"width": 120,
},
Object {
"height": 192,
"name": "manifest-icon-192",
"orientation": null,
"path": "temp/manifest-icon-192.png",
"scaleFactor": undefined,
"width": 192,
},
Object {
"height": 512,
"name": "manifest-icon-512",
"orientation": null,
"path": "temp/manifest-icon-512.png",
"scaleFactor": undefined,
"width": 512,
},
Object {
"height": 196,
"name": "favicon-196",
"orientation": null,
"path": "temp/favicon-196.png",
"scaleFactor": undefined,
"width": 196,
},
],
}
`;
exports[`generates meta saving meta to index.html creating apple icons meta with xhtml output 1`] = `
Object {
"htmlMeta": Object {
"appleMobileWebAppCapable": "<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\" />
",
"appleTouchIcon": "<link rel=\\"apple-touch-icon\\" sizes=\\"180x180\\" href=\\"temp/apple-icon-180.png\\" />
<link rel=\\"apple-touch-icon\\" sizes=\\"167x167\\" href=\\"temp/apple-icon-167.png\\" />
<link rel=\\"apple-touch-icon\\" sizes=\\"152x152\\" href=\\"temp/apple-icon-152.png\\" />
<link rel=\\"apple-touch-icon\\" sizes=\\"120x120\\" href=\\"temp/apple-icon-120.png\\" />
",
},
"manifestJsonContent": Array [
Object {
"purpose": "maskable any",
"sizes": "192x192",
"src": "temp/manifest-icon-192.png",
"type": "image/png",
},
Object {
"purpose": "maskable any",
"sizes": "512x512",
"src": "temp/manifest-icon-512.png",
"type": "image/png",
},
],
"savedImages": Array [
Object {
"height": 180,
"name": "apple-icon-180",
"orientation": null,
"path": "temp/apple-icon-180.png",
"scaleFactor": undefined,
"width": 180,
},
Object {
"height": 167,
"name": "apple-icon-167",
"orientation": null,
"path": "temp/apple-icon-167.png",
"scaleFactor": undefined,
"width": 167,
},
Object {
"height": 152,
"name": "apple-icon-152",
"orientation": null,
"path": "temp/apple-icon-152.png",
"scaleFactor": undefined,
"width": 152,
},
Object {
"height": 120,
"name": "apple-icon-120",
"orientation": null,
"path": "temp/apple-icon-120.png",
"scaleFactor": undefined,
"width": 120,
},
Object {
"height": 192,
"name": "manifest-icon-192",
"orientation": null,
"path": "temp/manifest-icon-192.png",
"scaleFactor": undefined,
"width": 192,
},
Object {
"height": 512,
"name": "manifest-icon-512",
"orientation": null,
"path": "temp/manifest-icon-512.png",
"scaleFactor": undefined,
"width": 512,
},
],
}
`;
exports[`generates meta saving meta to index.html creating splash screens meta with xhtml output 1`] = `
Object {
"htmlMeta": Object {
"appleLaunchImage": "<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2048-2732.png\\" media=\\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2732-2048.png\\" media=\\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1668-2388.png\\" media=\\"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2388-1668.png\\" media=\\"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1668-2224.png\\" media=\\"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2224-1668.png\\" media=\\"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1536-2048.png\\" media=\\"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2048-1536.png\\" media=\\"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1242-2688.png\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2688-1242.png\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1125-2436.png\\" media=\\"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2436-1125.png\\" media=\\"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-828-1792.png\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1792-828.png\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1242-2208.png\\" media=\\"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2208-1242.png\\" media=\\"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-750-1334.png\\" media=\\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1334-750.png\\" media=\\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-640-1136.png\\" media=\\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\" />
<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1136-640.png\\" media=\\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\" />
",
"appleMobileWebAppCapable": "<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\" />
",
},
"manifestJsonContent": Array [],
"savedImages": Array [
Object {
"height": 2732,
"name": "apple-splash-2048-2732",
"orientation": "portrait",
"path": "temp/apple-splash-2048-2732.png",
"scaleFactor": 2,
"width": 2048,
},
Object {
"height": 2048,
"name": "apple-splash-2732-2048",
"orientation": "landscape",
"path": "temp/apple-splash-2732-2048.png",
"scaleFactor": 2,
"width": 2732,
},
Object {
"height": 2388,
"name": "apple-splash-1668-2388",
"orientation": "portrait",
"path": "temp/apple-splash-1668-2388.png",
"scaleFactor": 2,
"width": 1668,
},
Object {
"height": 1668,
"name": "apple-splash-2388-1668",
"orientation": "landscape",
"path": "temp/apple-splash-2388-1668.png",
"scaleFactor": 2,
"width": 2388,
},
Object {
"height": 2224,
"name": "apple-splash-1668-2224",
"orientation": "portrait",
"path": "temp/apple-splash-1668-2224.png",
"scaleFactor": 2,
"width": 1668,
},
Object {
"height": 1668,
"name": "apple-splash-2224-1668",
"orientation": "landscape",
"path": "temp/apple-splash-2224-1668.png",
"scaleFactor": 2,
"width": 2224,
},
Object {
"height": 2048,
"name": "apple-splash-1536-2048",
"orientation": "portrait",
"path": "temp/apple-splash-1536-2048.png",
"scaleFactor": 2,
"width": 1536,
},
Object {
"height": 1536,
"name": "apple-splash-2048-1536",
"orientation": "landscape",
"path": "temp/apple-splash-2048-1536.png",
"scaleFactor": 2,
"width": 2048,
},
Object {
"height": 2688,
"name": "apple-splash-1242-2688",
"orientation": "portrait",
"path": "temp/apple-splash-1242-2688.png",
"scaleFactor": 3,
"width": 1242,
},
Object {
"height": 1242,
"name": "apple-splash-2688-1242",
"orientation": "landscape",
"path": "temp/apple-splash-2688-1242.png",
"scaleFactor": 3,
"width": 2688,
},
Object {
"height": 2436,
"name": "apple-splash-1125-2436",
"orientation": "portrait",
"path": "temp/apple-splash-1125-2436.png",
"scaleFactor": 3,
"width": 1125,
},
Object {
"height": 1125,
"name": "apple-splash-2436-1125",
"orientation": "landscape",
"path": "temp/apple-splash-2436-1125.png",
"scaleFactor": 3,
"width": 2436,
},
Object {
"height": 1792,
"name": "apple-splash-828-1792",
"orientation": "portrait",
"path": "temp/apple-splash-828-1792.png",
"scaleFactor": 2,
"width": 828,
},
Object {
"height": 828,
"name": "apple-splash-1792-828",
"orientation": "landscape",
"path": "temp/apple-splash-1792-828.png",
"scaleFactor": 2,
"width": 1792,
},
Object {
"height": 2208,
"name": "apple-splash-1242-2208",
"orientation": "portrait",
"path": "temp/apple-splash-1242-2208.png",
"scaleFactor": 3,
"width": 1242,
},
Object {
"height": 1242,
"name": "apple-splash-2208-1242",
"orientation": "landscape",
"path": "temp/apple-splash-2208-1242.png",
"scaleFactor": 3,
"width": 2208,
},
Object {
"height": 1334,
"name": "apple-splash-750-1334",
"orientation": "portrait",
"path": "temp/apple-splash-750-1334.png",
"scaleFactor": 2,
"width": 750,
},
Object {
"height": 750,
"name": "apple-splash-1334-750",
"orientation": "landscape",
"path": "temp/apple-splash-1334-750.png",
"scaleFactor": 2,
"width": 1334,
},
Object {
"height": 1136,
"name": "apple-splash-640-1136",
"orientation": "portrait",
"path": "temp/apple-splash-640-1136.png",
"scaleFactor": 2,
"width": 640,
},
Object {
"height": 640,
"name": "apple-splash-1136-640",
"orientation": "landscape",
"path": "temp/apple-splash-1136-640.png",
"scaleFactor": 2,
"width": 1136,
},
],
}
`;
exports[`generates meta saving meta to index.html using a path override 1`] = `
Object {
"htmlMeta": Object {
Expand Down
Loading

0 comments on commit 01bf0cd

Please sign in to comment.