Updated woodpecker config to not install SASS

.woodpecker.yml

@@ -6,7 +6,6 @@ pipeline:
   build:
     image: node:16
     commands:
-      - apt update && apt install -y ruby ruby-dev && gem install sass
       - npm install
       - npm run grunt
 

Gruntfile.js

@@ -4,7 +4,7 @@ module.exports = function(grunt) {
 
   // Project configuration.
   grunt.initConfig({
-    sass: {
+    'dart-sass': {
       dist: {
         options: {
           style: 'compressed'
@@ -69,7 +69,7 @@ module.exports = function(grunt) {
       },
       css: {
         files: ['assets/sass/*.sass'],
-        tasks: ['sass'],
+        tasks: ['dart-sass'],
         options: {
           atBegin: true,
           spawn: false
@@ -96,12 +96,12 @@ module.exports = function(grunt) {
 
   // Load task plugins
   grunt.loadNpmTasks('grunt-twig-render');
-  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-dart-sass');
   grunt.loadNpmTasks('grunt-contrib-coffee');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-watch');
 
   // Default task(s).
-  grunt.registerTask('default', ['twigRender', 'sass', 'coffee', 'copy']);
+  grunt.registerTask('default', ['twigRender', 'dart-sass', 'coffee', 'copy']);
 
 };

assets/coffee/sentry.coffee

@@ -1,3 +1,16 @@
+shell = require('electron').shell
+
+document.addEventListener('DOMContentLoaded', () ->
+  links = document.querySelectorAll('a[href^="http"]')
+  i = 0
+  while i < links.length
+    links[i].addEventListener('click', (event) ->
+      event.preventDefault()
+      shell.openExternal(this.href)
+    )
+    i++
+)
+
 @openTab = (tab) ->
   # show the component info that's selected
   tabs = document.querySelectorAll('.tab-button')

assets/sass/sentry.sass

@@ -1,5 +1,11 @@
 $tab-bar-height: 50px
 
+$primary-color: #009688
+$primary-color-light: lighten($primary-color, 10%)
+$primary-color-dark: darken($primary-color, 10%)
+
+$default-transition: all 230ms ease-in-out
+
 body
   margin: 0
   padding: $tab-bar-height 0 90px
@@ -7,20 +13,20 @@ body
   font-size: 18px
 
 a
-  color: cornflowerblue
+  color: $primary-color
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
   &:hover
-    color: darken(cornflowerblue, 10%)
+    color: $primary-color-light
 
 input
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
 input[type=submit],
 button
   background-color: cornflowerblue
   color: #f0f0f0
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
   &:hover
     background-color: darken(cornflowerblue, 10%)
@@ -55,6 +61,10 @@ button
   border-bottom: 1px solid #bbb
   box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
 
+  .container.fluid
+    width: 100%
+    margin-right: 0
+
   .row
     display: relative
 
@@ -69,9 +79,10 @@ button
     color: #212121
     font-size: 2rem
     font-weight: bold
-    transition: all 230ms ease-in-out
+    transition: $default-transition
 
-    &.active
+    &.active,
+    &:hover
       background-color: white
 
 .component-display
@@ -142,6 +153,9 @@ table.hardware-info
   p.no-margin
     margin-bottom: 0
 
+  p#version-info
+    text-decoration: underline
+
 #systemPages
   > div:nth-child(2n + 3)
     margin-left: 0

assets/twig/layout.twig

@@ -19,7 +19,8 @@
       <div class="container fluid">
         <div class="row">
           <div class="columns twelve">
-            <button class="tab-button active" onclick="openTab('cpu')">CPU</button>
+            <button class="tab-button active" onclick="openTab('overview')">Overview</button>
+            <button class="tab-button" onclick="openTab('cpu')">CPU</button>
             <button class="tab-button" onclick="openTab('memory')">Memory</button>
             <button class="tab-button" onclick="openTab('storage')">Storage</button>
             <button class="tab-button" onclick="openTab('gpu')">GPU</button>
@@ -29,7 +30,10 @@
     </div>
 
     <div id="wrapper" class="container">
-      <div class="component-display active" data-component="cpu">
+      <div class="component-display active" data-component="overview">
+        {% include 'overview.twig' %}
+      </div>
+      <div class="component-display" data-component="cpu">
         {% include 'cpu.twig' %}
       </div>
       <div class="component-display" data-component="memory">
@@ -47,7 +51,7 @@
       <div class="container fluid">
         <div class="row">
           <div class="columns three">
-            <p class="faded-text no-margin u-text-center">Sentry v<span id="app-version"></span></p>
+            <p id="version-info" class="no-margin u-text-center">Sentry v<span id="app-version"></span></p>
           </div>
           <div class="columns six">
             <p class="no-margin u-text-center">Developed by Bit Goblin free of charge.</p>

assets/twig/overview.twig

@@ -0,0 +1,5 @@
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Sentry Overview</h1>
+  </div>
+</header>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sentry",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Desktop app to view system information and sensors",
   "main": "main.js",
   "scripts": {
@@ -25,8 +25,8 @@
     "grunt": "^1.5.3",
     "grunt-contrib-coffee": "^2.1.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-sass": "^2.0.0",
     "grunt-contrib-watch": "^1.1.0",
+    "grunt-dart-sass": "^2.0.1",
     "grunt-twig-render": "^1.8.3"
   },
   "dependencies": {