Fix tabs, tidy up, refine content

Author: janfaracik

src/main/resources/io/jenkins/plugins/designlibrary/Localization/index.jelly

@@ -24,33 +24,11 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form" xmlns:s="/lib/samples">
   <s:layout>
-    <s:section title="${%titlejava}" description="${%howtojava}">
-      <s:group>
-        <s:preview fullWidth="true">
-          <f:entry>
-            ${it.message}<br/>
-            ${it.greet}
-          </f:entry>
-        </s:preview>
-        <s:code-panes>
-          <s:code-pane title="Localize.java">
-            <s:code language="java" file="Localize.java"/>
-          </s:code-pane>
-          <s:code-pane title="Messages.properties">
-            <s:code file="Messages.properties"/>
-          </s:code-pane>
-          <s:code-pane title="Messages_de.properties">
-            <s:code file="Messages_de.properties"/>
-          </s:code-pane>
-        </s:code-panes>
-      </s:group>
-    </s:section>
     <s:section title="${%titlejelly}" description="${%howtojelly}">
       <s:group>
         <s:preview fullWidth="true">
           <f:entry>
-            ${%How to localize texts in Jelly}<br/>
-            ${%longtext}<br/>
+            ${%longtext}<br/><br/>
             ${%hello('World')}
           </f:entry>
         </s:preview>
@@ -67,6 +45,19 @@ THE SOFTWARE.
         </s:code-panes>
       </s:group>
     </s:section>
+    <s:section title="${%titlejava}" description="${%howtojava}">
+      <s:code-panes>
+        <s:code-pane title="Localize.java">
+          <s:code language="java" file="Localize.java"/>
+        </s:code-pane>
+        <s:code-pane title="Messages.properties">
+          <s:code file="Messages.properties"/>
+        </s:code-pane>
+        <s:code-pane title="Messages_de.properties">
+          <s:code file="Messages_de.properties"/>
+        </s:code-pane>
+      </s:code-panes>
+    </s:section>
     <s:section title="${%titlejsJelly}" description="${%howtojsJelly}">
       <s:code-panes>
         <s:code-pane title="localize.jelly">

src/main/resources/io/jenkins/plugins/designlibrary/Localization/index.properties

@@ -3,12 +3,12 @@ howtojava=Create a file <em>Messages.properties</em> in the package folder. Afte
 hello=Hello {0}
 titlejelly=Localize text in Jelly
 howtojelly=Use <em>$&#123;%Text}</em> to create texts that can be localized. Create a properties files for content longer than a few words.
-longtext=A longer text that should not appear inline in the jelly file.
+longtext=A longer text that should not appear inline in the Jelly file.
 
 titlejsJelly=Localize text in JavaScript via Jelly
-howtojsJelly=Attach the localizations in attributes of template HTML elements via jelly which can then be retrieved via the document.
+howtojsJelly=Attach the localizations in attributes of template HTML elements via Jelly which can then be retrieved via the document.
 titlejsHTTP=Localize text in JavaScript via HTTP
-howtojsHTTP=Load them over HTTP via an endpoint <br/><code>$JENKINS_URL/i18n/resourceBundle?baseName=package.path.to.property.file</code><br/> which retrieves the property file in the users' locale. \
+howtojsHTTP=Load them over HTTP via <code>$JENKINS_URL/i18n/resourceBundle?baseName=package.path.to.property.file</code> which retrieves the property file in the users' locale. \
 This returns a JSON object with the localized texts.
 
-moreInfo=A detailed explanation how to localize texts in Java and Jelly files can be found in the developer guide <a href="https://www.jenkins.io/doc/developer/internationalization/" target="_blank">Internationalization and Localization</a>.
+moreInfo=A detailed explanation on how to localize text in Java and Jelly files can be found in the developer guide <a href="https://www.jenkins.io/doc/developer/internationalization/" target="_blank">Internationalization and Localization</a>.

src/main/resources/io/jenkins/plugins/designlibrary/Messages.properties

@@ -1,3 +1,3 @@
 Localization.description=Ensures texts can be displayed in the user''s language.
-Localization.message=How to localize texts in Java
+Localization.message=How to localize text in Java
 Localization.greet=Hello {0}

src/main/resources/scss/components/_component-group.scss

@@ -5,7 +5,7 @@
     border-bottom-right-radius: 0;
   }
 
-  .jdl-component-code {
+  .jdl-component-code__tab-bar, .jdl-component-code {
     margin-top: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;

src/main/resources/scss/components/_source-block.scss

@@ -45,8 +45,11 @@ $jdl-component-code-controls-spacing: 0.75rem;
 
   &__tab-bar {
     background: var(--card-background);
+    border-top: var(--jenkins-border);
     border-left: var(--jenkins-border);
     border-right: var(--jenkins-border);
+    border-top-left-radius: 0.66rem;
+    border-top-right-radius: 0.66rem;
     display: flex;
     flex-wrap: wrap;
     gap: 0.9rem;
@@ -115,6 +118,16 @@ $jdl-component-code-controls-spacing: 0.75rem;
   }
 }
 
+.jdl-tab-panes {
+  .jdl-component-code {
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-bottom: 0;
+    border-top: none;
+  }
+}
+
 .jdl-tab-pane__text {
   padding: 0 1em 1em 1em;
   border-left: var(--jenkins-border);

src/main/webapp/Localization/Messages.properties

@@ -1,2 +1,2 @@
-Localize.message=How to localize texts in Java
+Localize.message=How to localize text in Java
 Localize.greet=Hello {0}

src/main/webapp/Localization/localize-http.js

@@ -4,10 +4,8 @@ const response = await fetch(
 const json = await response.json();
 const i18n = json.data;
 
-const localization = i18n["How to localize texts in Jelly"];
 const longText = i18n.longtext;
 const hello = i18n.hello;
 
-console.log(localization);
 console.log(longText);
 console.log(hello.replace("{0}", "World!"));

src/main/webapp/Localization/localize-jelly.js

@@ -1,9 +1,7 @@
 const i18n = document.getElementById("plugin-i18n");
 
-const localization = i18n.dataset.localization;
 const longText = i18n.dataset.longtext;
 const hello = i18n.dataset.hello;
 
-console.log(localization);
 console.log(longText);
 console.log(hello.replace("{0}", "World!"));

src/main/webapp/Localization/localize-js.jelly

@@ -2,7 +2,6 @@
 <j:jelly xmlns:j="jelly:core">
   <template
     id="plugin-i18n"
-    data-localization="${%How to localize texts in Jelly}"
     data-longtext="${%longtext}"
     data-hello="${%hello}"
   />

src/main/webapp/Localization/localize.jelly

@@ -1,6 +1,5 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core">
-  ${%How to localize texts in Jelly}
   ${%longtext}
   ${%hello('World')}
 </j:jelly>