Hide the newly introduced homepage widgets

Question

See the updates in the answer below; also check out the commit history for additional changes.

About

The new widgets can clutter the homepage for those of us who are not interested in them.

I created a simple script that hides the widgets. Although I could not find a good way to restore it to its original look, I think this is much better (Thanks to @VLAZ for their help).

I am looking forward to any suggestions to make this better.

Installation (updated version based on my answer)

Click to install with a script manager. N.B. I have only tested this with Tampermonkey on Firefox.

Repository

Here is the source code for this userscript; source code repo

Answer 1

I modified canon's answer on the MSO post and made a little more functional script than what I have above:

• This hides the widgets...
• but keeps the watched tags widget, without removing any other elements such as blog posts (although the gear button to watch/ignore tags does not work).
• Replaces the welcome message with the "suggested posts...",
• without removing "Ask Question" button.

// ==UserScript==
// @name Hide Homepage Widgets
// @namespace https://github.com/MdoubleDash
// @version 2.2
// @description Removes the new widgets on Stack Overflow's homepage
// @author MDoubleDash (@M--), @canon
// @contributor @VLAZ
// @match https://stackoverflow.com/
// @downloadURL https://github.com/MdoubleDash/SOS_Userscripts/raw/main/Hide%20Homepage%20Widgets.user.js
// @updateURL https://github.com/MdoubleDash/SOS_Userscripts/raw/main/Hide%20Homepage%20Widgets.user.js
// @grant none
// ==/UserScript==

// (https://meta.stackoverflow.com/a/432018)
(function() {
  // get the widgets container and other elements
  const widgetsContainer = document.getElementById("widgets-container");
  if (!(widgetsContainer)) return;

  const blogWidget = document.querySelector('.s-sidebarwidget:has(a[href^="https://stackoverflow.blog/"]');
  const welcomeMessage = document.querySelector('.d-flex.g8');
  const postsMessage = document.querySelector('.d-flex.fd-column.mb16');

  // get the items in the widgets container
  const widgetsContainerItems = widgetsContainer.querySelectorAll(".s-card.grid--item");
  const tagWidget = widgetsContainerItems[2];

  // move the watched tag widget to the right sidebar
  blogWidget.before(tagWidget);
  widgetsContainer.remove();

  // remove the welcome message and modify the "interesting posts"
  $('.d-flex.fd-column.mb16').find(".fs-title.fw-bold").text("Suggested posts for you");
  postsMessage.remove();
  welcomeMessage.before(postsMessage);
  welcomeMessage.remove();

  // fix display by borrowing class salad from adjacent sidebar widget...
  tagWidget.className = "s-sidebarwidget s-anchors s-anchors__grayscale mb16 p16";
  const tagHeader = tagWidget.querySelector(".d-flex.fc-black-600.pt16.pl16.fs-body2.fw-bold");
  const tagContent = tagWidget.querySelector(".s-sidebarwidget--item.d-flex.px16");
  tagHeader.className = "d-flex fc-black-600 pt16 pl16 fs-body2 fw-bold";
  tagContent.className = "s-sidebarwidget--item d-flex px16";

})();