WIP: Update OpenEMS theme

.github/workflows/build.yml

@@ -0,0 +1,25 @@
+name: Build OpenEMS.io Theme
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Build ui-bundle
+        run: npm ci && gulp lint && gulp bundle
+
+      - name: Save build-artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          compression-level: 0
+          path: build/ui-bundle.zip

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Prepare OpenEMS.io Theme Release
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Build ui-bundle
+        run: |
+          npm ci
+          gulp lint
+          gulp bundle
+
+      - name: Create draft Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: true
+          files: |
+            build/ui-bundle.zip

.vscode/settings.json

@@ -0,0 +1 @@
+{}

preview-src/ui-model.yml

@@ -1,8 +1,10 @@
 antoraVersion: '1.0.0'
 site:
-  url: http://localhost:5252
-  title: Brand Docs
+  url: https://github.com/OpenEMS/openems
+  title: OpenEMS // Docs
   homeUrl: &home_url /xyz/5.2/index.html
+  keys:
+    website: https://github.com/OpenEMS/openems
   components:
   - name: abc
     title: Project ABC
@@ -62,7 +64,7 @@ page:
   displayVersion: '5.2'
   module: ROOT
   relativeSrcPath: index.adoc
-  editUrl: http://example.com/project-xyz/blob/main/index.adoc
+  editUrl: https://github.com/OpenEMS/openems/blob/develop/doc/modules/ROOT/pages/introduction.adoc
   origin:
     private: false
   previous:

src/css/main.css

@@ -37,3 +37,12 @@ body.-toc aside.toc.sidebar {
     flex-basis: var(--toc-width--widescreen);
   }
 }
+
+.gitlink {
+  background: url(../img/github.svg) no-repeat 50% 45%;
+  background-size: 50%;
+  display: block;
+  height: 2.5rem;
+  padding: 0;
+  width: 2.5rem;
+}

src/css/vars.css

@@ -17,6 +17,7 @@
   --color-jet-70: #222;
   --color-jet-80: #191919;
   --color-black: #000;
+  --color-primary: #f0c693;
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -36,7 +37,7 @@
   --scrollbar-thumb-color: var(--color-gray-10);
   --scrollbar_hover-thumb-color: var(--color-gray-30);
   /* navbar */
-  --navbar-background: var(--color-jet-80);
+  --navbar-background: var(--color-primary);
   --navbar-font-color: var(--color-white);
   --navbar_hover-background: var(--color-black);
   --navbar-button-background: var(--color-white);
@@ -79,7 +80,7 @@
   --doc-line-height: 1.6;
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
-  --heading-font-color: var(--color-jet-80);
+  --heading-font-color: var(--color-primary);
   --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);

src/partials/footer.hbs

@@ -1,2 +1 @@
-{{> footer-content}}
 {{> footer-scripts}}

src/partials/header-content.hbs

@@ -5,7 +5,7 @@
       {{#if env.SITE_SEARCH_PROVIDER}}
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">
-          <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
+          <input id="search-input" type="text" placeholder="Search the docs" {{#if page.home}} autofocus{{/if}}>
         </div>
       </div>
       {{/if}}
@@ -17,29 +17,13 @@
     </div>
     <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        <a class="navbar-item" href="#">Home</a>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Products</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Product A</a>
-            <a class="navbar-item" href="#">Product B</a>
-            <a class="navbar-item" href="#">Product C</a>
-          </div>
-        </div>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Services</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Service A</a>
-            <a class="navbar-item" href="#">Service B</a>
-            <a class="navbar-item" href="#">Service C</a>
-          </div>
-        </div>
         <div class="navbar-item">
-          <span class="control">
-            <a class="button is-primary" href="#">Download</a>
-          </span>
+          <a class="navbar-item" href="https://github.com/OpenEMS/openems">
+            <span class="gitlink">
+            </span>
+          </a>
         </div>
       </div>
     </div>
   </nav>
-</header>
+</header>

src/partials/toolbar.hbs

@@ -4,6 +4,5 @@
   <a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
   {{/with}}
 {{> breadcrumbs}}
-{{> page-versions}}
 {{> edit-this-page}}
 </div>