Skip to content

Commit 2e531d9

Browse files
josephaw1022josephaw1022
committed
new dev ui section
add dev ui to the homepage add styling for section to the main.scss file images for section and potentially new page fix wording on single card and adjust card styling in general get the html to look somewhat decent. not done but its good enough for now new bare bone html page (nothing in it) dev ui page and its sections add border top to the section add new sections to the dev ui (config, kubernetes yaml, visualize endpoints) consolidate styling for new and existing sections fix wording on single card and adjust card styling in general get the html to look somewhat decent. not done but its good enough for now
1 parent a183769 commit 2e531d9

35 files changed

+442
-0
lines changed

‎_includes/dev-ui-build-container-image.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<section class="dev-ui-section">
2+
<div class="section-content">
3+
<h3>Build Container Image</h3>
4+
<p>Create production-ready container images directly from the Dev UI. The interface simplifies the process, allowing you to customize build configurations and monitor the progress effortlessly.</p>
5+
6+
<div class="image-container">
7+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-light.png" alt="Build Container Image Light">
8+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-dark.png" alt="Build Container Image Dark">
9+
</div>
10+
</div>
11+
</section>

‎_includes/dev-ui-configuration.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<section class="dev-ui-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-continuous-testing.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<section class="dev-ui-section">
2+
<div class="section-content">
3+
<h3>Continuous Testing</h3>
4+
<p>Run continuous tests directly in the Dev UI to ensure code quality and catch regressions early. The intuitive interface provides instant feedback and allows you to monitor test results in real-time, streamlining the development process.</p>
5+
6+
<div class="image-container">
7+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-light.png" alt="Continuous Testing Light">
8+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-dark.png" alt="Continuous Testing Dark">
9+
</div>
10+
</div>
11+
</section>

‎_includes/dev-ui-db-schema-generation.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<section class="dev-ui-section">
2+
<div class="section-content">
3+
<h3>DB Schema Generation</h3>
4+
<p>Automatically generate database schemas and SQL scripts for faster development. The Quarkus Dev UI simplifies database integration, ensuring your application's data structure is always up to date with minimal effort. For developers familiar with their database of choice, the Dev UI makes it clear what Hibernate and Panache are doing under the hood, providing transparency and confidence in the generated database operations.</p>
5+
6+
<div class="image-container">
7+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-light.png" alt="DB Schema Generation Light">
8+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-dark.png" alt="DB Schema Generation Dark">
9+
</div>
10+
</div>
11+
</section>

‎_includes/dev-ui-dependency-visualization.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<section class="dev-ui-section">
2+
<div class="section-content">
3+
<h3>Dependency Visualization</h3>
4+
<p>Visualize your application dependencies to optimize and debug relationships. The Quarkus Dev UI provides a clear and interactive graph of your application's modules and their dependencies, helping you quickly identify potential issues or inefficiencies.</p>
5+
6+
<div class="image-container">
7+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-light.png" alt="Dependency Visualization Light">
8+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-dark.png" alt="Dependency Visualization Dark">
9+
</div>
10+
</div>
11+
</section>

‎_includes/dev-ui-features.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<section class="dev-ui-features">
2+
<h2>Dev UI Features</h2>
3+
<p>Enhance your development workflow with these powerful features:</p>
4+
<ul>
5+
<li>Configuration Management</li>
6+
<li>Visualize Endpoints</li>
7+
<li>DB Schema Generation</li>
8+
<li>Dependency Visualization</li>
9+
<li>Continuous Testing</li>
10+
<li>Build Container Image</li>
11+
<li>Manage Dev Services</li>
12+
<li>Keycloak Integration</li>
13+
<li>Kafka UI Integration</li>
14+
</ul>
15+
</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-hero.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<section class="dev-ui-hero">
2+
<h1>Dev UI</h1>
3+
<p>Explore the comprehensive features of the Quarkus Dev UI to supercharge your development experience.</p>
4+
</section>

‎_includes/dev-ui-kafka-ui-integration.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<section class="dev-ui-kafka-ui-integration">
2+
<h3>Kafka UI Integration</h3>
3+
<p>Visualize and interact with Kafka topics, consumer groups, and nodes through the Dev UI.</p>
4+
</section>

‎_includes/dev-ui-keycloak-integration.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<section class="dev-ui-keycloak-integration">
2+
<h3>Keycloak Integration</h3>
3+
<p>Integrate with Keycloak to manage authentication and authorization during development.</p>
4+
<p>
5+
some image
6+
</p>
7+
</section>

‎_includes/dev-ui-manage-dev-services.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<section class="dev-ui-manage-dev-services">
2+
<h3>Manage Dev Services</h3>
3+
<p>Provision and manage dev services like databases and message brokers for your application.</p>
4+
</section>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<section class="dev-ui-section">
2+
<div class="section-content">
3+
<h3>Visualize Endpoints</h3>
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>

‎_includes/homepage-dev-ui-band.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<div class="component homepage-dev-ui-band full-width-bg text-centered">
2+
<div class="grid-wrapper">
3+
<div class="width-12-12">
4+
<h2>Dev UI Features</h2>
5+
<p>Explore the powerful built-in features of the Quarkus Dev UI that enhance productivity and streamline
6+
development.</p>
7+
</div>
8+
</div>
9+
<div class="grid-container">
10+
<div class="contrib-block">
11+
<div class="image-container">
12+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-light.png"
13+
alt="Configuration Management Light">
14+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-dark.png"
15+
alt="Configuration Management Dark">
16+
</div>
17+
<div class="content">
18+
<h3>Configuration Management</h3>
19+
<p>Seamlessly manage and modify application settings using Quarkus's unified configuration framework.</p>
20+
</div>
21+
</div>
22+
<div class="contrib-block">
23+
<div class="image-container">
24+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-light.png"
25+
alt="Visualize Endpoints Light">
26+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-dark.png"
27+
alt="Visualize Endpoints Dark">
28+
</div>
29+
<div class="content">
30+
<h3>Visualize Endpoints</h3>
31+
<p>Interact with application endpoints effortlessly.</p>
32+
</div>
33+
</div>
34+
<div class="contrib-block">
35+
<div class="image-container">
36+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-light.png"
37+
alt="DB Schema Generation Light">
38+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-dark.png"
39+
alt="DB Schema Generation Dark">
40+
</div>
41+
<div class="content">
42+
<h3>DB Schema Generation</h3>
43+
<p>Automatically create database schemas and SQL scripts for tables, reducing manual effort.</p>
44+
</div>
45+
</div>
46+
<div class="contrib-block">
47+
<div class="image-container">
48+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-light.png"
49+
alt="Dependency Visualization Light">
50+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-dark.png"
51+
alt="Dependency Visualization Dark">
52+
</div>
53+
<div class="content">
54+
<h3>Dependency Visualization</h3>
55+
<p>Get a comprehensive view of your application's dependencies to optimize and debug relationships.</p>
56+
</div>
57+
</div>
58+
<div class="contrib-block">
59+
<div class="image-container">
60+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-light.png"
61+
alt="Continuous Testing Light">
62+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-dark.png"
63+
alt="Continuous Testing Dark">
64+
</div>
65+
<div class="content">
66+
<h3>Continuous Testing</h3>
67+
<p>Run tests continuously to ensure code quality and prevent regressions.</p>
68+
</div>
69+
</div>
70+
<div class="contrib-block">
71+
<div class="image-container">
72+
<img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-light.png"
73+
alt="Build Container Image Light">
74+
<img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-dark.png"
75+
alt="Build Container Image Dark">
76+
</div>
77+
<div class="content">
78+
<h3>Build Container Image</h3>
79+
<p>Create lightweight, production-ready container images directly from the Dev UI.</p>
80+
</div>
81+
</div>
82+
83+
84+
</div>
85+
<div class="button-container">
86+
<button onclick="window.location.href='{{site.baseurl}}/dev-ui'">Go to Dev UI Page</button>
87+
</div>
88+
</div>

‎_layouts/dev-ui.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
layout: base
3+
---
4+
<div class="quarkus-dev-ui-page">
5+
{% include dev-ui-hero.html %}
6+
{% include dev-ui-features.html %}
7+
{% include dev-ui-configuration.html %}
8+
{% include dev-ui-visualize-endpoints.html %}
9+
{% include dev-ui-db-schema-generation.html %}
10+
{% include dev-ui-dependency-visualization.html %}
11+
{% include dev-ui-continuous-testing.html %}
12+
{% include dev-ui-build-container-image.html %}
13+
{% include dev-ui-generate-kubernetes-yaml.html %}
14+
{% include dev-ui-manage-dev-services.html %}
15+
{% include dev-ui-keycloak-integration.html %}
16+
{% include dev-ui-kafka-ui-integration.html %}
17+
</div>

‎_layouts/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<div class="quarkus-homepage">
55
{% include homepage-hero-band-ssjprime.html %}
66
{% include homepage-features-icon-band.html %}
7+
{% include homepage-dev-ui-band.html %}
78
{% include homepage-userstory-callout.html %}
89
{% include homepage-performance-band.html %}
910
{% include recent-posts-band.html %}

0 commit comments

Comments
 (0)