Upgrade ancient Docsy theme and implement dark mode

.github/workflows/build.yml

@@ -80,8 +80,11 @@ jobs:
       - name: 📚 Install Hugo
         uses: peaceiris/[email protected]  # v3.0.0
         with:
-          hugo-version: '0.135.0'
+          hugo-version: '0.146.0'
           extended: true
+      - name: 📦 Install Docsy theme dependencies (Bootstrap & FontAwesome)
+        working-directory: /mnt/airflow-site/landing-pages/site/themes/docsy
+        run: npm install
       - name: 🟢 Install node dependencies
         run: |
           /mnt/airflow-site/site.sh install-node-deps

landing-pages/.gitignore

@@ -3,3 +3,4 @@ dist/
 site/data/webpack.json
 resources/
 site/static/_gen/
+site/public/

landing-pages/site/assets/scss/_blog-page.scss

@@ -163,3 +163,36 @@
     justify-content: center
   }
 }
+
+// Dark mode support using Bootstrap CSS variables
+[data-bs-theme="dark"] {
+  .blogpost-content {
+    &__metadata {
+      &--title {
+        color: var(--bs-emphasis-color);
+      }
+
+      &--description {
+        color: var(--bs-body-color);
+      }
+
+      &--date {
+        color: var(--bs-secondary-color);
+      }
+    }
+  }
+
+  .tag {
+    color: var(--bs-link-color);
+    background-color: var(--bs-link-color-rgb, 104, 210, 254, 0.15);
+
+    &.active, &:hover {
+      background-color: var(--bs-link-color);
+      color: var(--bs-body-bg);
+    }
+  }
+
+  .new-entry--link {
+    color: var(--bs-link-color);
+  }
+}

landing-pages/site/assets/scss/_colors.scss

@@ -32,3 +32,8 @@ $colors: (
         slate-grey: #636365,
         greyish-brown: #51504f
 );
+
+// Background color utility class required by Docsy v0.6.0+ theme
+.-bg-orange {
+  background-color: #FFA630; // Using $secondary color value
+}

landing-pages/site/assets/scss/_header.scss

@@ -22,6 +22,8 @@
   position: relative;
   margin: 123px -20px 0;
   min-height: calc(100vh - 123px);
+  // background-color is handled by the canvas animation which draws white/dark background
+  transition: background-color 0.3s ease;
 }
 
 #header-canvas {
@@ -119,3 +121,22 @@
     }
   }
 }
+
+// Dark mode styles
+[data-bs-theme="dark"] {
+  #header {
+    // background-color handled by canvas animation
+  }
+
+  #header-canvas {
+    .text-area {
+      &--header {
+        color: rgba(255, 255, 255, 0.95);
+      }
+
+      &--subheader {
+        color: rgba(255, 255, 255, 0.75);
+      }
+    }
+  }
+}

landing-pages/site/assets/scss/_navbar.scss

@@ -28,6 +28,7 @@
   border-bottom: solid 1px map-get($colors, very-light-pink);
   z-index: 32;
   padding: 30px 60px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 
   &__menu-container {
     flex-grow: 1;
@@ -50,6 +51,7 @@
     margin-right: 30px;
     position: relative;
     width: fit-content;
+    transition: color 0.3s ease;
 
     &::before, &::after {
       content: "";
@@ -74,6 +76,43 @@
   &--box-shadow {
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
   }
+
+  // Theme toggle styling
+  &__theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+
+    .btn {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.875rem;
+      border: none;
+      background: none;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+
+    .dropdown-menu {
+      font-size: 0.8125rem;
+      min-width: 7rem;
+      padding: 0.25rem 0;
+      left: 0 !important;
+      right: auto !important;
+
+      .dropdown-item {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.8125rem;
+
+        svg {
+          width: 0.875rem;
+          height: 0.875rem;
+        }
+      }
+    }
+  }
 }
 
 @media (max-width: $tablet) {
@@ -154,3 +193,31 @@
     }
   }
 }
+
+// Dark mode styles
+[data-bs-theme="dark"] {
+  .navbar {
+    background-color: #1a1a1a;
+    border-bottom-color: #333;
+
+    &__text-link {
+      color: rgba(255, 255, 255, 0.85);
+
+      &:hover, &.active {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+
+    // Make logo text (Apache Airflow) white in dark mode
+    &__icon-container {
+      svg path[fill="#51504f"] {
+        fill: rgba(255, 255, 255, 0.95);
+      }
+    }
+
+    // Also handle mobile drawer background
+    &__drawer {
+      background-color: #1a1a1a;
+    }
+  }
+}

landing-pages/site/assets/scss/_rating.scss

@@ -47,3 +47,31 @@
     }
   }
 }
+
+// Dark mode styles
+// stylelint-disable no-descending-specificity
+[data-bs-theme="dark"] {
+  .rating-container {
+    p {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .rate-star {
+    svg {
+      path {
+        stroke: rgba(255, 255, 255, 0.75);
+      }
+    }
+
+    &:hover, &:hover ~ & {
+      svg {
+        path {
+          fill: #68d2fe;
+          stroke: none;
+        }
+      }
+    }
+  }
+}
+// stylelint-enable no-descending-specificity

landing-pages/site/assets/scss/_roadmap.scss

@@ -288,3 +288,8 @@
     }
   }
 }
+
+// Dark mode styles for roadmap page
+[data-bs-theme="dark"] .roadmap .td-sidebar {
+  background-color: #2d2d2d !important;
+}