Add Github workflows (#1)

* Add Github workflows

* Remove Fake title

* Add images

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [elchininet]

.github/dependabot.yml

@@ -0,0 +1,17 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "sunday"
+    commit-message:
+      prefix: "[Dependencies]"
+    groups:
+      dependencies-prod:
+        dependency-type: "production"
+      dependencies-dev:
+        dependency-type: "development"
+    labels:
+      - dependencies
+    versioning-strategy: increase

.github/workflows/build.yaml

@@ -0,0 +1,76 @@
+name: Create release
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set-up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'yarn'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cache
+          key: dependencies-v1-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - name: Install deps
+        run: yarn install --frozen-lockfile
+      - name: Tests
+        run: yarn test:ts
+      - name: Build Changelog
+        id: build_changelog
+        uses: mikepenz/release-changelog-builder-action@v3
+        with:
+          configurationJson: |
+            {
+              "categories": [
+                {
+                  "title": "## 🚀 Features",
+                  "labels": ["feature", "feature-request", "enhancement", "request"]
+                },
+                {
+                  "title": "## 🛠 Fixes",
+                  "labels": ["fix", "bug"]
+                },
+                {
+                  "title": "## 🧩 Dependencies",
+                  "labels": ["dependencies"]
+                },
+                {
+                  "title": "## ⚙️ Configuration",
+                  "labels": ["configuration"]
+                },
+                {
+                  "title": "## 📝 Documentation",
+                  "labels": ["documentation"]
+                },
+                {
+                  "title": "## 📦 Other",
+                  "labels": []
+                }
+              ],
+              "template": "#{{CHANGELOG}}",
+              "pr_template": "- #{{TITLE}}\n   - PR: ##{{NUMBER}} by @#{{AUTHOR}}",
+              "empty_template": "#{{OWNER}}\n#{{REPO}}\n#{{FROM_TAG}}\n#{{TO_TAG}}",
+              "max_pull_requests": 1000,
+              "max_back_track_time_days": 1000
+            }
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create a release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            dist/custom-sidebar.js
+          body: |
+            ${{ steps.build_changelog.outputs.changelog }}

.github/workflows/hacs.yaml

@@ -0,0 +1,18 @@
+name: HACS Action
+
+on:
+  push:
+  pull_request:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  hacs:
+    name: HACS Action
+    runs-on: "ubuntu-latest"
+    steps:
+      - uses: "actions/checkout@v3"
+      - name: HACS Action
+        uses: "hacs/action@main"
+        with:
+          category: "plugin"

.github/workflows/test.yaml

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:      
+  test:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'yarn'
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cache
+          key: dependencies-v1-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+      - name: Install
+        run: yarn install --frozen-lockfile
+      - name: Tests
+        run: yarn test:ts

README.md

@@ -4,6 +4,29 @@
 
 Custom [HACS] plugin that allows you to rearrange, hide, and add menu items to the sidebar in [Home Assistant].
 
+<table>
+  <tr>
+    <th width="25%">Default sidebar</th>
+    <th width="25%">Hide some items</th>
+    <th width="25%">Add new items</th>
+    <th width="25%">Reorder items</th>
+  </tr>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/elchininet/custom-sidebar/master/images/default-sidebar.png" alt="default sidebar" />
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/elchininet/custom-sidebar/master/images/hide-items.png" alt="hide items" />
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/elchininet/custom-sidebar/master/images/new-items.png" alt="new items" />
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/elchininet/custom-sidebar/master/images/reorder-items.png" alt="reorder items" />
+    </td>
+  </tr>
+</table>
+
 This is a refactor of [custom-sidebar-v2] by @galloween, which is now archived. Inspired in the [original Custom Sidebar] plugin by @Villhellm (R.I.P).
 
 ## Installation

package.json

@@ -8,7 +8,8 @@
   "license": "Apache-2.0",
   "private": false,
   "scripts": {
-    "build": "rollup --config rollup.config.js --bundleConfigAsCjs"
+    "build": "rollup --config rollup.config.js --bundleConfigAsCjs",
+    "test:ts": "tsc --noEmit"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",

src/custom-sidebar.ts

@@ -158,7 +158,7 @@ class CustomSidebar {
             ._getElementWithConfig(titleElementPromise)
             .then(([config, titleElement]): void => {
                 if (config.title) {
-                    titleElement.innerHTML = 'Fake title';
+                    titleElement.innerHTML = config.title;
                 }
             }); 
     }
@@ -205,9 +205,8 @@ class CustomSidebar {
                     return total;
                 }, 0);
 
-                orderWithItems.forEach((orderItem: ConfigOrderWithItem): void => {
-
-                    if (orderItem.bottom && !crossedBottom) {
+                const processBottom = () => {
+                    if (!crossedBottom) {
                         Array.from(items).forEach((element: HTMLElement) => {
                             if (!element.hasAttribute(ATTRIBUTE.PROCESSED)) {
                                 element.style.order = `${orderIndex}`;
@@ -218,6 +217,13 @@ class CustomSidebar {
                         orderIndex ++;
                         crossedBottom = true;
                     }
+                };
+
+                orderWithItems.forEach((orderItem: ConfigOrderWithItem): void => {
+
+                    if (orderItem.bottom) {
+                        processBottom();
+                    }
 
                     if (orderItem.new_item) {
 
@@ -255,6 +261,8 @@ class CustomSidebar {
                     orderIndex++;
 
                 });
+
+                processBottom();
 
             });
     }