Guides - Latest
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/web/app/assets/icons/docsicon-concepts.svg b/src/main/resources/web/app/assets/icons/docsicon-concepts.svg
new file mode 100644
index 00000000..4916aa33
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/docsicon-concepts.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main/resources/web/app/assets/icons/docsicon-guides.svg b/src/main/resources/web/app/assets/icons/docsicon-guides.svg
new file mode 100644
index 00000000..d7ca4e0d
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/docsicon-guides.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main/resources/web/app/assets/icons/docsicon-pdf.svg b/src/main/resources/web/app/assets/icons/docsicon-pdf.svg
new file mode 100644
index 00000000..bba3719a
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/docsicon-pdf.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/src/main/resources/web/app/assets/icons/docsicon-reference.svg b/src/main/resources/web/app/assets/icons/docsicon-reference.svg
new file mode 100644
index 00000000..ecf8b094
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/docsicon-reference.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main/resources/web/app/assets/icons/docsicon-tutorials.svg b/src/main/resources/web/app/assets/icons/docsicon-tutorials.svg
new file mode 100644
index 00000000..4a012259
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/docsicon-tutorials.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main/resources/web/app/assets/icons/index.ts b/src/main/resources/web/app/assets/icons/index.ts
new file mode 100644
index 00000000..800ca155
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/index.ts
@@ -0,0 +1,21 @@
+import tutorials from './docsicon-tutorials.svg';
+import guides from './docsicon-guides.svg';
+import pdf from './docsicon-pdf.svg';
+import concepts from './docsicon-concepts.svg';
+import reference from './docsicon-reference.svg';
+import loading from './loading.svg';
+
+const docs = {
+ tutorials,
+ guides,
+ pdf,
+ concepts,
+ reference
+};
+
+const icons = {
+ docs,
+ loading
+}
+
+export default icons;
\ No newline at end of file
diff --git a/src/main/resources/web/app/assets/icons/loading.svg b/src/main/resources/web/app/assets/icons/loading.svg
new file mode 100644
index 00000000..fd7db769
--- /dev/null
+++ b/src/main/resources/web/app/assets/icons/loading.svg
@@ -0,0 +1,45 @@
+
\ 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..38f924cf
--- /dev/null
+++ b/src/main/resources/web/app/qs-form.ts
@@ -0,0 +1,173 @@
+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_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;
+}
+
+/**
+ * This component is the form that triggers the search
+ */
+@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/guides/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
+
+ `;
+ }
+
+ private _renderContent(content: string) {
+ if(!content) {
+ return content;
+ }
+ if(Array.isArray(content)) {
+ return content.map((c) => html`${this._renderContent(this.data.title)}
+
+
+ ${this._renderContent(this.data.summary)}
+${this._renderContent(this.data.keywords)}
+
+ ${this._renderContent(this.data.content)}
+
+ ${this._renderContent(c)}
`); + } + return unsafeHTML(content); + } +} \ 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..6bbf9677 --- /dev/null +++ b/src/main/resources/web/app/qs-target.ts @@ -0,0 +1,177 @@ +import {html, LitElement, css, unsafeCSS} 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_START_EVENT, QsResult} from "./qs-form"; +import debounce from 'lodash/debounce'; +import icons from "./assets/icons"; + + +/** + * This component is the target of the search results + */ +@customElement('qs-target') +export class QsTarget extends LitElement { + + static styles = css` + + .loading { + background-image: url('${unsafeCSS(icons.loading)}'); + background-repeat: no-repeat; + background-position: top; + background-size: 45px; + padding-top: 55px; + text-align: center; + padding-bottom: 10px; + } + + .qs-hits { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 1em; + clear: both; + } + + .no-hits { + padding: 10px; + margin: 10px; + font-size: 1.2rem; + line-height: 1.5; + font-weight: 400; + font-style: italic; + text-align: center; + background: var(--empty-background-color, #F0CA4D); + } + + + qs-guide { + grid-column: span 4; + margin: 1rem 0rem 1rem 0rem; + + @media screen and (max-width: 1300px) { + grid-column: span 6; + } + + @media screen and (max-width: 768px) { + grid-column: span 12; + margin: 1rem 0rem 1rem 0rem; + } + + @media screen and (max-width: 480px) { + grid-column: span 12; + } + } + `; + + @property({type: String}) private type: string; + @state() private _result: QsResult | undefined; + @state() private _loading = false; + @queryAll('.qs-hit') private _hits: NodeListOf
+
+ `;
+ }
+ const result = this._result.hits.map(i => this._renderHit(i));
+ return html`
+ Sorry, no ${this.type} matched your search. Please try again.
+
+ ${result}
+
+ ${this._loading ? this._renderLoading() : ''}
+ `;
+ }
+ if (this._loading) {
+ return html`
+ ${this._renderLoading()}
`;
+ }
+ return html`
+
+
+ `;
+ }
+
+
+ private _renderLoading() {
+ return html`
+ Searching...
+ `;
+ }
+
+ private _renderHit(i) {
+ switch (this.type) {
+ case 'guide':
+ return html`
+