MediaWiki:Common.js - Revision history

JMyles at 18:55, 9 October 2026

2026-10-09T18:55:16Z

JMyles at 01:26, 15 September 2026

2026-09-15T01:26:30Z

← Older revision		Revision as of 01:26, 15 September 2026
Line 202:		Line 202:

	function loadHls() {		function loadHls() {
	if (typeof Hls~~ ~~!== 'undefined') {		if (typeof Hls !== 'undefined') {
	return Promise.resolve();		return Promise.resolve();
	}		}
Line 245:		Line 245:
	// rather than being ignored outright.		// rather than being ignored outright.
	video.currentTime = isFinite(video.duration)		video.currentTime = isFinite(video.duration)
	~~ ~~? Math.min(seconds, video.duration)		? Math.min(seconds, video.duration)
	~~ ~~: seconds;		: seconds;
	});		});
	}		}
Line 255:		Line 255:
	function timecodeFromHash() {		function timecodeFromHash() {
	var m = /[#&]t=([0-9:]+)/.exec(window.location.hash \|\| '');		var m = /[#&]t=([0-9:]+)/.exec(window.location.hash \|\| '');
	return m~~ ~~? parseTimecode(m[1])~~ ~~: 0;		return m ? parseTimecode(m[1]) : 0;
	}		}

Line 295:		Line 295:
	return window.MediaSource.isTypeSupported(type);		return window.MediaSource.isTypeSupported(type);
	}		}
	return document.createElement('video').canPlayType(type)~~ ~~!== '';		return document.createElement('video').canPlayType(type) !== '';
	} catch (e) {		} catch (e) {
	return false;		return false;
Line 387:		Line 387:
	fallbackToDirectVideo(container, cid, width, maxWidth, startSeconds);		fallbackToDirectVideo(container, cid, width, maxWidth, startSeconds);
	});		});
	} else if (typeof Hls~~ ~~!== 'undefined' && Hls.isSupported()) {		} else if (typeof Hls !== 'undefined' && Hls.isSupported()) {
	var hls = new Hls();		var hls = new Hls();
	hls.loadSource(hlsSrc);		hls.loadSource(hlsSrc);
Line 419:		Line 419:
	}		}

	if (typeof mw~~ ~~!== 'undefined' && mw.hook) {		if (typeof mw !== 'undefined' && mw.hook) {
	mw.hook('wikipage.content').add(function($content) {		mw.hook('wikipage.content').add(function($content) {
	initPlayers();		initPlayers();
Line 441:		Line 441:

	var nickVal = nickname.value.trim();		var nickVal = nickname.value.trim();
	var makeVal = make~~ ~~? make.value.trim()~~ ~~: '';		var makeVal = make ? make.value.trim() : '';
	var modelVal = model~~ ~~? model.value.trim()~~ ~~: '';		var modelVal = model ? model.value.trim() : '';
	var serialVal = serial~~ ~~? serial.value.trim()~~ ~~: '';		var serialVal = serial ? serial.value.trim() : '';

	var hasNickname = nickVal~~ ~~!== '';		var hasNickname = nickVal !== '';
	var hasMakerComplete = makeVal~~ ~~!== '' && modelVal~~ ~~!== '' && serialVal~~ ~~!== '';		var hasMakerComplete = makeVal !== '' && modelVal !== '' && serialVal !== '';

	if (!hasNickname && !hasMakerComplete) {		if (!hasNickname && !hasMakerComplete) {
	args.numErrors += 1;		args.numErrors += 1;
	if (makeVal~~ ~~!== '' \|\| modelVal~~ ~~!== '' \|\| serialVal~~ ~~!== '') {		if (makeVal !== '' \|\| modelVal !== '' \|\| serialVal !== '') {
	alert('Maker identification requires all three: make, model, and serial number. Or provide a nickname instead.');		alert('Maker identification requires all three: make, model, and serial number. Or provide a nickname instead.');
	} else {		} else {
Line 490:		Line 490:
	var action = mw.config.get('wgAction') \|\| 'view';		var action = mw.config.get('wgAction') \|\| 'view';

	if (nsNumber~~ ~~!== 2) return;		if (nsNumber !== 2) return;
	if (action~~ ~~!== 'view') return;		if (action !== 'view') return;
	if (title.indexOf('/') === -1) return;		if (title.indexOf('/') === -1) return;

Line 509:		Line 509:
	}		}
	var cats = mw.config.get('wgCategories') \|\| [];		var cats = mw.config.get('wgCategories') \|\| [];
	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);

Line 568:		Line 568:
	'<div class="pp-kicker">' + kickerHtml + '</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(subpage) + '</h1>' +		'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +
	(dek~~ ~~? '<p class="pp-dek">' + dek + '</p>'~~ ~~: '') +		(dek ? '<p class="pp-dek">' + dek + '</p>' : '') +
	'</div>';		'</div>';
	} else {		} else {
Line 579:		Line 579:
	'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +		'<h1 class="pp-title">' + escapeHtml(subpage) + '</h1>' +
	'<div class="pp-kicker">' + kickerHtml + '</div>' +		'<div class="pp-kicker">' + kickerHtml + '</div>' +
	(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>' : '');
	}		}
	content.parentNode.insertBefore(hero, content);		content.parentNode.insertBefore(hero, content);
Line 589:		Line 589:
	toggle.className = 'pickipedia-mode';		toggle.className = 'pickipedia-mode';
	toggle.type = 'button';		toggle.type = 'button';
	toggle.textContent = body.classList.contains('pickipedia-dark')~~ ~~? '☼ Light'~~ ~~: '☾ Dark';		toggle.textContent = body.classList.contains('pickipedia-dark') ? '☼ Light' : '☾ Dark';
	toggle.addEventListener('click', function () {		toggle.addEventListener('click', function () {
	var dark = body.classList.toggle('pickipedia-dark');		var dark = body.classList.toggle('pickipedia-dark');
	toggle.textContent = dark~~ ~~? '☼ Light'~~ ~~: '☾ Dark';		toggle.textContent = dark ? '☼ Light' : '☾ Dark';
	try { localStorage.setItem(STORAGE_KEY, dark~~ ~~? 'dark'~~ ~~: 'light'); } catch (e) {}		try { localStorage.setItem(STORAGE_KEY, dark ? 'dark' : 'light'); } catch (e) {}
	});		});
	document.body.appendChild(toggle);		document.body.appendChild(toggle);

	function escapeHtml(s) {		function escapeHtml(s) {
	return String(s == null~~ ~~? ''~~ ~~: s)		return String(s == null ? '' : s)
	.replace(/&/g, '&~~amp;~~amp;')		.replace(/&/g, '&')
	.replace(/</g, '&~~amp;~~lt;')		.replace(/</g, '<')
	.replace(/>/g, '&~~amp;~~gt;')		.replace(/>/g, '>')
	.replace(/"/g, '&~~amp;~~quot;');		.replace(/"/g, '"');
	}		}
	}());		}());
	~~</pre>~~

JMyles at 01:03, 15 September 2026

2026-09-15T01:03:27Z

Show changes

JMyles: Pursuant to magent's patch, working on video-as-source for whitepaper-ish utility

2026-08-17T04:55:34Z

Pursuant to magent's patch, working on video-as-source for whitepaper-ish utility

← Older revision		Revision as of 04:55, 17 August 2026
Line 215:		Line 215:
	});		});
	return hlsLoadPromise;		return hlsLoadPromise;
			}



			// Accepts raw seconds (872), "14:32", or "1:02:03". Anything unparseable
			// means "start at the beginning" rather than throwing — a typo in a
			// citation should still play the video.
			function parseTimecode(raw) {
			if (!raw) { return 0; }
			var parts = String(raw).trim().split(':');
			for (var i = 0; i < parts.length; i++) {
			if (parts[i] === '' \|\| isNaN(Number(parts[i]))) { return 0; }
			}
			return parts.reduce(function (acc, p) { return acc * 60 + Number(p); }, 0);
			}

			// Seek once the browser knows how long the video is.
			//
			// All three playback paths below — Safari's native HLS, hls.js, and the
			// direct-file fallback — end up attached to a real <video>, so hanging one
			// listener on the element covers every case. Seeking earlier than
			// loadedmetadata is unreliable: with hls.js the manifest may not be parsed
			// yet and the seek is silently dropped.
			function seekWhenReady(video, seconds) {
			if (!seconds) { return; }
			video.addEventListener('loadedmetadata', function onMeta() {
			video.removeEventListener('loadedmetadata', onMeta);
			// A citation pointing past the end should land on the last frame
			// rather than being ignored outright.
			video.currentTime = isFinite(video.duration)
			? Math.min(seconds, video.duration)
			: seconds;
			});
			}

			// A #t= fragment in the URL seeks the player too, which is what makes a
			// {{Src\|video\|...\|t=14:32}} citation land the reader on the assertion
			// rather than at 0:00 of a forty-minute set.
			function timecodeFromHash() {
			var m = /[#&]t=([0-9:]+)/.exec(window.location.hash \|\| '');
			return m ? parseTimecode(m[1]) : 0;
	}		}

Line 243:		Line 284:
	}		}

	function fallbackToDirectVideo(container, cid, width, maxWidth) {		function fallbackToDirectVideo(container, cid, width, maxWidth, startSeconds) {
	// CID is a raw video file, not an HLS stream — play directly		// CID is a raw video file, not an HLS stream — play directly
	var directUrl = IPFS_GATEWAY + '/' + normalizeCid(cid);		var directUrl = IPFS_GATEWAY + '/' + normalizeCid(cid);
Line 252:		Line 293:
	container.innerHTML = '<p style="color: red; padding: 1em;">Error loading video. The IPFS content may not be available.</p>';		container.innerHTML = '<p style="color: red; padding: 1em;">Error loading video. The IPFS content may not be available.</p>';
	});		});
			seekWhenReady(video, startSeconds);
	container.appendChild(video);		container.appendChild(video);
	}		}

	function initPlayer(container) {		function initPlayer(container) {
	var cid = container.getAttribute('data-cid');		var cid = container.getAttribute('data-cid');
	var normalCid = normalizeCid(cid);		var normalCid = normalizeCid(cid);
	var width = container.getAttribute('data-width') \|\| '100%';		var width = container.getAttribute('data-width') \|\| '100%';
	var maxWidth = container.getAttribute('data-max-width') \|\| '800px';		var maxWidth = container.getAttribute('data-max-width') \|\| '800px';

			// data-start wins over the URL fragment: an embed that explicitly asks
			// for a moment means it, whereas the fragment is a property of how the
			// reader arrived and should not override the page's own intent.
			var startSeconds = parseTimecode(container.getAttribute('data-start'))
			\|\| timecodeFromHash();

	var hlsSrc = IPFS_GATEWAY + '/' + normalCid + '/master.m3u8';		var hlsSrc = IPFS_GATEWAY + '/' + normalCid + '/master.m3u8';

	var video = createVideoElement(width, maxWidth);		var video = createVideoElement(width, maxWidth);
			seekWhenReady(video, startSeconds);
	container.appendChild(video);		container.appendChild(video);

Line 270:		Line 319:
	video.src = hlsSrc;		video.src = hlsSrc;
	video.addEventListener('error', function() {		video.addEventListener('error', function() {
	fallbackToDirectVideo(container, cid, width, maxWidth);		fallbackToDirectVideo(container, cid, width, maxWidth, startSeconds);
	});		});
	} else if (typeof Hls !== 'undefined' && Hls.isSupported()) {		} else if (typeof Hls !== 'undefined' && Hls.isSupported()) {
Line 280:		Line 329:
	// HLS failed (likely no master.m3u8) — try direct video		// HLS failed (likely no master.m3u8) — try direct video
	hls.destroy();		hls.destroy();
	fallbackToDirectVideo(container, cid, width, maxWidth);		fallbackToDirectVideo(container, cid, width, maxWidth, startSeconds);
	}		}
	});		});
	} else {		} else {
	// No HLS support — try direct video		// No HLS support — try direct video
	fallbackToDirectVideo(container, cid, width, maxWidth);		fallbackToDirectVideo(container, cid, width, maxWidth, startSeconds);
	}		}
	}		}

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);