Add custom style reference to Voyager GraphQL explorer

The commit adds a `stylePath` attribute to Voyager GraphQL explorer configuration. This enables the user to define a custom CSS file in the `voyager` section of `application.yaml`
sadv1r · Mar 21, 2024 · 0eeb7cf · 0eeb7cf
1 parent cc742ef
commit 0eeb7cf
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ graphql:
     hideDocs: false
     hideSettings: false
     cdn: unpkg
+    stylePath: /style.css
 ```
 
 ### Dependency

diff --git a/...rter/src/main/java/ru/sadv1r/spring/graphql/editor/voyager/ReactiveVoyagerController.java b/...rter/src/main/java/ru/sadv1r/spring/graphql/editor/voyager/ReactiveVoyagerController.java
@@ -28,6 +28,7 @@ public Mono<Rendering> voyager() {
                         .modelAttribute("displayOptions", properties.getDisplayOptions())
                         .modelAttribute("hideDocs", properties.isHideDocs())
                         .modelAttribute("hideSettings", properties.isHideSettings())
+                        .modelAttribute("stylePath", properties.getStylePath())
                         .build()
         );
     }

diff --git a/...arter/src/main/java/ru/sadv1r/spring/graphql/editor/voyager/ServletVoyagerController.java b/...arter/src/main/java/ru/sadv1r/spring/graphql/editor/voyager/ServletVoyagerController.java
@@ -25,7 +25,8 @@ public String voyager(Model model) {
                 .addAttribute("serverPath", serverPath)
                 .addAttribute("displayOptions", properties.getDisplayOptions())
                 .addAttribute("hideDocs", properties.isHideDocs())
-                .addAttribute("hideSettings", properties.isHideSettings());
+                .addAttribute("hideSettings", properties.isHideSettings())
+                .addAttribute("stylePath", properties.getStylePath());
         return "voyager";
     }
 

diff --git a/...rc/main/java/ru/sadv1r/spring/graphql/editor/voyager/configuration/VoyagerProperties.java b/...rc/main/java/ru/sadv1r/spring/graphql/editor/voyager/configuration/VoyagerProperties.java
@@ -30,6 +30,8 @@ public class VoyagerProperties {
 
     private Cdn cdn = Cdn.JSDELIVR;
 
+    private String stylePath;
+
     public boolean isEnabled() {
         return enabled;
     }
@@ -78,6 +80,14 @@ public void setCdn(Cdn cdn) {
         this.cdn = cdn;
     }
 
+    public String getStylePath() {
+        return stylePath;
+    }
+
+    public void setStylePath(String stylePath) {
+        this.stylePath = stylePath;
+    }
+
     private static class DisplayOptions {
 
         /**

diff --git a/graphql-voyager-spring-boot-starter/src/main/resources/templates/voyager.html b/graphql-voyager-spring-boot-starter/src/main/resources/templates/voyager.html
@@ -9,6 +9,8 @@
             th:href="|${cdnHost}/graphql-voyager/dist/voyager.css|"
     />
     <script th:src="|${cdnHost}/graphql-voyager/dist/voyager.min.js|"></script>
+
+    <link th:if="${stylePath}" rel="stylesheet" th:href="|${stylePath}|"/>
 </head>
 <body>
 <div id="voyager">Loading...</div>

diff --git a/samples/web-sample/src/main/resources/application.yaml b/samples/web-sample/src/main/resources/application.yaml
@@ -15,6 +15,8 @@ spring:
         x-test: test
       plugins: EXPLORER
       stylePath: /style.css
+    voyager:
+      style-path: /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
@@ -1,3 +1,10 @@
+/*GraphiQL*/
 .graphiql-logo-link {
     --color-neutral: 24, 28%, 32%;
+}
+
+/*Voyager*/
+.doc-navigation > .header {
+    font-weight: bold;
+    color: #600;
 }
diff --git a/samples/webflux-sample/src/main/resources/application.yaml b/samples/webflux-sample/src/main/resources/application.yaml
@@ -9,6 +9,8 @@ spring:
         x-test: test
       plugins: EXPLORER
       stylePath: /style.css
+    voyager:
+      style-path: /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
@@ -1,3 +1,10 @@
+/*GraphiQL*/
 .graphiql-logo-link {
     --color-neutral: 24, 28%, 32%;
+}
+
+/*Voyager*/
+.doc-navigation > .header {
+    font-weight: bold;
+    color: #600;
 }