From eae31791b3c92afb0efe155bb507d931c13dbed3 Mon Sep 17 00:00:00 2001 From: Tim Jacomb <21194782+timja@users.noreply.github.com> Date: Tue, 26 Sep 2023 09:09:19 +0100 Subject: [PATCH] Integrate with Prism API plugin (#72) Co-authored-by: Ullrich Hafner --- pom.xml | 14 +++++ .../plugins/designlibrary/UISample.java | 8 +++ .../jenkins/plugins/designlibrary/sample.js | 56 +++++++++++-------- src/main/resources/lib/samples/sample.jelly | 5 +- .../resources/scss/abstracts/_overrides.scss | 53 ------------------ .../scss/components/_source-block.scss | 11 +--- src/main/webapp/Validation/sample.jelly | 2 +- 7 files changed, 60 insertions(+), 89 deletions(-) diff --git a/pom.xml b/pom.xml index e27d5ac3..f2ff0c1c 100644 --- a/pom.xml +++ b/pom.xml @@ -85,6 +85,20 @@ THE SOFTWARE. io.jenkins.plugins ionicons-api + + io.jenkins.plugins + prism-api + 1.29.0-8 + + + + io.jenkins.plugins + commons-text-api + + + io.jenkins.plugins + commons-lang3-api + org.assertj assertj-core diff --git a/src/main/java/io/jenkins/plugins/designlibrary/UISample.java b/src/main/java/io/jenkins/plugins/designlibrary/UISample.java index e6588d9c..dffe235a 100644 --- a/src/main/java/io/jenkins/plugins/designlibrary/UISample.java +++ b/src/main/java/io/jenkins/plugins/designlibrary/UISample.java @@ -6,10 +6,13 @@ import hudson.model.Action; import hudson.model.Describable; +import io.jenkins.plugins.prism.PrismConfiguration; import java.util.ArrayList; import java.util.List; import jenkins.model.Jenkins; +import org.kohsuke.accmod.Restricted; +import org.kohsuke.accmod.restrictions.NoExternalUse; /** * @author Kohsuke Kawaguchi @@ -34,6 +37,11 @@ public UISampleDescriptor getDescriptor() { return (UISampleDescriptor) Jenkins.get().getDescriptorOrDie(getClass()); } + @Restricted(NoExternalUse.class) + public PrismConfiguration getPrismConfiguration() { + return PrismConfiguration.getInstance(); + } + public static List getAll() { return new ArrayList<>(Jenkins.get().getExtensionList(UISample.class)); } diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/sample.js b/src/main/resources/io/jenkins/plugins/designlibrary/sample.js index 428b4104..fcd9bcca 100644 --- a/src/main/resources/io/jenkins/plugins/designlibrary/sample.js +++ b/src/main/resources/io/jenkins/plugins/designlibrary/sample.js @@ -1,9 +1,4 @@ document.addEventListener("DOMContentLoaded", () => { - function extractLanguageFromClassList(element) { - return Array.from(element.classList) - .filter(clazz => clazz.startsWith('language-')) - .map(clazz => clazz.replace('language-', '')); - } const url = document.querySelector('head').dataset.rooturl @@ -11,18 +6,42 @@ document.addEventListener("DOMContentLoaded", () => { .forEach(element => { const fileName = element.dataset.sample; const executable = element.dataset.executable; - const componentName = window.location.href.match(/.+design-library\/(.+)$/)[1] + + // On the inputs page the preview markup link adds a hash to the url which breaks the regex extraction + const strippedHash = window.location.href.replace('#', '') + const componentName = strippedHash.match(/.+design-library\/(.+)$/)[1] const fullUrl = `${url}/plugin/design-library/${componentName}${fileName}`; fetch(fullUrl) .then(response => response.text()) .then(text => { - const language = extractLanguageFromClassList(element); - if (language.length > 0) { - element.innerHTML = Prism.highlight(text, Prism.languages[language], language.pop()) - } else { - element.innerHTML = text + element.innerText = text + + Prism.highlightElement(element) + + function setPrismBackgroundVariable() { + const computedStyle = window.getComputedStyle(element.parentElement) + const background = computedStyle.getPropertyValue('background') + + document.documentElement.style + .setProperty(prismVariable, background); } + + // This is for the copy clipboard section which doesn't use prism + // We need to match the colour + const prismVariable = '--prism-background' + if (!getComputedStyle(document.documentElement).getPropertyValue(prismVariable)) { + setPrismBackgroundVariable() + + if (window.isSystemRespectingTheme) { + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { + // If done immediately while appearance is changing from light to dark sometimes the wrong value is retrieved + // A slight delay fixes this + setTimeout(() => setPrismBackgroundVariable(), 50) + }); + } + } + const codeWrapper = element.closest(".jdl-component-code"); if (codeWrapper) { const copyButton = codeWrapper.querySelector(".copy-button, .jenkins-copy-button") @@ -30,21 +49,12 @@ document.addEventListener("DOMContentLoaded", () => { } }); if (executable === "true") { - var script = document.createElement("script"); // create a script DOM node - script.src = fullUrl; // set its src to the provided URL - document.head.appendChild(script); + const script = document.createElement("script"); // create a script DOM node + script.src = fullUrl; // set its src to the provided URL + document.head.appendChild(script); } }) - document.querySelectorAll('.language-java,.language-xml,.language-html,.language-css') - .forEach(element => { - const language = extractLanguageFromClassList(element); - - if (language.length > 0) { - element.innerHTML = Prism.highlight(element.innerHTML, Prism.languages[language], language.pop()) - } - }); - const shareButton = document.querySelector("#button-share"); if (shareButton) { diff --git a/src/main/resources/lib/samples/sample.jelly b/src/main/resources/lib/samples/sample.jelly index 1f22426a..843fd69f 100644 --- a/src/main/resources/lib/samples/sample.jelly +++ b/src/main/resources/lib/samples/sample.jelly @@ -23,7 +23,7 @@ THE SOFTWARE. --> - + Page layout for Design Library @@ -41,10 +41,11 @@ THE SOFTWARE. + + - diff --git a/src/main/resources/scss/abstracts/_overrides.scss b/src/main/resources/scss/abstracts/_overrides.scss index d3a38b1d..bddd6747 100644 --- a/src/main/resources/scss/abstracts/_overrides.scss +++ b/src/main/resources/scss/abstracts/_overrides.scss @@ -20,59 +20,6 @@ } } -// Remove when code blocks follows user's theme -// https://github.com/jenkinsci/design-library-plugin/issues/68 -pre.jdl-component-code__code { - position: relative; - padding: calc(var(--jdl-spacing) / 2) !important; - background: transparent !important; - z-index: 0; - - &::before { - content: ""; - position: absolute; - inset: 0; - background: var(--text-color); - border-radius: inherit; - opacity: 0.05; - z-index: -1; - } - - code { - font-size: 1rem !important; - text-shadow: none !important; - color: var(--text-color) !important; - - .token.cdata, .token.comment, .token.doctype, .token.prolog { - color: var(--text-color-secondary) !important; - } - - .token.punctuation { - color: var(--text-color-secondary) !important; - } - - .token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag { - color: var(--pink) !important; - } - - .token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string { - color: var(--green) !important; - } - - .language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url { - color: var(--brown) !important; - } - - .token.atrule, .token.attr-value, .token.keyword { - color: var(--cyan) !important; - } - - .token.class-name, .token.function { - color: var(--purple) !important; - } - } -} - code { font-family: var(--font-family-mono) !important; color: var(--text-color-secondary); diff --git a/src/main/resources/scss/components/_source-block.scss b/src/main/resources/scss/components/_source-block.scss index 8a8760b5..e24b548d 100644 --- a/src/main/resources/scss/components/_source-block.scss +++ b/src/main/resources/scss/components/_source-block.scss @@ -14,9 +14,8 @@ $jdl-component-code-controls-spacing: 0.75rem; position: absolute; inset: 0; border-radius: inherit; - background: var(--button-background); + background: var(--prism-background); z-index: -1; - opacity: 0.75; } &__code { @@ -37,14 +36,6 @@ $jdl-component-code-controls-spacing: 0.75rem; flex-direction: column; height: 100%; padding: $jdl-component-code-controls-spacing; - - & > div { - position: sticky; - top: calc(43px + #{$jdl-component-code-controls-spacing}); - right: $jdl-component-code-controls-spacing; - display: flex; - gap: $jdl-component-code-controls-spacing; - } } &:not(:hover) { diff --git a/src/main/webapp/Validation/sample.jelly b/src/main/webapp/Validation/sample.jelly index 414df18f..b95b2655 100644 --- a/src/main/webapp/Validation/sample.jelly +++ b/src/main/webapp/Validation/sample.jelly @@ -1,3 +1,3 @@ - +