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>

0 commit comments

Comments
 (0)