Fix fonts with html version fixes #899

graphql · Dec 6, 2018 · fcbee91 · fcbee91
1 parent 88f7f53
commit fcbee91
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/packages/graphql-playground-html/src/render-playground-page.ts b/packages/graphql-playground-html/src/render-playground-page.ts
@@ -68,21 +68,21 @@ export interface Tab {
 const loading = getLoadingMarkup()
 
 const getCdnMarkup = ({ version, cdnUrl = '//cdn.jsdelivr.net/npm' }) => `
-    <link rel="stylesheet" href="${cdnUrl}/graphql-playground-react${version
-  ? `@${version}`
-  : ''}/build/static/css/index.css" />
-    <link rel="shortcut icon" href="${cdnUrl}/graphql-playground-react${version
-  ? `@${version}`
-  : ''}/build/favicon.png" />
-    <script src="${cdnUrl}/graphql-playground-react${version
-  ? `@${version}`
-  : ''}/build/static/js/middleware.js"></script>
+    <link rel="stylesheet" href="${cdnUrl}/graphql-playground-react${
+  version ? `@${version}` : ''
+}/build/static/css/index.css" />
+    <link rel="shortcut icon" href="${cdnUrl}/graphql-playground-react${
+  version ? `@${version}` : ''
+}/build/favicon.png" />
+    <script src="${cdnUrl}/graphql-playground-react${
+  version ? `@${version}` : ''
+}/build/static/js/middleware.js"></script>
 `
 
 export function renderPlaygroundPage(options: RenderPageOptions) {
   const extendedOptions: any = {
     ...options,
-    canSaveConfig: false
+    canSaveConfig: false,
   }
   // for compatibility
   if ((options as any).subscriptionsEndpoint) {
@@ -94,7 +94,7 @@ export function renderPlaygroundPage(options: RenderPageOptions) {
   if (!extendedOptions.endpoint && !extendedOptions.configString) {
     /* tslint:disable-next-line */
     console.warn(
-      `WARNING: You didn't provide an endpoint and don't have a .graphqlconfig. Make sure you have at least one of them.`
+      `WARNING: You didn't provide an endpoint and don't have a .graphqlconfig. Make sure you have at least one of them.`,
     )
   }
 
@@ -105,10 +105,13 @@ export function renderPlaygroundPage(options: RenderPageOptions) {
     <meta charset=utf-8 />
     <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
     <link rel="shortcut icon" href="https://graphcool-playground.netlify.com/favicon.png">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700" rel="stylesheet">
     <title>${extendedOptions.title || 'GraphQL Playground'}</title>
-    ${extendedOptions.env === 'react' || extendedOptions.env === 'electron'
-      ? ''
-      : getCdnMarkup(extendedOptions)}
+    ${
+      extendedOptions.env === 'react' || extendedOptions.env === 'electron'
+        ? ''
+        : getCdnMarkup(extendedOptions)
+    }
   </head>
   <body>
     <style type="text/css">
@@ -169,7 +172,7 @@ export function renderPlaygroundPage(options: RenderPageOptions) {
         GraphQLPlayground.init(root, ${JSON.stringify(
           extendedOptions,
           null,
-          2
+          2,
         )})
       })
     </script>