restyling proposition

.gitignore

@@ -134,4 +134,7 @@ project/plugins/project/
 ### VSCODE ###
 .vscode/
 
+### Mac OS ###
+.DS_Store
+
 # End of https://www.gitignore.io/api/sbt,scala,bloop,metals,intellij+all,playframework

app/assets/css/main.css

@@ -0,0 +1,214 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
+
+:root, [data-bs-theme=light] {
+  --bs-primary: #0276c6;
+  --bs-secondary: #46566f;
+  --bs-secondary-rgb: 70, 86, 111;
+  --bs-success: #16a34a;
+  --bs-success-rgb: 22, 163, 74;
+  --bs-emphasis-color-rgb: 25, 33, 46;
+
+
+  /* Custom */
+  --card-bg: #f3f6fc;
+  --footer-bg: #f3f6fc;
+}
+
+[data-bs-theme=dark] {
+  --bs-body-bg: #151f32;
+  --bs-emphasis-color-rgb: 154, 171, 202;
+
+  /* Custom */
+  --card-bg: #18273f;
+  --footer-bg: #0c1421;
+}
+
+*, html {
+  font-family: "Inter", sans-serif;
+}
+
+pre {
+  background-color: var(--card-bg);
+  padding: 16px;
+  border-radius: 8px;
+  margin: 16px 0;
+}
+
+.page-wrapper {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.h-20 {
+  height: 80px;
+}
+
+.bg-page {
+  position: absolute;
+  left: -50vw;
+  top: -50vw;
+  width: 100vw;
+  height: 100vw;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(2, 118, 198, 30%) 0%,
+    transparent 50%
+  );
+}
+
+.bg-footer {
+  background-color: var(--footer-bg);
+}
+
+.navbar {
+  height: 64px;
+  backdrop-filter: blur(50px);
+  opacity: 0.9;
+}
+
+.nav-link > svg {
+  height: 18px;
+  width: 18px;
+}
+
+.nav-sidebar {
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  position: sticky;
+  top: 144px;
+}
+
+.nav-sidebar > .nav {
+  color: var(--bs-secondary);
+}
+
+.nav-sidebar .nav-link {
+  color: var(--bs-secondary);
+}
+
+.nav-sidebar .active {
+  color: var(--bs-nav-link-color);
+  font-weight: 500;
+  border-left: solid 2px var(--bs-nav-link-color);
+}
+
+/* Sections */
+.home-section {
+  padding: 80px 0;
+}
+
+.hero-section-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hero-section-top-img {
+  width: 160px;
+  margin: 0 auto;
+}
+
+.hero-section-top-title {
+  font-size: 48px;
+  font-weight: 700;
+  letter-spacing: 1.2;
+  text-transform: capitalize;
+  margin: 24px 0 16px 0;
+  text-align: center;
+}
+
+.hero-section-top-text {
+  font-size: 18px;
+  width: 100%;
+  max-width: 768px;
+  text-align: center;
+  color: var(--bs-secondary);
+}
+
+.hero-section-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 2rem 0;
+}
+
+.hero-section-bottom-title {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 1.2;
+  text-transform: capitalize;
+}
+
+.hero-section-bottom-text {
+  text-align: center;
+  color: var(--bs-secondary);
+}
+
+.open-collective-section-title {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 1.2;
+}
+
+.open-collective-section-subtitle {
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 1.2;
+}
+
+/* Cards */
+.card {
+  height: 100%;
+  border-radius: 16px;
+  border: none;
+  background-color: var(--card-bg);
+}
+
+.card .card-icon {
+  height: 3.5rem;
+  width: 3.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bs-primary);
+  margin-bottom: 1.5rem;
+}
+
+.card .card-icon > svg {
+  height: inherit;
+  width: inherit;
+}
+
+.card .card-avatar {
+  height: 4rem;
+  width: 4rem;
+  border-radius: 100%;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+}
+
+.card .card-avatar img {
+  height: inherit;
+  width: inherit;
+  object-fit: cover;
+}
+
+.card .card-title {
+  font-size: 20px;
+  margin-bottom: 12px;
+}
+
+.card .card-text {
+  font-size: 14px;
+  color: var(--bs-secondary);
+}
+
+.open-collective-card .card-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.fs-7 {
+  font-size: 14px;
+  line-height: 24px;
+}

app/assets/js/switch-theme.js

@@ -0,0 +1,63 @@
+(() => {
+  'use strict'
+
+  const THEME_STORAGE_NAME = 'theme';
+  const getStoredTheme = () => localStorage.getItem(THEME_STORAGE_NAME)
+  const setStoredTheme = theme => localStorage.setItem(THEME_STORAGE_NAME, theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeThemeIcon = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.add('d-none')
+    })
+
+    activeThemeIcon.classList.remove('d-none')
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    showActiveTheme(getPreferredTheme())
+
+    themeSwitcher.addEventListener('click', () => {
+      const theme = getStoredTheme() === 'light' ? 'dark' : 'light'
+
+      setStoredTheme(theme)
+      setTheme(theme)
+      showActiveTheme(theme)
+    })
+  })
+})()

app/controllers/ContextualController.scala

@@ -11,16 +11,26 @@ import javax.inject._
 import scala.concurrent.ExecutionContext.Implicits.global
 import scala.concurrent.Future
 
+import services.OpenCollectiveService
+import models.Contributor
+
 @Singleton
 class ContextualController @Inject() (
     cc: ControllerComponents,
     applicationRepo: ApplicationRepo,
     candidatesRepo: CandidatesRepo,
-    conf: Config
+    conf: Config,
+    openCollectiveService: OpenCollectiveService
 ) extends AbstractController(cc) {
 
-  val index = Action { implicit request: Request[AnyContent] =>
-    Ok(views.html.index())
+  val index = Action.async { implicit request: Request[AnyContent] =>
+    openCollectiveService.getContributors().map { result => 
+      val data = result.groupBy(_.`type`)
+      val organizationContributors = data.getOrElse("ORGANIZATION", Seq[Contributor]())
+      val individualContributors = data.getOrElse("USER", Seq[Contributor]())
+
+      Ok(views.html.index(organizationContributors, individualContributors))
+    }
   }
 
   val install = Action.async { implicit request: Request[AnyContent] =>

app/models/Contributor.scala

@@ -0,0 +1,18 @@
+package models
+
+import java.util.Date
+import play.api.libs.json._
+import java.time.LocalDateTime
+
+case class Contributor(
+    name: String,
+    since: LocalDateTime,
+    totalAmountDonated: Int,
+    `type`: String,
+    description: Option[String],
+    image: String
+)
+
+object Contributor {
+    implicit val format: OFormat[Contributor] = Json.format[Contributor]
+}

app/services/OpenCollectiveService.scala

@@ -0,0 +1,26 @@
+package services
+
+import javax.inject.Inject
+import play.api.cache.AsyncCacheApi
+import play.api.libs.json.JsValue
+
+import scala.concurrent.duration.{Duration, HOURS}
+import scala.concurrent.{ExecutionContext, Future}
+
+import wrappers.OpenCollectiveWebApi
+import models.Contributor
+
+class OpenCollectiveService @Inject() (
+  openCollectiveWebApi: OpenCollectiveWebApi,
+  cache: AsyncCacheApi,
+  implicit val ec: ExecutionContext
+) {
+  val cacheExpiry: Duration = Duration(1, HOURS)
+
+  def getContributors(): Future[Seq[Contributor]] = {
+    cache.getOrElseUpdate[JsValue]("open-collective-cache", cacheExpiry) {
+      openCollectiveWebApi.getContributors()
+    }
+    .map(_.as[Seq[Contributor]].filter(_.totalAmountDonated > 0))
+  }
+}

app/views/includes/footer.scala.html

@@ -1,10 +1,16 @@
 @import java.time.format.DateTimeFormatter
 @import java.time.LocalDate
-<footer id='footer'>
-    <div class='row'>
-        <div class='clearfix'>&copy; 2012 - @DateTimeFormatter.ofPattern("YYYY").format(LocalDate.now) SDKMAN! is Open Source Software licensed under <a
-                href='http://www.apache.org/licenses/LICENSE-2.0.html'>Apache 2</a></div>
-        <div class='clearfix'>Logos and additional Design by <a href='https://github.com/dmesu'>Daida
-            Medina</a></div>
+<footer id='footer' class="bg-footer">
+    <div class='container d-flex flex-column align-items-center justify-content-center py-4 fs-7 text-center'>
+        <div>&copy; 2012 - @DateTimeFormatter.ofPattern("YYYY").format(LocalDate.now) SDKMAN! is Open Source Software licensed under 
+            <a href='http://www.apache.org/licenses/LICENSE-2.0.html'>Apache 2</a>
+        </div>
+        <div>Logos and additional Design by <a href='https://github.com/dmesu'>Daida Medina</a></div>
+        <a class="" href='http://status.sdkman.io' target="_blank" rel="noopener noreferrer">
+            <span>Status</span>
+            <svg width="24" height="24" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+                <path fill="#3BCF6E" d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z" fill="currentColor"></path>
+            </svg>
+        </a>
     </div>
 </footer>

app/views/includes/header.scala.html

@@ -5,10 +5,9 @@
     <meta name='viewport' content='width=device-width, initial-scale=1'/>
     <title>@title - SDKMAN! the Software Development Kit Manager</title>
     <link href='@routes.Assets.at("/img/favicon.ico")' type='image/x-ico' rel='icon'/>
-    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("/css/bootstrap.css")'/>
-    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("/css/font-awesome.min.css")'/>
-    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("/css/style.css")'/>
-    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("/css/carbon.css")'/>
+    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("css/bootstrap.min.css")'/>
+    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("css/main.css")'/>
+    <link rel='stylesheet' type='text/css' href='@routes.Assets.at("css/carbon.css")'/>
 
     <!-- Social bits -->
     <meta property='og:type' content='website' />