Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ia3andy
ia3andy committed Feb 9, 2024
1 parent 13150ab commit 0b9f9f0
Show file tree
Hide file tree
Showing 10 changed files with 159 additions and 207 deletions.
2 changes: 2 additions & 0 deletions README.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,3 +241,5 @@ you will need to set up a few things manually:
== License

This project is licensed under the Apache License Version 2.0.

The web assets in `src/main/resources/web` are licensed under the Creative Commons Attribution 3.0 International License.
2 changes: 1 addition & 1 deletion pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
<dependency>
<groupId>io.quarkiverse.qute.web</groupId>
<artifactId>quarkus-qute-web</artifactId>
<version>3.0.0.CR2</version>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
Expand Down
22 changes: 22 additions & 0 deletions src/main/resources/templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Quarkus Search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src data: 'self' 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com https://quarkus.io https://use.fontawesome.com; base-uri 'none'; object-src 'none'; form-action 'none'; font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com;">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<link rel="shortcut icon" type="image/png" href="https://quarkus.io/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script type="module" src="/api/web-components/search.js"></script>
{#bundle tag="style"/}
</head>

<body>
<div class="content">
{#insert /}
</div>
</body>
</html>
205 changes: 10 additions & 195 deletions src/main/resources/templates/pub/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,201 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>Quarkus Search Web-Component test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://quarkus.io/assets/css/main.css?2021-07-29" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script type="module" src="/api/web-components/search.js"></script>
{#bundle tag="style"/}
</head>
{#include base.html}

<nav class="search">
<div class="logo"></div>

<body>
<div class="content">
<qs-form>
<section class="full-width-version-bg flexfilterbar">
<div class="flexcontainer">
<div class="flexlabel">
<label>By Version</label>
</div>
<div class="pulldown version">
<select id="guidesindex-version-dropdown" name="version">
<option value="main">Main - SNAPSHOT</option>
<option value="latest" selected="">3.5.1 - Latest</option>
<option value="3.2">3.2</option>
<option value="2.16">2.16</option>
<option value="2.13">2.13</option>
<option value="2.7">2.7</option>
</select>
</div>
<div class="flexlabel">
<label>By Category</label>
</div>
<div class="pulldown category">
<select id="guidesindex-category-dropdown" name="categories">
<option value="">All categories</option>
<option value="alt-languages">Alternative languages</option>
<option value="architecture">Architecture</option>
<option value="business-automation">Business Automation</option>
<option value="cloud">Cloud</option>
<option value="command-line">Command Line Applications</option>
<option value="compatibility">Compatibility</option>
<option value="contributing">Contributing</option>
<option value="core">Core</option>
<option value="data">Data</option>
<option value="getting-started">Getting Started</option>
<option value="integration">Integration</option>
<option value="messaging">Messaging</option>
<option value="miscellaneous">Miscellaneous</option>
<option value="native">Native</option>
<option value="observability">Observability</option>
<option value="security">Security</option>
<option value="serialization">Serialization</option>
<option value="tooling">Tooling</option>
<option value="web">Web</option>
<option value="writing-extensions">Writing Extensions</option>
</select>
</div>
<div class="search">
<input name="q" type="text" placeholder="Filter by keyword"/>
</div>
</div>
</section>
<div class="search-query">
<input name="q" type="search" placeholder="Start searching..."/>
</div>
</qs-form>
<div><h1 class="title">Guides - Latest</h1></div>

<qs-target type="guide">
<div class="grid-wrapper guides">
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="tutorial">Tutorials</h3>
<p>Short and focused exercises to get you going quickly.</p>
</div>
<div class="grid-wrapper">
<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/building-native-image">Building a Native Executable</a></h4>
<div class="description"><p>Build native executables with GraalVM or Mandrel.</p>
</div>
<div class="keywords"></div>
<div class="categories">getting-started, native</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/telemetry-micrometer-tutorial">Collect metrics using Micrometer</a></h4>
<div class="description"><p>Create an application that uses the Micrometer metrics library to collect runtime,
extension and application metrics and expose them as a Prometheus (OpenMetrics) endpoint.</p>
</div>
<div class="keywords"></div>
<div class="categories">observability</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/getting-started">Creating Your First Application</a></h4>
<div class="description"><p>Discover how to create your first Quarkus application.</p>
</div>
<div class="keywords"></div>
<div class="categories">getting-started</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/doc-create-tutorial">Creating a tutorial</a></h4>
<div class="description"><p>Create a new tutorial that guides users through creating, running, and testing a Quarkus
application that uses annotations from an imaginary extension.</p>
</div>
<div class="keywords"></div>
<div class="categories">contributing</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/getting-started-reactive">Getting Started With Reactive</a></h4>
<div class="description"><p>Learn more about developing reactive applications with Quarkus.</p>
</div>
<div class="keywords"></div>
<div class="categories">getting-started</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/security-oidc-auth0-tutorial">Protect Quarkus web application by using an Auth0 OpenID Connect
provider</a></h4>
<div class="description"><p>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.</p>
</div>
<div class="keywords">oidc, sso, auth0</div>
<div class="categories">security, web</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/security-oidc-bearer-token-authentication-tutorial">Protect a service application by using
OpenID Connect (OIDC) Bearer token authentication</a></h4>
<div class="description"><p>Use the Quarkus OpenID Connect (OIDC) extension to secure a Jakarta REST application
with Bearer token authentication.</p>
</div>
<div class="keywords"></div>
<div class="categories">security</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/security-oidc-code-flow-authentication-tutorial">Protect a web application by using OpenID
Connect (OIDC) authorization code flow</a></h4>
<div class="description"><p>With the Quarkus OpenID Connect (OIDC) extension, you can protect application HTTP
endpoints by using the OIDC Authorization Code Flow mechanism.</p>
</div>
<div class="keywords"></div>
<div class="categories">security, web</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/ide-tooling">Quarkus Tools in your favorite IDE</a></h4>
<div class="description"><p>Learn more about Quarkus integrations in IDEs.</p>
</div>
<div class="keywords"></div>
<div class="categories">getting-started</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/security-basic-authentication-tutorial">Secure a Quarkus application with Basic authentication
and Jakarta Persistence</a></h4>
<div class="description"><p>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).</p>
</div>
<div class="keywords"></div>
<div class="categories">getting-started, security</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/tooling">Using our Tooling</a></h4>
<div class="description"><p>Explore the Quarkus developer toolchain which makes Quarkus development so fast and
enjoyable.</p>
</div>
<div class="keywords"></div>
<div class="categories">getting-started</div>
</div>


<div class="grid__item docs-card tutorialbkg">
<h4><a href="/guides/getting-started-dev-services">Your second Quarkus application</a></h4>
<div class="description"><p>Discover some of the features that make developing with Quarkus a joyful experience.</p>
</div>
<div class="keywords"></div>
<div class="categories">core, data, getting-started</div>
</div>
</nav>


</div>
</div>
</qs-target>
</div>
</body>
</html>
<qs-target>
</qs-target>
7 changes: 6 additions & 1 deletion src/main/resources/web/app/qs-target.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export class QsTarget extends LitElement {
}
`;

@property({type: String}) private type: string;
@property({type: String}) private type: string = "guide";
@state() private _result: QsResult | undefined;
@state() private _loading = false;
@queryAll('.qs-hit') private _hits: NodeListOf<HTMLElement>;
Expand Down Expand Up @@ -159,6 +159,11 @@ export class QsTarget extends LitElement {
private _handleResult = (e: CustomEvent) => {
console.debug("Received results in qs-target: ", e.detail);
if (!this._result || !e.detail.hits || e.detail.page === 0) {
if(e.detail.hits) {
document.body.classList.add("qs-has-results");
} else {
document.body.classList.remove("qs-has-results");
}
this._result = e.detail;
return;
}
Expand Down
109 changes: 109 additions & 0 deletions src/main/resources/web/app/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
:root {
--background: white;
--text-color: black;
--input-border-color: #5996E5;
--top-nav-bg: black;
}

qs-form::slotted(*) {
display: none;
}

body {
font-family: 'Open Sans', Arial, sans-serif;
background-color: var(--background); /* Quarkus background color */
color: var(--text-color); /* Quarkus text color */
margin: 0;
}

nav.search {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
background-color: var(--top-nav-bg);
gap: 20px;
padding: 0 10px;
@media screen and (max-width: 768px) {
gap: 10px;
}

}

.search-query input{
padding: 10px;
border-radius: 5px;
outline: none;
border: 1px solid var(--input-border-color);
width: 100%;
}

.logo {
background-image: url('/static/quarkus-logo-h-w.svg');
background-position: left;
background-repeat: no-repeat;
height: 50px;
width: 200px;
}

qs-form {
flex-grow: 1;
}

body:not(.qs-has-results) {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;


.logo {
background-image: url('/static/quarkus-logo-v.svg');
background-size: 200px;
background-position: center;
height: 200px;
width: 200px;
}

nav.search {
flex-direction: column;
background-color: white;
width: 500px;
gap: 0;

.search-query input {
width: 500px;
margin-bottom: 100px;

}

@media screen and (max-width: 768px) {
padding: 0 20px;

.search-query input {
width: 300px;
}
}
}


}

.title {
color: #007bff; /* Quarkus primary color */
}

.filters {
padding: 15px;
border-radius: 5px;
}

qs-target {
display: block;
padding: 30px;

@media screen and (max-width: 768px) {
padding: 10px;
}
}

4 changes: 0 additions & 4 deletions src/main/resources/web/app/temp-override.css
View file

This file was deleted.

1 change: 1 addition & 0 deletions src/main/resources/web/static/quarkus-logo-h-w.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 0b9f9f0

Please sign in to comment.