DEV: Rewrite broken tests

Mocking time in Ruby land doesn't translate to the browser

.discourse-compatibility

@@ -0,0 +1,3 @@
+< 3.6.0.beta1-dev: ca316389b51afeb17a697efaff041e425a0deac6
+< 3.5.0.beta5-dev: cbcbbd2e3316b06c91998c7a0fd493d89ab6d2a5
+< 3.5.0.beta1-dev: b3f205375a2f12287aa3338d8adc1afa98c4bfbb

Gemfile.lock

@@ -1,80 +1,95 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (7.1.3.3)
+    activesupport (8.0.3)
       base64
+      benchmark (>= 0.3)
       bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
       minitest (>= 5.1)
-      mutex_m
-      tzinfo (~> 2.0)
-    ast (2.4.2)
-    base64 (0.2.0)
-    bigdecimal (3.1.8)
-    concurrent-ruby (1.2.3)
-    connection_pool (2.4.1)
-    drb (2.2.1)
-    i18n (1.14.5)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    ast (2.4.3)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.3.0)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.4)
+    drb (2.2.3)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
-    language_server-protocol (3.17.0.3)
-    minitest (5.23.1)
-    mutex_m (0.2.0)
-    parallel (1.24.0)
-    parser (3.3.1.0)
+    json (2.15.1)
+    language_server-protocol (3.17.0.5)
+    lint_roller (1.1.0)
+    logger (1.7.0)
+    minitest (5.26.0)
+    parallel (1.27.0)
+    parser (3.3.9.0)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
-    racc (1.8.0)
-    rack (3.0.11)
+    prism (1.5.1)
+    racc (1.8.1)
+    rack (3.2.3)
     rainbow (3.1.1)
-    regexp_parser (2.9.2)
-    rexml (3.3.9)
-    rubocop (1.64.0)
+    regexp_parser (2.11.3)
+    rubocop (1.81.1)
       json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.47.1, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.31.3)
-      parser (>= 3.3.1.0)
-    rubocop-capybara (2.20.0)
-      rubocop (~> 1.41)
-    rubocop-discourse (3.8.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.47.1)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
+    rubocop-capybara (2.22.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-discourse (3.13.3)
       activesupport (>= 6.1)
-      rubocop (>= 1.59.0)
-      rubocop-capybara (>= 2.0.0)
-      rubocop-factory_bot (>= 2.0.0)
-      rubocop-rails (>= 2.25.0)
-      rubocop-rspec (>= 2.25.0)
-    rubocop-factory_bot (2.25.1)
-      rubocop (~> 1.41)
-    rubocop-rails (2.25.0)
+      lint_roller (>= 1.1.0)
+      rubocop (>= 1.73.2)
+      rubocop-capybara (>= 2.22.0)
+      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.30.3)
+      rubocop-rspec (>= 3.0.1)
+      rubocop-rspec_rails (>= 2.31.0)
+    rubocop-factory_bot (2.27.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.33.4)
       activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (2.29.2)
-      rubocop (~> 1.40)
-      rubocop-capybara (~> 2.17)
-      rubocop-factory_bot (~> 2.22)
-      rubocop-rspec_rails (~> 2.28)
-    rubocop-rspec_rails (2.28.3)
-      rubocop (~> 1.40)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
+    rubocop-rspec (3.7.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rspec_rails (2.31.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+      rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
-    syntax_tree (6.2.0)
+    securerandom (0.4.1)
+    syntax_tree (6.3.0)
       prettier_print (>= 1.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.5.0)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.1.0)
+    uri (1.0.4)
 
 PLATFORMS
   ruby
@@ -84,4 +99,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.5.10
+   2.7.2

README.md

@@ -4,9 +4,4 @@ Display stats on your last year of Discourse usage.
 
 ## Usage
 
-- add `http://127.0.0.1:4200/rewinds?` in `SiteSetting.allowed_iframes`
-- example embed of a rewind in a post:
-
-```
-<iframe src="http://127.0.0.1:4200/rewinds?year=2024&username=j.jaffeux" width="320" height="500" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" />
-```
+Navigate to `/my/activity/rewind`

app/controllers/discourse_rewind/rewinds_assets_controller.rb

@@ -1,32 +0,0 @@
-# frozen_string_literal: true
-
-module ::DiscourseRewind
-  class RewindsAssetsController < ::ApplicationController
-    requires_plugin PLUGIN_NAME
-
-    skip_before_action :preload_json, :check_xhr, only: %i[show]
-    skip_before_action :verify_authenticity_token, only: %i[show]
-
-    def show
-      no_cookies
-
-      name = params[:name]
-      path, content_type =
-        if name == "rewind"
-          %w[rewind.css text/css]
-        else
-          raise Discourse::NotFound
-        end
-
-      content = File.read(DiscourseRewind.public_asset_path("css/#{path}"))
-
-      # note, path contains a ":version" which automatically busts the cache
-      # based on file content, so this is safe
-      response.headers["Last-Modified"] = 10.years.ago.httpdate
-      response.headers["Content-Length"] = content.bytesize.to_s
-      immutable_for 1.year
-
-      render plain: content, disposition: :nil, content_type: content_type
-    end
-  end
-end

app/controllers/discourse_rewind/rewinds_controller.rb

@@ -4,16 +4,15 @@ module ::DiscourseRewind
   class RewindsController < ::ApplicationController
     requires_plugin PLUGIN_NAME
 
-    skip_before_action :preload_json, :check_xhr, :redirect_to_login_if_required, only: %i[show]
+    requires_login
 
     def show
-      # expires_in 1.minute, public: false
-      response.headers["X-Robots-Tag"] = "noindex"
-
-      DiscourseRewind::Rewind::Fetch.call(service_params) do
+      DiscourseRewind::FetchReports.call(service_params) do
+        on_model_not_found(:year) { raise Discourse::NotFound }
+        on_model_not_found(:user) { raise Discourse::NotFound }
         on_success do |reports:|
           @reports = reports
-          render "show", layout: false
+          render json: MultiJson.dump(reports), status: :ok
         end
       end
     end

app/helpers/discourse_rewind/rewinds_helper.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module DiscourseRewind
-  module RewindsHelper
-    # keeping it here for caching
-    def self.rewind_asset_url(asset_name)
-      if !%w[rewind.css].include?(asset_name)
-        raise StandardError, "unknown asset type #{asset_name}"
-      end
-
-      @urls ||= {}
-      url = @urls[asset_name]
-      return url if url
-
-      content = File.read(DiscourseRewind.public_asset_path("css/#{asset_name}"))
-      sha1 = Digest::SHA1.hexdigest(content)
-      url = "/rewinds/assets/#{sha1}/#{asset_name}"
-      @urls[asset_name] = GlobalPath.cdn_path(url)
-    end
-
-    def rewind_asset_url(asset_name)
-      DiscourseRewind::RewindsHelper.rewind_asset_url(asset_name)
-    end
-  end
-end

app/services/discourse_rewind/action/activity_calendar.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# For a GitHub like calendar
+# https://docs.github.com/assets/cb-35216/mw-1440/images/help/profile/contributions-graph.webp
+module DiscourseRewind
+  module Action
+    class ActivityCalendar < BaseReport
+      FakeData = {
+        data:
+          (Date.new(2024, 1, 1)..Date.new(2024, 12, 31)).map do |date|
+            { date:, post_count: rand(0..20), visited: false }
+          end,
+        identifier: "activity-calendar",
+      }
+
+      def call
+        return FakeData if Rails.env.development?
+
+        calendar =
+          Post
+            .unscoped
+            .joins(<<~SQL)
+            RIGHT JOIN
+              generate_series('#{date.first}', '#{date.last}', '1 day'::interval) ON
+              posts.created_at::date = generate_series::date AND
+              posts.user_id = #{user.id} AND
+              posts.deleted_at IS NULL
+          SQL
+            .joins(
+              "LEFT JOIN user_visits ON generate_series::date = visited_at AND user_visits.user_id = #{user.id}",
+            )
+            .select(
+              "generate_series::date as date, count(posts.id) as post_count, COUNT(visited_at) > 0 as visited",
+            )
+            .group("generate_series, user_visits.id")
+            .order("generate_series")
+            .map { |row| { date: row.date, post_count: row.post_count, visited: row.visited } }
+
+        { data: calendar, identifier: "activity-calendar" }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/base_report.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module DiscourseRewind
+  module Action
+    class BaseReport < Service::ActionBase
+      option :user
+      option :date
+
+      def call
+        raise NotImplementedError
+      end
+
+      def self.enabled?
+        true
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/best_posts.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module DiscourseRewind
+  module Action
+    class BestPosts < BaseReport
+      def call
+        best_posts =
+          Post
+            .where(user_id: user.id)
+            .where(created_at: date)
+            .where(deleted_at: nil)
+            .where("post_number > 1")
+            .order("like_count DESC NULLS LAST")
+            .limit(3)
+            .pluck(:post_number, :topic_id, :like_count, :reply_count, :raw, :cooked)
+
+        { data: best_posts, identifier: "best-posts" }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/best_topics.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module DiscourseRewind
+  module Action
+    class BestTopics < BaseReport
+      def call
+        best_topics =
+          TopTopic
+            .includes(:topic)
+            .references(:topic)
+            .where(topic: { deleted_at: nil, created_at: date, user_id: user.id })
+            .order("yearly_score DESC NULLS LAST")
+            .limit(3)
+            .pluck(:topic_id, :title, :excerpt, :yearly_score)
+            .map do |topic_id, title, excerpt, yearly_score|
+              { topic_id: topic_id, title: title, excerpt: excerpt, yearly_score: yearly_score }
+            end
+
+        { data: best_topics, identifier: "best-topics" }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/favorite_categories.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+# Topics visited grouped by category
+module DiscourseRewind
+  module Action
+    class FavoriteCategories < BaseReport
+      FakeData = {
+        data: [
+          { category_id: 1, name: "cats" },
+          { category_id: 2, name: "dogs" },
+          { category_id: 3, name: "countries" },
+          { category_id: 4, name: "management" },
+          { category_id: 5, name: "things" },
+        ],
+        identifier: "favorite-categories",
+      }
+      def call
+        return FakeData if Rails.env.development?
+
+        favorite_categories =
+          TopicViewItem
+            .joins(:topic)
+            .joins("INNER JOIN categories ON categories.id = topics.category_id")
+            .where(user: user)
+            .where(viewed_at: date)
+            .where(categories: { id: user.guardian.allowed_category_ids })
+            .group("categories.id, categories.name")
+            .order("COUNT(*) DESC")
+            .limit(5)
+            .pluck("categories.id, categories.name")
+            .map { |category_id, name| { category_id: category_id, name: name } }
+
+        { data: favorite_categories, identifier: "favorite-categories" }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/favorite_tags.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# Topics visited grouped by tag
+module DiscourseRewind
+  module Action
+    class FavoriteTags < BaseReport
+      FakeData = {
+        data: [
+          { tag_id: 1, name: "cats" },
+          { tag_id: 2, name: "dogs" },
+          { tag_id: 3, name: "countries" },
+          { tag_id: 4, name: "management" },
+          { tag_id: 5, name: "things" },
+        ],
+        identifier: "favorite-tags",
+      }
+
+      def call
+        return FakeData if Rails.env.development?
+
+        favorite_tags =
+          TopicViewItem
+            .joins(:topic)
+            .joins("INNER JOIN topic_tags ON topic_tags.topic_id = topics.id")
+            .joins("INNER JOIN tags ON tags.id = topic_tags.tag_id")
+            .where(user: user)
+            .where(viewed_at: date)
+            .where(tags: { id: Tag.visible(user.guardian).pluck(:id) })
+            .group("tags.id, tags.name")
+            .order("COUNT(DISTINCT topic_views.topic_id) DESC")
+            .limit(5)
+            .pluck("tags.id, tags.name")
+            .map { |tag_id, name| { tag_id: tag_id, name: name } }
+
+        { data: favorite_tags, identifier: "favorite-tags" }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/fbff.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+# Forum Best Friend Forever ranking
+# Score is informative only, do not show in UI
+module DiscourseRewind
+  module Action
+    class Fbff < BaseReport
+      MAX_SUMMARY_RESULTS = 50
+      LIKE_SCORE = 1
+      REPLY_SCORE = 10
+
+      def call
+        most_liked_users =
+          like_query(date)
+            .where(acting_user_id: user.id)
+            .group(:user_id)
+            .order("COUNT(*) DESC")
+            .limit(MAX_SUMMARY_RESULTS)
+            .pluck("user_actions.user_id, COUNT(*)")
+            .map { |user_id, count| { user_id => count } }
+            .reduce({}, :merge)
+
+        most_liked_by_users =
+          like_query(date)
+            .where(user: user)
+            .group(:acting_user_id)
+            .order("COUNT(*) DESC")
+            .limit(MAX_SUMMARY_RESULTS)
+            .pluck("acting_user_id, COUNT(*)")
+            .map { |acting_user_id, count| { acting_user_id => count } }
+            .reduce({}, :merge)
+
+        users_who_most_replied_me =
+          post_query(user, date)
+            .where(posts: { user_id: user.id })
+            .group("replies.user_id")
+            .order("COUNT(*) DESC")
+            .limit(MAX_SUMMARY_RESULTS)
+            .pluck("replies.user_id, COUNT(*)")
+            .map { |user_id, count| { user_id => count } }
+            .reduce({}, :merge)
+
+        users_i_most_replied =
+          post_query(user, date)
+            .where("replies.user_id = ?", user.id)
+            .group("posts.user_id")
+            .order("COUNT(*) DESC")
+            .limit(MAX_SUMMARY_RESULTS)
+            .pluck("posts.user_id, COUNT(*)")
+            .map { |user_id, count| { user_id => count } }
+            .reduce({}, :merge)
+
+        #TODO include chat?
+
+        fbffs = [
+          apply_score(most_liked_users, LIKE_SCORE),
+          apply_score(most_liked_by_users, LIKE_SCORE),
+          apply_score(users_who_most_replied_me, REPLY_SCORE),
+          apply_score(users_i_most_replied, REPLY_SCORE),
+        ]
+
+        fbff_id =
+          fbffs
+            .flatten
+            .inject { |h1, h2| h1.merge(h2) { |_, v1, v2| v1 + v2 } }
+            &.sort_by { |_, v| -v }
+            &.first
+            &.first
+
+        return if !fbff_id
+
+        {
+          data: {
+            fbff: BasicUserSerializer.new(User.find(fbff_id), root: false).as_json,
+            yourself: BasicUserSerializer.new(user, root: false).as_json,
+          },
+          identifier: "fbff",
+        }
+      end
+
+      def post_query(user, date)
+        Post
+          .joins(:topic)
+          .includes(:topic)
+          .where(
+            "posts.post_type IN (?)",
+            Topic.visible_post_types(user, include_moderator_actions: false),
+          )
+          .joins(
+            "INNER JOIN posts replies ON posts.topic_id = replies.topic_id AND posts.reply_to_post_number = replies.post_number",
+          )
+          .joins(
+            "INNER JOIN topics ON replies.topic_id = topics.id AND topics.archetype <> 'private_message'",
+          )
+          .joins(
+            "AND replies.post_type IN (#{Topic.visible_post_types(user, include_moderator_actions: false).join(",")})",
+          )
+          .where("replies.created_at BETWEEN ? AND ?", date.first, date.last)
+          .where("replies.user_id <> posts.user_id")
+      end
+
+      def like_query(date)
+        UserAction
+          .joins(:target_topic, :target_post)
+          .where(created_at: date)
+          .where(action_type: UserAction::WAS_LIKED)
+      end
+
+      def apply_score(users, score)
+        users.map { |user_id, count| { user_id => count * score } }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/reactions.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+# For a most user / received reactions cards
+module DiscourseRewind
+  module Action
+    class Reactions < BaseReport
+      FakeData = {
+        data: {
+          post_received_reactions: {
+            "open_mouth" => 2,
+            "cat" => 32,
+            "dog" => 34,
+            "heart" => 45,
+            "grinning" => 82,
+          },
+          post_used_reactions: {
+            "open_mouth" => 2,
+            "cat" => 32,
+            "dog" => 34,
+            "heart" => 45,
+            "grinning" => 82,
+          },
+          chat_used_reactions: {
+            "open_mouth" => 2,
+            "cat" => 32,
+            "dog" => 34,
+            "heart" => 45,
+            "grinning" => 82,
+          },
+          chat_received_reactions: {
+            "open_mouth" => 2,
+            "cat" => 32,
+            "dog" => 34,
+            "heart" => 45,
+            "grinning" => 82,
+          },
+        },
+        identifier: "reactions",
+      }
+
+      def call
+        return FakeData if Rails.env.development?
+
+        data = {}
+        if defined?(DiscourseReactions::Reaction)
+          # This is missing heart reactions (default like)
+          data[:post_used_reactions] = sort_and_limit(
+            DiscourseReactions::Reaction
+              .by_user(user)
+              .where(created_at: date)
+              .group(:reaction_value)
+              .count,
+          )
+
+          data[:post_received_reactions] = sort_and_limit(
+            DiscourseReactions::Reaction
+              .includes(:post)
+              .where(posts: { user_id: user.id })
+              .where(created_at: date)
+              .group(:reaction_value)
+              .count,
+          )
+        end
+
+        if SiteSetting.chat_enabled
+          data[:chat_used_reactions] = sort_and_limit(
+            Chat::MessageReaction.where(user: user).where(created_at: date).group(:emoji).count,
+          )
+
+          data[:chat_received_reactions] = sort_and_limit(
+            Chat::MessageReaction
+              .includes(:chat_message)
+              .where(chat_message: { user_id: user.id })
+              .where(created_at: date)
+              .group(:emoji)
+              .count,
+          )
+        end
+
+        { data:, identifier: "reactions" }
+      end
+
+      def enabled?
+        SiteSetting.discourse_reactions_enabled || SiteSetting.chat_enabled
+      end
+
+      def sort_and_limit(reactions)
+        reactions.sort_by { |_, v| -v }.first(5).reverse.to_h
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/reading_time.rb

@@ -0,0 +1,202 @@
+# frozen_string_literal: true
+
+# For showcasing the reading time of a user
+# Should we show book covers or just the names?
+module DiscourseRewind
+  module Action
+    class ReadingTime < BaseReport
+      FakeData = {
+        data: {
+          reading_time: 2_880_000,
+          book: "The Combined Cosmere works + Wheel of Time",
+          isbn: "978-0812511819",
+          series: true,
+        },
+        identifier: "reading-time",
+      }
+
+      def call
+        return FakeData if Rails.env.development?
+
+        reading_time = UserVisit.where(user_id: user.id).where(visited_at: date).sum(:time_read)
+        book = best_book_fit(reading_time)
+
+        return if book.nil?
+
+        {
+          data: {
+            reading_time: reading_time,
+            book: book[:title],
+            isbn: book[:isbn],
+            series: book[:series],
+          },
+          identifier: "reading-time",
+        }
+      end
+
+      def popular_books
+        {
+          "The Hunger Games" => {
+            reading_time: 19_740,
+            isbn: "978-0439023481",
+            series: false,
+          },
+          "The Metamorphosis" => {
+            reading_time: 3120,
+            isbn: "978-0553213690",
+            series: false,
+          },
+          "To Kill a Mockingbird" => {
+            reading_time: 22_800,
+            isbn: "978-0061120084",
+            series: false,
+          },
+          "Pride and Prejudice" => {
+            reading_time: 25_200,
+            isbn: "978-1503290563",
+            series: false,
+          },
+          "1984" => {
+            reading_time: 16_800,
+            isbn: "978-0451524935",
+            series: false,
+          },
+          "The Lord of the Rings" => {
+            reading_time: 108_000,
+            isbn: "978-0544003415",
+            series: true,
+          },
+          "Harry Potter and the Sorcerer's Stone" => {
+            reading_time: 24_600,
+            isbn: "978-0590353427",
+            series: true,
+          },
+          "The Great Gatsby" => {
+            reading_time: 12_600,
+            isbn: "978-0743273565",
+            series: false,
+          },
+          "The Little Prince" => {
+            reading_time: 5400,
+            isbn: "978-0156012195",
+            series: false,
+          },
+          "Animal Farm" => {
+            reading_time: 7200,
+            isbn: "978-0451526342",
+            series: false,
+          },
+          "The Catcher in the Rye" => {
+            reading_time: 18_000,
+            isbn: "978-0316769488",
+            series: false,
+          },
+          "Jane Eyre" => {
+            reading_time: 34_200,
+            isbn: "978-0141441146",
+            series: false,
+          },
+          "Fahrenheit 451" => {
+            reading_time: 15_000,
+            isbn: "978-1451673319",
+            series: false,
+          },
+          "The Hobbit" => {
+            reading_time: 27_000,
+            isbn: "978-0547928227",
+            series: false,
+          },
+          "The Da Vinci Code" => {
+            reading_time: 37_800,
+            isbn: "978-0307474278",
+            series: false,
+          },
+          "Little Women" => {
+            reading_time: 30_000,
+            isbn: "978-0147514011",
+            series: false,
+          },
+          "One Hundred Years of Solitude" => {
+            reading_time: 46_800,
+            isbn: "978-0060883287",
+            series: false,
+          },
+          "And Then There Were None" => {
+            reading_time: 16_200,
+            isbn: "978-0062073488",
+            series: false,
+          },
+          "The Alchemist" => {
+            reading_time: 10_800,
+            isbn: "978-0061122415",
+            series: false,
+          },
+          "The Hitchhiker's Guide to the Galaxy" => {
+            reading_time: 12_600,
+            isbn: "978-0345391803",
+            series: false,
+          },
+          "The Complete works of Shakespeare" => {
+            reading_time: 180_000,
+            isbn: "978-1853268953",
+            series: true,
+          },
+          "The Game of Thrones Series" => {
+            reading_time: 360_000,
+            isbn: "978-0007477159",
+            series: true,
+          },
+          "Malazan Book of the Fallen" => {
+            reading_time: 720_000,
+            isbn: "978-0765348821",
+            series: true,
+          },
+          "Terry Pratchett’s Discworld series" => {
+            reading_time: 1_440_000,
+            isbn: "978-9123684458",
+            series: true,
+          },
+          "The Wandering Inn web series" => {
+            reading_time: 2_160_000,
+            isbn: "the-wandering-inn",
+            series: true,
+          },
+          "The Combined Cosmere works + Wheel of Time" => {
+            reading_time: 2_880_000,
+            isbn: "978-0812511819",
+            series: true,
+          },
+          "The Star Trek novels" => {
+            reading_time: 3_600_000,
+            isbn: "978-1852860691",
+            series: true,
+          },
+        }.symbolize_keys
+      end
+
+      def best_book_fit(reading_time)
+        reading_time_rest = reading_time
+        books = []
+
+        while reading_time_rest > 0
+          best_fit = popular_books.min_by { |_, v| (v[:reading_time] - reading_time_rest).abs }
+          break if best_fit.nil?
+
+          books << best_fit.first
+          reading_time_rest -= best_fit.last[:reading_time]
+        end
+
+        return if books.empty?
+
+        book_title =
+          books.group_by { |book| book }.transform_values(&:count).max_by { |_, count| count }.first
+
+        {
+          title: book_title,
+          isbn: popular_books[book_title][:isbn],
+          series: popular_books[book_title][:series],
+        }
+      end
+    end
+  end
+end

app/services/discourse_rewind/action/top_words.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module DiscourseRewind
+  module Action
+    class TopWords < BaseReport
+      FakeData = {
+        data: [
+          { word: "seven", score: 100 },
+          { word: "longest", score: 90 },
+          { word: "you", score: 80 },
+          { word: "overachieved", score: 70 },
+          { word: "assume", score: 60 },
+          { word: "week", score: 50 },
+        ],
+        identifier: "top-words",
+      }
+
+      def call
+        return FakeData if Rails.env.development?
+
+        words = DB.query(<<~SQL, user_id: user.id, date_start: date.first, date_end: date.last)
+        WITH popular_words AS (
+          SELECT
+            *
+          FROM
+            ts_stat(
+              $INNERSQL$
+                SELECT
+                  search_data
+                FROM
+                  post_search_data
+                INNER JOIN
+                  posts ON posts.id = post_search_data.post_id
+                WHERE
+                  posts.user_id = :user_id
+                  AND posts.created_at BETWEEN :date_start AND :date_end
+              $INNERSQL$
+            ) AS search_data
+          ORDER BY
+            nentry DESC,
+            ndoc DESC,
+            word
+          LIMIT
+            100
+        ), lex AS (
+          SELECT
+            DISTINCT ON (lexeme) to_tsvector('english', word) as lexeme,
+            word as original_word
+          FROM
+            ts_stat ($INNERSQL$
+              SELECT
+                to_tsvector('simple', raw)
+              FROM
+                posts AS p
+              WHERE
+                p.created_at BETWEEN :date_start AND :date_end
+                AND p.user_id = :user_id
+            $INNERSQL$)
+        ), ranked_words AS (
+          SELECT
+            popular_words.*, lex.original_word,
+            ROW_NUMBER() OVER (PARTITION BY word ORDER BY LENGTH(original_word)) AS rn
+          FROM
+            popular_words
+          INNER JOIN
+            lex ON lex.lexeme @@ to_tsquery('english', popular_words.word)
+        )
+        SELECT
+          word,
+          ndoc,
+          nentry,
+          original_word
+        FROM
+          ranked_words
+        WHERE
+          rn = 1
+        ORDER BY
+          ndoc + nentry DESC
+        LIMIT 100
+      SQL
+
+        word_score = words.map { { word: _1.original_word, score: _1.ndoc + _1.nentry } }
+
+        { data: word_score, identifier: "top-words" }
+      end
+    end
+  end
+end

app/services/discourse_rewind/fetch_reports.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module DiscourseRewind
+  # Service responsible to fetch a rewind for a username/year.
+  #
+  # @example
+  #  ::DiscourseRewind::Rewind::Fetch.call(
+  #    guardian: guardian
+  #  )
+  #
+  class FetchReports
+    include Service::Base
+
+    # @!method self.call(guardian:, params:)
+    #   @param [Guardian] guardian
+    #   @param [Hash] params
+    #   @option params [Integer] :year of the rewind
+    #   @option params [Integer] :username of the rewind
+    #   @return [Service::Base::Context]
+
+    CACHE_DURATION = Rails.env.development? ? 10.seconds : 5.minutes
+
+    # order matters
+    REPORTS = [
+      Action::TopWords,
+      Action::ReadingTime,
+      Action::Reactions,
+      Action::Fbff,
+      Action::FavoriteTags,
+      Action::FavoriteCategories,
+      Action::BestTopics,
+      Action::BestPosts,
+      Action::ActivityCalendar,
+    ]
+
+    model :year
+    model :user
+    model :date
+    model :reports
+
+    private
+
+    def fetch_user(guardian:)
+      User.find_by_username(guardian.user.username)
+    end
+
+    def fetch_year
+      current_date = Time.zone.now
+      current_month = current_date.month
+      current_year = current_date.year
+
+      case current_month
+      when 1
+        current_year - 1
+      when 12
+        current_year
+      else
+        false
+      end
+    end
+
+    def fetch_date(params:, year:)
+      Date.new(year).all_year
+    end
+
+    def fetch_reports(date:, user:, guardian:, year:)
+      key = "rewind:#{guardian.user.username}:#{year}"
+      reports = Discourse.redis.get(key)
+
+      if !reports
+        reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }
+        Discourse.redis.setex(key, CACHE_DURATION, MultiJson.dump(reports))
+      else
+        reports = MultiJson.load(reports, symbolize_keys: true)
+      end
+
+      reports
+    end
+  end
+end

app/services/discourse_rewind/rewind/action/create_posts_count_report.rb

@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-module DiscourseRewind
-  class Rewind::Action::CreatePostsCountReport < Service::ActionBase
-    option :params
-    option :guardian
-    option :date
-    option :user
-
-    delegate :username, :year, to: :params, private: true
-
-    def call
-      p date
-      p user
-      p guardian
-      p username
-      p year
-      p params
-
-      { data: { count: 5 }, identifier: "posts-count-report" }
-    end
-  end
-end

app/services/discourse_rewind/rewind/fetch.rb

@@ -1,66 +0,0 @@
-# frozen_string_literal: true
-
-module DiscourseRewind
-  # Service responsible to fetch a rewind for a username/year.
-  #
-  # @example
-  #  ::DiscourseRewind::Rewind::Fetch.call(
-  #    guardian: guardian,
-  #    params: {
-  #      username: "falco",
-  #      year: 2024,
-  #    }
-  #  )
-  #
-  class Rewind::Fetch
-    include Service::Base
-
-    # @!method self.call(guardian:, params:)
-    #   @param [Guardian] guardian
-    #   @param [Hash] params
-    #   @option params [Integer] :year of the rewind
-    #   @option params [Integer] :username of the rewind
-    #   @return [Service::Base::Context]
-
-    # order matters, rewinds are displayed in the order they are defined
-    REPORTS = [DiscourseRewind::Rewind::Action::CreatePostsCountReport]
-
-    CACHE_DURATION = 5.minutes
-
-    params do
-      attribute :year, :integer
-      attribute :username, :string
-
-      validates :year, presence: true
-      validates :username, presence: true
-    end
-
-    model :user
-    model :date
-    model :reports
-
-    private
-
-    def fetch_user(params:)
-      User.find_by_username(params.username)
-    end
-
-    def fetch_date(params:)
-      Date.new(params.year).all_year
-    end
-
-    def fetch_reports(params:, date:, user:, guardian:)
-      key = "rewind:#{params.username}:#{params.year}"
-      reports = Discourse.redis.get(key)
-
-      if Rails.env.development? || !reports
-        reports = REPORTS.map { |report| report.call(params:, date:, user:, guardian:) }
-        Discourse.redis.setex(key, CACHE_DURATION, MultiJson.dump(reports))
-      else
-        reports = MultiJson.load(reports, symbolize_keys: true)
-      end
-
-      reports
-    end
-  end
-end

app/views/discourse_rewind/rewinds/show.html.erb

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title><%= I18n.t("discourse_rewind.title", title: "RETRO TITLE", site_name: SiteSetting.title) %></title>
-    <meta property="og:title" content="<%= I18n.t("discourse_rewind.title", title: "RETRO TITLE", site_name: SiteSetting.title) %>">
-    <meta property="og:description" content="DESC">
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="<%= request.original_url %>">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="<%= I18n.t("discourse_rewind.title", title: "RETRO TITLE", site_name: SiteSetting.title) %>">
-    <meta name="twitter:description" content="DESC">
-    <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="<%= rewind_asset_url("rewind.css")  %>">
-  </head>
-  <body>
-    <div class="rewind__wrapper">
-      <div class="rewind">
-        <%- @reports.each do |report| %>
-          <div class="rewind__report">
-            <div class="rewind__report__header">
-              <%= report[:identifier] %>
-            </div>
-            <div class="rewind__report__body">
-              <%= report[:data][:count] %>
-            </div>
-          </div>
-        <%- end %>
-      </div>
-    </div>
-  </body>
-</html>

assets/javascripts/discourse/components/reports/activity-calendar.gjs

@@ -0,0 +1,124 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import concatClass from "discourse/helpers/concat-class";
+import { i18n } from "discourse-i18n";
+
+const ROWS = 7;
+const COLS = 53;
+
+export default class ActivityCalendar extends Component {
+  get rowsArray() {
+    const data = this.args.report.data;
+    let rowsArray = [];
+
+    for (let r = 0; r < ROWS; r++) {
+      let rowData = [];
+      for (let c = 0; c < COLS; c++) {
+        const index = c * ROWS + r;
+        rowData.push(data[index] ? data[index] : "");
+      }
+      rowsArray.push(rowData);
+    }
+
+    return rowsArray;
+  }
+
+  @action
+  getAbbreviatedMonth(monthIndex) {
+    return moment().month(monthIndex).format("MMM");
+  }
+
+  @action
+  computeClass(count) {
+    if (!count) {
+      return "-empty";
+    } else if (count < 10) {
+      return "-low";
+    } else if (count < 20) {
+      return "-medium";
+    } else {
+      return "-high";
+    }
+  }
+
+  <template>
+    <div class="rewind-report-page -activity-calendar">
+      <h2 class="rewind-report-title">{{i18n
+          "discourse_rewind.reports.activity_calendar.title"
+        }}</h2>
+
+      <div class="rewind-card">
+        <table class="rewind-calendar">
+          <thead>
+            <tr>
+              <td
+                colspan="5"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 0}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 1}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 2}}</td>
+              <td
+                colspan="5"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 3}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 4}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 5}}</td>
+              <td
+                colspan="5"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 6}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 7}}</td>
+              <td
+                colspan="5"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 8}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 9}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 10}}</td>
+              <td
+                colspan="4"
+                class="activity-header-cell"
+              >{{this.getAbbreviatedMonth 11}}</td>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each this.rowsArray as |row|}}
+              <tr>
+                {{#each row as |cell|}}
+                  <td
+                    data-date={{cell.date}}
+                    title={{cell.date}}
+                    class={{concatClass
+                      "rewind-calendar-cell"
+                      (this.computeClass cell.post_count)
+                    }}
+                  ></td>
+                {{/each}}
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </template>
+}

assets/javascripts/discourse/components/reports/best-posts.gjs

@@ -0,0 +1,41 @@
+import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
+import { get } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import icon from "discourse/helpers/d-icon";
+import { i18n } from "discourse-i18n";
+
+export default class BestPosts extends Component {
+  rank(idx) {
+    return idx + 1;
+  }
+
+  <template>
+    {{#if @report.data.length}}
+      <div class="rewind-report-page -best-posts">
+        <h2 class="rewind-report-title">{{i18n
+            "discourse_rewind.reports.best_posts.title"
+            [email protected]
+          }}</h2>
+        <div class="rewind-report-container">
+          {{#each @report.data as |post idx|}}
+            <div class={{concat "rewind-card" " rank-" (this.rank idx)}}>
+              <span class="best-posts -rank"></span>
+              <span class="best-posts -rank"></span>
+              <div class="best-posts__post">{{htmlSafe (get post "5")}}</div>
+              <div class="best-posts__metadata">
+                <span class="best-posts__likes">
+                  {{icon "heart"}}{{htmlSafe (get post "2")}}</span>
+                <span class="best-posts__replies">
+                  {{icon "comment"}}{{htmlSafe (get post "3")}}</span>
+                <a href="/t/{{get post '1'}}/{{get post '0'}}">{{i18n
+                    "discourse_rewind.reports.best_posts.view_post"
+                  }}</a>
+              </div>
+            </div>
+          {{/each}}
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/reports/best-topics.gjs

@@ -0,0 +1,38 @@
+import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
+import { htmlSafe } from "@ember/template";
+import { i18n } from "discourse-i18n";
+
+export default class BestTopics extends Component {
+  rank(idx) {
+    return idx + 1;
+  }
+
+  <template>
+    {{#if @report.data.length}}
+      <div class="rewind-report-page -best-topics">
+        <h2 class="rewind-report-title">{{i18n
+            "discourse_rewind.reports.best_topics.title"
+            [email protected]
+          }}</h2>
+        <div class="rewind-report-container">
+          <div class="rewind-card">
+            {{#each @report.data as |topic idx|}}
+              <a
+                href={{concat "/t/-/" topic.topic_id}}
+                class={{concat "best-topics__topic" " rank-" (this.rank idx)}}
+              >
+                <span class="best-topics -rank"></span>
+                <span class="best-topics -rank"></span>
+                <h2 class="best-topics__header">{{topic.title}}</h2>
+                <span class="best-topics__excerpt">{{htmlSafe
+                    topic.excerpt
+                  }}</span>
+              </a>
+            {{/each}}
+          </div>
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/reports/favorite-categories.gjs

@@ -0,0 +1,25 @@
+import { concat } from "@ember/helper";
+import { i18n } from "discourse-i18n";
+
+const FavoriteCategories = <template>
+  {{#if @report.data.length}}
+    <div class="rewind-report-page -favorite-categories">
+      <h2 class="rewind-report-title">{{i18n
+          "discourse_rewind.reports.favorite_categories.title"
+          [email protected]
+        }}</h2>
+      <div class="rewind-report-container">
+        {{#each @report.data as |data|}}
+          <a href={{concat "/c/-/" data.category_id}} class="rewind-card">
+            <p
+              class="favorite-categories__category"
+              href={{concat "/c/-/" data.category_id}}
+            >{{data.name}}</p>
+          </a>
+        {{/each}}
+      </div>
+    </div>
+  {{/if}}
+</template>;
+
+export default FavoriteCategories;

assets/javascripts/discourse/components/reports/favorite-tags.gjs

@@ -0,0 +1,25 @@
+import { concat } from "@ember/helper";
+import { i18n } from "discourse-i18n";
+
+const FavoriteTags = <template>
+  {{#if @report.data.length}}
+    <div class="rewind-report-page -favorite-tags">
+      <h2 class="rewind-report-title">{{i18n
+          "discourse_rewind.reports.favorite_tags.title"
+          [email protected]
+        }}</h2>
+      <div class="rewind-report-container">
+        {{#each @report.data as |data|}}
+          <a class="rewind-card" href={{concat "/tag/" data.name}}>
+            <p
+              class="favorite-tags__tag"
+              href={{concat "/tag/" data.name}}
+            >#{{data.name}}</p>
+          </a>
+        {{/each}}
+      </div>
+    </div>
+  {{/if}}
+</template>;
+
+export default FavoriteTags;

assets/javascripts/discourse/components/reports/fbff.gjs

@@ -0,0 +1,39 @@
+import { hash } from "@ember/helper";
+import avatar from "discourse/helpers/bound-avatar-template";
+import { i18n } from "discourse-i18n";
+
+const FBFF = <template>
+  <div class="rewind-report-page -fbff">
+    <h2 class="rewind-report-title">{{i18n
+        "discourse_rewind.reports.fbff.title"
+      }}</h2>
+    <div class="rewind-report-container">
+      <div class="rewind-card">
+        <div class="fbff-avatar-container">
+          {{avatar
+            @report.data.fbff.avatar_template
+            "huge"
+            (hash [email protected])
+          }}
+          <p class="fbff-avatar-name">@{{@report.data.fbff.username}}</p>
+        </div>
+        <div class="fbff-gif-container">
+          <img
+            class="fbff-gif"
+            src="/plugins/discourse-rewind/images/fbff.gif"
+          />
+        </div>
+        <div class="fbff-avatar-container">
+          {{avatar
+            @report.data.yourself.avatar_template
+            "huge"
+            (hash [email protected])
+          }}
+          <p class="fbff-avatar-name">@{{@report.data.yourself.username}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>;
+
+export default FBFF;

assets/javascripts/discourse/components/reports/header.gjs

@@ -0,0 +1,14 @@
+const RewindHeader = <template>
+  <div class="rewind__header">
+    <img
+      class="rewind-logo -light"
+      src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
+    />
+    <img
+      class="rewind-logo -dark"
+      src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
+    />
+  </div>
+</template>;
+
+export default RewindHeader;

assets/javascripts/discourse/components/reports/reactions.gjs

@@ -0,0 +1,81 @@
+import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import replaceEmoji from "discourse/helpers/replace-emoji";
+import { i18n } from "discourse-i18n";
+
+export default class Reactions extends Component {
+  get totalPostUsedReactions() {
+    return Object.values(
+      this.args.report.data.post_used_reactions ?? {}
+    ).reduce((acc, count) => acc + count, 0);
+  }
+
+  get receivedReactions() {
+    return this.args.report.data.post_received_reactions ?? {};
+  }
+
+  @action
+  cleanEmoji(emojiName) {
+    return emojiName.replaceAll(/_/g, " ");
+  }
+
+  @action
+  computePercentage(count) {
+    return `${((count / this.totalPostUsedReactions) * 100).toFixed(2)}%`;
+  }
+
+  @action
+  computePercentageStyle(count) {
+    return htmlSafe(`width: ${this.computePercentage(count)}`);
+  }
+
+  <template>
+    <div class="rewind-report-page -post-received-reactions">
+      <h2 class="rewind-report-title">{{i18n
+          "discourse_rewind.reports.post_received_reactions.title"
+        }}</h2>
+      <div class="rewind-report-container">
+        {{#each-in this.receivedReactions as |emojiName count|}}
+          <div class="rewind-card scale">
+            <span class="rewind-card__emoji">{{replaceEmoji
+                (concat ":" emojiName ":")
+              }}</span>
+            <span class="rewind-card__data">{{count}}</span>
+          </div>
+        {{/each-in}}
+      </div>
+    </div>
+
+    <div class="rewind-report-page -post-used-reactions">
+      <h2 class="rewind-report-title">{{i18n
+          "discourse_rewind.reports.post_used_reactions.title"
+        }}</h2>
+      <div class="rewind-card">
+        <div class="rewind-reactions-chart">
+          {{#each-in @report.data.post_used_reactions as |emojiName count|}}
+            <div class="rewind-reactions-row">
+              <span class="emoji">{{replaceEmoji
+                  (concat ":" emojiName ":")
+                }}</span>
+              <span class="percentage">{{this.computePercentage count}}</span>
+              <div
+                class="rewind-reactions-bar"
+                style={{this.computePercentageStyle count}}
+                title={{count}}
+              ></div>
+            </div>
+          {{/each-in}}
+
+          <span class="rewind-total-reactions">
+            {{i18n
+              "discourse_rewind.reports.post_used_reactions.total_number"
+              count=this.totalPostUsedReactions
+            }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </template>
+}

assets/javascripts/discourse/components/reports/reading-time.gjs

@@ -0,0 +1,53 @@
+import Component from "@glimmer/component";
+import { htmlSafe } from "@ember/template";
+import { i18n } from "discourse-i18n";
+
+export default class ReadingTime extends Component {
+  get readTimeString() {
+    let totalMinutes = Math.floor(this.args.report.data.reading_time / 60);
+    let leftOverMinutes = totalMinutes % 60;
+    let totalHours = (totalMinutes - leftOverMinutes) / 60;
+
+    if (leftOverMinutes >= 35) {
+      totalHours += 1;
+      leftOverMinutes = 0;
+      return `${totalHours}h`;
+    } else {
+      return `${totalHours}h ${leftOverMinutes}m`;
+    }
+  }
+
+  <template>
+    {{#if @report.data}}
+      <div class="rewind-report-page -reading-time">
+        <h2 class="rewind-report-title">{{i18n
+            "discourse_rewind.reports.reading_time.title"
+          }}</h2>
+        <div class="rewind-card">
+          <p class="reading-time__text">
+            {{htmlSafe
+              (i18n
+                "discourse_rewind.reports.reading_time.book_comparison"
+                readingTitme=this.readTimeString
+                [email protected]
+              )
+            }}
+          </p>
+          <div class="reading-time__book">
+            <div class="book">
+              <img
+                alt=""
+                src="/plugins/discourse-rewind/images/books/{{@report.data.isbn}}.jpg"
+              />
+            </div>
+            {{#if @report.data.series}}
+              <div class="book-series one"></div>
+              <div class="book-series two"></div>
+              <div class="book-series three"></div>
+            {{/if}}
+          </div>
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/reports/top-words.gjs

@@ -0,0 +1,28 @@
+import Component from "@glimmer/component";
+import { i18n } from "discourse-i18n";
+import WordCard from "discourse/plugins/discourse-rewind/discourse/components/reports/top-words/word-card";
+
+export default class WordCards extends Component {
+  get topWords() {
+    return this.args.report.data.sort((a, b) => b.score - a.score).slice(0, 5);
+  }
+
+  <template>
+    <div class="rewind-report-page -top-words">
+      <div class="rewind-report-container">
+        <h2 class="rewind-report-title">{{i18n
+            "discourse_rewind.reports.top_words.title"
+          }}</h2>
+        <div class="cards-container">
+          {{#each this.topWords as |entry index|}}
+            <WordCard
+              @word={{entry.word}}
+              @count={{entry.score}}
+              @index={{index}}
+            />
+          {{/each}}
+        </div>
+      </div>
+    </div>
+  </template>
+}