Merge branch 'main' into dependabot/bundler/dotenv-rails-3.1.7

voc · Jan 17, 2025 · 86a5e21 · 86a5e21
2 parents fc6d58d + 3bb562d
commit 86a5e21
Show file tree

Hide file tree

Showing 28 changed files with 264 additions and 125 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -36,7 +36,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -49,7 +49,7 @@ jobs:
           cp config/database.yml.template config/database.yml
 
       - name: Cache dependencies
-        uses: actions/cache@v3.2.4
+        uses: actions/cache@v4.2.0
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
@@ -73,7 +73,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Cleanup
         run: docker system prune --all --force --volumes

diff --git a/.github/workflows/container-images.yml b/.github/workflows/container-images.yml
@@ -16,22 +16,22 @@ jobs:
     steps:
       -
         name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       # -
       #   name: Set up QEMU
       #   uses: docker/setup-qemu-action@v1
       -
         name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: voc/voctoweb
       -
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       -
         name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -323,7 +323,7 @@ GEM
     parser (3.3.5.0)
       ast (~> 2.4.1)
       racc
-    pg (1.5.8)
+    pg (1.5.9)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -409,7 +409,7 @@ GEM
       railties (>= 5.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.8)
+    rexml (3.3.9)
     rss (0.3.1)
       rexml
     rubocop (1.66.1)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -20,6 +20,7 @@
 //= require handlebars.min-latest
 //= require jquery.bxslider-v4.2.1d-ssfrontend
 //= require slider
+//= require theme
 //= require feed_toggle
 //= require mastodon-share
 

diff --git a/app/assets/javascripts/theme.js b/app/assets/javascripts/theme.js
@@ -0,0 +1,10 @@
+let currentTheme = localStorage.getItem('theme') || 'light';
+
+function toggleTheme(theme) {
+    const newTheme = theme || (currentTheme === 'light' ? 'dark' : 'light');
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    currentTheme = newTheme;
+}
+
+toggleTheme(currentTheme);
diff --git a/app/assets/stylesheets/frontend/base/_base.scss b/app/assets/stylesheets/frontend/base/_base.scss
@@ -29,3 +29,7 @@ body {
 .btn-secondary {
   @include button-variant(white, $gray, $gray-dark);
 }
+
+.alert {
+  border-radius: .5em;
+}
diff --git a/app/assets/stylesheets/frontend/base/_breadcrumb.scss b/app/assets/stylesheets/frontend/base/_breadcrumb.scss
@@ -1,5 +1,5 @@
 .breadcrumb {
-  background-color: $gray;
+  background-color: var(--surface-300);
   font-size: 16px;
   padding: 0;
   margin-bottom: 0;
@@ -16,9 +16,13 @@
 
     .icon {
       font-size: 9px;
-      color: #eee;
+      color: var(--text-secondary);
       padding: 0 3px;
     }
+
+    a {
+      color: var(--text-primary);
+    }
   }
 
   > .active {

diff --git a/app/assets/stylesheets/frontend/base/_footer.scss b/app/assets/stylesheets/frontend/base/_footer.scss
@@ -1,7 +1,11 @@
 footer {
   padding: 0.7em;
   margin-top: 2em;
-  color: $gray-light;
-  background-color: $gray-dark;
+  color: var(--text-secondary);
+  background-color: var(--surface-200);
   text-align: center;
+
+  a:any-link {
+    color: var(--text-primary);
+  }
 }
diff --git a/app/assets/stylesheets/frontend/base/_navbar.scss b/app/assets/stylesheets/frontend/base/_navbar.scss
@@ -24,22 +24,20 @@
   }
 
   .btn.btn-default {
+    /* the button is always white, so no theme-dependent color is needed here */
+    color: var(--neutral-800);
+
     padding: 0.2em;
     height: 1.8em;
     max-width: 2em;
-    &:hover, &:focus, &:active {
-      color: $brand-primary;
-      background-color: #fff;
-      border-color: #fff;
-    }
   }
 
   .navbar-form {
     padding-left: 0.2em;
     margin-top: 0.8em;
     margin-bottom: 0.8em;
 
-    &.dropdown {
+    &.compact {
       padding-right: 0.0em;
     }
   }
@@ -55,3 +53,7 @@
     display: inline-block;
   }
 }
+
+.navbar-default {
+  background-color: var(--surface-200);
+}
diff --git a/app/assets/stylesheets/frontend/base/_theme.scss b/app/assets/stylesheets/frontend/base/_theme.scss
@@ -0,0 +1,89 @@
+:root {
+    --neutral-950: #0a0a0a;
+    --neutral-900: #171717;
+    --neutral-800: #262626;
+    --neutral-700: #404040;
+    --neutral-600: #525252;
+    --neutral-500: #737373;
+    --neutral-400: #a3a3a3;
+    --neutral-300: #d4d4d4;
+    --neutral-200: #e5e5e5;
+    --neutral-100: #f5f5f5;
+    --neutral-50: #fafafa;
+
+    --indigo-950: #1e1b4b;
+    --indigo-900: #312e81;
+    --indigo-800: #3730a3;
+    --indigo-700: #4338ca;
+    --indigo-600: #4f46e5;
+    --indigo-500: #6366f1;
+    --indigo-400: #818cf8;
+}
+
+html {
+    --primary-100: var(--indigo-700);
+    --primary-200: var(--indigo-600);
+    --primary-300: var(--indigo-500);
+    --primary-400: var(--indigo-400);
+
+    --surface-50: var(--neutral-50);
+    --surface-100: var(--neutral-100);
+    --surface-200: var(--neutral-200);
+    --surface-300: var(--neutral-300);
+    --surface-400: var(--neutral-400);
+    --surface-500: var(--neutral-500);
+
+
+    --text-primary: rgb(0, 0, 0);
+    --text-secondary: rgba(0, 0, 0, 0.80);
+    --text-muted: rgba(0, 0, 0, 0.65);
+    --text-link: var(--primary-400);
+    --text-visited: var(--primary-300);
+    --text-heading: var(--text-secondary);
+
+    --border-50: var(--surface-50);
+    --border-100: var(--surface-100);
+    --border-200: var(--surface-200);
+    --border-300: var(--surface-300);
+    --border-400: var(--surface-400);
+    --border-500: var(--surface-500);
+    --border-divider: var(--text-secondary);
+}
+
+.dark {
+    --primary-100: var(--indigo-700);
+    --primary-200: var(--indigo-600);
+    --primary-300: var(--indigo-500);
+    --primary-400: var(--indigo-400);
+
+    --surface-50: var(--neutral-950);
+    --surface-100: var(--neutral-900);
+    --surface-200: var(--neutral-800);
+    --surface-300: var(--neutral-700);
+    --surface-400: var(--neutral-600);
+    --surface-400: var(--neutral-500);
+
+    --text-primary: rgb(255, 255, 255);
+    --text-secondary: rgba(255, 255, 255, 0.80);
+    --text-muted: rgba(255, 255, 255, 0.65);
+}
+
+body {
+    background-color: var(--surface-50);
+    color: var(--text-primary);
+}
+
+a:link { color: var(--text-link); }
+a:visited { color: var(--text-visited); }
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--text-heading);
+}
+
+/* we don't want link colors to apply to button style links */
+a.btn {
+    color: var(--text-primary);
+}
+.btn.btn-primary, .btn.btn-secondary {
+    color: white;
+}
diff --git a/app/assets/stylesheets/frontend/lib/_variables.scss b/app/assets/stylesheets/frontend/lib/_variables.scss
@@ -412,13 +412,13 @@ $nav-link-hover-bg:                         #fff;
 // $nav-open-link-hover-color:                 #fff
 
 //== Tabs
-$nav-tabs-border-color:                     #e3e3e3;
+$nav-tabs-border-color:                     none;
 
-// $nav-tabs-link-hover-border-color:          $gray-lighter
+$nav-tabs-link-hover-border-color:          var(--border-500);
 
 // $nav-tabs-active-link-hover-bg:             $body-bg
-// $nav-tabs-active-link-hover-color:          $gray
-// $nav-tabs-active-link-hover-border-color:   #ddd
+$nav-tabs-active-link-hover-color:          var(--text-primary);
+$nav-tabs-active-link-hover-border-color:   var(--border-300);
 
 // $nav-tabs-justified-link-border-color:            #ddd
 // $nav-tabs-justified-active-link-border-color:     $body-bg
@@ -729,8 +729,8 @@ $thumbnail-border-radius:     $border-radius-base;
 //
 //##
 
-// $well-bg:                     #f5f5f5
-// $well-border:                 darken($well-bg, 7%)
+$well-bg:                     var(--surface-100);
+$well-border:                 var(--border-300);
 
 //== Badges
 //

diff --git a/app/assets/stylesheets/frontend/pages/_browse.scss b/app/assets/stylesheets/frontend/pages/_browse.scss
@@ -17,8 +17,8 @@ body.page-browse {
     }
 
     &.folder {
-      background-color: $brand-primary;
-      color: white;
+      background-color: var(--primary-200);
+      color: var(--text-primary);
 
       .header {
         margin-bottom: $padding-large-vertical;
@@ -30,7 +30,7 @@ body.page-browse {
       }
 
       &:hover, &:focus, &:active {
-        background-color: $gray-dark;
+        background-color: var(--primary-100);
       }
 
       .caption {