Skip to content

Commit c30fd90

Browse files
josephaw1022josephaw1022
committed
add new sections to the dev ui (config, kubernetes yaml, visualize endpoints)
1 parent 1e90557 commit c30fd90

10 files changed

+154
-5
lines changed

‎_includes/dev-ui-configuration.html

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
11
<section class="dev-ui-configuration">
2-
<h3>Configuration Management</h3>
3-
<p>Manage application settings and configurations with an intuitive interface.</p>
4-
</section>
2+
<div class="section-content">
3+
4+
<h3>Configuration Management</h3>
5+
<p>Manage application settings and configurations through an intuitive interface. Modify the configuration file
6+
directly in the UI, or use the form editor UI to achieve the same goal. The form editor UI also provides
7+
visibility into all available configuration options, ensuring you don't miss anything.</p>
8+
9+
<div class="image-container">
10+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-source-editor-dev-ui-light.png"
11+
alt="Configuration Source Editor Light">
12+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-source-editor-dev-ui-dark.png"
13+
alt="Configuration Source Editor Dark">
14+
</div>
15+
16+
<p>The form editor offers a user-friendly way to adjust settings while providing a comprehensive list of
17+
configuration options available in your application.</p>
18+
19+
<div class="image-container">
20+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-light.png"
21+
alt="Configuration Management Light">
22+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-dark.png"
23+
alt="Configuration Management Dark">
24+
</div>
25+
</div>
26+
</section>

‎_includes/dev-ui-generate-kubernetes-yaml.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<section class="dev-ui-generate-kubernetes">
2+
<div class="section-content">
3+
<h3>Generate Kubernetes YAML</h3>
4+
<p>Leverage the Quarkus Dev UI to easily generate Kubernetes YAML files for your application. Configure and export deployment manifests, service configurations, and ingress rules directly through the interface, ensuring seamless integration with Kubernetes environments.</p>
5+
<p>The intuitive UI allows you to tailor the generated resources to match your specific requirements, whether you're deploying to a local cluster or a using the yaml files generated as a starting point.</p>
6+
7+
</div>
8+
</section>

‎_includes/dev-ui-visualize-endpoints.html

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
11
<section class="dev-ui-visualize-endpoints">
2+
<div class="section-content">
23
<h3>Visualize Endpoints</h3>
3-
<p>Interact with application endpoints effortlessly using the Dev UI.</p>
4-
</section>
4+
<p>Interact effortlessly with your application's endpoints using the built-in Quarkus Dev UI. Quickly navigate to any of the endpoints of your Quarkus application with ease.</p>
5+
6+
<div class="image-container">
7+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-light.png" alt="Quarkus Dev UI Endpoints Light">
8+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-dark.png" alt="Quarkus Dev UI Endpoints Dark">
9+
</div>
10+
11+
<p>If you prefer Swagger UI, you can access it directly through the Swagger Dev UI by adding the <code>smallrye-openapi</code> extension to your project. This enables an intuitive way to explore and test your APIs.</p>
12+
13+
<div class="image-container">
14+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/swagger-ui-dev-ui-light.png" alt="Swagger UI Light">
15+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/swagger-ui-dark.png" alt="Swagger UI Dark">
16+
</div>
17+
</div>
18+
</section>

‎_layouts/dev-ui.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
{% include dev-ui-dependency-visualization.html %}
1111
{% include dev-ui-continuous-testing.html %}
1212
{% include dev-ui-build-container-image.html %}
13+
{% include dev-ui-generate-kubernetes-yaml.html %}
1314
{% include dev-ui-manage-dev-services.html %}
1415
{% include dev-ui-keycloak-integration.html %}
1516
{% include dev-ui-kafka-ui-integration.html %}

‎_sass/layouts/dev-ui.scss

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
2+
3+
.dev-ui-configuration {
4+
padding: 2rem 1rem;
5+
6+
h3 {
7+
font-size: 1.8rem;
8+
color: var(--heading-color);
9+
margin-bottom: 1rem;
10+
text-align: left;
11+
}
12+
13+
p {
14+
font-size: 1rem;
15+
color: var(--main-text-color);
16+
line-height: 1.5;
17+
margin-bottom: 1.5rem;
18+
text-align: left;
19+
}
20+
21+
22+
.image-container {
23+
display: flex;
24+
justify-content: center;
25+
margin: 3rem 0;
26+
27+
img {
28+
max-width: 80%;
29+
height: auto;
30+
border: 1px solid var(--card-outline);
31+
border-radius: 5px;
32+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
33+
transition: transform 0.3s ease;
34+
35+
36+
}
37+
}
38+
39+
@media screen and (max-width: 768px) {
40+
h3 {
41+
font-size: 1.5rem;
42+
}
43+
44+
p {
45+
font-size: 0.9rem;
46+
}
47+
48+
.image-container img {
49+
max-width: 100%;
50+
}
51+
}
52+
}
53+
54+
55+
.dev-ui-visualize-endpoints {
56+
padding: 2rem 1rem;
57+
58+
h3 {
59+
font-size: 1.8rem;
60+
color: var(--heading-color);
61+
margin-bottom: 1rem;
62+
text-align: left;
63+
}
64+
65+
p {
66+
font-size: 1rem;
67+
color: var(--main-text-color);
68+
line-height: 1.5;
69+
margin: 3rem 0;
70+
text-align: left;
71+
}
72+
73+
74+
.image-container {
75+
display: flex;
76+
justify-content: center;
77+
margin: 1rem 0;
78+
79+
img {
80+
max-width: 80%;
81+
height: auto;
82+
border: 1px solid var(--card-outline);
83+
border-radius: 5px;
84+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
85+
transition: transform 0.3s ease;
86+
87+
}
88+
}
89+
90+
@media screen and (max-width: 768px) {
91+
h3 {
92+
font-size: 1.5rem;
93+
}
94+
95+
p {
96+
font-size: 0.9rem;
97+
}
98+
99+
.image-container img {
100+
max-width: 100%;
101+
}
102+
}
103+
}

‎assets/css/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ $baseurl: "{{ site.baseurl }}";
4747
@import "layouts/publications";
4848
@import "layouts/documentation";
4949
@import "layouts/working-groups";
50+
@import "layouts/dev-ui";
5051
@import "includes/header-navigation";
5152
@import "includes/libraries-standards-band";
5253
@import "includes/homepage-hero-band";

‎assets/images/dev-ui/configuration-source-editor-dev-ui-dark.png

90.7 KB
Loading

‎assets/images/dev-ui/configuration-source-editor-dev-ui-light.png

93.7 KB
Loading

‎assets/images/dev-ui/swagger-ui-dev-ui-dark.png

77.5 KB
Loading

‎assets/images/dev-ui/swagger-ui-dev-ui-light.png

75.8 KB
Loading

0 commit comments

Comments
 (0)