diff --git a/_includes/dev-ui-build-container-image.html b/_includes/dev-ui-build-container-image.html new file mode 100644 index 00000000000..991c4f11f07 --- /dev/null +++ b/_includes/dev-ui-build-container-image.html @@ -0,0 +1,11 @@ +
+
+

Build Container Image

+

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.

+ +
+ Build Container Image Light + Build Container Image Dark +
+
+
diff --git a/_includes/dev-ui-configuration.html b/_includes/dev-ui-configuration.html new file mode 100644 index 00000000000..a8b6b151bbb --- /dev/null +++ b/_includes/dev-ui-configuration.html @@ -0,0 +1,26 @@ +
+
+ +

Configuration Management

+

Manage application settings and configurations through an intuitive interface. Modify the configuration file + directly in the UI, or use the form editor UI to achieve the same goal. The form editor UI also provides + visibility into all available configuration options, ensuring you don't miss anything.

+ +
+ Configuration Source Editor Light + Configuration Source Editor Dark +
+ +

The form editor offers a user-friendly way to adjust settings while providing a comprehensive list of + configuration options available in your application.

+ +
+ Configuration Management Light + Configuration Management Dark +
+
+
diff --git a/_includes/dev-ui-continuous-testing.html b/_includes/dev-ui-continuous-testing.html new file mode 100644 index 00000000000..0ab0896f858 --- /dev/null +++ b/_includes/dev-ui-continuous-testing.html @@ -0,0 +1,11 @@ +
+
+

Continuous Testing

+

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.

+ +
+ Continuous Testing Light + Continuous Testing Dark +
+
+
diff --git a/_includes/dev-ui-db-schema-generation.html b/_includes/dev-ui-db-schema-generation.html new file mode 100644 index 00000000000..0d39740963f --- /dev/null +++ b/_includes/dev-ui-db-schema-generation.html @@ -0,0 +1,11 @@ +
+
+

DB Schema Generation

+

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.

+ +
+ DB Schema Generation Light + DB Schema Generation Dark +
+
+
diff --git a/_includes/dev-ui-dependency-visualization.html b/_includes/dev-ui-dependency-visualization.html new file mode 100644 index 00000000000..3b7138dbe56 --- /dev/null +++ b/_includes/dev-ui-dependency-visualization.html @@ -0,0 +1,11 @@ +
+
+

Dependency Visualization

+

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.

+ +
+ Dependency Visualization Light + Dependency Visualization Dark +
+
+
diff --git a/_includes/dev-ui-features.html b/_includes/dev-ui-features.html new file mode 100644 index 00000000000..fbdbd24771a --- /dev/null +++ b/_includes/dev-ui-features.html @@ -0,0 +1,15 @@ +
+

Dev UI Features

+

Enhance your development workflow with these powerful features:

+ +
\ No newline at end of file diff --git a/_includes/dev-ui-generate-kubernetes-yaml.html b/_includes/dev-ui-generate-kubernetes-yaml.html new file mode 100644 index 00000000000..8137b573fbc --- /dev/null +++ b/_includes/dev-ui-generate-kubernetes-yaml.html @@ -0,0 +1,8 @@ +
+
+

Generate Kubernetes YAML

+

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.

+

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.

+ +
+
diff --git a/_includes/dev-ui-hero.html b/_includes/dev-ui-hero.html new file mode 100644 index 00000000000..48f3c6c4554 --- /dev/null +++ b/_includes/dev-ui-hero.html @@ -0,0 +1,4 @@ +
+

Dev UI

+

Explore the comprehensive features of the Quarkus Dev UI to supercharge your development experience.

+
\ No newline at end of file diff --git a/_includes/dev-ui-kafka-ui-integration.html b/_includes/dev-ui-kafka-ui-integration.html new file mode 100644 index 00000000000..40ef0d6c36b --- /dev/null +++ b/_includes/dev-ui-kafka-ui-integration.html @@ -0,0 +1,4 @@ +
+

Kafka UI Integration

+

Visualize and interact with Kafka topics, consumer groups, and nodes through the Dev UI.

+
\ No newline at end of file diff --git a/_includes/dev-ui-keycloak-integration.html b/_includes/dev-ui-keycloak-integration.html new file mode 100644 index 00000000000..155fb70c067 --- /dev/null +++ b/_includes/dev-ui-keycloak-integration.html @@ -0,0 +1,7 @@ +
+

Keycloak Integration

+

Integrate with Keycloak to manage authentication and authorization during development.

+

+ some image +

+
\ No newline at end of file diff --git a/_includes/dev-ui-manage-dev-services.html b/_includes/dev-ui-manage-dev-services.html new file mode 100644 index 00000000000..c7669f9e4f1 --- /dev/null +++ b/_includes/dev-ui-manage-dev-services.html @@ -0,0 +1,4 @@ +
+

Manage Dev Services

+

Provision and manage dev services like databases and message brokers for your application.

+
\ No newline at end of file diff --git a/_includes/dev-ui-visualize-endpoints.html b/_includes/dev-ui-visualize-endpoints.html new file mode 100644 index 00000000000..06f13599c5d --- /dev/null +++ b/_includes/dev-ui-visualize-endpoints.html @@ -0,0 +1,18 @@ +
+
+

Visualize Endpoints

+

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.

+ +
+ Quarkus Dev UI Endpoints Light + Quarkus Dev UI Endpoints Dark +
+ +

If you prefer Swagger UI, you can access it directly through the Swagger Dev UI by adding the smallrye-openapi extension to your project. This enables an intuitive way to explore and test your APIs.

+ +
+ Swagger UI Light + Swagger UI Dark +
+
+
diff --git a/_includes/homepage-dev-ui-band.html b/_includes/homepage-dev-ui-band.html new file mode 100644 index 00000000000..5f5a6f0182c --- /dev/null +++ b/_includes/homepage-dev-ui-band.html @@ -0,0 +1,88 @@ +
+
+
+

Dev UI Features

+

Explore the powerful built-in features of the Quarkus Dev UI that enhance productivity and streamline + development.

+
+
+
+
+
+ Configuration Management Light + Configuration Management Dark +
+
+

Configuration Management

+

Seamlessly manage and modify application settings using Quarkus's unified configuration framework.

+
+
+
+
+ Visualize Endpoints Light + Visualize Endpoints Dark +
+
+

Visualize Endpoints

+

Interact with application endpoints effortlessly.

+
+
+
+
+ DB Schema Generation Light + DB Schema Generation Dark +
+
+

DB Schema Generation

+

Automatically create database schemas and SQL scripts for tables, reducing manual effort.

+
+
+
+
+ Dependency Visualization Light + Dependency Visualization Dark +
+
+

Dependency Visualization

+

Get a comprehensive view of your application's dependencies to optimize and debug relationships.

+
+
+
+
+ Continuous Testing Light + Continuous Testing Dark +
+
+

Continuous Testing

+

Run tests continuously to ensure code quality and prevent regressions.

+
+
+
+
+ Build Container Image Light + Build Container Image Dark +
+
+

Build Container Image

+

Create lightweight, production-ready container images directly from the Dev UI.

+
+
+ + +
+
+ +
+
\ No newline at end of file diff --git a/_layouts/dev-ui.html b/_layouts/dev-ui.html new file mode 100644 index 00000000000..03b69a7bc99 --- /dev/null +++ b/_layouts/dev-ui.html @@ -0,0 +1,17 @@ +--- +layout: base +--- +
+ {% include dev-ui-hero.html %} + {% include dev-ui-features.html %} + {% include dev-ui-configuration.html %} + {% include dev-ui-visualize-endpoints.html %} + {% include dev-ui-db-schema-generation.html %} + {% include dev-ui-dependency-visualization.html %} + {% include dev-ui-continuous-testing.html %} + {% include dev-ui-build-container-image.html %} + {% include dev-ui-generate-kubernetes-yaml.html %} + {% include dev-ui-manage-dev-services.html %} + {% include dev-ui-keycloak-integration.html %} + {% include dev-ui-kafka-ui-integration.html %} +
\ No newline at end of file diff --git a/_layouts/index.html b/_layouts/index.html index c3e89a2f298..077a96e3e66 100644 --- a/_layouts/index.html +++ b/_layouts/index.html @@ -4,6 +4,7 @@
{% include homepage-hero-band-ssjprime.html %} {% include homepage-features-icon-band.html %} + {% include homepage-dev-ui-band.html %} {% include homepage-userstory-callout.html %} {% include homepage-performance-band.html %} {% include recent-posts-band.html %} diff --git a/_sass/includes/homepage-dev-ui-band.scss b/_sass/includes/homepage-dev-ui-band.scss new file mode 100644 index 00000000000..16f5d5c0aef --- /dev/null +++ b/_sass/includes/homepage-dev-ui-band.scss @@ -0,0 +1,152 @@ +.homepage-dev-ui-band { + color: var(--main-text-color); + padding: 4rem 2rem; + border-top: 1px solid var(--card-outline); + + h3 { + font-size: 2.5rem; + color: var(--heading-color); + margin-bottom: 1.5rem; + } + + p { + font-size: 1.2rem; + color: var(--main-text-color); + margin-bottom: 3rem; + } + + + .button-container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 2rem; + } + + .grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + justify-content: center; + align-items: center; + margin: auto; + place-items: center; + } + + .contrib-block { + height: 100% !important; + max-height: 350px; + background: var(--card-background-color); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + max-width: 320px; + margin: 0; + border: 1px solid var(--card-outline); + + .image-container { + width: 100%; + height: 150px !important; + overflow: hidden; + border-bottom: 2px solid var(--link-color); + flex: 1; + flex-shrink: 0; + + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + + .content { + padding: 1.5rem; + background: var(--tile-background-color); + flex: 1; + flex-grow: 1; + justify-content: center; + + + h3 { + font-size: 1.4rem; + font-weight: bold; + color: var(--tile-text-color); + margin-bottom: 1rem; + white-space: nowrap; + overflow: hidden; + font-size: clamp(1.2rem, 2vw, 1.4rem); + } + + p { + font-size: 1rem; + color: var(--main-text-color); + line-height: 1.5; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + } + + } + + @media screen and (max-width: 1024px) { + .grid-container { + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + } + + .contrib-block { + max-width: 250px; + + .image-container { + height: 130px; + } + + .content { + padding: 1.2rem; + + h3 { + font-size: 1.3rem; + } + + p { + font-size: 0.95rem; + } + } + } + } + + @media screen and (max-width: 600px) { + .grid-container { + grid-template-columns: 1fr; + } + + .contrib-block { + max-width: 100%; + + .image-container { + height: 120px; + } + + .content { + padding: 1rem; + + h3 { + font-size: 1.2rem; + } + + p { + font-size: 0.9rem; + } + } + } + } +} \ No newline at end of file diff --git a/_sass/layouts/dev-ui.scss b/_sass/layouts/dev-ui.scss new file mode 100644 index 00000000000..c385fb679dc --- /dev/null +++ b/_sass/layouts/dev-ui.scss @@ -0,0 +1,46 @@ +.dev-ui-section { + padding: 2rem 1rem; + + h3 { + font-size: 1.8rem; + color: var(--heading-color); + margin-bottom: 1rem; + text-align: left; + } + + p { + font-size: 1rem; + color: var(--main-text-color); + line-height: 1.5; + margin-bottom: 1.5rem; + text-align: left; + } + + .image-container { + display: flex; + justify-content: center; + margin: 3rem 0; + + img { + max-width: 80%; + height: auto; + border: 1px solid var(--card-outline); + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + } + + @media screen and (max-width: 768px) { + h3 { + font-size: 1.5rem; + } + + p { + font-size: 0.9rem; + } + + .image-container img { + max-width: 100%; + } + } +} diff --git a/assets/css/main.scss b/assets/css/main.scss index 910715d5ca1..fd029227ac4 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -47,6 +47,7 @@ $baseurl: "{{ site.baseurl }}"; @import "layouts/publications"; @import "layouts/documentation"; @import "layouts/working-groups"; +@import "layouts/dev-ui"; @import "includes/header-navigation"; @import "includes/libraries-standards-band"; @import "includes/homepage-hero-band"; @@ -68,4 +69,5 @@ $baseurl: "{{ site.baseurl }}"; @import "includes/contributor_list.scss"; @import "includes/image-pageheader.scss"; @import "includes/brand"; +@import "includes/homepage-dev-ui-band"; diff --git a/assets/images/dev-ui/build-container-image-dev-ui-dark.png b/assets/images/dev-ui/build-container-image-dev-ui-dark.png new file mode 100644 index 00000000000..1bd2a7cfb9d Binary files /dev/null and b/assets/images/dev-ui/build-container-image-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/build-container-image-dev-ui-light.png b/assets/images/dev-ui/build-container-image-dev-ui-light.png new file mode 100644 index 00000000000..21bfcf2d096 Binary files /dev/null and b/assets/images/dev-ui/build-container-image-dev-ui-light.png differ diff --git a/assets/images/dev-ui/configuration-dev-ui-dark.png b/assets/images/dev-ui/configuration-dev-ui-dark.png new file mode 100644 index 00000000000..ad464edcce9 Binary files /dev/null and b/assets/images/dev-ui/configuration-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/configuration-dev-ui-light.png b/assets/images/dev-ui/configuration-dev-ui-light.png new file mode 100644 index 00000000000..e79ec4b3463 Binary files /dev/null and b/assets/images/dev-ui/configuration-dev-ui-light.png differ diff --git a/assets/images/dev-ui/configuration-source-editor-dev-ui-dark.png b/assets/images/dev-ui/configuration-source-editor-dev-ui-dark.png new file mode 100644 index 00000000000..b79d2c839a5 Binary files /dev/null and b/assets/images/dev-ui/configuration-source-editor-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/configuration-source-editor-dev-ui-light.png b/assets/images/dev-ui/configuration-source-editor-dev-ui-light.png new file mode 100644 index 00000000000..c8cc9ec25de Binary files /dev/null and b/assets/images/dev-ui/configuration-source-editor-dev-ui-light.png differ diff --git a/assets/images/dev-ui/continuous-testing-dev-ui-dark.png b/assets/images/dev-ui/continuous-testing-dev-ui-dark.png new file mode 100644 index 00000000000..ad7b4de5288 Binary files /dev/null and b/assets/images/dev-ui/continuous-testing-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/continuous-testing-dev-ui-light.png b/assets/images/dev-ui/continuous-testing-dev-ui-light.png new file mode 100644 index 00000000000..97def8f0611 Binary files /dev/null and b/assets/images/dev-ui/continuous-testing-dev-ui-light.png differ diff --git a/assets/images/dev-ui/create-sql-script-dev-ui-dark.png b/assets/images/dev-ui/create-sql-script-dev-ui-dark.png new file mode 100644 index 00000000000..0b3063a97a6 Binary files /dev/null and b/assets/images/dev-ui/create-sql-script-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/create-sql-script-dev-ui-light.png b/assets/images/dev-ui/create-sql-script-dev-ui-light.png new file mode 100644 index 00000000000..d91b3487285 Binary files /dev/null and b/assets/images/dev-ui/create-sql-script-dev-ui-light.png differ diff --git a/assets/images/dev-ui/dependency-graph-dev-ui-dark.png b/assets/images/dev-ui/dependency-graph-dev-ui-dark.png new file mode 100644 index 00000000000..d1f6e31972d Binary files /dev/null and b/assets/images/dev-ui/dependency-graph-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/dependency-graph-dev-ui-light.png b/assets/images/dev-ui/dependency-graph-dev-ui-light.png new file mode 100644 index 00000000000..d7a649bf728 Binary files /dev/null and b/assets/images/dev-ui/dependency-graph-dev-ui-light.png differ diff --git a/assets/images/dev-ui/endpoints-dev-ui-dark.png b/assets/images/dev-ui/endpoints-dev-ui-dark.png new file mode 100644 index 00000000000..fff6ba8c4f9 Binary files /dev/null and b/assets/images/dev-ui/endpoints-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/endpoints-dev-ui-light.png b/assets/images/dev-ui/endpoints-dev-ui-light.png new file mode 100644 index 00000000000..b1614ddd9ef Binary files /dev/null and b/assets/images/dev-ui/endpoints-dev-ui-light.png differ diff --git a/assets/images/dev-ui/swagger-ui-dev-ui-dark.png b/assets/images/dev-ui/swagger-ui-dev-ui-dark.png new file mode 100644 index 00000000000..167adcd49af Binary files /dev/null and b/assets/images/dev-ui/swagger-ui-dev-ui-dark.png differ diff --git a/assets/images/dev-ui/swagger-ui-dev-ui-light.png b/assets/images/dev-ui/swagger-ui-dev-ui-light.png new file mode 100644 index 00000000000..9d0e949d794 Binary files /dev/null and b/assets/images/dev-ui/swagger-ui-dev-ui-light.png differ diff --git a/dev-ui.md b/dev-ui.md new file mode 100644 index 00000000000..7980eab1674 --- /dev/null +++ b/dev-ui.md @@ -0,0 +1,6 @@ +--- +layout: dev-ui +title: Developer UI +subtitle: Explore the features and capabilities of the Developer UI. +permalink: /dev-ui/ +--- \ No newline at end of file