Guides - Latest
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/web/app/qs-form.ts b/src/main/resources/web/app/qs-form.ts
new file mode 100644
index 00000000..5080efb7
--- /dev/null
+++ b/src/main/resources/web/app/qs-form.ts
@@ -0,0 +1,174 @@
+import {LitElement, html, css, nothing, render} from 'lit';
+import {customElement, state, property} from 'lit/decorators.js';
+import debounce from 'lodash/debounce';
+
+export const QS_START_EVENT = 'qs-start';
+export const QS_END_EVENT = 'qs-end';
+export const QS_RESULT_EVENT = 'qs-result';
+export const QS_RESULT_NEXT_EVENT = 'qs-result-next';
+
+export const QS_NEXT_PAGE_EVENT = 'qs-next-page';
+
+export interface QsResult {
+ hits: QsHit[];
+ hasMoreHits: boolean;
+}
+
+export interface QsHit {
+ title: string;
+ summary: string;
+ url: string;
+ keywords: string | undefined;
+ content: string | undefined;
+ type: string | undefined;
+}
+
+
+@customElement('qs-form')
+export class QsForm extends LitElement {
+
+ static styles = css`
+ .quarkus-search {
+ display: block !important;
+ }
+
+ .d-none {
+ display: none;
+ }
+ `;
+
+ @property({type: String}) api: string = "/api/search";
+ @property({type: String}) minChars: number = 3;
+ @property({type: String}) quarkusVersion: string;
+
+ private _page: number = 0;
+ private _total: number = 0;
+ private _loading: boolean = false;
+
+ render() {
+ return html`
+
+
+
+
+
+ Tutorials
+Short and focused exercises to get you going quickly.
+
+
+
+
+
+
+
+
+ Building a Native Executable
+Build native executables with GraalVM or Mandrel.
+getting-started, native
+
+
+
+
+
+
+ Collect metrics using Micrometer
+Create an application that uses the Micrometer metrics library to collect runtime, + extension and application metrics and expose them as a Prometheus (OpenMetrics) endpoint.
+observability
+
+
+
+
+
+
+ Creating Your First Application
+Discover how to create your first Quarkus application.
+getting-started
+
+
+
+
+
+
+ Creating a tutorial
+Create a new tutorial that guides users through creating, running, and testing a Quarkus + application that uses annotations from an imaginary extension.
+contributing
+
+
+
+
+
+
+ Getting Started With Reactive
+Learn more about developing reactive applications with Quarkus.
+getting-started
+
+
+
+
+
+ Protect Quarkus web application by using an Auth0 OpenID Connect + provider
+Quarkus Security provides comprehensive OpenId Connect (OIDC) and OAuth2 support with + its quarkus-oidc extension, supporting both Authorization code flow and Bearer token authentication + mechanisms.
+oidc, sso, auth0
+ security, web
+
+
+
+
+
+
+ Protect a service application by using + OpenID Connect (OIDC) Bearer token authentication
+Use the Quarkus OpenID Connect (OIDC) extension to secure a Jakarta REST application + with Bearer token authentication.
+security
+
+
+
+
+
+
+ Protect a web application by using OpenID + Connect (OIDC) authorization code flow
+With the Quarkus OpenID Connect (OIDC) extension, you can protect application HTTP + endpoints by using the OIDC Authorization Code Flow mechanism.
+security, web
+
+
+
+
+
+
+ Quarkus Tools in your favorite IDE
+Learn more about Quarkus integrations in IDEs.
+getting-started
+
+
+
+
+
+
+ Secure a Quarkus application with Basic authentication + and Jakarta Persistence
+Secure your Quarkus application endpoints by combining the built-in Quarkus Basic + authentication with the Jakarta Persistence identity provider to enable role-based access control (RBAC).
+getting-started, security
+
+
+
+
+
+
+ Using our Tooling
+Explore the Quarkus developer toolchain which makes Quarkus development so fast and + enjoyable.
+getting-started
+
+
+
+
+
+
+ Your second Quarkus application
+Discover some of the features that make developing with Quarkus a joyful experience.
+core, data, getting-started
+
+
+ `;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ const formElements = this._getFormElements();
+ this.addEventListener(QS_NEXT_PAGE_EVENT, this._handleNextPage);
+ formElements.forEach((el) => {
+ const eventName = this._isInput(el) ? 'input' : 'change';
+ el.addEventListener(eventName, this._handleInputChange);
+ });
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this.removeEventListener(QS_NEXT_PAGE_EVENT, this._handleNextPage);
+ const formElements = this._getFormElements();
+ formElements.forEach(el => {
+ const eventName = this._isInput(el) ? 'input' : 'change';
+ el.removeEventListener(eventName, this._handleInputChange);
+ });
+ }
+
+ private _getFormElements(): NodeListOf
+
+ `;
+ }
+}
\ No newline at end of file
diff --git a/src/main/resources/web/app/qs-target.ts b/src/main/resources/web/app/qs-target.ts
new file mode 100644
index 00000000..5401633a
--- /dev/null
+++ b/src/main/resources/web/app/qs-target.ts
@@ -0,0 +1,128 @@
+import {html, LitElement} from 'lit';
+import {customElement, property, state, queryAll} from 'lit/decorators.js';
+import './qs-guide'
+import {QS_END_EVENT, QS_NEXT_PAGE_EVENT, QS_RESULT_EVENT, QS_RESULT_NEXT_EVENT, QS_START_EVENT, QsResult} from "./qs-form";
+import debounce from 'lodash/debounce';
+
+
+/**
+ * This component shows the live server processes
+ */
+@customElement('qs-target')
+export class QsTarget extends LitElement {
+
+ @property({type: String}) private type: string;
+ @state() private _result: QsResult | undefined;
+ @state() private _loading = false;
+ @queryAll('.qs-hit') private _hits: NodeListOf${this.data.title}
+
+
+ ${this.data.summary}
+${this.data.keywords}
+ ${this.data.content ? html`${this.data.content}
`: ''}
+
+
+ `;
+ }
+ const result = this._result.hits.map(i => this._renderHit(i));
+ return html`
+ No results found
+
+ ${result}
+
+ ${this._loading ? this._renderLoading() : ''}
+ `;
+ }
+ if (this._loading) {
+ return html`${this._renderLoading()}
`;
+ }
+ return html`
+
+
+ `;
+ }
+
+
+ private _renderLoading() {
+ return html`
+ Loading...
+ `; + } + + private _renderHit(i) { + switch (this.type) { + case 'guide': + return html` +