Merge pull request #107 from timja/theme-manager-integration

Theme manager integration

.gitignore

@@ -11,3 +11,7 @@ release.properties
 .DS_Store
 .idea
 /package-lock.json
+work/
+
+src/main/webapp/css/prism/**
+src/main/webapp/js/prism/**

README.adoc

@@ -52,13 +52,25 @@ Then you can use Prism in your jelly files using the following snippet:
 
 [source,xml]
 ----
-<st:adjunct includes="io.jenkins.plugins.prism"/>
+<j:jelly xmlns:j="jelly:core" xmlns:p="/prism">
+  <p:prism configuration="${it.prismConfiguration}"/>
+</j:jelly>
+----
+
+In your descriptor you will need to add a `getPrismConfiguration()` method:
+
+[source,java]
+----
+public PrismConfiguration getPrismConfiguration() {
+    return PrismConfiguration.getInstance();
+}
 ----
 
 == Examples
 
-Currently, no additional help is available for this plugin. You can have a look into the
+For source code rendering look into the
 https://github.com/jenkinsci/warnings-ng-plugin[warnings plugin] that
 uses the `SourceCodeViewModel` to render the source code with the selected warning.
 
+For general prism API integration see https://github.com/jenkinsci/design-library-plugin/pull/72[design-library-plugin PR#72].
 

package.json

@@ -14,7 +14,9 @@
     "remark-preset-lint-recommended": "6.1.3"
   },
   "scripts": {
-    "lint-md": "remark ."
+    "lint-md": "remark .",
+    "mvnbuild": "",
+    "mvntest": ""
   },
   "remarkConfig": {
     "plugins": [

pom.xml

@@ -18,14 +18,17 @@
   <url>https://github.com/jenkinsci/prism-api-plugin</url>
 
   <properties>
-    <revision>1.29.0-7</revision>
+    <revision>1.29.0-8</revision>
     <changelist>-SNAPSHOT</changelist>
 
     <module.name>${project.groupId}.prism</module.name>
 
     <testcontainers.version>1.18.3</testcontainers.version>
     <jsoup.version>1.16.1</jsoup.version>
 
+    <node.version>18.12.0</node.version>
+    <npm.version>8.19.4</npm.version>
+
   </properties>
 
   <licenses>
@@ -160,36 +163,16 @@
                 <include>**/*</include>
               </includes>
             </fileset>
+            <fileset>
+              <directory>${project.basedir}/src/main/webapp</directory>
+              <includes>
+                <include>css/prism/**/*</include>
+                <include>js/prism/**/*</include>
+              </includes>
+            </fileset>
           </filesets>
         </configuration>
       </plugin>
-      <plugin>
-        <groupId>com.github.eirslett</groupId>
-        <artifactId>frontend-maven-plugin</artifactId>
-        <version>1.13.3</version>
-        <executions>
-          <execution>
-            <id>install node and npm</id>
-            <goals>
-              <goal>install-node-and-npm</goal>
-            </goals>
-            <phase>generate-resources</phase>
-            <configuration>
-              <nodeVersion>v18.12.0</nodeVersion>
-            </configuration>
-          </execution>
-          <execution>
-            <id>npm install</id>
-            <goals>
-              <goal>npm</goal>
-            </goals>
-            <phase>generate-resources</phase>
-            <configuration>
-              <arguments>install</arguments>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-resources-plugin</artifactId>
@@ -201,7 +184,7 @@
               <goal>copy-resources</goal>
             </goals>
             <configuration>
-              <outputDirectory>${project.build.directory}/${project.artifactId}/js</outputDirectory>
+              <outputDirectory>${project.basedir}/src/main/webapp/js/prism</outputDirectory>
               <resources>
                 <resource>
                   <directory>${project.basedir}/node_modules/prismjs/components</directory>
@@ -224,7 +207,7 @@
               <goal>copy-resources</goal>
             </goals>
             <configuration>
-              <outputDirectory>${project.build.directory}/${project.artifactId}/css</outputDirectory>
+              <outputDirectory>${project.basedir}/src/main/webapp/css/prism</outputDirectory>
               <resources>
                 <resource>
                   <directory>${project.basedir}/node_modules/prismjs/themes</directory>

src/main/java/io/jenkins/plugins/prism/PrismTheme.java

@@ -8,7 +8,7 @@
  * @author Ullrich Hafner
  */
 public enum PrismTheme {
-    PRISM("Default", "prism.css"),
+    PRISM("Default (light and dark mode)", "prism.css"),
     COY("Coy", "prism-coy.css"),
     DARK("Dark", "prism-dark.css"),
     FUNKY("Funky", "prism-funky.css"),

src/main/java/io/jenkins/plugins/prism/SourceCodeViewModel.java

@@ -40,6 +40,10 @@ public SourceCodeViewModel(final Run<?, ?> owner, final String fileName, final R
         sourceCode = render(sourceCodeReader, marker);
     }
 
+    public PrismConfiguration getPrismConfiguration() {
+        return PrismConfiguration.getInstance();
+    }
+
     private String render(final Reader affectedFile, final Marker marker) {
         try (BufferedReader reader = new BufferedReader(affectedFile)) {
             SourcePrinter sourcePrinter = new SourcePrinter();
@@ -72,14 +76,5 @@ public String getDisplayName() {
     public String getSourceCode() {
         return sourceCode;
     }
-
-    /**
-     * Returns the filename of the prism theme. Themes are stored in the package below the css folder.
-     *
-     * @return the theme CSS file
-     */
-    public String getThemeCssFileName() {
-        return PrismConfiguration.getInstance().getTheme().getFileName();
-    }
 }
 

src/main/resources/io/jenkins/plugins/prism.jelly

@@ -7,15 +7,14 @@ Use it like <st:adjunct includes="io.jenkins.plugins.prism"/>
   <j:new var="h" className="hudson.Functions" />
   ${h.initPageVariables(context)}
 
-  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/line-highlight/prism-line-highlight.css"/>
-  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/line-numbers/prism-line-numbers.css"/>
-  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/match-braces/prism-match-braces.css"/>
+  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/prism/line-highlight/prism-line-highlight.css"/>
+  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/prism/line-numbers/prism-line-numbers.css"/>
+  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/prism/match-braces/prism-match-braces.css"/>
 
-  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism-core.min.js"/>
-  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/autoloader/prism-autoloader.min.js"
-          data-autoloader-path="${resURL}/plugin/prism-api/js/"/>
-  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/line-highlight/prism-line-highlight.min.js"/>
-  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/line-numbers/prism-line-numbers.min.js"/>
-  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/match-braces/prism-match-braces.min.js"/>
-  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/keep-markup/prism-keep-markup.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/prism-core.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/autoloader/prism-autoloader.min.js" data-autoloader-path="${resURL}/plugin/prism-api/js/prism/"/>
+  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/line-highlight/prism-line-highlight.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/line-numbers/prism-line-numbers.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/match-braces/prism-match-braces.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/keep-markup/prism-keep-markup.min.js"/>
 </j:jelly>

src/main/resources/io/jenkins/plugins/prism/SourceCodeViewModel/index.jelly

@@ -1,14 +1,12 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:bs="/bootstrap5">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:bs="/bootstrap5" xmlns:p="/prism">
 
   <st:header name="Content-Type" value="text/html;charset=UTF-8"/>
 
   <bs:page it="${it}" notitle="true">
 
-    <st:adjunct includes="io.jenkins.plugins.prism"/>
+  <p:prism configuration="${it.prismConfiguration}"/>
     <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/custom-prism.css"/>
-    <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/${it.themeCssFileName}"/>
-
     <h1>${%sourcedetail.header(it.displayName)}</h1>
 
     <j:out value="${it.sourceCode}"/>

src/main/resources/prism/prism.jelly

@@ -0,0 +1,24 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+  <st:documentation>
+    Loads prism and a number of plugins
+    <st:attribute name="configuration" use="required">
+      Pass a reference to the 'PrismConfiguration' instance.
+    </st:attribute>
+  </st:documentation>
+
+  <st:once>
+    <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/prism/line-highlight/prism-line-highlight.css"/>
+    <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/prism/line-numbers/prism-line-numbers.css"/>
+    <link type="text/css" rel="stylesheet" href="${resURL}/plugin/prism-api/css/prism/match-braces/prism-match-braces.css"/>
+
+    <script id="prism-theme-loader" type="text/javascript" data-selected-theme="${attrs.configuration.theme.fileName}" src="${resURL}/plugin/prism-api/js/theme-loader.js"/>
+
+    <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/prism-core.min.js"/>
+    <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/autoloader/prism-autoloader.min.js" data-autoloader-path="${resURL}/plugin/prism-api/js/prism/"/>
+    <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/line-highlight/prism-line-highlight.min.js"/>
+    <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/line-numbers/prism-line-numbers.min.js"/>
+    <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/match-braces/prism-match-braces.min.js"/>
+    <script type="text/javascript" src="${resURL}/plugin/prism-api/js/prism/keep-markup/prism-keep-markup.min.js"/>
+  </st:once>
+</j:jelly>

src/main/webapp/js/theme-loader.js

@@ -0,0 +1,36 @@
+// We wait till the DOM is loaded to make sure theme manager has loaded
+document.addEventListener('DOMContentLoaded', () => {
+  const head = document.getElementsByTagName('head')[0]
+  const resUrl = head.dataset.resurl
+
+  function setTheme() {
+    const themeElement = document.getElementById('prism-theme-loader')
+    let themeCss = themeElement.dataset.selectedTheme || "prism.css"
+
+    // if default theme is in use then use theme manager API to get light / dark version
+    if (themeCss === 'prism.css' && window.getThemeManagerProperty) {
+      const themeName = window.getThemeManagerProperty('prism-api', 'theme')
+
+      if (themeName) {
+        themeCss = `prism-${themeName}.css`
+      }
+    }
+
+    const activeTheme = document.getElementById('prism-active-theme')
+    if (activeTheme) {
+      activeTheme.remove()
+    }
+
+    head.insertAdjacentHTML(
+      'beforeend',
+      `<link id="prism-active-theme" rel="stylesheet" href="${resUrl}/plugin/prism-api/css/prism/${themeCss}" />`);
+  }
+
+  if (window.getThemeManagerProperty && window.isSystemRespectingTheme) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+      setTheme()
+    });
+  }
+
+  setTheme()
+})