From dab05f6550f1052ab4fc0e43d7ae1525b56e3a41 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Mon, 9 Oct 2023 18:10:04 +0100 Subject: [PATCH 1/4] Add usage instructions --- .../docs/src/resource-generation/qrcode.java | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/quarkus-workshop-super-heroes/docs/src/resource-generation/qrcode.java b/quarkus-workshop-super-heroes/docs/src/resource-generation/qrcode.java index 46dc6e437..7c7c4f7b5 100644 --- a/quarkus-workshop-super-heroes/docs/src/resource-generation/qrcode.java +++ b/quarkus-workshop-super-heroes/docs/src/resource-generation/qrcode.java @@ -20,6 +20,11 @@ import java.util.HashMap; import java.util.Map; +/** + * To invoke this, run jbang https://github + * .com/quarkusio/quarkus-workshops/blob/main/quarkus-workshop-super-heroes/docs/src/resource + * -generation/qrcode.java https://shattereddisk.github.io/rickroll/ mycode.png + */ class qrcode { // We can do either 1color or rgb From ba0780ea02c3ed94ce79248d567f5c09c5ca8e33 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Mon, 9 Oct 2023 18:24:30 +0100 Subject: [PATCH 2/4] Have only one button that always does the right thing --- .../docs/src/docs/asciidoc/assets/css/hol.css | 127 ++++++++++++++++++ .../docs/src/docs/asciidoc/index.html | 70 +++++++--- 2 files changed, 179 insertions(+), 18 deletions(-) diff --git a/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/assets/css/hol.css b/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/assets/css/hol.css index 1fb16f2b7..86eef8e4f 100755 --- a/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/assets/css/hol.css +++ b/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/assets/css/hol.css @@ -5,6 +5,7 @@ html, body { font-family: 'Open Sans', Arial, sans-serif; --quarkus-blue: #4695EB; + --quarkus-blue-tint: #a3caf5; --dark-blue: #09131E; --dark-blue-alt: #0D1C2C; --dark-blue-1: #205894; @@ -37,6 +38,8 @@ html, body { --site-margins: 13rem; --toc-width: 20rem; + + --shimmer-duration: 0.3s; } body { @@ -245,10 +248,134 @@ button:hover { .big { width: 60%; + height: 60px; margin-top: 1em; margin-bottom: 1em; padding: 1em; font-size: 1.2em; + display: flex; + align-items: center; + justify-content: center; +} + +.anchor { + width: 100%; + height: 1.2em; /* this should be the same height as the font size of what is in the anchor */ + position: relative; +} + +.fadingin { + position: absolute; + left: 0; + right: 0; + background-color: white; /* confusingly, this is actually the text color because of the background clip */ + opacity: 1; + + background-repeat: no-repeat; + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + -webkit-animation-name: fade-in; + -webkit-animation-duration: var(--shimmer-duration); + -webkit-animation-iteration-count: 1; + -webkit-background-size: 8em 100%; /*50px*/ + +} + +.fadingout { + position: absolute; + background-color: white; /* confusingly, this is actually the text color because of the background clip */ + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + -webkit-animation-name: fade-out; + -webkit-animation-duration: var(--shimmer-duration); + -webkit-animation-iteration-count: 1; + opacity: 0; +} + +.flash { + -webkit-animation-name: flash; + -webkit-animation-duration: var(--shimmer-duration); + -webkit-animation-iteration-count: 1; +} + +.fadeable { + position: absolute; + left: 0; + right: 0; + background-color: white; /* confusingly, this is actually the text color because of the background clip */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.faded { + opacity: 0; + position: absolute; + left: 0; + right: 0; +} + +@-webkit-keyframes flash { + 0% { + background: var(--quarkus-blue); + } + + 50% { + background: radial-gradient(var(--quarkus-blue-tint), var(--quarkus-blue)); + } + + 100% { + background: var(--quarkus-blue); + } +} + +/* This animation works by applying a gradient to the background, and using a text-clip so that the background +is actually the foreground. + */ +@-webkit-keyframes fade-in { + 0% { + background: radial-gradient(white, var(--quarkus-blue)); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + opacity: 0; + } + + 50% { + background: radial-gradient(white, var(--quarkus-blue)); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + opacity: 0.5 + } + + 100% { + background: radial-gradient(white, var(--quarkus-blue)); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + opacity: 1; + } +} + + +@-webkit-keyframes fade-out { + 0% { + background: radial-gradient(var(--quarkus-blue), white); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + opacity: 1; + } + + 70% { + background: radial-gradient(var(--quarkus-blue), white); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + opacity: 0.7 + } + + 100% { + background: radial-gradient(var(--quarkus-blue), white); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + opacity: 0; + } } diff --git a/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/index.html b/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/index.html index da8840c0d..ba8ab56d9 100644 --- a/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/index.html +++ b/quarkus-workshop-super-heroes/docs/src/docs/asciidoc/index.html @@ -20,12 +20,36 @@ const baseUrl = "./"; const filename = "spine.html" + /* It's easy for people to click the most prominent button, but if they've set options they should + * be choosing the less prominent button at the bottom. Fix this by making the big button go away. + */ + function hideDefaultButton() { + const button = document.querySelector(`button`); + button.addEventListener('click', generateTailoredURL) + + const originalText = document.querySelector(`.fadeable`); + if (originalText) { + // Only flash if there was originalText to change + button.classList.toggle('flash') + + originalText.classList.toggle('fadingout'); + originalText.classList.toggle('fadeable'); + } + + const replacementText = document.querySelector(`.faded`); + if (replacementText) { + replacementText.classList.toggle('faded'); + replacementText.classList.toggle('fadingin'); + } + + } + function generateDefaultURL() { const url = baseUrl + filename window.location.href = url; } - function generateURL() { + function generateTailoredURL() { const selectedOptions = []; // Get the selected build option @@ -44,7 +68,6 @@ // Generate the URL based on selected options const url = baseUrl + 'variants/' + selectedOptions.join("-") + "/" + filename; window.location.href = url; - } @@ -53,23 +76,34 @@

Quarkus Workshop Configurator

- +

What operating system are you using?

@@ -78,43 +112,43 @@

What content would you like
  • - +
    • -
  • +
    • -
  • +
-

-

Quarkus Workshop Configurator

+

Quarkus Workshop Configurator

- - -

What operating system are you using?

-
    -
  • - -
    • -
  • - -
    • -
  • -
    • -
- - -

What content would you like to include in the workshop?

-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • -
  • - -
    • - -
  • - -
    • -
  • - -
    • -
- +
+

Default workshop configuration

+
Go to the instructions for all operating systems, with default content.
+ +
+
+

Customize workshop

+
Tailor instructions to your operating system and interests.
+ +

What operating system are you using?

+
    +
  • + +
    • +
  • + +
    • +
  • +
    • +
+ + +

What content would you like to + include? +

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • +
  • + +
    • + +
  • + +
    • +
  • + +
    • +
+ +