Skip to content

Commit 64f769e

Browse files
ardatangithub-actions[bot]
andauthoredFeb 20, 2023
enhance(render-graphiql): offline favicon (#2452)
* enhance(render-graphiql): offline favicon * Top-level await * Render GraphiQL Prettier * chore(dependencies): updated changesets for modified dependencies --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent c320cc8 commit 64f769e

9 files changed

+39
-12
lines changed
 
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@graphql-yoga/plugin-prometheus': patch
3+
---
4+
dependencies updates:
5+
- Updated dependency [`@envelop/prometheus@7.0.5` ↗︎](https://www.npmjs.com/package/@envelop/prometheus/v/7.0.5) (from `7.0.4`, in `dependencies`)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@graphql-yoga/plugin-response-cache': patch
3+
---
4+
dependencies updates:
5+
- Updated dependency [`@envelop/response-cache@^4.0.6` ↗︎](https://www.npmjs.com/package/@envelop/response-cache/v/4.0.6) (from `4.0.5`, in `dependencies`)

‎.changeset/ten-falcons-switch.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@graphql-yoga/render-graphiql': minor
3+
---
4+
5+
Make favicon offline instead of using an online URL

‎examples/hello-world/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/* eslint-disable @typescript-eslint/no-var-requires */
33
const { createServer } = require('node:http')
44
const { createYoga, createSchema } = require('graphql-yoga')
5+
const { renderGraphiQL } = require('@graphql-yoga/render-graphiql')
56

67
const yoga = createYoga({
78
schema: createSchema({
@@ -24,6 +25,7 @@ const yoga = createYoga({
2425
}
2526
`,
2627
},
28+
renderGraphiQL,
2729
})
2830

2931
const server = createServer(yoga)

‎examples/hello-world/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"check": "exit 0"
88
},
99
"dependencies": {
10+
"@graphql-yoga/render-graphiql": "3.6.1",
1011
"graphql-yoga": "3.6.1",
1112
"graphql": "16.6.0"
1213
}

‎packages/graphql-yoga/scripts/generate-graphiql-html.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ async function minifyLandingPageHTML() {
4545
),
4646
)
4747

48-
fs.writeFileSync(
48+
await fs.promises.writeFile(
4949
path.join(__dirname, '../src/landing-page-html.ts'),
5050
`export default ${JSON.stringify(minified)}`,
5151
)
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
import * as fs from 'fs'
2-
import * as path from 'path'
3-
import { fileURLToPath } from 'url'
1+
import * as fs from 'node:fs'
2+
import * as path from 'node:path'
3+
import { fileURLToPath } from 'node:url'
44

55
const directoryName = path.dirname(fileURLToPath(import.meta.url))
66
const inputPath = path.resolve(directoryName, '..', '..', 'graphiql', 'dist')
77
const jsFile = path.resolve(inputPath, 'yoga-graphiql.umd.js')
88
const cssFile = path.resolve(inputPath, 'style.css')
9+
const faviconFile = path.resolve(
10+
directoryName,
11+
'../../../website/public/favicon.ico',
12+
)
913

1014
const outFile = path.resolve(directoryName, '..', 'src', 'graphiql.ts')
1115

12-
const jsContents = fs.readFileSync(jsFile, 'utf-8')
13-
const cssContents = fs.readFileSync(cssFile, 'utf-8')
16+
const [jsContents, cssContents, faviconContents] = await Promise.all([
17+
fs.promises.readFile(jsFile, 'utf-8'),
18+
fs.promises.readFile(cssFile, 'utf-8'),
19+
fs.promises.readFile(faviconFile, 'base64'),
20+
])
1421

15-
fs.writeFileSync(
22+
await fs.promises.writeFile(
1623
outFile,
1724
[
1825
`export const js: string = ${JSON.stringify(jsContents)}`,
1926
`export const css: string = ${JSON.stringify(cssContents)}`,
27+
`export const favicon: string = ${JSON.stringify(
28+
`data:image/x-icon;base64,${faviconContents}`,
29+
)}`,
2030
].join('\n'),
2131
)

‎packages/render-graphiql/src/index.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import type { GraphiQLOptions } from 'graphql-yoga'
22

3-
import { css, js } from './graphiql.js'
3+
import { css, js, favicon } from './graphiql.js'
44

55
export const renderGraphiQL = (opts?: GraphiQLOptions) => /* HTML */ `
66
<!DOCTYPE html>
77
<html lang="en">
88
<head>
99
<meta charset="utf-8" />
1010
<title>${opts?.title || 'Yoga GraphiQL'}</title>
11-
<link
12-
rel="icon"
13-
href="https://raw.githubusercontent.com/dotansimha/graphql-yoga/main/website/public/favicon.ico"
14-
/>
11+
<link rel="icon" href="${favicon}" />
1512
<style>
1613
${css}
1714
</style>

‎pnpm-lock.yaml

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.