Add custom style support to GraphiQL interface

The commit introduces a new property 'stylePath' to the GraphiQL configuration, allowing for custom style file paths to be specified
sadv1r · Mar 21, 2024 · a36aa44 · a36aa44
1 parent d217017
commit a36aa44
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 0 deletions.
diff --git a/...v1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java b/...v1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebFluxMvcAutoConfiguration.java
@@ -31,6 +31,7 @@ public RouterFunction<ServerResponse> reactiveGraphiQlRouterFunction(GraphiqlPro
                     .modelAttribute("variables", properties.getVariables())
                     .modelAttribute("headers", properties.getHeaders())
                     .modelAttribute("plugins", properties.getPlugins())
+                    .modelAttribute("stylePath", properties.getStylePath())
                     .build();
             builder = builder.GET(properties.getPath(), graphiql);
         }

diff --git a/.../sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java b/.../sadv1r/spring/graphql/editor/graphiql/configuration/GraphiQlWebMvcAutoConfiguration.java
@@ -29,6 +29,7 @@ public RouterFunction<ServerResponse> graphiQlRouterFunction(GraphiqlProperties
                     .modelAttribute("variables", properties.getVariables())
                     .modelAttribute("headers", properties.getHeaders())
                     .modelAttribute("plugins", properties.getPlugins())
+                    .modelAttribute("stylePath", properties.getStylePath())
                     .build();
             builder = builder.GET(properties.getPath(), graphiql);
         }

diff --git a/.../main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java b/.../main/java/ru/sadv1r/spring/graphql/editor/graphiql/configuration/GraphiqlProperties.java
@@ -36,6 +36,8 @@ public class GraphiqlProperties {
 
     private Cdn cdn = Cdn.UNPKG;
 
+    private String stylePath;
+
     public boolean isEnabled() {
         return enabled;
     }
@@ -100,6 +102,14 @@ public void setCdn(Cdn cdn) {
         this.cdn = cdn;
     }
 
+    public String getStylePath() {
+        return stylePath;
+    }
+
+    public void setStylePath(String stylePath) {
+        this.stylePath = stylePath;
+    }
+
     private static String readIfPath(String query) {
         if (query == null) {
             return null;

diff --git a/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html b/graphql-graphiql-spring-boot-starter/src/main/resources/templates/graphiql.html
@@ -25,6 +25,8 @@
             crossorigin th:src="|${cdnHost}/@graphiql/plugin-explorer/dist/index.umd.js|"></script>
     <link th:if="${plugins.contains(T(ru.sadv1r.spring.graphql.editor.graphiql.configuration.GraphiqlProperties.Plugin).EXPLORER)}"
           rel="stylesheet" th:href="|${cdnHost}/@graphiql/plugin-explorer/dist/style.css|"/>
+
+    <link th:if="${stylePath}" rel="stylesheet" th:href="|${stylePath}|"/>
 </head>
 <body>
 <div id="graphiql">Loading...</div>

diff --git a/samples/web-sample/src/main/resources/application.yaml b/samples/web-sample/src/main/resources/application.yaml
@@ -14,6 +14,7 @@ spring:
       headers:
         x-test: test
       plugins: EXPLORER
+      stylePath: /style.css
     playground:
       settings:
         editor:

diff --git a/samples/web-sample/src/main/resources/static/style.css b/samples/web-sample/src/main/resources/static/style.css
@@ -0,0 +1,4 @@
+.graphiql-logo-link {
+    --color-neutral: 24, 28%, 32%;
+}
+#ff5794
diff --git a/samples/webflux-sample/src/main/resources/application.yaml b/samples/webflux-sample/src/main/resources/application.yaml
@@ -8,6 +8,7 @@ spring:
       headers:
         x-test: test
       plugins: EXPLORER
+      stylePath: /style.css
     playground:
       settings:
         editor:

diff --git a/samples/webflux-sample/src/main/resources/static/style.css b/samples/webflux-sample/src/main/resources/static/style.css
@@ -0,0 +1,4 @@
+.graphiql-logo-link {
+    --color-neutral: 24, 28%, 32%;
+}
+#ff5794