Improvements to /community

- Add a Launch Zulip button in the hero section - Add sections showing active/retired hosts - Various copy tweaks/improvements
thechangelog · Oct 16, 2024 · ebe39c8 · ebe39c8
1 parent b4459bc
commit ebe39c8
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 79 deletions.
diff --git a/assets/app/components/avatar_list.scss b/assets/app/components/avatar_list.scss
@@ -1,7 +1,13 @@
 .avatar_list {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+
+  justify-content: left;
+
+  @media (max-width: $smartphone) {
+    justify-content: center;
+  }
+
   margin-left: -5px;
   margin-right: -5px;
 
@@ -52,7 +58,7 @@
     }
 
     .avatar_list--full & p {
-      max-width: 110px; // Allows full names to auto wrap within a constrained width
+      max-width: 112px; // Allows full names to auto wrap within a constrained width
       padding: 0 0 0 15px;
       font-size: 1em;
       font-weight: 500;
@@ -66,4 +72,14 @@
       color: $white;
     }
   }
+
+  &-item--light {
+    p {
+      background: inherit;
+      color: $dark-grey;
+    }
+    &:hover p {
+      color: $green;
+    }
+  }
 }
diff --git a/assets/app/helpers/variables.scss b/assets/app/helpers/variables.scss
@@ -3,47 +3,48 @@ $black: #101820;
 $half-black: rgba($black, 0.5);
 $white: #ffffff;
 $half-white: rgba($white, 0.5);
-$green: #59B287;
+$green: #59b287;
 $light-green: #ddffdb;
 $light-yellow: #fffedb;
-$yellow: #C4A731;
-$light-blue: #9095C5;
-$blue: #2D3589;
+$yellow: #c4a731;
+$light-blue: #9095c5;
+$blue: #2d3589;
 $lightest-grey: #f5f5f5;
 $light-grey: #e6e5e6;
 $medium-grey-alt: #98a2ad;
 $medium-grey: #878b8f;
-$dark-grey: #1A232C;
-$red: #FC4C02;
+$dark-grey: #1a232c;
+$red: #fc4c02;
 $light-red: lighten($red, 20%);
-$blue-grey: #222C36;
+$blue-grey: #222c36;
 
 // Highlight – Used for Sponsor news items
 $highlight: #fafafa;
 
 // Podcasts - Sometimes we wanna loop through 'em
-$podcasts: podcast, founderstalk, gotime, jsparty, practicalai, backstage, brainscience, shipit, master;
+$podcasts: podcast, founderstalk, gotime, jsparty, practicalai, backstage,
+  brainscience, shipit, master;
 
 // Podcast Colors
-$podcast: #9E978E;
+$podcast: #9e978e;
 $podcast-transparent: rgba(darken($podcast, 45%), 0.6);
 
-$founderstalk: #3CDBC0;
+$founderstalk: #3cdbc0;
 $founderstalk-transparent: rgba(darken($founderstalk, 40%), 0.3);
 
-$gotime: #59CBE8;
+$gotime: #59cbe8;
 $gotime-transparent: rgba(darken($gotime, 50%), 0.3);
 
-$jsparty: #FFCD00;
+$jsparty: #ffcd00;
 $jsparty-transparent: rgba(darken($jsparty, 40%), 0.4);
 
-$practicalai: #4C5FAA;
+$practicalai: #4c5faa;
 $practicalai-transparent: rgba(darken($practicalai, 50%), 0.3);
 
-$backstage: #FC4C02;
+$backstage: #fc4c02;
 $backstage-transparent: rgba(darken($backstage, 30%), 0.6);
 
-$brainscience: #F9423A;
+$brainscience: #f9423a;
 $brainscience-transparent: rgba(darken($brainscience, 30%), 0.6);
 
 // Borders
@@ -54,9 +55,10 @@ $base-border-radius: 3px;
 $body-copy-color: $black;
 $root-font-size: 16px;
 $content-fallback: Arial, sans-serif;
-$content: 'Sana Sans', $content-fallback;
-$display: 'Helvetica Condensed', 'Helvetica Narrow', 'Arial Narrow', 'Arial', sans-serif;
-$code: 'Roboto Mono', Courier, monospace;
+$content: "Sana Sans", $content-fallback;
+$display: "Helvetica Condensed", "Helvetica Narrow", "Arial Narrow", "Arial",
+  sans-serif;
+$code: "Roboto Mono", Courier, monospace;
 
 // Roboto Mono - Weight Key
 // --
@@ -87,6 +89,7 @@ $padding-small: calc(16px / $root-font-size * 1rem);
 $padding-medium: calc(20px / $root-font-size * 1rem);
 $padding-large: calc(26px / $root-font-size * 1rem);
 $padding-extra-large: calc(54px / $root-font-size * 1rem);
+$padding-extra-extra-large: calc(82px / $root-font-size * 1rem);
 
 // Elements – Update if changes are made to these components
 $header-height: 63px;

diff --git a/assets/app/layout/marketing.scss b/assets/app/layout/marketing.scss
@@ -28,16 +28,12 @@
     .button_large {
       min-width: $min-width-button;
       min-width: var(--min-width-button);
-      flex: 1 0 0;
-    }
-    //
-    // .page-page-weekly &,
-    // .page-page-nightly & {
-    //   margin: 0;
-    // }
 
-    .button_large {
       margin: 10px;
+
+      @media (min-width: $tablet) {
+        flex: 1 0 0;
+      }
     }
   }
   p.button_note {
@@ -282,6 +278,11 @@
         margin-top: 80px;
       }
 
+      &-people {
+        margin: $padding-extra-large auto $padding-extra-extra-large auto;
+        max-width: 1024px;
+      }
+
       &-image {
         display: none;
         padding: $padding-large;
@@ -413,29 +414,4 @@
       }
     }
   }
-
-  // Map
-  &-map {
-    display: block;
-    height: auto;
-    margin: 0 auto;
-    max-width: 1200px;
-    overflow: hidden;
-    width: 100%;
-
-    img {
-      display: block;
-      margin: 0 auto;
-      width: 97%;
-    }
-
-    @media (min-width: $tablet) {
-      padding: 0 $padding-large;
-
-      img {
-        margin: 0;
-        width: 100%;
-      }
-    }
-  }
 }
diff --git a/config/config.exs b/config/config.exs
@@ -36,6 +36,7 @@ config :changelog,
   snap_token: System.get_env("SNAP_TOKEN"),
   typesense_url: System.get_env("TYPESENSE_URL"),
   typesense_api_key: System.get_env("TYPESENSE_API_KEY"),
+  zulip_url: "https://changelog.zulipchat.com",
   zulip_admin_user: System.get_env("ZULIP_ADMIN_USER"),
   zulip_admin_api_key: System.get_env("ZULIP_ADMIN_API_KEY"),
   zulip_bot_user: System.get_env("ZULIP_BOT_USER"),

diff --git a/lib/changelog/schema/podcast/podcast.ex b/lib/changelog/schema/podcast/podcast.ex
@@ -90,7 +90,7 @@ defmodule Changelog.Podcast do
       spotify_url: "https://open.spotify.com/show/0S1h5K7jm2YvOcM7y1ZMXY",
       youtube_url: "https://www.youtube.com/changelog",
       clips_url: "https://www.youtube.com/playlist?list=PLCzseuA9sYreJ1p9RXR6Z667mrMyHXAeH",
-      zulip_url: "https://changelog.zulipchat.com",
+      zulip_url: Application.get_env(:changelog, :zulip_url),
       cover: true,
       active_hosts: [],
       retired_hosts: []
@@ -116,7 +116,7 @@ defmodule Changelog.Podcast do
       spotify_url: "https://open.spotify.com/show/5bBki72YeKSLUqyD94qsuJ",
       youtube_url: "https://www.youtube.com/playlist?list=PLCzseuA9sYrf9nHWFF1dQsk-X5cghL6UH",
       clips_url: "https://www.youtube.com/playlist?list=PLCzseuA9sYreumc6MQV7C8FiRuaMczhjK",
-      zulip_url: "https://changelog.zulipchat.com",
+      zulip_url: Application.get_env(:changelog, :zulip_url),
       cover: true,
       active_hosts: Person.with_ids([1, 2]) |> Person.newest_first() |> Repo.all()
     }
@@ -366,10 +366,11 @@ defmodule Changelog.Podcast do
         stat.agents
         |> Enum.filter(fn {_name, data} -> String.match?(data["raw"], ~r/subscribers/) end)
         |> Enum.map(fn {name, data} ->
-          subs = case Regex.named_captures(~r/(?<subs>\d+) subscribers/, data["raw"]) do
-            %{"subs" => count} -> String.to_integer(count)
-            _else -> 0
-          end
+          subs =
+            case Regex.named_captures(~r/(?<subs>\d+) subscribers/, data["raw"]) do
+              %{"subs" => count} -> String.to_integer(count)
+              _else -> 0
+            end
 
           {name, subs}
         end)

diff --git a/lib/changelog/schema/podcast/podcast_host.ex b/lib/changelog/schema/podcast/podcast_host.ex
@@ -22,4 +22,29 @@ defmodule Changelog.PodcastHost do
     |> foreign_key_constraint(:podcast_id)
     |> mark_for_deletion()
   end
+
+  def active_host(query \\ __MODULE__) do
+    from(q in query,
+      where: not(q.retired),
+      join: p in assoc(q, :person),
+      distinct: q.person_id)
+  end
+
+  def retired_host(query \\ __MODULE__), do: from(q in query, where: q.retired, distinct: q.person_id)
+
+  def active_podcast(query \\ __MODULE__) do
+    from(q in query, join: p in assoc(q, :podcast), where: p.status in [^:soon, ^:publishing])
+  end
+
+  def retired_podcast(query \\ __MODULE__) do
+    from(q in query, join: p in assoc(q, :podcast), where: p.status == ^:inactive)
+  end
+
+  def retired_host_or_podcast(query \\ __MODULE__) do
+    from(q in query,
+      join: p in assoc(q, :podcast),
+      where: q.retired,
+      or_where: p.status == ^:inactive,
+      distinct: q.person_id)
+  end
 end
diff --git a/lib/changelog/zulip/client.ex b/lib/changelog/zulip/client.ex
@@ -1,7 +1,7 @@
 defmodule Changelog.Zulip.Client do
   use HTTPoison.Base
 
-  def process_url(url), do: "https://changelog.zulipchat.com/api/v1#{url}"
+  def process_url(url), do: Application.get_env(:changelog, :zulip_url) <> "/api/v1#{url}"
 
   def process_response_body(body) do
     try do
@@ -16,7 +16,10 @@ defmodule Changelog.Zulip.Client do
   end
 
   def handle({:ok, %{status_code: 200, body: body}}), do: Map.merge(%{"ok" => true}, body)
-  def handle({:ok, %{status_code: status, body: body}}) when status >= 400, do: handle({:error, %{reason: body["msg"]}})
+
+  def handle({:ok, %{status_code: status, body: body}}) when status >= 400,
+    do: handle({:error, %{reason: body["msg"]}})
+
   def handle({:error, %{reason: reason}}), do: %{"ok" => false, "msg" => "#{reason}"}
 
   def get_message(message_id) do

diff --git a/lib/changelog_web/controllers/page_controller.ex b/lib/changelog_web/controllers/page_controller.ex
@@ -1,14 +1,15 @@
 defmodule ChangelogWeb.PageController do
   use ChangelogWeb, :controller
 
-  alias Changelog.{Episode, Podcast}
+  alias Changelog.{Episode, ListKit, Podcast, PodcastHost}
 
   plug RequireGuest, "before joining" when action in [:join]
 
   # pages that need special treatment get their own matched function
   # all others simply render the template of the same name
   def action(conn, _) do
     case action_name(conn) do
+      :community -> community(conn, conn.params)
       :guest -> guest(conn, Map.get(conn.params, "slug"))
       :index -> index(conn, conn.params)
       :++ -> plusplus(conn, conn.params)
@@ -18,6 +19,29 @@ defmodule ChangelogWeb.PageController do
     end
   end
 
+  def community(conn, _params) do
+    active =
+      PodcastHost.active_podcast()
+      |> PodcastHost.active_host()
+      |> PodcastHost.newest_last()
+      |> Ecto.Query.preload(:person)
+      |> Repo.all()
+      |> Enum.map(&(&1.person))
+
+    retired =
+      PodcastHost.retired_host_or_podcast()
+      |> PodcastHost.newest_last()
+      |> Ecto.Query.preload(:person)
+      |> Repo.all()
+      |> Enum.map(&(&1.person))
+      |> ListKit.exclude(active)
+
+    conn
+    |> assign(:active, active)
+    |> assign(:retired, retired)
+    |> render(:community)
+  end
+
   def guest(conn, slug) when is_nil(slug), do: guest(conn, "podcast")
 
   def guest(conn, slug) do

diff --git a/lib/changelog_web/templates/home/show.html.heex b/lib/changelog_web/templates/home/show.html.heex
@@ -35,7 +35,7 @@
 
         <div class="account_ctas-item-info-buttons">
           <%= link("Request Invite", to: ~p"/~/zulip", method: :post) %>
-          <%= link("Launch Zulip", to: "https://changelog.zulipchat.com", target: "_blank") %>
+          <%= link("Launch Zulip", to: Application.get_env(:changelog, :zulip_url), target: "_blank") %>
         </div>
       </div>
     </div>

diff --git a/lib/changelog_web/templates/page/_community_join_button.html.eex b/lib/changelog_web/templates/page/_community_join_button.html.eex