Integrate with Prism API plugin

jenkinsci · Aug 20, 2023 · 1a3d1e6 · 1a3d1e6
1 parent 091beba
commit 1a3d1e6
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 89 deletions.
diff --git a/pom.xml b/pom.xml
@@ -85,6 +85,11 @@ THE SOFTWARE.
             <groupId>io.jenkins.plugins</groupId>
             <artifactId>ionicons-api</artifactId>
         </dependency>
+        <dependency>
+            <groupId>io.jenkins.plugins</groupId>
+            <artifactId>prism-api</artifactId>
+            <version>1.28.0-1</version>
+        </dependency>
         <dependency>
             <groupId>org.assertj</groupId>
             <artifactId>assertj-core</artifactId>

diff --git 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<UISample> 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
@@ -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
 
@@ -17,34 +12,42 @@ document.addEventListener("DOMContentLoaded", () => {
       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);
+          }
+
+          const prismVariable = '--prism-background'
+          if (!getComputedStyle(document.documentElement).getPropertyValue(prismVariable)) {
+            setPrismBackgroundVariable()
+
+            if (window.isSystemRespectingTheme) {
+              window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                setPrismBackgroundVariable()
+              });
+            }
           }
+
           const codeWrapper = element.closest(".jdl-component-code");
           if (codeWrapper) {
             const copyButton = codeWrapper.querySelector(".copy-button, .jenkins-copy-button")
             copyButton.setAttribute("text", text)
           }
         });
       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
@@ -23,7 +23,7 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout">
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:p="/prism">
   <st:documentation>
     Page layout for Design Library
 
@@ -41,10 +41,11 @@ THE SOFTWARE.
   </j:if>
 
   <l:layout title="${title}">
+    <p:prism configuration="${it.prismConfiguration}" />
+
     <st:adjunct includes="io.jenkins.plugins.designlibrary.styles" />
     <st:adjunct includes="io.jenkins.plugins.designlibrary.sample" />
     <st:adjunct includes="io.jenkins.plugins.designlibrary.preCode" />
-    <st:adjunct includes="io.jenkins.plugins.designlibrary.prism" />
 
     <st:include page="header" optional="true" />
 

diff --git a/src/main/resources/scss/abstracts/_overrides.scss b/src/main/resources/scss/abstracts/_overrides.scss
@@ -20,60 +20,6 @@
   }
 }
 
-// Remove when code blocks follows user's theme
-// https://github.com/jenkinsci/design-library-plugin/issues/68
-pre {
-  position: relative;
-  margin: 0 0 var(--jdl-spacing) 0 !important;
-  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
@@ -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
@@ -1,3 +1,3 @@
 <f:entry title="${%State name}" field="name">
-  <f:textbox/>
+  <f:textbox />
 </f:entry>