Greasy Fork is available in English.
Apply a MetaLike-style visual theme on linux.do as a regular user.
// ==UserScript==
// @name linux.do MetaLike Theme (Dark)
// @namespace https://linux.do/
// @version 0.2.1
// @description Apply a MetaLike-style visual theme on linux.do as a regular user.
// @author sanjuliangsheng
// @license MIT
// @homepageURL https://linux.do/
// @supportURL https://linux.do/
// @match https://linux.do/*
// @match https://www.linux.do/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
(() => {
"use strict";
const STYLE_ID = "tm-metalike-style";
const LINK_BAR_ID = "tm-metalike-links";
const FORCED_MODE = "dark";
const GLOBAL_MODE_KEY = "__tmMetalikeForcedMode";
if (window[GLOBAL_MODE_KEY] && window[GLOBAL_MODE_KEY] !== FORCED_MODE) {
return;
}
window[GLOBAL_MODE_KEY] = FORCED_MODE;
const LINKS = [
{ label: "Latest", url: "/latest", icon: "[L]" },
{ label: "Categories", url: "/categories", icon: "[C]" },
{ label: "Tags", url: "/tags", icon: "[T]" },
{ label: "Top", url: "/top", icon: "[*]" },
];
const CSS = `
:root {
--d-border-radius: 8px;
--d-border-radius-large: 10px;
--meta-branded-border: 1px solid var(--primary-low);
--meta-branded-box-shadow: 8px 8px 0 0 rgb(var(--secondary-rgb), 0.65);
--d-sidebar-row-horizontal-padding: var(--space-1);
--sidebar-section-wrapper-padding: var(--space-6) var(--space-2) var(--space-4);
--d-sidebar-section-link-prefix-margin-right: var(--space-2);
--d-sidebar-section-link-prefix-width: var(--space-6);
--d-sidebar-width: 255px;
--metalike-bg-color: transparent;
--metalike-bg-svg-pieces: url("data:image/svg+xml;charset=utf8,%3Csvg width='1388' height='254' viewBox='0 0 1388 254' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1372.63 216.562C1372.23 216.562 1371.83 216.594 1371.42 216.66C1366.84 217.393 1362.7 221.929 1363.71 228.253C1364.72 234.576 1370.62 238.145 1375.25 237.408C1377.45 237.053 1379.1 235.908 1380.15 233.993C1381.3 231.918 1381.65 229.03 1381.14 225.868C1380.64 222.761 1379.34 220.134 1377.46 218.464C1376.05 217.209 1374.4 216.562 1372.63 216.562ZM1373.91 244.072C1365.94 244.072 1358.59 237.774 1357.23 229.29C1355.75 219.993 1361.52 211.598 1370.38 210.18C1374.57 209.514 1378.62 210.714 1381.82 213.561C1384.83 216.233 1386.89 220.237 1387.62 224.828C1388.37 229.496 1387.77 233.758 1385.9 237.154C1383.88 240.829 1380.47 243.217 1376.29 243.884C1375.49 244.012 1374.7 244.072 1373.91 244.072' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61.3255 223.695C61.6535 237.474 51.9135 246.65 35.1802 252.648C21.2575 257.639 7.26682 244.392 1.51215 232.651C-4.94785 219.466 9.90282 204.75 34.3762 200.379C48.9362 197.779 60.9735 208.91 61.3255 223.695Z' fill='%23E84A51'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M163 39.8891C163 59.2871 140.02 79.223 122.06 79.223C104.1 79.223 84 62.6114 84 43.2133C84 23.8153 109.031 1.45003e-05 126.99 1.45003e-05C144.951 1.45003e-05 163 20.491 163 39.8891Z' fill='%23F0794A'/%3E%3C/svg%3E");
--metalike-bg-svg-yellow: url("data:image/svg+xml;charset=utf8,%3Csvg width='1567' height='318' viewBox='0 0 1567 318' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1513.21 115.49C1482.01 64.8232 1395.72 28.5546 1345.05 59.7597C1294.39 90.963 1293.36 170.002 1324.57 220.669C1355.77 271.333 1419.55 296.743 1468.73 263.236C1515.96 231.051 1544.42 166.157 1513.21 115.49Z' fill='%23FBF5AF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1272.01 267.825C1271.76 278.383 1279.22 285.415 1292.04 290.012C1302.71 293.836 1313.43 283.685 1317.84 274.688C1322.79 264.584 1311.41 253.307 1292.66 249.957C1281.5 247.965 1272.28 256.495 1272.01 267.825Z' fill='%23E84A51'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5201 299.843C25.9801 312.043 36.99 312.41 49.84 304.552C62.7 296.694 67.7401 268.57 60.2801 256.369C52.8201 244.168 30.46 253.028 17.61 260.886C4.76002 268.744 11.0601 287.641 18.5201 299.843Z' fill='%230CA64E'/%3E%3C/svg%3E");
--metalike-bg-svg-bluewave: url("data:image/svg+xml;charset=utf8,%3Csvg width='1705' height='701' viewBox='0 0 1705 701' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 29.3568C0 29.3568 158.465 95.4096 877.239 29.3568C1596.01 -36.696 1705 29.3568 1705 29.3568V701C1034.89 677.846 653.394 526.775 0 594.345V29.3568Z' fill='rgb(209.1, 239.7, 255)'/%3E%3C/svg%3E");
}
html.dark,
html[data-theme*="dark"],
.scheme-dark,
body.dark {
--metalike-bg-svg-pieces: url("data:image/svg+xml;charset=utf8,%3Csvg width='1388' height='254' viewBox='0 0 1388 254' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1372.63 216.562C1372.23 216.562 1371.83 216.594 1371.42 216.66C1366.84 217.393 1362.7 221.929 1363.71 228.253C1364.72 234.576 1370.62 238.145 1375.25 237.408C1377.45 237.053 1379.1 235.908 1380.15 233.993C1381.3 231.918 1381.65 229.03 1381.14 225.868C1380.64 222.761 1379.34 220.134 1377.46 218.464C1376.05 217.209 1374.4 216.562 1372.63 216.562ZM1373.91 244.072C1365.94 244.072 1358.59 237.774 1357.23 229.29C1355.75 219.993 1361.52 211.598 1370.38 210.18C1374.57 209.514 1378.62 210.714 1381.82 213.561C1384.83 216.233 1386.89 220.237 1387.62 224.828C1388.37 229.496 1387.77 233.758 1385.9 237.154C1383.88 240.829 1380.47 243.217 1376.29 243.884C1375.49 244.012 1374.7 244.072 1373.91 244.072' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61.3255 223.695C61.6535 237.474 51.9135 246.65 35.1802 252.648C21.2575 257.639 7.26682 244.392 1.51215 232.651C-4.94785 219.466 9.90282 204.75 34.3762 200.379C48.9362 197.779 60.9735 208.91 61.3255 223.695Z' fill='%23b5171e'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M163 39.8891C163 59.2871 140.02 79.223 122.06 79.223C104.1 79.223 84 62.6114 84 43.2133C84 23.8153 109.031 1.45003e-05 126.99 1.45003e-05C144.951 1.45003e-05 163 20.491 163 39.8891Z' fill='rgb(195.7755102041, 67.0612244898, 16.2244897959)'/%3E%3C/svg%3E");
--metalike-bg-svg-yellow: url("data:image/svg+xml;charset=utf8,%3Csvg width='1567' height='318' viewBox='0 0 1567 318' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1513.21 115.49C1482.01 64.8232 1395.72 28.5546 1345.05 59.7597C1294.39 90.963 1293.36 170.002 1324.57 220.669C1355.77 271.333 1419.55 296.743 1468.73 263.236C1515.96 231.051 1544.42 166.157 1513.21 115.49Z' fill='rgb(162.8571428571, 150.6428571429, 8.1428571429)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1272.01 267.825C1271.76 278.383 1279.22 285.415 1292.04 290.012C1302.71 293.836 1313.43 283.685 1317.84 274.688C1322.79 264.584 1311.41 253.307 1292.66 249.957C1281.5 247.965 1272.28 256.495 1272.01 267.825Z' fill='rgb(135.75, 17.25, 22.5)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5201 299.843C25.9801 312.043 36.99 312.41 49.84 304.552C62.7 296.694 67.7401 268.57 60.2801 256.369C52.8201 244.168 30.46 253.028 17.61 260.886C4.76002 268.744 11.0601 287.641 18.5201 299.843Z' fill='hsl(145.7142857143, 86.5168539326%, -5.0980392157%)'/%3E%3C/svg%3E");
--metalike-bg-svg-bluewave: url("data:image/svg+xml;charset=utf8,%3Csvg width='1705' height='701' viewBox='0 0 1705 701' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 29.3568C0 29.3568 158.465 95.4096 877.239 29.3568C1596.01 -36.696 1705 29.3568 1705 29.3568V701C1034.89 677.846 653.394 526.775 0 594.345V29.3568Z' fill='rgb(0, 34.9086956522, 130.2)'/%3E%3C/svg%3E");
}
html.tm-metalike-dark {
--metalike-bg-svg-pieces: url("data:image/svg+xml;charset=utf8,%3Csvg width='1388' height='254' viewBox='0 0 1388 254' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1372.63 216.562C1372.23 216.562 1371.83 216.594 1371.42 216.66C1366.84 217.393 1362.7 221.929 1363.71 228.253C1364.72 234.576 1370.62 238.145 1375.25 237.408C1377.45 237.053 1379.1 235.908 1380.15 233.993C1381.3 231.918 1381.65 229.03 1381.14 225.868C1380.64 222.761 1379.34 220.134 1377.46 218.464C1376.05 217.209 1374.4 216.562 1372.63 216.562ZM1373.91 244.072C1365.94 244.072 1358.59 237.774 1357.23 229.29C1355.75 219.993 1361.52 211.598 1370.38 210.18C1374.57 209.514 1378.62 210.714 1381.82 213.561C1384.83 216.233 1386.89 220.237 1387.62 224.828C1388.37 229.496 1387.77 233.758 1385.9 237.154C1383.88 240.829 1380.47 243.217 1376.29 243.884C1375.49 244.012 1374.7 244.072 1373.91 244.072' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61.3255 223.695C61.6535 237.474 51.9135 246.65 35.1802 252.648C21.2575 257.639 7.26682 244.392 1.51215 232.651C-4.94785 219.466 9.90282 204.75 34.3762 200.379C48.9362 197.779 60.9735 208.91 61.3255 223.695Z' fill='%23b5171e'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M163 39.8891C163 59.2871 140.02 79.223 122.06 79.223C104.1 79.223 84 62.6114 84 43.2133C84 23.8153 109.031 1.45003e-05 126.99 1.45003e-05C144.951 1.45003e-05 163 20.491 163 39.8891Z' fill='rgb(195.7755102041, 67.0612244898, 16.2244897959)'/%3E%3C/svg%3E");
--metalike-bg-svg-yellow: url("data:image/svg+xml;charset=utf8,%3Csvg width='1567' height='318' viewBox='0 0 1567 318' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1513.21 115.49C1482.01 64.8232 1395.72 28.5546 1345.05 59.7597C1294.39 90.963 1293.36 170.002 1324.57 220.669C1355.77 271.333 1419.55 296.743 1468.73 263.236C1515.96 231.051 1544.42 166.157 1513.21 115.49Z' fill='rgb(162.8571428571, 150.6428571429, 8.1428571429)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1272.01 267.825C1271.76 278.383 1279.22 285.415 1292.04 290.012C1302.71 293.836 1313.43 283.685 1317.84 274.688C1322.79 264.584 1311.41 253.307 1292.66 249.957C1281.5 247.965 1272.28 256.495 1272.01 267.825Z' fill='rgb(135.75, 17.25, 22.5)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5201 299.843C25.9801 312.043 36.99 312.41 49.84 304.552C62.7 296.694 67.7401 268.57 60.2801 256.369C52.8201 244.168 30.46 253.028 17.61 260.886C4.76002 268.744 11.0601 287.641 18.5201 299.843Z' fill='hsl(145.7142857143, 86.5168539326%, -5.0980392157%)'/%3E%3C/svg%3E");
--metalike-bg-svg-bluewave: url("data:image/svg+xml;charset=utf8,%3Csvg width='1705' height='701' viewBox='0 0 1705 701' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 29.3568C0 29.3568 158.465 95.4096 877.239 29.3568C1596.01 -36.696 1705 29.3568 1705 29.3568V701C1034.89 677.846 653.394 526.775 0 594.345V29.3568Z' fill='rgb(0, 34.9086956522, 130.2)'/%3E%3C/svg%3E");
}
.tm-metalike-force-hide {
display: none !important;
}
#main-outlet > .regular {
background-color: transparent;
}
.welcome-banner__wrap {
padding: var(--space-4);
}
.welcome-banner__title {
font-size: clamp(1.75rem, -1.9423rem + 6.1538vw, 2.75rem);
max-width: unset;
margin-bottom: 0.75em;
}
.welcome-banner__title span {
background-image: url("https://discourse.org/a/img/highlight.png");
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
}
.welcome-banner__search-menu .search-term__input {
padding: 0.75em;
}
.welcome-banner__search-menu .search-input {
--d-input-focused-color: var(--tertiary-low);
border: var(--meta-branded-border);
border-width: 2px;
}
.meta-branded-links-wrapper {
width: 100%;
}
.meta-branded-links__container {
display: flex;
flex-direction: row;
justify-content: center;
margin: var(--space-6) 0 0 0;
gap: clamp(0.5rem, -3.1923rem + 6.1538vw, 1.5rem);
flex-wrap: wrap;
}
.meta-branded-links__link {
display: inline-flex;
justify-content: center;
align-items: center;
color: var(--tertiary);
background: var(--tertiary-low);
padding: 0.35em 0.75em;
white-space: nowrap;
font-weight: 400;
border: 1px solid var(--tertiary);
border-radius: var(--d-border-radius);
column-gap: 0.5em;
text-decoration: none;
}
.meta-branded-links__link:hover {
background-color: var(--tertiary-very-low);
}
.meta-branded-links__icon {
line-height: 1;
font-size: 0.85em;
}
.sidebar-row {
padding: 0 var(--d-sidebar-row-horizontal-padding);
}
.sidebar-wrapper .sidebar-sections {
padding: var(--sidebar-section-wrapper-padding);
}
.sidebar-section-link-wrapper {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sidebar-section-link-wrapper .sidebar-section-link {
display: inline-flex;
width: 100%;
box-sizing: border-box;
align-items: center;
border-radius: var(--d-border-radius);
gap: var(--d-sidebar-section-link-prefix-margin-right);
}
.sidebar-section-link-wrapper .sidebar-section-link .sidebar-section-link-content-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
flex: 0 1 auto;
}
.sidebar-section-link-wrapper .sidebar-section-link-prefix {
width: var(--d-sidebar-section-link-prefix-width);
}
@media (min-width: 40rem) {
.wrap {
max-width: unset;
}
#main-outlet-wrapper {
grid-template-columns: minmax(0, 1fr) minmax(0, var(--d-max-width)) minmax(0, 1fr);
gap: 2em;
padding: 0;
}
body.has-sidebar-page #main-outlet-wrapper {
grid-template-columns: var(--d-sidebar-width) minmax(0, var(--d-max-width)) minmax(0, 1fr) !important;
gap: 1.25em !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
body.has-sidebar-page #main-outlet-wrapper .sidebar-wrapper {
width: var(--d-sidebar-width) !important;
margin-left: 0 !important;
justify-self: start !important;
left: 0 !important;
}
#main-outlet-wrapper .sidebar-wrapper {
width: 100%;
}
#main-outlet-wrapper #main-outlet {
margin: 0 auto;
max-width: var(--d-max-width);
width: 100%;
}
body.has-sidebar-page #main-outlet > .regular {
margin: 0 auto;
}
.d-header > .wrap .contents {
display: grid;
grid-template-areas: "logo lspace extra-info rspace panel";
grid-template-columns: minmax(auto, 1fr) auto minmax(0, calc(var(--d-max-width))) auto minmax(auto, 1fr);
}
.has-sidebar-page .d-header > .wrap .contents {
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) minmax(0, calc(var(--d-max-width))) minmax(0, 1fr) auto !important;
gap: 0.75em !important;
}
.d-header .header-sidebar-toggle {
grid-area: logo;
}
.d-header .home-logo-wrapper-outlet {
grid-area: logo;
margin-left: 0.5em;
margin-right: 0.725em;
display: flex;
overflow: visible;
}
.d-header .home-logo-wrapper-outlet .title {
flex: 1 1 auto;
}
.d-header .panel {
grid-area: panel;
justify-content: end;
}
.extra-info-wrapper {
grid-area: extra-info;
max-width: var(--d-max-width);
width: 100%;
box-sizing: border-box;
padding: 0;
}
.header-search--enabled .floating-search-input-wrapper {
grid-area: extra-info;
}
body.has-sidebar-page .d-header-mode,
body.has-sidebar-page .extra-info-wrapper {
padding: 0;
}
body.has-sidebar-page .sidebar-wrapper {
margin-left: 0 !important;
left: 0 !important;
}
body.has-sidebar-page .sidebar-container {
margin-left: 0 !important;
left: 0 !important;
}
body.has-sidebar-page .sidebar-wrapper .sidebar-sections {
padding-left: var(--space-2) !important;
padding-right: var(--space-2) !important;
}
html::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
opacity: 1;
background-color: var(--metalike-bg-color);
background-image: var(--metalike-bg-svg-pieces), var(--metalike-bg-svg-yellow), var(--metalike-bg-svg-bluewave);
background-size: 103vw, 103vw, 100vw;
background-repeat: no-repeat;
background-position: 50% 125%, 0 95px, 0 175px;
}
.container.posts,
.all-tag-lists,
.leaderboard,
.birthdays,
.anniversaries,
.badge-groups,
.user-badges,
.search-container,
.not-found-container,
div.edit-category,
.tag-groups-container,
.container.group,
.styleguide,
.list-controls,
.list-container,
#topic-title,
#topic-footer-buttons,
.more-topics__container,
.boxed.white,
#main-outlet > .reviewable,
.body-page,
.groups-header + div,
.directory-controls + div,
.new-user-wrapper,
.groups-form,
.tag-sort-options,
.user-main .about {
background: var(--secondary);
border: var(--meta-branded-border);
border-radius: var(--d-border-radius);
box-shadow: var(--meta-branded-box-shadow);
}
.list-controls {
padding: 1em 1em 0 1em;
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.list-container {
padding: 0 1em 1em 1em;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#topic-title {
margin-bottom: 0;
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: var(--space-4);
}
.container.posts {
border-radius: 0;
border-top: 0;
margin-bottom: 0;
}
.container.posts + span .topic-above-footer-buttons-outlet {
padding: 0 1em;
margin: 0;
border-block: 0;
border-radius: 0;
background: var(--secondary);
border-inline: var(--meta-branded-border);
box-shadow: var(--meta-branded-box-shadow);
}
#topic-footer-buttons {
border-top: 0;
margin: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
max-width: unset;
}
.sidebar-wrapper {
background-color: transparent;
}
body.has-sidebar-page .sidebar-wrapper {
background-color: rgb(var(--secondary-rgb), 0.95);
}
}
@media screen and (min-width: 40rem) and (max-width: 800px) {
html::before {
background-size: 103vw, 103vw, 200vw;
}
}
@media (max-width: 39.999rem) {
#topic-title {
padding: var(--space-4);
background: var(--secondary);
border: var(--meta-branded-border);
border-radius: var(--d-border-radius);
box-shadow: var(--meta-branded-box-shadow);
}
.container.posts {
margin-top: 2em;
}
.list-controls {
border-radius: 0;
padding: 1em 0.5em 0;
border: none;
box-shadow: none;
}
.list-container {
border-radius: 0;
padding: 0.5em;
border: none;
box-shadow: none;
}
.user-main .about,
.new-user-wrapper,
.search-container,
.boxed-white,
.reviewable {
border: none;
box-shadow: none;
}
}
`;
function isDiscoveryRoute() {
const path = window.location.pathname || "/";
if (path === "/" || path === "") return true;
if (path.startsWith("/t/") || path.startsWith("/u/")) return false;
return (
path === "/latest" ||
path.startsWith("/latest/") ||
path === "/new" ||
path.startsWith("/new/") ||
path === "/top" ||
path.startsWith("/top/") ||
path === "/unread" ||
path.startsWith("/unread/") ||
path === "/categories" ||
path.startsWith("/categories/") ||
path === "/tags" ||
path.startsWith("/tags/") ||
path.startsWith("/c/")
);
}
function ensureStyle() {
if (document.getElementById(STYLE_ID)) return;
if (typeof GM_addStyle === "function") {
const node = GM_addStyle(CSS);
if (node) node.id = STYLE_ID;
return;
}
const style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = CSS;
(document.head || document.documentElement).appendChild(style);
}
function getMountTarget() {
return (
document.querySelector(".list-controls") ||
document.querySelector(".navigation-container") ||
document.querySelector("#list-area") ||
document.querySelector(".welcome-banner__search-menu")
);
}
function hideTopBanner() {
const forcedHidden = document.querySelectorAll(".tm-metalike-force-hide");
if (!isDiscoveryRoute()) {
for (const node of forcedHidden) {
node.classList.remove("tm-metalike-force-hide");
}
return;
}
const hardSelectors = [
".custom-search-banner-wrap",
".custom-search-banner",
".search-banner",
".discovery-banner",
".welcome-banner"
];
for (const selector of hardSelectors) {
const nodes = document.querySelectorAll(selector);
for (const node of nodes) {
if (node.id === LINK_BAR_ID || node.querySelector(`#${LINK_BAR_ID}`)) continue;
node.classList.add("tm-metalike-force-hide");
}
}
const listControls = document.querySelector(".list-controls");
if (!listControls) return;
const listTop = listControls.getBoundingClientRect().top + window.scrollY;
const images = document.querySelectorAll(
"#main-outlet img, .above-main-container-outlet img, .below-site-header-outlet img"
);
for (const img of images) {
const rect = img.getBoundingClientRect();
const absTop = rect.top + window.scrollY;
if (absTop > listTop) continue;
if (rect.width < 600 || rect.height < 120) continue;
const host = img.closest(
".custom-search-banner-wrap, .search-banner, .welcome-banner, .above-main-container-outlet, .below-site-header-outlet, section, .wrap, .container, div"
);
if (!host) continue;
if (host.id === LINK_BAR_ID || host.querySelector(`#${LINK_BAR_ID}`)) continue;
host.classList.add("tm-metalike-force-hide");
}
let prev = listControls.previousElementSibling;
while (prev) {
if (prev.id !== LINK_BAR_ID && !prev.querySelector(`#${LINK_BAR_ID}`)) {
prev.classList.add("tm-metalike-force-hide");
}
prev = prev.previousElementSibling;
}
}
function syncModeClass() {
document.documentElement.classList.toggle("tm-metalike-dark", FORCED_MODE === "dark");
document.documentElement.classList.toggle("tm-metalike-light", FORCED_MODE === "light");
}
function createLinksBar() {
const wrapper = document.createElement("div");
wrapper.id = LINK_BAR_ID;
wrapper.className = "meta-branded-links-wrapper";
const container = document.createElement("div");
container.className = "meta-branded-links__container";
for (const link of LINKS) {
const anchor = document.createElement("a");
anchor.className = "meta-branded-links__link";
anchor.href = new URL(link.url, window.location.origin).toString();
anchor.target = "_self";
const icon = document.createElement("span");
icon.className = "meta-branded-links__icon";
icon.textContent = link.icon;
const label = document.createElement("span");
label.textContent = link.label;
anchor.append(icon, label);
container.appendChild(anchor);
}
wrapper.appendChild(container);
return wrapper;
}
function mountLinksBar() {
const existing = document.getElementById(LINK_BAR_ID);
if (!isDiscoveryRoute()) {
if (existing) existing.remove();
return;
}
const target = getMountTarget();
if (!target) return;
const bar = existing || createLinksBar();
if (target.matches(".welcome-banner__search-menu")) {
if (target.nextElementSibling !== bar) {
target.insertAdjacentElement("afterend", bar);
}
} else if (target.previousElementSibling !== bar) {
target.insertAdjacentElement("beforebegin", bar);
}
}
let refreshQueued = false;
function scheduleRefresh() {
if (refreshQueued) return;
refreshQueued = true;
requestAnimationFrame(() => {
refreshQueued = false;
syncModeClass();
ensureStyle();
hideTopBanner();
mountLinksBar();
});
}
function hookHistory() {
for (const method of ["pushState", "replaceState"]) {
const original = history[method];
if (typeof original !== "function") continue;
if (original.__tmMetalikePatched) continue;
const wrapped = function (...args) {
const result = original.apply(this, args);
setTimeout(scheduleRefresh, 0);
return result;
};
wrapped.__tmMetalikePatched = true;
history[method] = wrapped;
}
}
function observeDom() {
const observer = new MutationObserver(() => {
scheduleRefresh();
});
observer.observe(document.documentElement, {
childList: true,
subtree: true,
});
}
function boot() {
ensureStyle();
hookHistory();
observeDom();
window.addEventListener("popstate", scheduleRefresh, { passive: true });
window.addEventListener("hashchange", scheduleRefresh, { passive: true });
document.addEventListener("visibilitychange", scheduleRefresh, { passive: true });
scheduleRefresh();
setTimeout(scheduleRefresh, 500);
setTimeout(scheduleRefresh, 1500);
}
if (document.documentElement) {
boot();
} else {
window.addEventListener("DOMContentLoaded", boot, { once: true });
}
})();