Minor but critical visual changes

* I've been told that the thumbnails in the videos list are hard to see. This is a consequence of both the site not having a dark mode and me using white background for most of my new thumbnails. This commit adds some borders to the thumbnails to make them easier to see. * Updates the SEO for the Discord page to the recent marketing for the site. Adds a link in the footer again that points to the Discord information. * Adds a normalized total views for playlists, that calculates an average total and recent views per lession in a playlist. This allows playlists with less lessons to be as competitive as playlists with more lessons when compared for recent views, which is useful mostly for the footer. * Render playlists of child topics whenever the playlists page is filtered by topic. Otherwise I am hiding content.
makigas · Sep 17, 2024 · d330f82 · d330f82
1 parent ea72ddd
commit d330f82
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 34 deletions.
diff --git a/app/components/six/layout/footer_component.html.erb b/app/components/six/layout/footer_component.html.erb
@@ -26,7 +26,8 @@
           <li><a href="/series">Consultar cursos</a></li>
           <li><a href="/temas">Ver todos los temas</a></li>
           <li><a href="https://foro.makigas.es">Visitar los foros</a></li>
-          <li><a href="https://youtube.com/makigas">Seguir en YouTube</a></li>
+          <li><a href="https://youtube.com/makigas">Canal de YouTube</a></li>
+          <li><a href="/discord">Servidor de Discord</a></li>
         </ul>
       </div>
     </div>

diff --git a/app/components/six/layout/footer_component.rb b/app/components/six/layout/footer_component.rb
@@ -9,8 +9,8 @@ def popular_playlists
 
       # The playlists whose playlist page has the more views.
       def popular_playlists_by_index
-        Playlist.where.not(views_recent: nil).where(exclude_from_search: false,
-                                                    deprecated: false).order(views_recent: :desc).take(5)
+        Playlist.where(exclude_from_search: false, deprecated: false)
+                .order(normalized_views_recent: :desc).take(6)
       end
 
       # The playlists whose content is the most popular.

diff --git a/app/controllers/playlists_controller.rb b/app/controllers/playlists_controller.rb
@@ -27,17 +27,17 @@ def filter_by_topic(playlists)
     topic = Topic.friendly.find_by(slug: params[:topic])
     return playlists if topic.blank?
 
-    playlists.where(topic:)
+    topic.playlists_with_children
   end
 
   def sort_content(playlists)
     case params[:sort]
     when 'popular'
-      playlists.order(aggregated_views_recent: :desc)
+      playlists.order(normalized_views_recent: :desc)
     when 'recent'
       playlists.sort_by_latest_video
     else
-      playlists.order(aggregated_views_total: :desc)
+      playlists.order(normalized_views_total: :desc)
     end
   end
 

diff --git a/app/javascript/six/components/footer.scss b/app/javascript/six/components/footer.scss
@@ -4,7 +4,7 @@
   background-color: var(--footer-background-color);
   color: var(--footer-foreground-color);
   text-align: center;
-  font-size: 1rem;
+  font-size: 0.9rem;
 
   @include desktop-layout {
     text-align: left;

diff --git a/app/javascript/six/components/plhead.scss b/app/javascript/six/components/plhead.scss
@@ -8,6 +8,7 @@ $plhead-text-size: 1.15rem;
 
 .playlistview {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 20px;
 

diff --git a/app/javascript/six/components/search/result.scss b/app/javascript/six/components/search/result.scss
@@ -13,6 +13,10 @@
 
   &__media img {
     width: 140px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    aspect-ratio: 16 / 9;
+    border-radius: 8px;
+
     @include desktop-layout {
       width: 200px;
     }

diff --git a/app/javascript/six/layout/base.scss b/app/javascript/six/layout/base.scss
@@ -7,6 +7,8 @@ body {
 
   > main {
     flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
   > footer {
@@ -157,10 +159,17 @@ body {
     @include desktop-layout {
       display: grid;
       grid-template-columns: 1fr auto;
+      align-items: center;
+      text-align: center;
       gap: 30px;
       padding-top: 30px;
       padding-bottom: 30px;
     }
+
+    h1, h2, p {
+      margin-top: 12px;
+      margin-bottom: 12px;
+    }
   }
 
   &__widget {

diff --git a/app/jobs/materialize_video_analytics_job.rb b/app/jobs/materialize_video_analytics_job.rb
@@ -40,14 +40,19 @@ def update_playlist_counters(playlist, total_data, recent_data)
     end
   end
 
+  def update_aggregated_playlist_counter(group)
+    count = Video.where(playlist_id: group.playlist_id).count
+    group.playlist.update(aggregated_views_total: group.total, aggregated_views_recent: group.recent,
+                          normalized_views_total: group.total / count,
+                          normalized_views_recent: group.recent / count)
+  end
+
   def update_aggregated_playlist_counters
     sums = Video.where.not(playlist_id: nil)
                 .select('playlist_id', 'sum(views_total) as total', 'sum(views_recent) as recent')
                 .group(:playlist_id)
     update_without_timestamps do
-      sums.each do |group|
-        group.playlist.update(aggregated_views_total: group.total, aggregated_views_recent: group.recent)
-      end
+      sums.each { |group| update_aggregated_playlist_counter(group) }
     end
   end
 

diff --git a/app/models/playlist.rb b/app/models/playlist.rb
@@ -17,6 +17,8 @@
 #  excerpt                 :text
 #  exclude_from_search     :boolean          default(FALSE), not null
 #  forum_url               :string
+#  normalized_views_recent :bigint           default(0), not null
+#  normalized_views_total  :bigint           default(0), not null
 #  slug                    :string           not null
 #  thumbnail_content_type  :string
 #  thumbnail_file_name     :string

diff --git a/app/views/pages/discord.es.html.erb b/app/views/pages/discord.es.html.erb
@@ -1,14 +1,14 @@
-<% content_for :title, 'Comunidad de Discord para profesionales y estudiantes de la programación – makigas' %>
+<% content_for :title, 'Comunidad de Discord para programadores y estudiantes de programación – makigas' %>
 <% content_for :twitter do %>
   <meta name="twitter:card" content="summary">
   <meta name="twitter:site" content="@makigas">
-  <meta name="twitter:title" content="Comunidad de Discord para profesionales y estudiantes de la programación">
+  <meta name="twitter:title" content="Comunidad de Discord para programadores y estudiantes de programación">
   <meta name="twitter:description" content="Habla con otras personas, comparte ideas, enseña el proyecto en el que estés trabajando, o plantea preguntas.">
   <meta name="twitter:image" content="<%= image_url('/makigas.png', only_path: false) %>">
 <% end %>
 <% content_for :facebook do %>
   <meta property="og:url" content="<%= canonical_url %>">
-  <meta property="og:title" content="Comunidad de Discord para profesionales y estudiantes de la programación">
+  <meta property="og:title" content="Comunidad de Discord para programadores y estudiantes de programación">
   <meta property="og:type" content="website">
   <meta property="og:description" content="Habla con otras personas, comparte ideas, enseña el proyecto en el que estés trabajando, o plantea preguntas.">
   <meta property="og:site_name" content="makigas">
@@ -23,42 +23,34 @@
       --button-border-color: #ffffffab;
       --button-focus-border-color: #dddcdc80;
     }
+    body {
+      background: var(--jumbo-background);
+    }
   </style>
 <% end %>
-<% content_for :hero do %>
-  <h1>El Discord oficial de makigas</h1>
-<% end %>
 <div class="discord">
-  <%= render Six::Base::WrapperComponent.new(classes: 'discord__grid') do %>
+  <%= render Six::Base::WrapperComponent.new(classes: 'discord__grid', slim: true) do %>
     <div>
-      <h1>¡Pásate por el Discord oficial de makigas!</h1>
+  <h1>El Discord oficial de makigas</h1>
       <h2>
         Habla con otras personas, comparte ideas, enseña el proyecto
-        en el que estés trabajando, o plantea preguntas.
+        en el que estés trabajando, o plantea preguntas si tienes problemas
+        con tu código.
       </h2>
       <div class="discord__cta">
-        <%= link_to "Unirse al servidor", "https://discord.gg/#{Makigas::Environment.discord_server_invite}", target: :blank, class: 'btn discord__btn' %><br>
-        <small>(¡es gratuito y funciona muy bien!)</small>
+        <%= link_to "Haz clic aquí para unirte", "https://discord.gg/#{Makigas::Environment.discord_server_invite}", target: :blank, class: 'btn discord__btn' %><br>
+        <small>O bien, pega el siguiente invite: <strong><%= Makigas::Environment.discord_server_invite %></strong></small>
       </div>
       <p>
-        <strong>La Comunidad de Makigas</strong> es un servidor creativo y acogedor de Discord en el que podrás hablar y chatear con
-        más desarrolladores, diseñadores, ingenieros y estudiantes de programación para discutir sobre temas de desarrollo, preguntar
-        y responder dudas que puedan surgir, o simplemente distraerse hablando de cualquier tema en los canales de off-topic mientras
-        deberías estar estudiando o trabajando.
+      Este es el servidor de Discord oficial de la <strong>comunidad makigas</strong>, un servidor creativo y acogedor sobre
+      programación en el que podrás hablar y chatear con otros desarrolladores, diseñadores, ingenieros o estudiantes de programación
+      para discutir sobre temas de desarrollo, preguntar y responder dudas que puedan surgir, o simplemente distraerse un rato.
       </p>
       <p>
         Es una gran alternativa para hacer conexiones con otros desarrolladores y personas que tengan gustos parecidos, y también es
         un buen lugar para preguntarle a la comunidad cosas que en los comentarios del canal de YouTube o de la página web pasarían
         ignoradas.
       </p>
-      <p>
-        Nuestro servidor está organizado en distintos canales para los distintos temas on-topic, como #programación, #webdev o #linux.
-        También hay canales específicos para lenguajes de programación, como #javascript, #python o #go.
-      </p>
-      <p>
-        <strong>Para unirte</strong>, tienes que tener una cuenta de Discord con tu e-mail verificado.
-        Lee las instrucciones en los canales de bienvenida para verificar tu cuenta y pode ver el resto de canales del servidor.
-      </p>
     </div>
     <div>
       <iframe src="https://discordapp.com/widget?id=<%= Makigas::Environment.discord_server_id %>"

diff --git a/db/migrate/20240917171815_add_normalized_views_to_playlists.rb b/db/migrate/20240917171815_add_normalized_views_to_playlists.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class AddNormalizedViewsToPlaylists < ActiveRecord::Migration[7.2]
+  def change
+    add_column :playlists, :normalized_views_total, :bigint, default: 0, null: false
+    add_column :playlists, :normalized_views_recent, :bigint, default: 0, null: false
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2024_09_15_085354) do
+ActiveRecord::Schema[7.2].define(version: 2024_09_17_171815) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -138,6 +138,8 @@
     t.bigint "aggregated_views_total", default: 0, null: false
     t.bigint "aggregated_views_recent", default: 0, null: false
     t.string "aggregated_trend_tag"
+    t.bigint "normalized_views_total", default: 0, null: false
+    t.bigint "normalized_views_recent", default: 0, null: false
     t.index ["replacement_playlist_id"], name: "index_playlists_on_replacement_playlist_id"
     t.index ["slug"], name: "index_playlists_on_slug", unique: true
     t.index ["topic_id"], name: "index_playlists_on_topic_id"

diff --git a/spec/factories/playlists.rb b/spec/factories/playlists.rb
@@ -17,6 +17,8 @@
 #  excerpt                 :text
 #  exclude_from_search     :boolean          default(FALSE), not null
 #  forum_url               :string
+#  normalized_views_recent :bigint           default(0), not null
+#  normalized_views_total  :bigint           default(0), not null
 #  slug                    :string           not null
 #  thumbnail_content_type  :string
 #  thumbnail_file_name     :string

diff --git a/spec/models/playlist_spec.rb b/spec/models/playlist_spec.rb
@@ -17,6 +17,8 @@
 #  excerpt                 :text
 #  exclude_from_search     :boolean          default(FALSE), not null
 #  forum_url               :string
+#  normalized_views_recent :bigint           default(0), not null
+#  normalized_views_total  :bigint           default(0), not null
 #  slug                    :string           not null
 #  thumbnail_content_type  :string
 #  thumbnail_file_name     :string