Read Wikipedia like you mean it.
// ==UserScript==
// @name Wikipedia Reading Mode
// @namespace https://santus.dev/
// @description Read Wikipedia like you mean it.
// @author Krisantus Wanandi (https://github.com/krisantuswanandi)
// @match *://*.wikipedia.org/**
// @icon https://www.google.com/s2/favicons?sz=64&domain=wikipedia.org
// @run-at document-body
// @license MIT
// @supportURL https://github.com/krisantuswanandi/wikipedia-reading-mode
// @version 0.0.1-alpha.3
// ==/UserScript==
(function () {
"use strict";
// src/style.ts
function injectStyle() {
const style = document.createElement("style");
style.innerHTML = `
body.wrm-enabled {
#mw-page-base,
#my-page-base,
#mw-navigation,
#footer,
#toc,
.infobox,
.mw-indicators,
#siteSub
{
display: none;
}
#content {
font-family: serif;
margin-left: 0;
}
#content .vector-body {
font-size: 16px;
}
}
#wrm-toolbar {
align-items: center;
background-color: #fff;
border-radius: 100px;
border: 1px solid #ddd;
bottom: 8px;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
display: flex;
gap: 4px;
justify-content: center;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
padding: 4px;
position: fixed;
z-index: 1000;
}
.wrm-toolbar-button {
background-color: transparent;
border: none;
border-radius: 100px;
color: #fff;
cursor: pointer;
font-size: 16px;
width: 40px;
height: 40px;
padding: 8px;
svg {
width: 100%;
height: 100%;
color: #000;
}
}
.wrm-toolbar-button:hover {
background-color: #f0f0f0;
}
.wrm-toolbar-popup {
position: fixed;
bottom: 64px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 12px;
border: 1px solid #ddd;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
padding: 16px;
width: 200px;
z-index: 1000;
}
.wrm-toolbar-popup.hidden {
display: none;
}
.wrm-toolbar-popup.coming-soon:before {
display: flex;
height: 100px;
justify-content: center;
align-items: center;
color: #bbb;
font-style: italic;
content: "Coming soon";
}
.wrm-settings-item {
display: flex;
justify-content: space-between;
}
`;
document.head.appendChild(style);
}
// src/utils.ts
function useVectorSkin() {
const SKIN_KEY = "useskin";
const SKIN_VAL = "vector";
const search = new URLSearchParams(window.location.search);
const skin = search.get(SKIN_KEY);
const isVectorSkin = skin === SKIN_VAL;
if (!isVectorSkin) {
const newurl = new URL(window.location.href);
newurl.searchParams.set(SKIN_KEY, SKIN_VAL);
window.location.href = newurl.toString();
}
return isVectorSkin;
}
// src/icons/font.ts
var font_default = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 14h-5m0 2v-3.5a2.5 2.5 0 0 1 5 0V16M4.5 13h6M3 16l4.5-9l4.5 9"/></svg>`;
// src/toolbar/display.ts
var toolbarPopup = document.createElement("div");
toolbarPopup.classList.add("wrm-toolbar-popup");
toolbarPopup.classList.add("coming-soon");
toolbarPopup.classList.add("hidden");
document.body.appendChild(toolbarPopup);
var menu = document.createElement("button");
menu.innerHTML = font_default;
menu.classList.add("wrm-toolbar-button");
menu.addEventListener("click", () => {
const popups = document.querySelectorAll(".wrm-toolbar-popup");
popups.forEach((popup) => {
if (popup !== toolbarPopup) {
popup.classList.add("hidden");
}
});
toolbarPopup.classList.toggle("hidden");
});
var display_default = menu;
// src/icons/list.ts
var list_default = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>`;
// src/toolbar/contents.ts
var toolbarPopup2 = document.createElement("div");
toolbarPopup2.classList.add("wrm-toolbar-popup");
toolbarPopup2.classList.add("coming-soon");
toolbarPopup2.classList.add("hidden");
document.body.appendChild(toolbarPopup2);
var menu2 = document.createElement("button");
menu2.innerHTML = list_default;
menu2.classList.add("wrm-toolbar-button");
menu2.addEventListener("click", () => {
const popups = document.querySelectorAll(".wrm-toolbar-popup");
popups.forEach((popup) => {
if (popup !== toolbarPopup2) {
popup.classList.add("hidden");
}
});
toolbarPopup2.classList.toggle("hidden");
});
var contents_default = menu2;
// src/icons/ellipsis.ts
var ellipsis_default = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></g></svg>`;
// src/toolbar/settings.ts
var enableButton = document.createElement("input");
enableButton.type = "checkbox";
enableButton.checked = true;
enableButton.addEventListener("change", (event) => {
const target = event.target;
if (target && target.checked) {
document.body.classList.add("wrm-enabled");
} else {
document.body.classList.remove("wrm-enabled");
}
});
window.addEventListener("keydown", (event) => {
if (event.key.toLowerCase() === "x") {
enableButton.checked = !enableButton.checked;
enableButton.dispatchEvent(new Event("change"));
}
});
var enableTitle = document.createElement("div");
enableTitle.innerHTML = "Enabled (x)";
var settingsItem = document.createElement("div");
settingsItem.classList.add("wrm-settings-item");
settingsItem.appendChild(enableTitle);
settingsItem.appendChild(enableButton);
var toolbarPopup3 = document.createElement("div");
toolbarPopup3.classList.add("wrm-toolbar-popup");
toolbarPopup3.classList.add("hidden");
toolbarPopup3.appendChild(settingsItem);
document.body.appendChild(toolbarPopup3);
var menu3 = document.createElement("button");
menu3.innerHTML = ellipsis_default;
menu3.classList.add("wrm-toolbar-button");
menu3.addEventListener("click", () => {
const popups = document.querySelectorAll(".wrm-toolbar-popup");
popups.forEach((popup) => {
if (popup !== toolbarPopup3) {
popup.classList.add("hidden");
}
});
toolbarPopup3.classList.toggle("hidden");
});
var settings_default = menu3;
// src/toolbar/index.ts
function addToolbar() {
const toolbar = document.createElement("div");
toolbar.id = "wrm-toolbar";
toolbar.appendChild(display_default);
toolbar.appendChild(contents_default);
toolbar.appendChild(settings_default);
document.body.appendChild(toolbar);
}
// src/index.ts
var init = function() {
if (!useVectorSkin())
return;
injectStyle();
addToolbar();
document.body.classList.add("wrm-enabled");
};
init();
})();