Skip to content

Commit e7e1fed

Browse files
moonmeistermoonmeister
committed
wip got this generating and can customize title and background but nothing else. webpack npm plugin is limiting
1 parent 3ab063f commit e7e1fed

File tree

3 files changed

+247
-23
lines changed

3 files changed

+247
-23
lines changed

‎packages/gatsby-plugin-manifest/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
},
99
"dependencies": {
1010
"babel-runtime": "^6.26.0",
11-
"bluebird": "^3.5.0"
11+
\ "favicons-webpack-plugin": "0.0.7"
1212
},
1313
"devDependencies": {
1414
"babel-cli": "^6.26.0",

‎packages/gatsby-plugin-manifest/src/gatsby-node.js‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,32 @@
1-
const fs = require(`fs`)
2-
const Promise = require(`bluebird`)
1+
import FaviconsWebpackPlugin from 'favicons-webpack-plugin'
32

4-
exports.onPostBuild = (args, pluginOptions) =>
5-
new Promise(resolve => {
6-
const manifest = { ...pluginOptions }
7-
delete manifest.plugins
8-
fs.writeFileSync(`./public/manifest.json`, JSON.stringify(manifest))
9-
resolve()
10-
})
3+
exports.modifyWebpackConfig = ({ config, stage }, pluginOptions ) => {
4+
var { logo = `./src/favicon.png`,
5+
icons,
6+
title,
7+
background,
8+
} = pluginOptions
9+
10+
if (stage === `develop-html` || stage === `build-html`) {
11+
config.plugin(`Favicon`, FaviconsWebpackPlugin, [
12+
{
13+
logo: logo,
14+
prefix: `favicons/`,
15+
title: title,
16+
background: background,
17+
icons: {
18+
android: true,
19+
appleIcon: true,
20+
appleStartup: true,
21+
coast: true,
22+
favicons: true,
23+
firefox: true,
24+
twitter: true,
25+
yandex: true,
26+
windows: true,
27+
...icons,
28+
},
29+
},
30+
])
31+
}
32+
}

‎packages/gatsby-plugin-manifest/src/gatsby-ssr.js‎

Lines changed: 215 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,218 @@ import React from "react"
22
import { withPrefix } from "gatsby-link"
33

44
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
5-
setHeadComponents([
6-
<link
7-
key={`gatsby-plugin-manifest-link`}
8-
rel="manifest"
9-
href={withPrefix(`/manifest.json`)}
10-
/>,
11-
<meta
12-
key={`gatsby-plugin-manifest-meta`}
13-
name="theme-color"
14-
content={pluginOptions.theme_color}
15-
/>,
16-
])
17-
}
5+
var { injectHTML = true,
6+
icons: {
7+
android = true,
8+
appleIcon = true,
9+
appleStartup = true,
10+
coast = true,
11+
favicons = true,
12+
firefox = true,
13+
twitter = true,
14+
yandex = true,
15+
windows = true,
16+
} = {}
17+
} = pluginOptions
18+
19+
if (injectHTML) {
20+
const HeadComponents = []
21+
22+
if (android){
23+
HeadComponents.push(
24+
<link
25+
key={`gatsby-plugin-manifest-link`}
26+
rel="manifest"
27+
href={withPrefix(`/favicons/manifest.json`)}
28+
/>,
29+
<meta
30+
key={`gatsby-plugin-manifest-meta`}
31+
name="theme-color"
32+
content={pluginOptions.theme_color}
33+
/>
34+
)
35+
}
36+
37+
if (appleIcon) {
38+
HeadComponents.push(
39+
<link
40+
rel="apple-touch-icon"
41+
sizes="57x57"
42+
href={withPrefix(`/favicons/apple-touch-icon-57x57.png`)}
43+
key={`apple-touch-icon-57x57`}
44+
/>,
45+
<link
46+
rel="apple-touch-icon"
47+
sizes="60x60"
48+
href={withPrefix(`/favicons/apple-touch-icon-60x60.png`)}
49+
key={`apple-touch-icon-60x60`}
50+
/>,
51+
<link
52+
rel="apple-touch-icon"
53+
sizes="72x72"
54+
href={withPrefix(`/favicons/apple-touch-icon-72x72.png`)}
55+
key={`apple-touch-icon-72x72`}
56+
/>,
57+
<link
58+
rel="apple-touch-icon"
59+
sizes="76x76"
60+
href={withPrefix(`/favicons/apple-touch-icon-76x76.png`)}
61+
key={`apple-touch-icon-76x76`}
62+
/>,
63+
<link
64+
rel="apple-touch-icon"
65+
sizes="114x114"
66+
href={withPrefix(`/favicons/apple-touch-icon-114x114.png`)}
67+
key={`apple-touch-icon-114x114`}
68+
/>,
69+
<link
70+
rel="apple-touch-icon"
71+
sizes="120x120"
72+
href={withPrefix(`/favicons/apple-touch-icon-120x120.png`)}
73+
key={`apple-touch-icon-120x120`}
74+
/>,
75+
<link
76+
rel="apple-touch-icon"
77+
sizes="144x144"
78+
href={withPrefix(`/favicons/apple-touch-icon-144x144.png`)}
79+
key={`apple-touch-icon-144x144`}
80+
/>,
81+
<link
82+
rel="apple-touch-icon"
83+
sizes="152x152"
84+
href={withPrefix(`/favicons/apple-touch-icon-152x152.png`)}
85+
key={`apple-touch-icon-152x152`}
86+
/>,
87+
<link
88+
rel="apple-touch-icon"
89+
sizes="180x180"
90+
href={withPrefix(`/favicons/apple-touch-icon-180x180.png`)}
91+
key={`apple-touch-icon-180x180`}
92+
/>
93+
)
94+
}
95+
if (appleStartup) {
96+
HeadComponents.push(
97+
<link
98+
rel="apple-touch-startup-image"
99+
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)"
100+
href={withPrefix(`/favicons/apple-touch-startup-image-320x460.png`)}
101+
key={`apple-touch-startup-image-320x460`}
102+
/>,
103+
<link
104+
rel="apple-touch-startup-image"
105+
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
106+
href={withPrefix(`/favicons/apple-touch-startup-image-640x920.png`)}
107+
key={`apple-touch-startup-image-640x920`}
108+
/>,
109+
<link
110+
rel="apple-touch-startup-image"
111+
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
112+
href={withPrefix(`/favicons/apple-touch-startup-image-640x1096.png`)}
113+
key={`apple-touch-startup-image-640x1096`}
114+
/>,
115+
<link
116+
rel="apple-touch-startup-image"
117+
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
118+
href={withPrefix(`/favicons/apple-touch-startup-image-750x1294.png`)}
119+
key={`apple-touch-startup-image-750x1294`}
120+
/>,
121+
<link
122+
rel="apple-touch-startup-image"
123+
media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"
124+
href={withPrefix(`/favicons/apple-touch-startup-image-1182x2208.png`)}
125+
key={`apple-touch-startup-image-1182x2208`}
126+
/>,
127+
<link
128+
rel="apple-touch-startup-image"
129+
media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"
130+
href={withPrefix(`/favicons/apple-touch-startup-image-1242x2148.png`)}
131+
key={`apple-touch-startup-image-1242x2148`}
132+
/>,
133+
<link
134+
rel="apple-touch-startup-image"
135+
media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)"
136+
href={withPrefix(`/favicons/apple-touch-startup-image-748x1024.png`)}
137+
key={`apple-touch-startup-image-748x1024`}
138+
/>,
139+
<link
140+
rel="apple-touch-startup-image"
141+
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)"
142+
href={withPrefix(`/favicons/apple-touch-startup-image-768x1004.png`)}
143+
key={`apple-touch-startup-image-768x1004`}
144+
/>,
145+
<link
146+
rel="apple-touch-startup-image"
147+
media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
148+
href={withPrefix(`/favicons/apple-touch-startup-image-1496x2048.png`)}
149+
key={`apple-touch-startup-image-1496x2048`}
150+
/>,
151+
<link
152+
rel="apple-touch-startup-image"
153+
media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
154+
href={withPrefix(`/favicons/apple-touch-startup-image-1536x2008.png`)}
155+
key={`apple-touch-startup-image-1536x2008`}
156+
/>
157+
)
158+
}
159+
if (favicons) {
160+
HeadComponents.push(
161+
<link
162+
rel="icon"
163+
type="image/png"
164+
sizes="32x32"
165+
href={withPrefix(`/favicons/favicon-32x32.png`)}
166+
key={`favicon-32x32`}
167+
/>,
168+
<link
169+
rel="icon"
170+
type="image/png"
171+
sizes="16x16"
172+
href={withPrefix(`/favicons/favicon-16x16.png`)}
173+
key={`favicon-16x16`}
174+
/>,
175+
<link
176+
rel="shortcut icon"
177+
href={withPrefix(`/favicons/favicon.ico`)}
178+
key={`favicon`}
179+
/>
180+
)
181+
}
182+
if (coast) {
183+
HeadComponents.push(
184+
<link
185+
rel="icon"
186+
type="image/png"
187+
sizes="228x228"
188+
href={withPrefix(`/favicons/coast-228x228.png`)}
189+
key={`coast-228x228`}
190+
/>
191+
)
192+
}
193+
if (windows) {
194+
HeadComponents.push(
195+
<meta
196+
name="msapplication-TileImage"
197+
content={withPrefix(`/favicons/mstile-144x144.png`)}
198+
key={`mstile-144x144`}
199+
/>,
200+
<meta
201+
name="msapplication-config"
202+
content={withPrefix(`/favicons/browserconfig.xml`)}
203+
key={`browserconfig-xml`}
204+
/>
205+
)
206+
}
207+
if (yandex) {
208+
HeadComponents.push(
209+
<link
210+
rel="yandex-tableau-widget"
211+
href={withPrefix(`/favicons/yandex-browser-manifest.json`)}
212+
key={`yandex-manifest`}
213+
/>
214+
)
215+
}
216+
217+
setHeadComponents(HeadComponents)
218+
}
219+
}

0 commit comments

Comments
 (0)