add stylesheet link to cdn example (#3386)

graphql · Aug 3, 2023 · 85edb9e · 85edb9e
1 parent b0b27ab
commit 85edb9e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/examples/graphiql-cdn/index.html b/examples/graphiql-cdn/index.html
@@ -21,7 +21,6 @@
         height: 100vh;
       }
     </style>
-
     <!--
       This GraphiQL example depends on Promise and fetch, which are available in
       modern browsers, but can be "polyfilled" for older browsers.
@@ -37,20 +36,28 @@
       crossorigin
       src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
     ></script>
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
     <script
       src="https://unpkg.com/graphiql/graphiql.min.js"
       type="application/javascript"
     ></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <!-- 
+      These are imports for the GraphIQL Explorer plugin.
+     -->
     <script
       src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
       crossorigin
     ></script>
-    <!--
-      These two files can be found in the npm module, however you may wish to
-      copy them directly into your environment, or perhaps include them in your
-      favored resource bundler.
-     -->
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+    />
   </head>
 
   <body>

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
@@ -100,6 +100,6 @@ function GraphiQLWithExplorer() {
 
 ## CDN bundles
 
-You can also use this plugin when using the
-[CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the
-[example HTML file](examples/index.html) that shows how you can do this.
+You can also use this plugin with `unpkg`, `jsdelivr`, and other CDNs.
+
+See the [example HTML file](examples/index.html) for this plugin
diff --git a/packages/graphiql-plugin-explorer/README.md b/packages/graphiql-plugin-explorer/README.md
@@ -49,6 +49,6 @@ return (
 
 ## CDN bundles
 
-You can also use add this plugin when using the
-[CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the
-[example HTML file](examples/index.html) that shows how you can do this.
+You can also use this plugin with `unpkg`, `jsdelivr`, and other CDNs.
+
+See the [example HTML file](examples/index.html) for this plugin