Mobile Latest Homepage - Theme Component

Support
1

Moderator, please move to the appropriate category.

Mobile Latest Homepage

With the deprecation of site.mobileView in Discourse 3.5, the popular Force Mobile Homepage theme component was marked broken. This component is a replacement that works with current Discourse versions.

It sets the default homepage to Latest on narrow screens, while leaving wider screens (iPad landscape, desktop) unchanged. It also remembers the user’s last choice between Latest and Categories for the duration of their browser session.

Repository: GitHub - shortmort37/discourse-mobile-latest-homepage: A theme component that redirects mobile users to Latest instead of Categories on the homepage · GitHub

Behavior

  • :iphone: iPhone / narrow screen — lands on Latest by default
  • :left_right_arrow: User navigates to Categories — that choice is remembered for the rest of their browser session
  • :arrows_counterclockwise: Fresh session — always defaults back to Latest
  • :ipad: iPad (landscape) / desktop — completely unaffected, two-column Categories + Latest unchanged

How it works

The component uses window.matchMedia for viewport detection, setDefaultHomepage to set the default, and Ember’s service:router to redirect before the page renders. sessionStorage remembers the user’s last choice so returning to the homepage respects their preference.

import { apiInitializer } from "discourse/lib/api";
import { setDefaultHomepage } from "discourse/lib/utilities";

export default apiInitializer("1.0", (api) => {
  if (!window.matchMedia("(max-width: 768px)").matches) {
    return;
  }

  setDefaultHomepage("latest");

  api.onPageChange((url) => {
    if (url === "/categories") {
      sessionStorage.setItem("mobile_homepage", "categories");
    } else if (url === "/latest") {
      sessionStorage.setItem("mobile_homepage", "latest");
    }

    if (url === "/") {
      const choice = sessionStorage.getItem("mobile_homepage");
      if (choice === "categories") {
        const router = api.container.lookup("service:router");
        router.replaceWith("discovery.categories");
      } else {
        const router = api.container.lookup("service:router");
        router.replaceWith("discovery.latest");
      }
    }
  });
});

The 768px breakpoint aligns with Discourse’s own narrow layout threshold. This approach was informed by the Discourse core team’s guidance in this thread following the viewport API changes.

Tested on

  • :iphone: iPhone — lands on Latest :white_check_mark:
  • :ipad: iPad (landscape) — two-column Categories + Latest :white_check_mark:
  • :desktop_computer: Desktop — two-column Categories + Latest :white_check_mark:

Installation

  1. Go to Admin → Customize → Themes → Install → From a git repository
  2. Enter: https://github.com/shortmort37/discourse-mobile-latest-homepage
  3. Install as a component and add it to your active theme

If you’re new to installing theme components, see the Beginner’s Guide to Discourse Themes.

Notes

  • Users can still navigate to Categories manually — their choice is respected for the session
  • The 768px breakpoint can be adjusted in the JS file if needed
  • Session choice resets when the browser is closed, so new visits always start on Latest

Questions, feedback, and PRs welcome!

2

Hello, in order to post in Customization > Theme component you must be a part of the Theme authors - Discourse Meta group. There is a topic template that should be followed so once approved please post this again.