MediaWiki:Common.js - Revision history

Magent: Letter variant: title above, kicker below (swap) (via update-page on MediaWiki MCP Server)

2026-04-29T04:01:52Z

Letter variant: title above, kicker below (swap) (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 04:01, 29 April 2026
Line 348:		Line 348:
	* OUTSIDE all wiki wrappers — does not push content down)		* OUTSIDE all wiki wrappers — does not push content down)
	* - non-sticky topbar (just nav) at top of body		* - non-sticky topbar (just nav) at top of body
	* - hero block with kicker, ~~title,~~ optional dek + meta		* - hero block with title (top), then USER:Username kicker below,
			* optional dek + meta
	* - light/dark mode toggle (persisted in localStorage)		* - light/dark mode toggle (persisted in localStorage)
	*		*
Line 450:		Line 451:
	'</div>';		'</div>';
	} else {		} else {
			// Letter variant: title first, then kicker, then optional dek/meta.
	hero.innerHTML =		hero.innerHTML =
			'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +
	'<div class="pp-kicker">' + kickerHtml + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
	~~'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +~~
	(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +		(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +
	(lastMod ? '<div class="pp-meta">Last edited ' + escapeHtml(lastMod) + '</div>' : '');		(lastMod ? '<div class="pp-meta">Last edited ' + escapeHtml(lastMod) + '</div>' : '');

Magent: Logo as separate body-level element, absolute-positioned upper-left; topbar keeps only nav (via update-page on MediaWiki MCP Server)

2026-04-29T03:47:34Z

Logo as separate body-level element, absolute-positioned upper-left; topbar keeps only nav (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:47, 29 April 2026
Line 342:		Line 342:

	/* ============================================================		/* ============================================================
	* Pickipedia — User-subpage zine/Substack styling ~~(Justin's design)~~		* Pickipedia — User-subpage zine/Substack styling
	*		*
	* Layout:		* Layout:
	* - non-sticky topbar at top of body ~~(logo upper-left, nav upper-right)~~		* - corner logo (absolute-positioned upper-left of viewport,
	* - hero block with kicker, title, dek~~, optional last-edited line~~		* OUTSIDE all wiki wrappers — does not push content down)
			* - non-sticky topbar (just nav) at top of body
			* - hero block with kicker, title, optional dek + meta
	* - light/dark mode toggle (persisted in localStorage)		* - light/dark mode toggle (persisted in localStorage)
	*		*
Line 391:		Line 393:
	if (saved === 'dark') body.classList.add('pickipedia-dark');		if (saved === 'dark') body.classList.add('pickipedia-dark');

	~~// Pre-generated thumb of the transparent logo. 400px exists; 300 was a 404.~~		var LOGO_URL = '/images/thumb/8/80/Pickipedia-quarter-transparent.png/400px-Pickipedia-quarter-transparent.png';
	var ~~LOGO_TOPBAR~~ = '/images/thumb/8/80/Pickipedia-quarter-transparent.png/400px-Pickipedia-quarter-transparent.png';

	// ---------- ~~Topbar~~ (logo + ~~nav) — sits at the top of the~~ body, ~~outside~~		// ---------- Corner logo: stand-alone body child, absolute-positioned. ----------
	// mw-~~content~~-~~text. Non~~-~~sticky, so it scrolls away with the page.~~		var cornerLogo = document.createElement('a');
			cornerLogo.className = 'pp-corner-logo';
			cornerLogo.href = '/wiki/Main_Page';
			cornerLogo.title = 'PickiPedia home';
			cornerLogo.innerHTML = '<img src="' + LOGO_URL + '" alt="PickiPedia">';
			document.body.insertBefore(cornerLogo, document.body.firstChild);

			// ---------- Topbar (nav only) ----------
	var topbar = document.createElement('header');		var topbar = document.createElement('header');
	topbar.className = 'pickipedia-topbar';		topbar.className = 'pickipedia-topbar';
	topbar.innerHTML =		topbar.innerHTML =
	~~'<a class="pickipedia-topbar-logo" href="/wiki/Main_Page" title="PickiPedia home">' +~~
	~~'<img src="' + LOGO_TOPBAR + '" alt="PickiPedia">' +~~
	~~'</a>' +~~
	'<nav class="pickipedia-topbar-nav">' +		'<nav class="pickipedia-topbar-nav">' +
	'<a href="' + mw.util.getUrl(pageName, { action: 'edit' }) + '">edit</a>' +		'<a href="' + mw.util.getUrl(pageName, { action: 'edit' }) + '">edit</a>' +
Line 407:		Line 412:
	'<a href="' + mw.util.getUrl('Talk:' + pageName) + '">talk</a>' +		'<a href="' + mw.util.getUrl('Talk:' + pageName) + '">talk</a>' +
	'</nav>';		'</nav>';
	document.body.insertBefore(topbar, ~~document~~.~~body.firstChild~~);		document.body.insertBefore(topbar, cornerLogo.nextSibling);

	// ---------- Hero ----------		// ---------- Hero ----------
Line 472:		Line 477:
	.replace(/>/g, '>')		.replace(/>/g, '>')
	.replace(/"/g, '"');		.replace(/"/g, '"');
	}		}
	}());		}());

Magent: Drop in-hero masthead logo; topbar logo is the only logo now (sits above mw-content-text) (via update-page on MediaWiki MCP Server)

2026-04-29T03:41:53Z

Drop in-hero masthead logo; topbar logo is the only logo now (sits above mw-content-text) (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:41, 29 April 2026
Line 343:		Line 343:
	/* ============================================================		/* ============================================================
	* Pickipedia — User-subpage zine/Substack styling (Justin's design)		* Pickipedia — User-subpage zine/Substack styling (Justin's design)
			*
			* Layout:
			* - non-sticky topbar at top of body (logo upper-left, nav upper-right)
			* - hero block with kicker, title, dek, optional last-edited line
			* - light/dark mode toggle (persisted in localStorage)
			*
			* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`
			* or category membership; default letter.
	* ============================================================ */		* ============================================================ */

Line 383:		Line 391:
	if (saved === 'dark') body.classList.add('pickipedia-dark');		if (saved === 'dark') body.classList.add('pickipedia-dark');

	// Pre-generated thumb ~~sizes for~~ the transparent logo. ~~The 300px thumb~~		// Pre-generated thumb of the transparent logo. 400px exists; 300 was a 404.
	~~// 404s (never been requested),~~ 400px exists~~. Use 400px for masthead~~		var LOGO_TOPBAR = '/images/thumb/8/80/Pickipedia-quarter-transparent.png/400px-Pickipedia-quarter-transparent.png';
	~~// (renders sharper at the 200px display size on retina) and 120px for~~
	~~// the topbar~~.
	var LOGO_TOPBAR ~~= '/images/thumb/8/80/Pickipedia-quarter-transparent.png/120px-Pickipedia-quarter-transparent.png';~~
	~~var LOGO_MASTHEAD~~ = '/images/thumb/8/80/Pickipedia-quarter-transparent.png/400px-Pickipedia-quarter-transparent.png';

	// ---------- Topbar (~~compact~~ logo + nav) ---~~-------~~		// ---------- Topbar (logo + nav) — sits at the top of the body, outside
			// mw-content-text. Non-sticky, so it scrolls away with the page.
	var topbar = document.createElement('header');		var topbar = document.createElement('header');
	topbar.className = 'pickipedia-topbar';		topbar.className = 'pickipedia-topbar';
Line 427:		Line 432:
	var hero = document.createElement('header');		var hero = document.createElement('header');
	hero.className = 'pickipedia-hero';		hero.className = 'pickipedia-hero';

	~~var mastheadLogoHtml =~~
	~~'<a class="pp-masthead-logo" href="/wiki/Main_Page" title="PickiPedia home">' +~~
	~~'<img src="' + LOGO_MASTHEAD + '" alt="PickiPedia">' +~~
	~~'</a>';~~

	if (variant === 'masthead') {		if (variant === 'masthead') {
	hero.innerHTML = ~~mastheadLogoHtml +~~		hero.innerHTML =
	'<div class="pp-topbar">' +		'<div class="pp-topbar">' +
	'<div class="pp-kicker">' + kickerHtml + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
Line 445:		Line 445:
	'</div>';		'</div>';
	} else {		} else {
	hero.innerHTML = ~~mastheadLogoHtml +~~		hero.innerHTML =
	'<div class="pp-kicker">' + kickerHtml + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
	'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +		'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +

Magent: Fix masthead logo URL: 300px thumb was 404; use 400px which exists (via update-page on MediaWiki MCP Server)

2026-04-29T03:18:13Z

Fix masthead logo URL: 300px thumb was 404; use 400px which exists (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:18, 29 April 2026
Line 343:		Line 343:
	/* ============================================================		/* ============================================================
	* Pickipedia — User-subpage zine/Substack styling (Justin's design)		* Pickipedia — User-subpage zine/Substack styling (Justin's design)
	* Adds:
	* - non-sticky topbar with compact PickiPedia logo + edit/history/talk
	* - hero block with floating BIG masthead logo (left), kicker, title
	* (transparent PNG, hangs to the left of the headline on wide
	* viewports; CSS hides the masthead version and shows the topbar
	* version below ~720px)
	* - light/dark mode toggle (persisted in localStorage)
	*
	* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`
	* or category membership; default letter.
	* ============================================================ */		* ============================================================ */

Line 360:		Line 350:
	if (typeof mw === 'undefined' \|\| !mw.config) return;		if (typeof mw === 'undefined' \|\| !mw.config) return;

	var nsNumber = mw.config.get('wgNamespaceNumber'); ~~// 2 = User~~		var nsNumber = mw.config.get('wgNamespaceNumber');
	var pageName = mw.config.get('wgPageName') \|\| '';		var pageName = mw.config.get('wgPageName') \|\| '';
	var title = mw.config.get('wgTitle') \|\| '';		var title = mw.config.get('wgTitle') \|\| '';
Line 388:		Line 378:
	body.classList.add('pickipedia-variant-' + variant);		body.classList.add('pickipedia-variant-' + variant);

	~~// Persisted light/dark mode~~
	var STORAGE_KEY = 'pickipedia-mode';		var STORAGE_KEY = 'pickipedia-mode';
	var saved = null;		var saved = null;
	try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}		try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
	if (saved === 'dark') body.classList.add('pickipedia-dark');		if (saved === 'dark') body.classList.add('pickipedia-dark');

			// Pre-generated thumb sizes for the transparent logo. The 300px thumb
			// 404s (never been requested), 400px exists. Use 400px for masthead
			// (renders sharper at the 200px display size on retina) and 120px for
			// the topbar.
			var LOGO_TOPBAR = '/images/thumb/8/80/Pickipedia-quarter-transparent.png/120px-Pickipedia-quarter-transparent.png';
			var LOGO_MASTHEAD = '/images/thumb/8/80/Pickipedia-quarter-transparent.png/400px-Pickipedia-quarter-transparent.png';

	// ---------- Topbar (compact logo + nav) ----------		// ---------- Topbar (compact logo + nav) ----------
	~~// CSS hides the topbar logo on wide viewports — the masthead one in~~
	~~// the hero takes over. On narrow viewports the topbar logo shows.~~
	var topbar = document.createElement('header');		var topbar = document.createElement('header');
	topbar.className = 'pickipedia-topbar';		topbar.className = 'pickipedia-topbar';
	topbar.innerHTML =		topbar.innerHTML =
	'<a class="pickipedia-topbar-logo" href="/wiki/Main_Page" title="PickiPedia home">' +		'<a class="pickipedia-topbar-logo" href="/wiki/Main_Page" title="PickiPedia home">' +
	'<img src="~~/images/thumb/8/80/Pickipedia-quarter-transparent.png/120px-Pickipedia-quarter-transparent.png~~" alt="PickiPedia">' +		'<img src="' + LOGO_TOPBAR + '" alt="PickiPedia">' +
	'</a>' +		'</a>' +
	'<nav class="pickipedia-topbar-nav">' +		'<nav class="pickipedia-topbar-nav">' +
Line 434:		Line 428:
	hero.className = 'pickipedia-hero';		hero.className = 'pickipedia-hero';

	~~// Big masthead logo (transparent PNG) — floats left in the hero.~~
	~~// Hidden by CSS on narrow viewports.~~
	var mastheadLogoHtml =		var mastheadLogoHtml =
	'<a class="pp-masthead-logo" href="/wiki/Main_Page" title="PickiPedia home">' +		'<a class="pp-masthead-logo" href="/wiki/Main_Page" title="PickiPedia home">' +
	'<img src="~~/images/thumb/8/80/Pickipedia-quarter-transparent.png/300px-Pickipedia-quarter-transparent.png~~" alt="PickiPedia">' +		'<img src="' + LOGO_MASTHEAD + '" alt="PickiPedia">' +
	'</a>';		'</a>';

Magent: Inject big floating masthead logo (transparent) inside hero; topbar small logo + nav stay for narrow screens (via update-page on MediaWiki MCP Server)

2026-04-29T03:09:16Z

Inject big floating masthead logo (transparent) inside hero; topbar small logo + nav stay for narrow screens (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 03:09, 29 April 2026
Line 344:		Line 344:
	* Pickipedia — User-subpage zine/Substack styling (Justin's design)		* Pickipedia — User-subpage zine/Substack styling (Justin's design)
	* Adds:		* Adds:
	* - sticky topbar with PickiPedia logo + edit/history/talk		* - non-sticky topbar with compact PickiPedia logo + edit/history/talk
	* - hero block (kicker, title, ~~dek, optional last-edited line~~)		* - hero block with floating BIG masthead logo (left), kicker, title
			* (transparent PNG, hangs to the left of the headline on wide
			* viewports; CSS hides the masthead version and shows the topbar
			* version below ~720px)
	* - light/dark mode toggle (persisted in localStorage)		* - light/dark mode toggle (persisted in localStorage)
	*
	* The kicker (USER:Name) is the only attribution element — the
	* avatar + repeated name beneath the title was redundant noise.
	*		*
	* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`		* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`
Line 394:		Line 394:
	if (saved === 'dark') body.classList.add('pickipedia-dark');		if (saved === 'dark') body.classList.add('pickipedia-dark');

	// ---------- Topbar (logo + nav) ----------		// ---------- Topbar (compact logo + nav) ----------
			// CSS hides the topbar logo on wide viewports — the masthead one in
			// the hero takes over. On narrow viewports the topbar logo shows.
	var topbar = document.createElement('header');		var topbar = document.createElement('header');
	topbar.className = 'pickipedia-topbar';		topbar.className = 'pickipedia-topbar';
	topbar.innerHTML =		topbar.innerHTML =
	'<a class="pickipedia-topbar-logo" href="/wiki/Main_Page" title="PickiPedia home">' +		'<a class="pickipedia-topbar-logo" href="/wiki/Main_Page" title="PickiPedia home">' +
	'<img src="/images/thumb/6/61/Pickipedia-quarter.png/120px-Pickipedia-quarter.png" alt="PickiPedia">' +		'<img src="/images/thumb/8/80/Pickipedia-quarter-transparent.png/120px-Pickipedia-quarter-transparent.png" alt="PickiPedia">' +
	'</a>' +		'</a>' +
	'<nav class="pickipedia-topbar-nav">' +		'<nav class="pickipedia-topbar-nav">' +
Line 417:		Line 419:
	}		}

	~~// Kicker links to the user's profile page so it's clickable~~
	~~// attribution as well as visual orientation.~~
	var kickerHtml = '<a href="' + mw.util.getUrl('User:' + username.replace(/ /g, '_')) +		var kickerHtml = '<a href="' + mw.util.getUrl('User:' + username.replace(/ /g, '_')) +
	'">User:' + escapeHtml(username) + '</a>';		'">User:' + escapeHtml(username) + '</a>';
Line 433:		Line 433:
	var hero = document.createElement('header');		var hero = document.createElement('header');
	hero.className = 'pickipedia-hero';		hero.className = 'pickipedia-hero';

			// Big masthead logo (transparent PNG) — floats left in the hero.
			// Hidden by CSS on narrow viewports.
			var mastheadLogoHtml =
			'<a class="pp-masthead-logo" href="/wiki/Main_Page" title="PickiPedia home">' +
			'<img src="/images/thumb/8/80/Pickipedia-quarter-transparent.png/300px-Pickipedia-quarter-transparent.png" alt="PickiPedia">' +
			'</a>';

	if (variant === 'masthead') {		if (variant === 'masthead') {
	hero.innerHTML =		hero.innerHTML = mastheadLogoHtml +
	'<div class="pp-topbar">' +		'<div class="pp-topbar">' +
	'<div class="pp-kicker">' + kickerHtml + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
Line 446:		Line 453:
	'</div>';		'</div>';
	} else {		} else {
	hero.innerHTML =		hero.innerHTML = mastheadLogoHtml +
	'<div class="pp-kicker">' + kickerHtml + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
	'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +		'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +

Magent: Drop the byline (avatar+name) below title — kicker already carries User:Name; just keep date as small meta line (via update-page on MediaWiki MCP Server)

2026-04-29T02:24:58Z

Drop the byline (avatar+name) below title — kicker already carries User:Name; just keep date as small meta line (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 02:24, 29 April 2026
Line 345:		Line 345:
	* Adds:		* Adds:
	* - sticky topbar with PickiPedia logo + edit/history/talk		* - sticky topbar with PickiPedia logo + edit/history/talk
	* - hero block (kicker, title, dek, ~~byline~~) ~~before content~~		* - hero block (kicker, title, dek, optional last-edited line)
	* - light/dark mode toggle (persisted in localStorage)		* - light/dark mode toggle (persisted in localStorage)
			*
			* The kicker (USER:Name) is the only attribution element — the
			* avatar + repeated name beneath the title was redundant noise.
	*		*
	* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`		* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`
Line 366:		Line 369:
	if (title.indexOf('/') === -1) return;		if (title.indexOf('/') === -1) return;

	var slash = title.indexOf('/');		var slash = title.indexOf('/');
	var username = title.slice(0, slash).replace(/_/g, ' ');		var username = title.slice(0, slash).replace(/_/g, ' ');
	var subpage = title.slice(slash + 1).replace(/_/g, ' ');		var subpage = title.slice(slash + 1).replace(/_/g, ' ');
	~~var userInitials = username~~
	~~.split(/\s+/)~~
	~~.map(function (w) { return w.charAt(0); })~~
	~~.join('')~~
	~~.slice(0, 2)~~
	~~.toUpperCase() \|\| username.slice(0, 2).toUpperCase(~~);

	var body = document.body;		var body = document.body;
Line 396:		Line 393:
	try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}		try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
	if (saved === 'dark') body.classList.add('pickipedia-dark');		if (saved === 'dark') body.classList.add('pickipedia-dark');

	~~var encodedUser = encodeURIComponent(username.replace(/ /g, '_'));~~

	// ---------- Topbar (logo + nav) ----------		// ---------- Topbar (logo + nav) ----------
Line 422:		Line 417:
	}		}

	var ~~kicker~~ = 'User:' + username;		// Kicker links to the user's profile page so it's clickable
			// attribution as well as visual orientation.
			var kickerHtml = '<a href="' + mw.util.getUrl('User:' + username.replace(/ /g, '_')) +
			'">User:' + escapeHtml(username) + '</a>';
	var kickerEl = content.querySelector('.pp-kicker-source');		var kickerEl = content.querySelector('.pp-kicker-source');
	if (kickerEl) {		if (kickerEl) {
	~~kicker~~ = kickerEl.textContent.trim();		kickerHtml = escapeHtml(kickerEl.textContent.trim());
	kickerEl.remove();		kickerEl.remove();
	}		}
Line 435:		Line 433:
	var hero = document.createElement('header');		var hero = document.createElement('header');
	hero.className = 'pickipedia-hero';		hero.className = 'pickipedia-hero';
	~~var titleText = subpage;~~

	if (variant === 'masthead') {		if (variant === 'masthead') {
	hero.innerHTML =		hero.innerHTML =
	'<div class="pp-topbar">' +		'<div class="pp-topbar">' +
	'<div class="pp-kicker">' + ~~escapeHtml(kicker)~~ + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
	'<div class="pp-topbar-rule"></div>' +		'<div class="pp-topbar-rule"></div>' +
	(lastMod ? '<div class="pp-topbar-vol">' + escapeHtml(lastMod) + '</div>' : '') +		(lastMod ? '<div class="pp-topbar-vol">' + escapeHtml(lastMod) + '</div>' : '') +
	'</div>' +		'</div>' +
	'<div class="pp-titlewrap">' +		'<div class="pp-titlewrap">' +
	'<h1 class="pp-title">' + escapeHtml(~~titleText~~) + '</h1>' +		'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +
	(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +		(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +
	~~'</div>' +~~
	~~'<div class="pp-byline">' +~~
	~~'<a class="pp-avatar" href="/wiki/User:' + encodedUser + '">' + escapeHtml(userInitials) + '</a>' +~~
	~~'<a class="pp-byline-name" href="/wiki/User:' + encodedUser + '">' + escapeHtml(username) + '</a>' +~~
	~~'<div class="pp-byline-meta">' + escapeHtml(lastMod \|\| '') + '</div>' +~~
	'</div>';		'</div>';
	} else {		} else {
	hero.innerHTML =		hero.innerHTML =
	'<div class="pp-kicker">' + ~~escapeHtml(kicker)~~ + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
	'<h1 class="pp-title">' + escapeHtml(~~titleText~~) + '</h1>' +		'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +
	(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +		(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +
	~~'<div class="pp-byline">' +~~		(lastMod ? '<div class="pp-meta">Last edited ' + escapeHtml(lastMod) + '</div>' : '');
	~~'<a class="pp-avatar" href="/wiki/User:' + encodedUser + '">' + escapeHtml~~(~~userInitials) + '</a>' +~~
	~~'<div>' +~~
	~~'<a class="pp-byline-name" href="/wiki/User:' + encodedUser + '">' + escapeHtml(username) + '</a>' +~~
	'<div class="pp~~-byline~~-meta">' + escapeHtml(lastMod ~~\|\| ''~~) + '</div>' +
	'~~</div>' +~~
	~~'</div>~~';
	}		}
	content.parentNode.insertBefore(hero, content);		content.parentNode.insertBefore(hero, content);

Magent: Drop colophon (was duplicating User:JMyles / subpage that's already in topbar+kicker) (via update-page on MediaWiki MCP Server)

2026-04-29T02:21:58Z

Drop colophon (was duplicating User:JMyles / subpage that's already in topbar+kicker) (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 02:21, 29 April 2026
Line 346:		Line 346:
	* - sticky topbar with PickiPedia logo + edit/history/talk		* - sticky topbar with PickiPedia logo + edit/history/talk
	* - hero block (kicker, title, dek, byline) before content		* - hero block (kicker, title, dek, byline) before content
	* - colophon at end
	* - light/dark mode toggle (persisted in localStorage)		* - light/dark mode toggle (persisted in localStorage)
	*		*
Line 468:		Line 467:
	}		}
	content.parentNode.insertBefore(hero, content);		content.parentNode.insertBefore(hero, content);

	~~var colophon = document.createElement('div');~~
	~~colophon.className = 'pickipedia-colophon';~~
	~~colophon.innerHTML =~~
	~~'<span>' + escapeHtml('User:' + username + ' / ' + subpage) + '</span>' +~~
	~~'<span>' + escapeHtml(lastMod ? 'Last edited ' + lastMod : '') + '</span>';~~
	~~content.parentNode.insertBefore(colophon, content.nextSibling);~~
	}		}

Magent: Post style: replace floating corner with proper sticky topbar (logo + nav) (via update-page on MediaWiki MCP Server)

2026-04-29T02:05:06Z

Post style: replace floating corner with proper sticky topbar (logo + nav) (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 02:05, 29 April 2026
Line 343:		Line 343:
	/* ============================================================		/* ============================================================
	* Pickipedia — User-subpage zine/Substack styling (Justin's design)		* Pickipedia — User-subpage zine/Substack styling (Justin's design)
	*		* Adds:
	* Activates on User:~~<username>/<subpagename> ONLY (not the~~		* - sticky topbar with PickiPedia logo + edit/history/talk
	* ~~User: root page). Adds the body class .pickipedia~~-~~userpost~~		* - hero block (kicker, title, dek, byline) before content
	* and injects:		* - colophon at end
	* - hero block (kicker, title, dek, byline)
	* - tucked edit/history/talk corner
	* - colophon
	* - light/dark mode toggle (persisted in localStorage)		* - light/dark mode toggle (persisted in localStorage)
	*		*
	* Variant ~~is read~~ from an HTML comment marker ~~in the wikitext,~~		* Variant from HTML comment marker `pickipedia:variant=letter\|masthead`
	* or ~~from~~ category membership ~~("Masthead style" / "Letter style").~~		* or category membership; default letter.
	* Defaults to "letter".
	* ============================================================ */		* ============================================================ */

Line 363:		Line 359:

	var nsNumber = mw.config.get('wgNamespaceNumber'); // 2 = User		var nsNumber = mw.config.get('wgNamespaceNumber'); // 2 = User
	var pageName = mw.config.get('wgPageName') \|\| ''; ~~// e.g. "User:Mira_R/Newsstands"~~		var pageName = mw.config.get('wgPageName') \|\| '';
	var title = mw.config.get('wgTitle') \|\| ''; ~~// e.g. "Mira_R/Newsstands"~~		var title = mw.config.get('wgTitle') \|\| '';
	var action = mw.config.get('wgAction') \|\| 'view';		var action = mw.config.get('wgAction') \|\| 'view';

Line 394:		Line 390:
	if (cats.indexOf('Masthead style') !== -1) variant = 'masthead';		if (cats.indexOf('Masthead style') !== -1) variant = 'masthead';
	if (cats.indexOf('Letter style') !== -1) variant = 'letter';		if (cats.indexOf('Letter style') !== -1) variant = 'letter';

	body.classList.add('pickipedia-variant-' + variant);		body.classList.add('pickipedia-variant-' + variant);

			// Persisted light/dark mode
	var STORAGE_KEY = 'pickipedia-mode';		var STORAGE_KEY = 'pickipedia-mode';
	var saved = null;		var saved = null;
Line 402:		Line 398:
	if (saved === 'dark') body.classList.add('pickipedia-dark');		if (saved === 'dark') body.classList.add('pickipedia-dark');

			var encodedUser = encodeURIComponent(username.replace(/ /g, '_'));

			// ---------- Topbar (logo + nav) ----------
			var topbar = document.createElement('header');
			topbar.className = 'pickipedia-topbar';
			topbar.innerHTML =
			'<a class="pickipedia-topbar-logo" href="/wiki/Main_Page" title="PickiPedia home">' +
			'<img src="/images/thumb/6/61/Pickipedia-quarter.png/120px-Pickipedia-quarter.png" alt="PickiPedia">' +
			'</a>' +
			'<nav class="pickipedia-topbar-nav">' +
			'<a href="' + mw.util.getUrl(pageName, { action: 'edit' }) + '">edit</a>' +
			'<a href="' + mw.util.getUrl(pageName, { action: 'history' }) + '">history</a>' +
			'<a href="' + mw.util.getUrl('Talk:' + pageName) + '">talk</a>' +
			'</nav>';
			document.body.insertBefore(topbar, document.body.firstChild);

			// ---------- Hero ----------
	if (content) {		if (content) {
	var dek = '';		var dek = '';
Line 423:		Line 436:
	var hero = document.createElement('header');		var hero = document.createElement('header');
	hero.className = 'pickipedia-hero';		hero.className = 'pickipedia-hero';

	var titleText = subpage;		var titleText = subpage;

Line 438:		Line 450:
	'</div>' +		'</div>' +
	'<div class="pp-byline">' +		'<div class="pp-byline">' +
	'<a class="pp-avatar" href="/wiki/User:' + ~~encodeURIComponent(username.replace(/ /g, '_'))~~ + '">' + escapeHtml(userInitials) + '</a>' +		'<a class="pp-avatar" href="/wiki/User:' + encodedUser + '">' + escapeHtml(userInitials) + '</a>' +
	'<a class="pp-byline-name" href="/wiki/User:' + ~~encodeURIComponent(username.replace(/ /g, '_'))~~ + '">' + escapeHtml(username) + '</a>' +		'<a class="pp-byline-name" href="/wiki/User:' + encodedUser + '">' + escapeHtml(username) + '</a>' +
	'<div class="pp-byline-meta">' + escapeHtml(lastMod \|\| '') + '</div>' +		'<div class="pp-byline-meta">' + escapeHtml(lastMod \|\| '') + '</div>' +
	'</div>';		'</div>';
Line 448:		Line 460:
	(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +		(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +
	'<div class="pp-byline">' +		'<div class="pp-byline">' +
	'<a class="pp-avatar" href="/wiki/User:' + ~~encodeURIComponent(username.replace(/ /g, '_'))~~ + '">' + escapeHtml(userInitials) + '</a>' +		'<a class="pp-avatar" href="/wiki/User:' + encodedUser + '">' + escapeHtml(userInitials) + '</a>' +
	'<div>' +		'<div>' +
	'<a class="pp-byline-name" href="/wiki/User:' + ~~encodeURIComponent(username.replace(/ /g, '_'))~~ + '">' + escapeHtml(username) + '</a>' +		'<a class="pp-byline-name" href="/wiki/User:' + encodedUser + '">' + escapeHtml(username) + '</a>' +
	'<div class="pp-byline-meta">' + escapeHtml(lastMod \|\| '') + '</div>' +		'<div class="pp-byline-meta">' + escapeHtml(lastMod \|\| '') + '</div>' +
	'</div>' +		'</div>' +
	'</div>';		'</div>';
	}		}

	content.parentNode.insertBefore(hero, content);		content.parentNode.insertBefore(hero, content);

Line 466:		Line 477:
	}		}

	~~var corner = document.createElement('nav');~~		// ---------- Light/dark toggle ----------
	~~corner.className = 'pickipedia-corner';~~
	~~corner.innerHTML =~~
	~~'<a href="' + mw.util.getUrl(pageName, { action: 'edit' }) + '">edit<~~/~~a>' +~~
	~~'<a href="' + mw.util.getUrl(pageName, { action: 'history' }) + '">history<~~/~~a>' +~~
	~~'<a href="' + mw.util.getUrl('Talk:' + pageName) + '">talk<~~/~~a>';~~
	~~document.body.appendChild(corner);~~

	var toggle = document.createElement('button');		var toggle = document.createElement('button');
	toggle.className = 'pickipedia-mode';		toggle.className = 'pickipedia-mode';

Magent: Post style: replace v2 IIFE with Justin's zine/Substack design (hero, variants, corner, dark mode) (via update-page on MediaWiki MCP Server)

2026-04-29T01:57:04Z

Post style: replace v2 IIFE with Justin's zine/Substack design (hero, variants, corner, dark mode) (via update-page on MediaWiki MCP Server)

Show changes

Magent: Post style v2: rewrite H1 to just post name, inject byline element (via update-page on MediaWiki MCP Server)

2026-04-29T00:56:32Z

Post style v2: rewrite H1 to just post name, inject byline element (via update-page on MediaWiki MCP Server)

@@ Line 340: / Line 340: @@
      });
 })();
 /**
   * Post style — auto-tag User:<name>/<subpage> pages with body.pickipedia-post
-  * so Common.css can render them in a personal-blog reading layout instead of
+  * so Common.css can render them in a personal-blog reading layout. Also
-  * the default monobook chrome.
+  * rewrites the H1 to just the post name (drops "User:JMyles/" prefix) and
   */
 (function() {
@@ Line 355: / Line 351: @@
      if (mw.config.get('wgNamespaceNumber') !== 2) return;
      var pageName = mw.config.get('wgPageName') || '';
-     if (pageName.indexOf('/') === -1) return;
+     var slash = pageName.indexOf('/');
      document.body.classList.add('pickipedia-post');
 })();