UnfinishedProjects - User contributions [en]

MediaWiki:Common.css

2026-04-05T10:12:11Z

Anthony:

/* =============================================================================
MediaWiki:Common.css
UnfinishedProjects Wiki

TABLE OF CONTENTS
0. Nav Forum Link
1. Brand Variables
2. Callout Boxes
3. Badges
4. Table Utilities
5. Text Utilities
6. Category Pages
7. Tag-Based Hub
8. Hub Main Page Buttons
9. License Cloud
10. Tag Tokenizer
11. Page Forms
============================================================================= */

/* =============================================================================
0. Forum Link
Forum header link — Gadget-sitenav.js
============================================================================= */

.citizen-forum-link {
background: var(--wiki-primary-subtle) !important;
border: 1px solid var(--wiki-primary) !important;
border-radius: 20px !important;
color: var(--wiki-primary) !important;
transition: background 0.15s, color 0.15s !important;
}

.citizen-forum-link:hover {
background: var(--wiki-primary) !important;
color: #fff !important;
}

.citizen-forum-link:hover .citizen-ui-icon {
filter: brightness(0) invert(1);
}

/* =============================================================================
1. BRAND VARIABLES
Edit only these lines to retheme the entire wiki.
subtle = primary at ~12% opacity (tag backgrounds, tints)
overlay = primary at ~92% opacity (card hover overlays)
============================================================================= */

:root {
--wiki-primary: #e46419;
--wiki-primary-subtle: rgba(228, 100, 25, 0.12);
--wiki-primary-overlay: rgba(228, 100, 25, 0.92);
--wiki-secondary: #3465a4;
--wiki-secondary-subtle: rgba(52, 101, 164, 0.12);
--wiki-secondary-overlay: rgba(52, 101, 164, 0.92);
}

/* =============================================================================
2. CALLOUT BOXES
Light mode uses tinted backgrounds.
Dark mode desaturates them so they don't glow on dark surfaces.
============================================================================= */

.box-info,
.box-warning,
.box-danger,
.box-success {
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 4px 4px 0;
color: var(--color-base);
}

.box-info { background: #e8f4fd; border-left: 4px solid #2196F3; }
.box-warning { background: #fff3cd; border-left: 4px solid #ffc107; }
.box-danger { background: #f8d7da; border-left: 4px solid #dc3545; }
.box-success { background: #d4edda; border-left: 4px solid #28a745; }

.box-neutral {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
padding: 14px 18px;
margin: 12px 0;
border-radius: 4px;
color: var(--color-base);
}

.skin-theme-clientpref-night .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-night .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-night .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-night .box-success { background: rgba(40, 167, 69, 0.15); }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-os .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-os .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-os .box-success { background: rgba(40, 167, 69, 0.15); }
}

/* =============================================================================
3. BADGES
============================================================================= */

.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 3px;
font-size: 85%;
font-weight: bold;
line-height: 1.4;
}

.badge-green { background: #28a745; color: #fff; }
.badge-red { background: #dc3545; color: #fff; }
.badge-yellow { background: #ffc107; color: #212529; }
.badge-blue { background: #17a2b8; color: #fff; }
.badge-grey { background: #6c757d; color: #fff; }
.badge-dark { background: #3d3d3d; color: #fff; }

/* Project badges */
.project-badge-status {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.project-badge-status--active {
background-color: rgba(40,167,69,0.15);
color: #28a745;
}

.project-badge-status--hiatus {
background-color: rgba(255,193,7,0.20);
color: #b8860b;
}

.project-badge-status--completed {
background-color: rgba(52,101,164,0.15);
color: var(--wiki-secondary);
}

.project-badge-status--abandoned {
background-color: rgba(108,117,125,0.15);
color: #6c757d;
}

.project-badge-license {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
color: var(--color-base--subtle);
}
/* =============================================================================
4. TABLE UTILITIES
============================================================================= */

.table-full { width: 100%; }

.row-green { background: #d4edda !important; }
.row-yellow { background: #fff3cd !important; }
.row-red { background: #f8d7da !important; }
.row-blue { background: #e8f4fd !important; }
.row-grey { background: #e9ecef !important; }

.skin-theme-clientpref-night .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-night .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-night .row-grey { background: rgba(108, 117, 125, 0.2) !important; }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-os .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-os .row-grey { background: rgba(108, 117, 125, 0.2) !important; }
}

/* =============================================================================
5. TEXT UTILITIES
============================================================================= */

.indent-1 { margin-left: 2em; }
.indent-2 { margin-left: 4em; }

.text-muted { color: var(--color-base--subtle); font-size: 90%; }
.text-small { font-size: 85%; }

.wiki-code {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
font-size: 90%;
color: var(--color-base);
}

/* =============================================================================
6. CATEGORY PAGES
============================================================================= */

#mw-subcategories h2,
#mw-pages h2,
#mw-category-media h2 {
font-size: 1.1em;
font-weight: bold;
color: var(--wiki-primary);
border-bottom: 2px solid var(--wiki-primary);
padding-bottom: 6px;
margin-bottom: 16px;
}

/* Subcategories — displayed as prominent nav blocks above pages */
#mw-subcategories .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

#mw-subcategories .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-subcategories .mw-category-group ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
border-radius: 4px;
font-size: 0.9em;
font-weight: bold;
color: var(--wiki-primary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}

#mw-subcategories .mw-category-group ul li a:hover {
background: var(--wiki-primary);
color: #fff;
text-decoration: none;
}

/* Letter group heading */
.mw-category-group h3 {
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-base--subtle);
border: none;
margin: 20px 0 8px;
padding: 0;
}

/* Pages — chip layout */
#mw-pages .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

#mw-pages .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-pages .mw-category-group ul li a {
display: flex;
flex-direction: column;
padding: 7px 14px;
min-width: 140px;
max-width: 240px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.88em;
color: var(--color-base);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
line-height: 1.4;
position: relative;
}

#mw-pages .mw-category-group ul li a:hover {
background: var(--color-surface-2);
border-color: var(--wiki-primary);
text-decoration: none;
}

#mw-pages .mw-category-group ul li a .cat-item-name {
font-weight: 600;
color: var(--color-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#mw-pages .mw-category-group ul li a .cat-item-meta {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-top: 2px;
white-space: nowrap;
}

/* Loading shimmer on meta line until API responds */
#mw-pages .mw-category-group ul li a .cat-item-meta:not(.loaded) {
background: var(--color-surface-2);
border-radius: 3px;
color: transparent;
width: 80px;
height: 0.75em;
display: inline-block;
animation: cat-shimmer 1.4s infinite;
}

@keyframes cat-shimmer {
0% { opacity: 0.4; }
50% { opacity: 0.9; }
100% { opacity: 0.4; }
}

/* Red links */
#mw-pages .mw-category-group ul li a.new {
border-style: dashed;
opacity: 0.6;
}

#mw-pages .mw-category-group ul li a.new:hover {
border-color: var(--border-color-base);
background: var(--color-surface-1);
}

/* Search bar injected by JS */
.cat-search-wrap {
margin-bottom: 20px;
}

.cat-search-input {
width: 100%;
max-width: 400px;
padding: 7px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
color: var(--color-base);
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}

.cat-search-input:focus {
border-color: var(--wiki-primary);
}

.cat-search-count {
margin-left: 10px;
font-size: 0.85em;
color: var(--color-base--subtle);
}

/* Page count note */
#mw-pages p,
#mw-subcategories p {
font-size: 0.88em;
color: var(--color-base--subtle);
margin-bottom: 12px;
}

/* =============================================================================
7. Tag-Based Hub — new styles added for unified Projects/Tutorials hubs
============================================================================= */

/* Hub wrapper */
.project-hub-wrapper,
.tutorial-hub-wrapper {
margin-top: 8px;
}

/* Filter bar (search, sort, count) */
.project-hub-filters,
.tutorial-hub-filters {
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.project-hub-search {
flex: 1;
min-width: 200px;
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.9em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
transition: border-color 0.15s;
}
.project-hub-search:focus { border-color: var(--wiki-primary); }

.project-hub-select {
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.88em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.project-hub-select:focus { border-color: var(--wiki-primary); }

.project-hub-count,
.tutorial-hub-count {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-left: auto;
white-space: nowrap;
}

/* Tag cloud */
.project-hub-tagcloud,
.tutorial-hub-tagcloud {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin-bottom: 16px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border-color-base) transparent;
-webkit-overflow-scrolling: touch;
}

.project-hub-tagcloud::-webkit-scrollbar,
.tutorial-hub-tagcloud::-webkit-scrollbar {
height: 3px;
}

.project-hub-tagcloud::-webkit-scrollbar-thumb,
.tutorial-hub-tagcloud::-webkit-scrollbar-thumb {
background: var(--border-color-base);
border-radius: 2px;
}

/* Clickable tag — used in cloud AND on cards */
.js-tag-filter,
.js-tutorial-tag {
display: inline-block;
flex-shrink: 0;
padding: 3px 10px;
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}
.js-tag-filter:hover,
.js-tutorial-tag:hover,
.js-tag-filter.is-active,
.js-tutorial-tag.is-active {
background: var(--wiki-primary);
color: #fff;
border-color: var(--wiki-primary);
}

/* Card grid */
.project-hub-grid,
.tutorial-hub-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
margin-bottom: 8px;
}
.project-hub-grid .project-card-wrap,
.tutorial-hub-grid .tutorial-card-wrap {
font-size: 1rem;
}

/* Empty state */
.project-hub-empty {
width: 100%;
text-align: center;
padding: 40px 20px;
color: var(--color-base--subtle);
font-size: 0.95em;
}

/* Load more button */
.project-hub-loadmore,
.tutorial-hub-loadmore {
display: block;
width: 100%;
margin: 8px 0 16px;
padding: 12px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
font-weight: 700;
color: var(--color-base);
cursor: pointer;
text-align: center;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.project-hub-loadmore:hover,
.tutorial-hub-loadmore:hover {
border-color: var(--wiki-primary);
color: var(--wiki-primary);
background: var(--color-surface-1);
}
/* =============================================================================
8.Hub Main Page Buttons
============================================================================= */

.hub-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
}

.hub-buttons a {
flex: 1;
min-width: 240px;
display: block;
padding: 24px 20px;
border-radius: 6px;
text-align: center;
font-size: 1.1em;
font-weight: 700;
color: #fff !important;
text-decoration: none !important;
line-height: 1.5;
transition: opacity 0.15s, transform 0.15s;
}

.hub-buttons a:hover {
opacity: 0.92;
transform: translateY(-1px);
text-decoration: none !important;
color: #fff !important;
}

.hub-buttons a:first-child {
background: var(--wiki-secondary);
}

.hub-buttons a:last-child {
background: rgba(228, 100, 25, 0.82);
}

.hub-buttons .hub-btn-sub {
display: block;
font-size: 0.78em;
font-weight: 400;
opacity: 0.88;
margin-top: 4px;
}

/* Fix for MediaWiki parser injecting <p> tags inside the container */
.hub-buttons,
.hub-buttons p {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
width: 100%;
}
.hub-buttons p {
margin: 0;
}

/* =============================================================================
9. License Cloud (Projects hub)
============================================================================= */

.project-hub-licensecloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
}

.js-license-filter {
display: inline-block;
padding: 3px 10px;
background: var(--wiki-secondary-subtle);
color: var(--wiki-secondary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}

.js-license-filter:hover,
.js-license-filter.is-active {
background: var(--wiki-secondary);
color: #fff;
border-color: var(--wiki-secondary);
}

/* =============================================================================
10. Tag Tokenizer (Gadget-tagautocomplete.js)
============================================================================= */

.tag-tokenizer {
position: relative;
width: 100%;
}

.tag-tokenizer-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-height: 38px;
padding: 5px 8px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 3px;
cursor: text;
transition: border-color 0.15s;
box-sizing: border-box;
}

.tag-tokenizer-box:focus-within {
border-color: var(--wiki-primary);
}

.tag-token {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
color: var(--wiki-primary);
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
white-space: nowrap;
}

.tag-token-remove {
background: none;
border: none;
color: var(--wiki-primary);
font-size: 1.1em;
line-height: 1;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.1s;
}

.tag-token-remove:hover { opacity: 1; }

.tag-tokenizer-entry {
flex: 1;
min-width: 160px;
border: none;
outline: none;
background: transparent;
font-size: 0.9em;
color: var(--color-base);
padding: 2px 4px;
}

.tag-tokenizer-dropdown {
position: absolute;
top: calc(100% + 3px);
left: 0;
right: 0;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
list-style: none;
margin: 0;
padding: 4px 0;
z-index: 100;
max-height: 220px;
overflow-y: auto;
}

.tag-tokenizer-dropdown li {
padding: 7px 14px;
font-size: 0.88em;
color: var(--color-base);
cursor: pointer;
transition: background 0.1s;
}

.tag-tokenizer-dropdown li:hover {
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
}

/* =============================================================================
11. Page Forms — inputs styled to match tag tokenizer
============================================================================= */

.formtable input.createboxInput,
.formtable textarea.createboxInput,
.formtable select.createboxInput {
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 3px;
padding: 5px 8px;
min-height: 38px;
font-size: 0.9em;
color: var(--color-base);
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.15s;
vertical-align: middle;
}

.formtable input.createboxInput:focus,
.formtable textarea.createboxInput:focus,
.formtable select.createboxInput:focus {
border-color: var(--wiki-primary);
outline: none;
}

.formtable textarea.createboxInput {
min-height: unset;
}

.formtable th {
font-size: 0.88em;
font-weight: 700;
color: var(--color-base--subtle);
text-align: left;
padding-right: 16px;
white-space: nowrap;
vertical-align: middle;
}

.formtable td {
padding: 5px 0;
vertical-align: middle;
}

MediaWiki:Common.css

2026-04-05T10:03:54Z

Anthony:

/* =============================================================================
MediaWiki:Common.css
UnfinishedProjects Wiki

TABLE OF CONTENTS
0. Nav Forum Link
1. Brand Variables
2. Callout Boxes
3. Badges
4. Table Utilities
5. Text Utilities
6. Category Pages
7. Tag-Based Hub
8. Hub Main Page Buttons
9. License Cloud
10. Tag Tokenizer
11. Page Forms
============================================================================= */

/* =============================================================================
0. Forum Link
Forum header link — Gadget-sitenav.js
============================================================================= */

.citizen-forum-link {
background: var(--wiki-primary-subtle) !important;
border: 1px solid var(--wiki-primary) !important;
border-radius: 20px !important;
color: var(--wiki-primary) !important;
transition: background 0.15s, color 0.15s !important;
}

.citizen-forum-link:hover {
background: var(--wiki-primary) !important;
color: #fff !important;
}

.citizen-forum-link:hover .citizen-ui-icon {
filter: brightness(0) invert(1);
}

/* =============================================================================
1. BRAND VARIABLES
Edit only these lines to retheme the entire wiki.
subtle = primary at ~12% opacity (tag backgrounds, tints)
overlay = primary at ~92% opacity (card hover overlays)
============================================================================= */

:root {
--wiki-primary: #e46419;
--wiki-primary-subtle: rgba(228, 100, 25, 0.12);
--wiki-primary-overlay: rgba(228, 100, 25, 0.92);
--wiki-secondary: #3465a4;
--wiki-secondary-subtle: rgba(52, 101, 164, 0.12);
--wiki-secondary-overlay: rgba(52, 101, 164, 0.92);
}

/* =============================================================================
2. CALLOUT BOXES
Light mode uses tinted backgrounds.
Dark mode desaturates them so they don't glow on dark surfaces.
============================================================================= */

.box-info,
.box-warning,
.box-danger,
.box-success {
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 4px 4px 0;
color: var(--color-base);
}

.box-info { background: #e8f4fd; border-left: 4px solid #2196F3; }
.box-warning { background: #fff3cd; border-left: 4px solid #ffc107; }
.box-danger { background: #f8d7da; border-left: 4px solid #dc3545; }
.box-success { background: #d4edda; border-left: 4px solid #28a745; }

.box-neutral {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
padding: 14px 18px;
margin: 12px 0;
border-radius: 4px;
color: var(--color-base);
}

.skin-theme-clientpref-night .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-night .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-night .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-night .box-success { background: rgba(40, 167, 69, 0.15); }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-os .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-os .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-os .box-success { background: rgba(40, 167, 69, 0.15); }
}

/* =============================================================================
3. BADGES
============================================================================= */

.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 3px;
font-size: 85%;
font-weight: bold;
line-height: 1.4;
}

.badge-green { background: #28a745; color: #fff; }
.badge-red { background: #dc3545; color: #fff; }
.badge-yellow { background: #ffc107; color: #212529; }
.badge-blue { background: #17a2b8; color: #fff; }
.badge-grey { background: #6c757d; color: #fff; }
.badge-dark { background: #3d3d3d; color: #fff; }

/* Project badges */
.project-badge-status {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.project-badge-status--active {
background-color: rgba(40,167,69,0.15);
color: #28a745;
}

.project-badge-status--hiatus {
background-color: rgba(255,193,7,0.20);
color: #b8860b;
}

.project-badge-status--completed {
background-color: rgba(52,101,164,0.15);
color: var(--wiki-secondary);
}

.project-badge-status--abandoned {
background-color: rgba(108,117,125,0.15);
color: #6c757d;
}

.project-badge-license {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
color: var(--color-base--subtle);
}
/* =============================================================================
4. TABLE UTILITIES
============================================================================= */

.table-full { width: 100%; }

.row-green { background: #d4edda !important; }
.row-yellow { background: #fff3cd !important; }
.row-red { background: #f8d7da !important; }
.row-blue { background: #e8f4fd !important; }
.row-grey { background: #e9ecef !important; }

.skin-theme-clientpref-night .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-night .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-night .row-grey { background: rgba(108, 117, 125, 0.2) !important; }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-os .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-os .row-grey { background: rgba(108, 117, 125, 0.2) !important; }
}

/* =============================================================================
5. TEXT UTILITIES
============================================================================= */

.indent-1 { margin-left: 2em; }
.indent-2 { margin-left: 4em; }

.text-muted { color: var(--color-base--subtle); font-size: 90%; }
.text-small { font-size: 85%; }

.wiki-code {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
font-size: 90%;
color: var(--color-base);
}

/* =============================================================================
6. CATEGORY PAGES
============================================================================= */

#mw-subcategories h2,
#mw-pages h2,
#mw-category-media h2 {
font-size: 1.1em;
font-weight: bold;
color: var(--wiki-primary);
border-bottom: 2px solid var(--wiki-primary);
padding-bottom: 6px;
margin-bottom: 16px;
}

/* Subcategories — displayed as prominent nav blocks above pages */
#mw-subcategories .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

#mw-subcategories .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-subcategories .mw-category-group ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
border-radius: 4px;
font-size: 0.9em;
font-weight: bold;
color: var(--wiki-primary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}

#mw-subcategories .mw-category-group ul li a:hover {
background: var(--wiki-primary);
color: #fff;
text-decoration: none;
}

/* Letter group heading */
.mw-category-group h3 {
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-base--subtle);
border: none;
margin: 20px 0 8px;
padding: 0;
}

/* Pages — chip layout */
#mw-pages .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

#mw-pages .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-pages .mw-category-group ul li a {
display: flex;
flex-direction: column;
padding: 7px 14px;
min-width: 140px;
max-width: 240px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.88em;
color: var(--color-base);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
line-height: 1.4;
position: relative;
}

#mw-pages .mw-category-group ul li a:hover {
background: var(--color-surface-2);
border-color: var(--wiki-primary);
text-decoration: none;
}

#mw-pages .mw-category-group ul li a .cat-item-name {
font-weight: 600;
color: var(--color-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#mw-pages .mw-category-group ul li a .cat-item-meta {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-top: 2px;
white-space: nowrap;
}

/* Loading shimmer on meta line until API responds */
#mw-pages .mw-category-group ul li a .cat-item-meta:not(.loaded) {
background: var(--color-surface-2);
border-radius: 3px;
color: transparent;
width: 80px;
height: 0.75em;
display: inline-block;
animation: cat-shimmer 1.4s infinite;
}

@keyframes cat-shimmer {
0% { opacity: 0.4; }
50% { opacity: 0.9; }
100% { opacity: 0.4; }
}

/* Red links */
#mw-pages .mw-category-group ul li a.new {
border-style: dashed;
opacity: 0.6;
}

#mw-pages .mw-category-group ul li a.new:hover {
border-color: var(--border-color-base);
background: var(--color-surface-1);
}

/* Search bar injected by JS */
.cat-search-wrap {
margin-bottom: 20px;
}

.cat-search-input {
width: 100%;
max-width: 400px;
padding: 7px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
color: var(--color-base);
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}

.cat-search-input:focus {
border-color: var(--wiki-primary);
}

.cat-search-count {
margin-left: 10px;
font-size: 0.85em;
color: var(--color-base--subtle);
}

/* Page count note */
#mw-pages p,
#mw-subcategories p {
font-size: 0.88em;
color: var(--color-base--subtle);
margin-bottom: 12px;
}

/* =============================================================================
7. Tag-Based Hub — new styles added for unified Projects/Tutorials hubs
============================================================================= */

/* Hub wrapper */
.project-hub-wrapper,
.tutorial-hub-wrapper {
margin-top: 8px;
}

/* Filter bar (search, sort, count) */
.project-hub-filters,
.tutorial-hub-filters {
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.project-hub-search {
flex: 1;
min-width: 200px;
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.9em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
transition: border-color 0.15s;
}
.project-hub-search:focus { border-color: var(--wiki-primary); }

.project-hub-select {
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.88em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.project-hub-select:focus { border-color: var(--wiki-primary); }

.project-hub-count,
.tutorial-hub-count {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-left: auto;
white-space: nowrap;
}

/* Tag cloud */
.project-hub-tagcloud,
.tutorial-hub-tagcloud {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin-bottom: 16px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border-color-base) transparent;
-webkit-overflow-scrolling: touch;
}

.project-hub-tagcloud::-webkit-scrollbar,
.tutorial-hub-tagcloud::-webkit-scrollbar {
height: 3px;
}

.project-hub-tagcloud::-webkit-scrollbar-thumb,
.tutorial-hub-tagcloud::-webkit-scrollbar-thumb {
background: var(--border-color-base);
border-radius: 2px;
}

/* Clickable tag — used in cloud AND on cards */
.js-tag-filter,
.js-tutorial-tag {
display: inline-block;
flex-shrink: 0;
padding: 3px 10px;
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}
.js-tag-filter:hover,
.js-tutorial-tag:hover,
.js-tag-filter.is-active,
.js-tutorial-tag.is-active {
background: var(--wiki-primary);
color: #fff;
border-color: var(--wiki-primary);
}

/* Card grid */
.project-hub-grid,
.tutorial-hub-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
margin-bottom: 8px;
}
.project-hub-grid .project-card-wrap,
.tutorial-hub-grid .tutorial-card-wrap {
font-size: 1rem;
}

/* Empty state */
.project-hub-empty {
width: 100%;
text-align: center;
padding: 40px 20px;
color: var(--color-base--subtle);
font-size: 0.95em;
}

/* Load more button */
.project-hub-loadmore,
.tutorial-hub-loadmore {
display: block;
width: 100%;
margin: 8px 0 16px;
padding: 12px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
font-weight: 700;
color: var(--color-base);
cursor: pointer;
text-align: center;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.project-hub-loadmore:hover,
.tutorial-hub-loadmore:hover {
border-color: var(--wiki-primary);
color: var(--wiki-primary);
background: var(--color-surface-1);
}
/* =============================================================================
8.Hub Main Page Buttons
============================================================================= */

.hub-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
}

.hub-buttons a {
flex: 1;
min-width: 240px;
display: block;
padding: 24px 20px;
border-radius: 6px;
text-align: center;
font-size: 1.1em;
font-weight: 700;
color: #fff !important;
text-decoration: none !important;
line-height: 1.5;
transition: opacity 0.15s, transform 0.15s;
}

.hub-buttons a:hover {
opacity: 0.92;
transform: translateY(-1px);
text-decoration: none !important;
color: #fff !important;
}

.hub-buttons a:first-child {
background: var(--wiki-secondary);
}

.hub-buttons a:last-child {
background: rgba(228, 100, 25, 0.82);
}

.hub-buttons .hub-btn-sub {
display: block;
font-size: 0.78em;
font-weight: 400;
opacity: 0.88;
margin-top: 4px;
}

/* Fix for MediaWiki parser injecting <p> tags inside the container */
.hub-buttons,
.hub-buttons p {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
width: 100%;
}
.hub-buttons p {
margin: 0;
}

/* =============================================================================
9. License Cloud (Projects hub)
============================================================================= */

.project-hub-licensecloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
}

.js-license-filter {
display: inline-block;
padding: 3px 10px;
background: var(--wiki-secondary-subtle);
color: var(--wiki-secondary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}

.js-license-filter:hover,
.js-license-filter.is-active {
background: var(--wiki-secondary);
color: #fff;
border-color: var(--wiki-secondary);
}

/* =============================================================================
10. Tag Tokenizer (Gadget-tagautocomplete.js)
============================================================================= */

.tag-tokenizer {
position: relative;
width: 100%;
}

.tag-tokenizer-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-height: 38px;
padding: 5px 8px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 3px;
cursor: text;
transition: border-color 0.15s;
box-sizing: border-box;
}

.tag-tokenizer-box:focus-within {
border-color: var(--wiki-primary);
}

.tag-token {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
color: var(--wiki-primary);
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
white-space: nowrap;
}

.tag-token-remove {
background: none;
border: none;
color: var(--wiki-primary);
font-size: 1.1em;
line-height: 1;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.1s;
}

.tag-token-remove:hover { opacity: 1; }

.tag-tokenizer-entry {
flex: 1;
min-width: 160px;
border: none;
outline: none;
background: transparent;
font-size: 0.9em;
color: var(--color-base);
padding: 2px 4px;
}

.tag-tokenizer-dropdown {
position: absolute;
top: calc(100% + 3px);
left: 0;
right: 0;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
list-style: none;
margin: 0;
padding: 4px 0;
z-index: 100;
max-height: 220px;
overflow-y: auto;
}

.tag-tokenizer-dropdown li {
padding: 7px 14px;
font-size: 0.88em;
color: var(--color-base);
cursor: pointer;
transition: background 0.1s;
}

.tag-tokenizer-dropdown li:hover {
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
}

/* =============================================================================
11. Page Forms — consistent input styling to match tag tokenizer aesthetic
============================================================================= */

.formtable input.createboxInput,
.formtable textarea.createboxInput {
background: var(--color-surface-0, Field);
border: 1px solid var(--border-color-base);
border-radius: 2px;
padding: 3px 6px;
font-size: 1em;
color: var(--color-base);
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.15s, outline 0.15s;
}

.formtable input.createboxInput:focus,
.formtable textarea.createboxInput:focus {
border-color: var(--wiki-primary);
outline: 1px solid var(--wiki-primary);
}

.formtable select.createboxInput {
background: var(--color-surface-0, Field);
border: 1px solid var(--border-color-base);
border-radius: 2px;
padding: 3px 6px;
font-size: 1em;
color: var(--color-base);
font-family: inherit;
transition: border-color 0.15s;
}

.formtable select.createboxInput:focus {
border-color: var(--wiki-primary);
outline: 1px solid var(--wiki-primary);
}

.formtable th {
font-size: 0.88em;
font-weight: 700;
color: var(--color-base--subtle);
text-align: left;
padding-right: 16px;
white-space: nowrap;
vertical-align: middle;
}

.formtable td {
padding: 5px 0;
vertical-align: middle;
}

MediaWiki:Common.css

2026-04-05T10:02:47Z

Anthony:

/* =============================================================================
MediaWiki:Common.css
UnfinishedProjects Wiki

TABLE OF CONTENTS
0. Nav Forum Link
1. Brand Variables
2. Callout Boxes
3. Badges
4. Table Utilities
5. Text Utilities
6. Category Pages
7. Tag-Based Hub
8. Hub Main Page Buttons
9. License Cloud
10. Tag Tokenizer
11. Page Forms
============================================================================= */

/* =============================================================================
0. Forum Link
Forum header link — Gadget-sitenav.js
============================================================================= */

.citizen-forum-link {
background: var(--wiki-primary-subtle) !important;
border: 1px solid var(--wiki-primary) !important;
border-radius: 20px !important;
color: var(--wiki-primary) !important;
transition: background 0.15s, color 0.15s !important;
}

.citizen-forum-link:hover {
background: var(--wiki-primary) !important;
color: #fff !important;
}

.citizen-forum-link:hover .citizen-ui-icon {
filter: brightness(0) invert(1);
}

/* =============================================================================
1. BRAND VARIABLES
Edit only these lines to retheme the entire wiki.
subtle = primary at ~12% opacity (tag backgrounds, tints)
overlay = primary at ~92% opacity (card hover overlays)
============================================================================= */

:root {
--wiki-primary: #e46419;
--wiki-primary-subtle: rgba(228, 100, 25, 0.12);
--wiki-primary-overlay: rgba(228, 100, 25, 0.92);
--wiki-secondary: #3465a4;
--wiki-secondary-subtle: rgba(52, 101, 164, 0.12);
--wiki-secondary-overlay: rgba(52, 101, 164, 0.92);
}

/* =============================================================================
2. CALLOUT BOXES
Light mode uses tinted backgrounds.
Dark mode desaturates them so they don't glow on dark surfaces.
============================================================================= */

.box-info,
.box-warning,
.box-danger,
.box-success {
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 4px 4px 0;
color: var(--color-base);
}

.box-info { background: #e8f4fd; border-left: 4px solid #2196F3; }
.box-warning { background: #fff3cd; border-left: 4px solid #ffc107; }
.box-danger { background: #f8d7da; border-left: 4px solid #dc3545; }
.box-success { background: #d4edda; border-left: 4px solid #28a745; }

.box-neutral {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
padding: 14px 18px;
margin: 12px 0;
border-radius: 4px;
color: var(--color-base);
}

.skin-theme-clientpref-night .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-night .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-night .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-night .box-success { background: rgba(40, 167, 69, 0.15); }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-os .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-os .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-os .box-success { background: rgba(40, 167, 69, 0.15); }
}

/* =============================================================================
3. BADGES
============================================================================= */

.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 3px;
font-size: 85%;
font-weight: bold;
line-height: 1.4;
}

.badge-green { background: #28a745; color: #fff; }
.badge-red { background: #dc3545; color: #fff; }
.badge-yellow { background: #ffc107; color: #212529; }
.badge-blue { background: #17a2b8; color: #fff; }
.badge-grey { background: #6c757d; color: #fff; }
.badge-dark { background: #3d3d3d; color: #fff; }

/* Project badges */
.project-badge-status {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.project-badge-status--active {
background-color: rgba(40,167,69,0.15);
color: #28a745;
}

.project-badge-status--hiatus {
background-color: rgba(255,193,7,0.20);
color: #b8860b;
}

.project-badge-status--completed {
background-color: rgba(52,101,164,0.15);
color: var(--wiki-secondary);
}

.project-badge-status--abandoned {
background-color: rgba(108,117,125,0.15);
color: #6c757d;
}

.project-badge-license {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
color: var(--color-base--subtle);
}
/* =============================================================================
4. TABLE UTILITIES
============================================================================= */

.table-full { width: 100%; }

.row-green { background: #d4edda !important; }
.row-yellow { background: #fff3cd !important; }
.row-red { background: #f8d7da !important; }
.row-blue { background: #e8f4fd !important; }
.row-grey { background: #e9ecef !important; }

.skin-theme-clientpref-night .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-night .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-night .row-grey { background: rgba(108, 117, 125, 0.2) !important; }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-os .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-os .row-grey { background: rgba(108, 117, 125, 0.2) !important; }
}

/* =============================================================================
5. TEXT UTILITIES
============================================================================= */

.indent-1 { margin-left: 2em; }
.indent-2 { margin-left: 4em; }

.text-muted { color: var(--color-base--subtle); font-size: 90%; }
.text-small { font-size: 85%; }

.wiki-code {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
font-size: 90%;
color: var(--color-base);
}

/* =============================================================================
6. CATEGORY PAGES
============================================================================= */

#mw-subcategories h2,
#mw-pages h2,
#mw-category-media h2 {
font-size: 1.1em;
font-weight: bold;
color: var(--wiki-primary);
border-bottom: 2px solid var(--wiki-primary);
padding-bottom: 6px;
margin-bottom: 16px;
}

/* Subcategories — displayed as prominent nav blocks above pages */
#mw-subcategories .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

#mw-subcategories .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-subcategories .mw-category-group ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
border-radius: 4px;
font-size: 0.9em;
font-weight: bold;
color: var(--wiki-primary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}

#mw-subcategories .mw-category-group ul li a:hover {
background: var(--wiki-primary);
color: #fff;
text-decoration: none;
}

/* Letter group heading */
.mw-category-group h3 {
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-base--subtle);
border: none;
margin: 20px 0 8px;
padding: 0;
}

/* Pages — chip layout */
#mw-pages .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

#mw-pages .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-pages .mw-category-group ul li a {
display: flex;
flex-direction: column;
padding: 7px 14px;
min-width: 140px;
max-width: 240px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.88em;
color: var(--color-base);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
line-height: 1.4;
position: relative;
}

#mw-pages .mw-category-group ul li a:hover {
background: var(--color-surface-2);
border-color: var(--wiki-primary);
text-decoration: none;
}

#mw-pages .mw-category-group ul li a .cat-item-name {
font-weight: 600;
color: var(--color-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#mw-pages .mw-category-group ul li a .cat-item-meta {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-top: 2px;
white-space: nowrap;
}

/* Loading shimmer on meta line until API responds */
#mw-pages .mw-category-group ul li a .cat-item-meta:not(.loaded) {
background: var(--color-surface-2);
border-radius: 3px;
color: transparent;
width: 80px;
height: 0.75em;
display: inline-block;
animation: cat-shimmer 1.4s infinite;
}

@keyframes cat-shimmer {
0% { opacity: 0.4; }
50% { opacity: 0.9; }
100% { opacity: 0.4; }
}

/* Red links */
#mw-pages .mw-category-group ul li a.new {
border-style: dashed;
opacity: 0.6;
}

#mw-pages .mw-category-group ul li a.new:hover {
border-color: var(--border-color-base);
background: var(--color-surface-1);
}

/* Search bar injected by JS */
.cat-search-wrap {
margin-bottom: 20px;
}

.cat-search-input {
width: 100%;
max-width: 400px;
padding: 7px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
color: var(--color-base);
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}

.cat-search-input:focus {
border-color: var(--wiki-primary);
}

.cat-search-count {
margin-left: 10px;
font-size: 0.85em;
color: var(--color-base--subtle);
}

/* Page count note */
#mw-pages p,
#mw-subcategories p {
font-size: 0.88em;
color: var(--color-base--subtle);
margin-bottom: 12px;
}

/* =============================================================================
7. Tag-Based Hub — new styles added for unified Projects/Tutorials hubs
============================================================================= */

/* Hub wrapper */
.project-hub-wrapper,
.tutorial-hub-wrapper {
margin-top: 8px;
}

/* Filter bar (search, sort, count) */
.project-hub-filters,
.tutorial-hub-filters {
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.project-hub-search {
flex: 1;
min-width: 200px;
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.9em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
transition: border-color 0.15s;
}
.project-hub-search:focus { border-color: var(--wiki-primary); }

.project-hub-select {
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.88em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.project-hub-select:focus { border-color: var(--wiki-primary); }

.project-hub-count,
.tutorial-hub-count {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-left: auto;
white-space: nowrap;
}

/* Tag cloud */
.project-hub-tagcloud,
.tutorial-hub-tagcloud {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin-bottom: 16px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border-color-base) transparent;
-webkit-overflow-scrolling: touch;
}

.project-hub-tagcloud::-webkit-scrollbar,
.tutorial-hub-tagcloud::-webkit-scrollbar {
height: 3px;
}

.project-hub-tagcloud::-webkit-scrollbar-thumb,
.tutorial-hub-tagcloud::-webkit-scrollbar-thumb {
background: var(--border-color-base);
border-radius: 2px;
}

/* Clickable tag — used in cloud AND on cards */
.js-tag-filter,
.js-tutorial-tag {
display: inline-block;
flex-shrink: 0;
padding: 3px 10px;
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}
.js-tag-filter:hover,
.js-tutorial-tag:hover,
.js-tag-filter.is-active,
.js-tutorial-tag.is-active {
background: var(--wiki-primary);
color: #fff;
border-color: var(--wiki-primary);
}

/* Card grid */
.project-hub-grid,
.tutorial-hub-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
margin-bottom: 8px;
}
.project-hub-grid .project-card-wrap,
.tutorial-hub-grid .tutorial-card-wrap {
font-size: 1rem;
}

/* Empty state */
.project-hub-empty {
width: 100%;
text-align: center;
padding: 40px 20px;
color: var(--color-base--subtle);
font-size: 0.95em;
}

/* Load more button */
.project-hub-loadmore,
.tutorial-hub-loadmore {
display: block;
width: 100%;
margin: 8px 0 16px;
padding: 12px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
font-weight: 700;
color: var(--color-base);
cursor: pointer;
text-align: center;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.project-hub-loadmore:hover,
.tutorial-hub-loadmore:hover {
border-color: var(--wiki-primary);
color: var(--wiki-primary);
background: var(--color-surface-1);
}
/* =============================================================================
8.Hub Main Page Buttons
============================================================================= */

.hub-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
}

.hub-buttons a {
flex: 1;
min-width: 240px;
display: block;
padding: 24px 20px;
border-radius: 6px;
text-align: center;
font-size: 1.1em;
font-weight: 700;
color: #fff !important;
text-decoration: none !important;
line-height: 1.5;
transition: opacity 0.15s, transform 0.15s;
}

.hub-buttons a:hover {
opacity: 0.92;
transform: translateY(-1px);
text-decoration: none !important;
color: #fff !important;
}

.hub-buttons a:first-child {
background: var(--wiki-secondary);
}

.hub-buttons a:last-child {
background: rgba(228, 100, 25, 0.82);
}

.hub-buttons .hub-btn-sub {
display: block;
font-size: 0.78em;
font-weight: 400;
opacity: 0.88;
margin-top: 4px;
}

/* Fix for MediaWiki parser injecting <p> tags inside the container */
.hub-buttons,
.hub-buttons p {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
width: 100%;
}
.hub-buttons p {
margin: 0;
}

/* =============================================================================
9. License Cloud (Projects hub)
============================================================================= */

.project-hub-licensecloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
}

.js-license-filter {
display: inline-block;
padding: 3px 10px;
background: var(--wiki-secondary-subtle);
color: var(--wiki-secondary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}

.js-license-filter:hover,
.js-license-filter.is-active {
background: var(--wiki-secondary);
color: #fff;
border-color: var(--wiki-secondary);
}

/* =============================================================================
10. Tag Tokenizer (Gadget-tagautocomplete.js)
============================================================================= */

.tag-tokenizer {
display: inline-block;
position: relative;
vertical-align: middle;
}

.tag-tokenizer-box {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
min-height: 1.75em;
padding: 2px 4px;
background: var(--color-surface-0, Field);
border: 1px solid var(--border-color-base);
border-radius: 2px;
cursor: text;
font-size: 1em;
box-sizing: border-box;
transition: border-color 0.15s;
}

.tag-tokenizer-box:focus-within {
border-color: var(--wiki-primary);
outline: 1px solid var(--wiki-primary);
}

.tag-token {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
color: var(--wiki-primary);
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
white-space: nowrap;
}

.tag-token-remove {
background: none;
border: none;
color: var(--wiki-primary);
font-size: 1.1em;
line-height: 1;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.1s;
}

.tag-token-remove:hover { opacity: 1; }

.tag-tokenizer-entry {
border: none;
outline: none;
background: transparent;
font-size: 1em;
color: var(--color-base);
padding: 1px 2px;
min-width: 8em;
flex: 1;
}

.tag-tokenizer-dropdown {
position: absolute;
top: calc(100% + 2px);
left: 0;
min-width: 100%;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
list-style: none;
margin: 0;
padding: 4px 0;
z-index: 100;
max-height: 220px;
overflow-y: auto;
}

.tag-tokenizer-dropdown li {
padding: 6px 14px;
font-size: 0.88em;
color: var(--color-base);
cursor: pointer;
transition: background 0.1s;
}

.tag-tokenizer-dropdown li:hover {
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
}

/* =============================================================================
11. Page Forms — consistent input styling to match tag tokenizer aesthetic
============================================================================= */

.formtable input.createboxInput,
.formtable textarea.createboxInput {
background: var(--color-surface-0, Field);
border: 1px solid var(--border-color-base);
border-radius: 2px;
padding: 3px 6px;
font-size: 1em;
color: var(--color-base);
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.15s, outline 0.15s;
}

.formtable input.createboxInput:focus,
.formtable textarea.createboxInput:focus {
border-color: var(--wiki-primary);
outline: 1px solid var(--wiki-primary);
}

.formtable select.createboxInput {
background: var(--color-surface-0, Field);
border: 1px solid var(--border-color-base);
border-radius: 2px;
padding: 3px 6px;
font-size: 1em;
color: var(--color-base);
font-family: inherit;
transition: border-color 0.15s;
}

.formtable select.createboxInput:focus {
border-color: var(--wiki-primary);
outline: 1px solid var(--wiki-primary);
}

.formtable th {
font-size: 0.88em;
font-weight: 700;
color: var(--color-base--subtle);
text-align: left;
padding-right: 16px;
white-space: nowrap;
vertical-align: middle;
}

.formtable td {
padding: 5px 0;
vertical-align: middle;
}

Form:Submit Project

2026-04-05T09:57:42Z

Anthony: Small updates to the input placeholder text.

<includeonly>{{{info|page name=Projects/<ProjectMeta[name]>}}}</includeonly>
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{{for template|ProjectMeta}}}
{| class="formtable"
! Project Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Project Name}}}
|-
! Status:
| {{{field|status|input type=dropdown|values=Active,Hiatus,Completed,Abandoned|default=Active}}}
|-
! License:
| {{{field|license|input type=dropdown|values=CC0 1.0,CC BY 4.0,CC BY-SA 4.0,MIT,Apache 2.0,GPL-3.0,AGPL-3.0,LGPL-3.0,BSD-3-Clause,MPL-2.0,EPL-2.0,EUPL-1.2}}}
|-
! Creator / Team:
| {{{field|creator|input type=text|size=40|placeholder=Your name or team name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown when clicking "read more" on your project card.}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, ambient, synthesis}}}
|-
! Website:
| {{{field|website|input type=text|size=60|placeholder=example.com}}}
|-
! Repository:
| {{{field|repository|input type=text|size=60|placeholder=https://codeberg.org/...}}}
|-
! Extra Field 1 Label:
| {{{field|field1label|input type=text|size=30|placeholder=e.g. Project Lead}}}
|-
! Extra Field 1 Value:
| {{{field|field1value|input type=text|size=30|placeholder=e.g. Aang}}}
|-
! Extra Field 2 Label:
| {{{field|field2label|input type=text|size=30|placeholder=e.g. Forked From}}}
|-
! Extra Field 2 Value:
| {{{field|field2value|input type=text|size=30|placeholder=e.g. Original Project}}}
|-
! Extra Field 3 Label:
| {{{field|field3label|input type=text|size=30}}}
|-
! Extra Field 3 Value:
| {{{field|field3value|input type=text|size=30}}}
|-
! Extra Field 4 Label:
| {{{field|field4label|input type=text|size=30}}}
|-
! Extra Field 4 Value:
| {{{field|field4value|input type=text|size=30}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Project}}} {{{standard input|cancel}}}

MediaWiki:Common.css

2026-04-05T09:49:47Z

Anthony:

/* =============================================================================
MediaWiki:Common.css
UnfinishedProjects Wiki

TABLE OF CONTENTS
0. Nav Forum Link
1. Brand Variables
2. Callout Boxes
3. Badges
4. Table Utilities
5. Text Utilities
6. Category Pages
7. Tag-Based Hub
8. Hub Main Page Buttons
9. License Cloud
10. Tag Tokenizer
============================================================================= */

/* =============================================================================
0. Forum Link
Forum header link — Gadget-sitenav.js
============================================================================= */

.citizen-forum-link {
background: var(--wiki-primary-subtle) !important;
border: 1px solid var(--wiki-primary) !important;
border-radius: 20px !important;
color: var(--wiki-primary) !important;
transition: background 0.15s, color 0.15s !important;
}

.citizen-forum-link:hover {
background: var(--wiki-primary) !important;
color: #fff !important;
}

.citizen-forum-link:hover .citizen-ui-icon {
filter: brightness(0) invert(1);
}

/* =============================================================================
1. BRAND VARIABLES
Edit only these lines to retheme the entire wiki.
subtle = primary at ~12% opacity (tag backgrounds, tints)
overlay = primary at ~92% opacity (card hover overlays)
============================================================================= */

:root {
--wiki-primary: #e46419;
--wiki-primary-subtle: rgba(228, 100, 25, 0.12);
--wiki-primary-overlay: rgba(228, 100, 25, 0.92);
--wiki-secondary: #3465a4;
--wiki-secondary-subtle: rgba(52, 101, 164, 0.12);
--wiki-secondary-overlay: rgba(52, 101, 164, 0.92);
}

/* =============================================================================
2. CALLOUT BOXES
Light mode uses tinted backgrounds.
Dark mode desaturates them so they don't glow on dark surfaces.
============================================================================= */

.box-info,
.box-warning,
.box-danger,
.box-success {
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 4px 4px 0;
color: var(--color-base);
}

.box-info { background: #e8f4fd; border-left: 4px solid #2196F3; }
.box-warning { background: #fff3cd; border-left: 4px solid #ffc107; }
.box-danger { background: #f8d7da; border-left: 4px solid #dc3545; }
.box-success { background: #d4edda; border-left: 4px solid #28a745; }

.box-neutral {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
padding: 14px 18px;
margin: 12px 0;
border-radius: 4px;
color: var(--color-base);
}

.skin-theme-clientpref-night .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-night .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-night .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-night .box-success { background: rgba(40, 167, 69, 0.15); }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-os .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-os .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-os .box-success { background: rgba(40, 167, 69, 0.15); }
}

/* =============================================================================
3. BADGES
============================================================================= */

.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 3px;
font-size: 85%;
font-weight: bold;
line-height: 1.4;
}

.badge-green { background: #28a745; color: #fff; }
.badge-red { background: #dc3545; color: #fff; }
.badge-yellow { background: #ffc107; color: #212529; }
.badge-blue { background: #17a2b8; color: #fff; }
.badge-grey { background: #6c757d; color: #fff; }
.badge-dark { background: #3d3d3d; color: #fff; }

/* Project badges */
.project-badge-status {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.project-badge-status--active {
background-color: rgba(40,167,69,0.15);
color: #28a745;
}

.project-badge-status--hiatus {
background-color: rgba(255,193,7,0.20);
color: #b8860b;
}

.project-badge-status--completed {
background-color: rgba(52,101,164,0.15);
color: var(--wiki-secondary);
}

.project-badge-status--abandoned {
background-color: rgba(108,117,125,0.15);
color: #6c757d;
}

.project-badge-license {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
color: var(--color-base--subtle);
}
/* =============================================================================
4. TABLE UTILITIES
============================================================================= */

.table-full { width: 100%; }

.row-green { background: #d4edda !important; }
.row-yellow { background: #fff3cd !important; }
.row-red { background: #f8d7da !important; }
.row-blue { background: #e8f4fd !important; }
.row-grey { background: #e9ecef !important; }

.skin-theme-clientpref-night .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-night .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-night .row-grey { background: rgba(108, 117, 125, 0.2) !important; }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-os .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-os .row-grey { background: rgba(108, 117, 125, 0.2) !important; }
}

/* =============================================================================
5. TEXT UTILITIES
============================================================================= */

.indent-1 { margin-left: 2em; }
.indent-2 { margin-left: 4em; }

.text-muted { color: var(--color-base--subtle); font-size: 90%; }
.text-small { font-size: 85%; }

.wiki-code {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
font-size: 90%;
color: var(--color-base);
}

/* =============================================================================
6. CATEGORY PAGES
============================================================================= */

#mw-subcategories h2,
#mw-pages h2,
#mw-category-media h2 {
font-size: 1.1em;
font-weight: bold;
color: var(--wiki-primary);
border-bottom: 2px solid var(--wiki-primary);
padding-bottom: 6px;
margin-bottom: 16px;
}

/* Subcategories — displayed as prominent nav blocks above pages */
#mw-subcategories .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

#mw-subcategories .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-subcategories .mw-category-group ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
border-radius: 4px;
font-size: 0.9em;
font-weight: bold;
color: var(--wiki-primary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}

#mw-subcategories .mw-category-group ul li a:hover {
background: var(--wiki-primary);
color: #fff;
text-decoration: none;
}

/* Letter group heading */
.mw-category-group h3 {
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-base--subtle);
border: none;
margin: 20px 0 8px;
padding: 0;
}

/* Pages — chip layout */
#mw-pages .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

#mw-pages .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-pages .mw-category-group ul li a {
display: flex;
flex-direction: column;
padding: 7px 14px;
min-width: 140px;
max-width: 240px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.88em;
color: var(--color-base);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
line-height: 1.4;
position: relative;
}

#mw-pages .mw-category-group ul li a:hover {
background: var(--color-surface-2);
border-color: var(--wiki-primary);
text-decoration: none;
}

#mw-pages .mw-category-group ul li a .cat-item-name {
font-weight: 600;
color: var(--color-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#mw-pages .mw-category-group ul li a .cat-item-meta {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-top: 2px;
white-space: nowrap;
}

/* Loading shimmer on meta line until API responds */
#mw-pages .mw-category-group ul li a .cat-item-meta:not(.loaded) {
background: var(--color-surface-2);
border-radius: 3px;
color: transparent;
width: 80px;
height: 0.75em;
display: inline-block;
animation: cat-shimmer 1.4s infinite;
}

@keyframes cat-shimmer {
0% { opacity: 0.4; }
50% { opacity: 0.9; }
100% { opacity: 0.4; }
}

/* Red links */
#mw-pages .mw-category-group ul li a.new {
border-style: dashed;
opacity: 0.6;
}

#mw-pages .mw-category-group ul li a.new:hover {
border-color: var(--border-color-base);
background: var(--color-surface-1);
}

/* Search bar injected by JS */
.cat-search-wrap {
margin-bottom: 20px;
}

.cat-search-input {
width: 100%;
max-width: 400px;
padding: 7px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
color: var(--color-base);
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}

.cat-search-input:focus {
border-color: var(--wiki-primary);
}

.cat-search-count {
margin-left: 10px;
font-size: 0.85em;
color: var(--color-base--subtle);
}

/* Page count note */
#mw-pages p,
#mw-subcategories p {
font-size: 0.88em;
color: var(--color-base--subtle);
margin-bottom: 12px;
}

/* =============================================================================
7. Tag-Based Hub — new styles added for unified Projects/Tutorials hubs
============================================================================= */

/* Hub wrapper */
.project-hub-wrapper,
.tutorial-hub-wrapper {
margin-top: 8px;
}

/* Filter bar (search, sort, count) */
.project-hub-filters,
.tutorial-hub-filters {
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.project-hub-search {
flex: 1;
min-width: 200px;
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.9em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
transition: border-color 0.15s;
}
.project-hub-search:focus { border-color: var(--wiki-primary); }

.project-hub-select {
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.88em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.project-hub-select:focus { border-color: var(--wiki-primary); }

.project-hub-count,
.tutorial-hub-count {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-left: auto;
white-space: nowrap;
}

/* Tag cloud */
.project-hub-tagcloud,
.tutorial-hub-tagcloud {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin-bottom: 16px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border-color-base) transparent;
-webkit-overflow-scrolling: touch;
}

.project-hub-tagcloud::-webkit-scrollbar,
.tutorial-hub-tagcloud::-webkit-scrollbar {
height: 3px;
}

.project-hub-tagcloud::-webkit-scrollbar-thumb,
.tutorial-hub-tagcloud::-webkit-scrollbar-thumb {
background: var(--border-color-base);
border-radius: 2px;
}

/* Clickable tag — used in cloud AND on cards */
.js-tag-filter,
.js-tutorial-tag {
display: inline-block;
flex-shrink: 0;
padding: 3px 10px;
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}
.js-tag-filter:hover,
.js-tutorial-tag:hover,
.js-tag-filter.is-active,
.js-tutorial-tag.is-active {
background: var(--wiki-primary);
color: #fff;
border-color: var(--wiki-primary);
}

/* Card grid */
.project-hub-grid,
.tutorial-hub-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
margin-bottom: 8px;
}
.project-hub-grid .project-card-wrap,
.tutorial-hub-grid .tutorial-card-wrap {
font-size: 1rem;
}

/* Empty state */
.project-hub-empty {
width: 100%;
text-align: center;
padding: 40px 20px;
color: var(--color-base--subtle);
font-size: 0.95em;
}

/* Load more button */
.project-hub-loadmore,
.tutorial-hub-loadmore {
display: block;
width: 100%;
margin: 8px 0 16px;
padding: 12px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
font-weight: 700;
color: var(--color-base);
cursor: pointer;
text-align: center;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.project-hub-loadmore:hover,
.tutorial-hub-loadmore:hover {
border-color: var(--wiki-primary);
color: var(--wiki-primary);
background: var(--color-surface-1);
}
/* =============================================================================
8.Hub Main Page Buttons
============================================================================= */

.hub-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
}

.hub-buttons a {
flex: 1;
min-width: 240px;
display: block;
padding: 24px 20px;
border-radius: 6px;
text-align: center;
font-size: 1.1em;
font-weight: 700;
color: #fff !important;
text-decoration: none !important;
line-height: 1.5;
transition: opacity 0.15s, transform 0.15s;
}

.hub-buttons a:hover {
opacity: 0.92;
transform: translateY(-1px);
text-decoration: none !important;
color: #fff !important;
}

.hub-buttons a:first-child {
background: var(--wiki-secondary);
}

.hub-buttons a:last-child {
background: rgba(228, 100, 25, 0.82);
}

.hub-buttons .hub-btn-sub {
display: block;
font-size: 0.78em;
font-weight: 400;
opacity: 0.88;
margin-top: 4px;
}

/* Fix for MediaWiki parser injecting <p> tags inside the container */
.hub-buttons,
.hub-buttons p {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
width: 100%;
}
.hub-buttons p {
margin: 0;
}

/* =============================================================================
9. License Cloud (Projects hub)
============================================================================= */

.project-hub-licensecloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
}

.js-license-filter {
display: inline-block;
padding: 3px 10px;
background: var(--wiki-secondary-subtle);
color: var(--wiki-secondary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}

.js-license-filter:hover,
.js-license-filter.is-active {
background: var(--wiki-secondary);
color: #fff;
border-color: var(--wiki-secondary);
}

/* =============================================================================
10. Tag Tokenizer (Gadget-tagautocomplete.js)
============================================================================= */

.tag-tokenizer {
display: inline-block;
position: relative;
vertical-align: middle;
}

.tag-tokenizer-box {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
min-height: 1.75em;
padding: 2px 4px;
background: var(--color-surface-0, Field);
border: 1px solid var(--border-color-base);
border-radius: 2px;
cursor: text;
font-size: 1em;
box-sizing: border-box;
transition: border-color 0.15s;
}

.tag-tokenizer-box:focus-within {
border-color: var(--wiki-primary);
outline: 1px solid var(--wiki-primary);
}

.tag-token {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
color: var(--wiki-primary);
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
white-space: nowrap;
}

.tag-token-remove {
background: none;
border: none;
color: var(--wiki-primary);
font-size: 1.1em;
line-height: 1;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.1s;
}

.tag-token-remove:hover { opacity: 1; }

.tag-tokenizer-entry {
border: none;
outline: none;
background: transparent;
font-size: 1em;
color: var(--color-base);
padding: 1px 2px;
min-width: 8em;
flex: 1;
}

.tag-tokenizer-dropdown {
position: absolute;
top: calc(100% + 2px);
left: 0;
min-width: 100%;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
list-style: none;
margin: 0;
padding: 4px 0;
z-index: 100;
max-height: 220px;
overflow-y: auto;
}

.tag-tokenizer-dropdown li {
padding: 6px 14px;
font-size: 0.88em;
color: var(--color-base);
cursor: pointer;
transition: background 0.1s;
}

.tag-tokenizer-dropdown li:hover {
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
}

Form:Submit Tutorial

2026-04-05T09:47:20Z

Anthony: Remove nav from form

<includeonly>{{{info|page name=Tutorials/<TutorialMeta[name]>}}}</includeonly>
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{{for template|TutorialMeta}}}
{| class="formtable"
! Tutorial Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Tutorial Name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over the tutorial card.}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, beginner, recording}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Tutorial}}} {{{standard input|cancel}}}

Form:Submit Project

2026-04-05T09:46:53Z

Anthony: Remove Nav from form

<includeonly>{{{info|page name=Projects/<ProjectMeta[name]>}}}</includeonly>
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{{for template|ProjectMeta}}}
{| class="formtable"
! Project Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Project Name}}}
|-
! Status:
| {{{field|status|input type=dropdown|values=Active,Hiatus,Completed,Abandoned|default=Active}}}
|-
! License:
| {{{field|license|input type=dropdown|values=CC0 1.0,CC BY 4.0,CC BY-SA 4.0,MIT,Apache 2.0,GPL-3.0,AGPL-3.0,LGPL-3.0,BSD-3-Clause,MPL-2.0,EPL-2.0,EUPL-1.2}}}
|-
! Creator / Team:
| {{{field|creator|input type=text|size=40|placeholder=Your name or team name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over your project card.}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, ambient, synthesis}}}
|-
! Website:
| {{{field|website|input type=text|size=60|placeholder=example.com}}}
|-
! Repository:
| {{{field|repository|input type=text|size=60|placeholder=https://codeberg.org/...}}}
|-
! Extra Field 1 Label:
| {{{field|field1label|input type=text|size=30|placeholder=e.g. DAW}}}
|-
! Extra Field 1 Value:
| {{{field|field1value|input type=text|size=30|placeholder=e.g. Ableton}}}
|-
! Extra Field 2 Label:
| {{{field|field2label|input type=text|size=30|placeholder=e.g. Genre}}}
|-
! Extra Field 2 Value:
| {{{field|field2value|input type=text|size=30|placeholder=e.g. Ambient}}}
|-
! Extra Field 3 Label:
| {{{field|field3label|input type=text|size=30}}}
|-
! Extra Field 3 Value:
| {{{field|field3value|input type=text|size=30}}}
|-
! Extra Field 4 Label:
| {{{field|field4label|input type=text|size=30}}}
|-
! Extra Field 4 Value:
| {{{field|field4value|input type=text|size=30}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Project}}} {{{standard input|cancel}}}

MediaWiki:Gadgets-definition

2026-04-05T09:23:51Z

Anthony: Added mediawiki.util to tagautocomplete

MediaWiki:Gadget-tagautocomplete.js

2026-04-05T09:22:56Z

Anthony: Previous Version did not work - hopefully this one does.

/* =============================================================================
Gadget-tagautocomplete.js
Tokenized tag input with autocomplete on Submit Project / Tutorial forms.
Pulls existing tags from the Projects and Tutorials Cargo tables.
============================================================================= */
( function () {

// Only run on Special:FormEdit/* pages
if ( mw.config.get( 'wgCanonicalSpecialPageName' ) !== 'FormEdit' ) { return; }

$( function () {

// ── Find the tags input by name attribute ────────────────────────────
// Page Forms names inputs as TemplateName[fieldname] — target [tags]
// specifically. We use .filter() because jQuery CSS attribute selectors
// require the attribute to be explicitly present in the HTML; Page Forms
// does not write type="text" on its inputs, so [type="text"] never matches.
var $raw = $( 'input' ).filter( function () {
var name = $( this ).attr( 'name' ) || '';
return name === 'ProjectMeta[tags]' || name === 'TutorialMeta[tags]';
} );

if ( !$raw.length ) { return; }

// ── Load all existing tags from Cargo ────────────────────────────────
var allTags = [];

function fetchTags( table ) {
return $.getJSON( mw.util.wikiScript( 'api' ), {
action : 'cargoquery',
tables : table,
fields : 'tags',
limit : 500,
format : 'json'
} ).then( function ( data ) {
( data.cargoquery || [] ).forEach( function ( r ) {
( r.title.tags || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim().toLowerCase();
if ( t && allTags.indexOf( t ) === -1 ) {
allTags.push( t );
}
} );
} );
} );
}

$.when(
fetchTags( 'Projects' ),
fetchTags( 'Tutorials' )
).then( function () {
allTags.sort();
$raw.each( function () {
initTokenizer( $( this ) );
} );
} );

// ── Tokenizer ────────────────────────────────────────────────────────
function initTokenizer( $input ) {
$input.hide();

var $wrap = $( '<div>' ).addClass( 'tag-tokenizer' ).insertAfter( $input );
var $box = $( '<div>' ).addClass( 'tag-tokenizer-box' ).appendTo( $wrap );
var $entry = $( '<input>' ).attr( {
type : 'text',
placeholder : 'Type a tag and press Enter or comma\u2026',
autocomplete: 'off'
} ).addClass( 'tag-tokenizer-entry' ).appendTo( $box );
var $dropdown = $( '<ul>' ).addClass( 'tag-tokenizer-dropdown' ).hide().appendTo( $wrap );

// Seed from existing hidden input value (edit mode)
var existing = ( $input.val() || '' ).split( ',' )
.map( function ( t ) { return t.trim(); } )
.filter( Boolean );
existing.forEach( addToken );
syncHidden();

function addToken( tag ) {
tag = tag.trim().toLowerCase().replace( /\s+/g, '-' );
if ( !tag ) { return; }
if ( $box.find( '.tag-token' ).filter( function () {
return $( this ).data( 'tag' ) === tag;
} ).length ) { return; }

var $token = $( '<span>' ).addClass( 'tag-token' ).text( tag ).attr( 'data-tag', tag );
var $x = $( '<button>' )
.attr( 'type', 'button' )
.addClass( 'tag-token-remove' )
.text( '\u00d7' )
.on( 'click', function () {
$token.remove();
syncHidden();
} );
$token.append( $x ).insertBefore( $entry );
syncHidden();
}

function syncHidden() {
var tags = [];
$box.find( '.tag-token' ).each( function () {
tags.push( $( this ).data( 'tag' ) );
} );
$input.val( tags.join( ', ' ) );
}

function showDropdown( query ) {
var active = [];
$box.find( '.tag-token' ).each( function () {
active.push( $( this ).data( 'tag' ) );
} );

var matches = allTags.filter( function ( t ) {
return t.indexOf( query ) === 0 && active.indexOf( t ) === -1;
} ).slice( 0, 8 );

$dropdown.empty();
if ( !matches.length ) { $dropdown.hide(); return; }

matches.forEach( function ( tag ) {
$( '<li>' ).text( tag ).on( 'mousedown', function ( e ) {
e.preventDefault();
addToken( tag );
$entry.val( '' );
$dropdown.hide();
} ).appendTo( $dropdown );
} );
$dropdown.show();
}

$entry.on( 'input', function () {
var val = $entry.val();
if ( /,$/.test( val ) ) {
addToken( val.replace( /,$/, '' ) );
$entry.val( '' );
$dropdown.hide();
return;
}
var q = val.trim().toLowerCase();
if ( q.length >= 1 ) { showDropdown( q ); } else { $dropdown.hide(); }
} );

$entry.on( 'keydown', function ( e ) {
if ( e.key === 'Enter' ) {
e.preventDefault();
var first = $dropdown.find( 'li:first' ).text();
addToken( first || $entry.val() );
$entry.val( '' );
$dropdown.hide();
}
if ( e.key === 'Backspace' && $entry.val() === '' ) {
$box.find( '.tag-token' ).last().remove();
syncHidden();
}
} );

$entry.on( 'blur', function () {
setTimeout( function () { $dropdown.hide(); }, 150 );
var val = $entry.val().trim();
if ( val ) { addToken( val ); $entry.val( '' ); }
} );

$box.on( 'click', function () { $entry.trigger( 'focus' ); } );
}

} );

}() );

MediaWiki:Gadget-tagautocomplete.js

2026-04-05T09:11:55Z

Anthony:

/* =============================================================================
Gadget-tagautocomplete.js
Adds tokenized tag input with autocomplete on Submit Project / Submit Tutorial
forms. Pulls existing tags from the Projects and Tutorials Cargo tables.
============================================================================= */
( function () {

var pageName = mw.config.get( 'wgPageName' ) || '';
if ( pageName.indexOf( 'Special:FormEdit' ) === -1 &&
pageName.indexOf( 'Special:RunQuery' ) === -1 ) { return; }

$( function () {

// ── Find the tags input ──────────────────────────────────────────────
// Page Forms renders inputs near their label; match by placeholder text.
var $raw = $( 'input[type="text"]' ).filter( function () {
var ph = ( $( this ).attr( 'placeholder' ) || '' ).toLowerCase();
return ph.indexOf( 'tag' ) !== -1;
} );
if ( !$raw.length ) { return; }

// ── Load all existing tags from Cargo ────────────────────────────────
var allTags = [];

function fetchTags( table, field ) {
return $.getJSON( mw.util.wikiScript( 'api' ), {
action : 'cargoquery',
tables : table,
fields : field,
limit : 500,
format : 'json'
} ).then( function ( data ) {
( data.cargoquery || [] ).forEach( function ( r ) {
( r.title[ field ] || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim().toLowerCase();
if ( t && allTags.indexOf( t ) === -1 ) {
allTags.push( t );
}
} );
} );
} );
}

$.when(
fetchTags( 'Projects', 'tags' ),
fetchTags( 'Tutorials', 'tags' )
).then( function () {
allTags.sort();
$raw.each( function () {
initTokenizer( $( this ) );
} );
} );

// ── Tokenizer ────────────────────────────────────────────────────────
function initTokenizer( $input ) {
// Build wrapper to sit alongside the original (now hidden) input
$input.hide();

var $wrap = $( '<div>' ).addClass( 'tag-tokenizer' ).insertAfter( $input );
var $box = $( '<div>' ).addClass( 'tag-tokenizer-box' ).appendTo( $wrap );
var $entry = $( '<input>' ).attr( {
type : 'text',
placeholder : 'Type a tag and press Enter or comma\u2026',
autocomplete: 'off'
} ).addClass( 'tag-tokenizer-entry' ).appendTo( $box );
var $dropdown = $( '<ul>' ).addClass( 'tag-tokenizer-dropdown' ).hide().appendTo( $wrap );

// Seed from any value already in the hidden input (edit mode)
var existing = ( $input.val() || '' ).split( ',' ).map( function ( t ) { return t.trim(); } ).filter( Boolean );
existing.forEach( function ( tag ) { addToken( tag ); } );
syncHidden();

// ── Token rendering ──────────────────────────────────────────────
function addToken( tag ) {
tag = tag.trim().toLowerCase().replace( /\s+/g, '-' );
if ( !tag ) { return; }
// Prevent duplicates
if ( $box.find( '.tag-token' ).filter( function () {
return $( this ).data( 'tag' ) === tag;
} ).length ) { return; }

var $token = $( '<span>' ).addClass( 'tag-token' ).text( tag ).attr( 'data-tag', tag );
var $x = $( '<button>' ).attr( 'type', 'button' ).addClass( 'tag-token-remove' ).text( '\u00d7' );
$token.append( $x );
$x.on( 'click', function () {
$token.remove();
syncHidden();
} );
$token.insertBefore( $entry );
syncHidden();
}

function syncHidden() {
var tags = [];
$box.find( '.tag-token' ).each( function () {
tags.push( $( this ).data( 'tag' ) );
} );
$input.val( tags.join( ', ' ) );
}

// ── Autocomplete dropdown ────────────────────────────────────────
function showDropdown( query ) {
var existing = [];
$box.find( '.tag-token' ).each( function () {
existing.push( $( this ).data( 'tag' ) );
} );

var matches = allTags.filter( function ( t ) {
return t.indexOf( query ) === 0 && existing.indexOf( t ) === -1;
} ).slice( 0, 8 );

$dropdown.empty();
if ( !matches.length ) { $dropdown.hide(); return; }

matches.forEach( function ( tag ) {
$( '<li>' ).text( tag ).on( 'mousedown', function ( e ) {
e.preventDefault(); // keep focus in $entry
addToken( tag );
$entry.val( '' );
$dropdown.hide();
} ).appendTo( $dropdown );
} );
$dropdown.show();
}

// ── Events ───────────────────────────────────────────────────────
$entry.on( 'input', function () {
var val = $entry.val();
// Comma or space after a word = commit tag
if ( /[,]$/.test( val ) ) {
addToken( val.replace( /,$/, '' ) );
$entry.val( '' );
$dropdown.hide();
return;
}
var q = val.trim().toLowerCase();
if ( q.length >= 1 ) { showDropdown( q ); } else { $dropdown.hide(); }
} );

$entry.on( 'keydown', function ( e ) {
// Enter = commit current text or first suggestion
if ( e.key === 'Enter' ) {
e.preventDefault();
var first = $dropdown.find( 'li' ).first().text();
addToken( first || $entry.val() );
$entry.val( '' );
$dropdown.hide();
}
// Backspace on empty entry = remove last token
if ( e.key === 'Backspace' && $entry.val() === '' ) {
$box.find( '.tag-token' ).last().remove();
syncHidden();
}
} );

$entry.on( 'blur', function () {
setTimeout( function () { $dropdown.hide(); }, 150 );
// Commit anything partially typed on blur
var val = $entry.val().trim();
if ( val ) { addToken( val ); $entry.val( '' ); }
} );

$box.on( 'click', function () { $entry.trigger( 'focus' ); } );
}

} );

}() );

MediaWiki:Common.css

2026-04-05T08:53:04Z

Anthony:

/* =============================================================================
MediaWiki:Common.css
UnfinishedProjects Wiki

TABLE OF CONTENTS
0. Nav Forum Link
1. Brand Variables
2. Callout Boxes
3. Badges
4. Table Utilities
5. Text Utilities
6. Category Pages
7. Tag-Based Hub
8. Hub Main Page Buttons
9. License Cloud
10. Tag Tokenizer
============================================================================= */

/* =============================================================================
0. Forum Link
Forum header link — Gadget-sitenav.js
============================================================================= */

.citizen-forum-link {
background: var(--wiki-primary-subtle) !important;
border: 1px solid var(--wiki-primary) !important;
border-radius: 20px !important;
color: var(--wiki-primary) !important;
transition: background 0.15s, color 0.15s !important;
}

.citizen-forum-link:hover {
background: var(--wiki-primary) !important;
color: #fff !important;
}

.citizen-forum-link:hover .citizen-ui-icon {
filter: brightness(0) invert(1);
}

/* =============================================================================
1. BRAND VARIABLES
Edit only these lines to retheme the entire wiki.
subtle = primary at ~12% opacity (tag backgrounds, tints)
overlay = primary at ~92% opacity (card hover overlays)
============================================================================= */

:root {
--wiki-primary: #e46419;
--wiki-primary-subtle: rgba(228, 100, 25, 0.12);
--wiki-primary-overlay: rgba(228, 100, 25, 0.92);
--wiki-secondary: #3465a4;
--wiki-secondary-subtle: rgba(52, 101, 164, 0.12);
--wiki-secondary-overlay: rgba(52, 101, 164, 0.92);
}

/* =============================================================================
2. CALLOUT BOXES
Light mode uses tinted backgrounds.
Dark mode desaturates them so they don't glow on dark surfaces.
============================================================================= */

.box-info,
.box-warning,
.box-danger,
.box-success {
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 4px 4px 0;
color: var(--color-base);
}

.box-info { background: #e8f4fd; border-left: 4px solid #2196F3; }
.box-warning { background: #fff3cd; border-left: 4px solid #ffc107; }
.box-danger { background: #f8d7da; border-left: 4px solid #dc3545; }
.box-success { background: #d4edda; border-left: 4px solid #28a745; }

.box-neutral {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
padding: 14px 18px;
margin: 12px 0;
border-radius: 4px;
color: var(--color-base);
}

.skin-theme-clientpref-night .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-night .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-night .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-night .box-success { background: rgba(40, 167, 69, 0.15); }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .box-info { background: rgba(33, 150, 243, 0.15); }
.skin-theme-clientpref-os .box-warning { background: rgba(255, 193, 7, 0.15); }
.skin-theme-clientpref-os .box-danger { background: rgba(220, 53, 69, 0.15); }
.skin-theme-clientpref-os .box-success { background: rgba(40, 167, 69, 0.15); }
}

/* =============================================================================
3. BADGES
============================================================================= */

.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 3px;
font-size: 85%;
font-weight: bold;
line-height: 1.4;
}

.badge-green { background: #28a745; color: #fff; }
.badge-red { background: #dc3545; color: #fff; }
.badge-yellow { background: #ffc107; color: #212529; }
.badge-blue { background: #17a2b8; color: #fff; }
.badge-grey { background: #6c757d; color: #fff; }
.badge-dark { background: #3d3d3d; color: #fff; }

/* Project badges */
.project-badge-status {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.project-badge-status--active {
background-color: rgba(40,167,69,0.15);
color: #28a745;
}

.project-badge-status--hiatus {
background-color: rgba(255,193,7,0.20);
color: #b8860b;
}

.project-badge-status--completed {
background-color: rgba(52,101,164,0.15);
color: var(--wiki-secondary);
}

.project-badge-status--abandoned {
background-color: rgba(108,117,125,0.15);
color: #6c757d;
}

.project-badge-license {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 999px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
color: var(--color-base--subtle);
}
/* =============================================================================
4. TABLE UTILITIES
============================================================================= */

.table-full { width: 100%; }

.row-green { background: #d4edda !important; }
.row-yellow { background: #fff3cd !important; }
.row-red { background: #f8d7da !important; }
.row-blue { background: #e8f4fd !important; }
.row-grey { background: #e9ecef !important; }

.skin-theme-clientpref-night .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-night .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-night .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-night .row-grey { background: rgba(108, 117, 125, 0.2) !important; }

@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .row-green { background: rgba(40, 167, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-yellow { background: rgba(255, 193, 7, 0.2) !important; }
.skin-theme-clientpref-os .row-red { background: rgba(220, 53, 69, 0.2) !important; }
.skin-theme-clientpref-os .row-blue { background: rgba(33, 150, 243, 0.2) !important; }
.skin-theme-clientpref-os .row-grey { background: rgba(108, 117, 125, 0.2) !important; }
}

/* =============================================================================
5. TEXT UTILITIES
============================================================================= */

.indent-1 { margin-left: 2em; }
.indent-2 { margin-left: 4em; }

.text-muted { color: var(--color-base--subtle); font-size: 90%; }
.text-small { font-size: 85%; }

.wiki-code {
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
font-size: 90%;
color: var(--color-base);
}

/* =============================================================================
6. CATEGORY PAGES
============================================================================= */

#mw-subcategories h2,
#mw-pages h2,
#mw-category-media h2 {
font-size: 1.1em;
font-weight: bold;
color: var(--wiki-primary);
border-bottom: 2px solid var(--wiki-primary);
padding-bottom: 6px;
margin-bottom: 16px;
}

/* Subcategories — displayed as prominent nav blocks above pages */
#mw-subcategories .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

#mw-subcategories .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-subcategories .mw-category-group ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
border-radius: 4px;
font-size: 0.9em;
font-weight: bold;
color: var(--wiki-primary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}

#mw-subcategories .mw-category-group ul li a:hover {
background: var(--wiki-primary);
color: #fff;
text-decoration: none;
}

/* Letter group heading */
.mw-category-group h3 {
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-base--subtle);
border: none;
margin: 20px 0 8px;
padding: 0;
}

/* Pages — chip layout */
#mw-pages .mw-category-group ul {
list-style: none;
margin: 0 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

#mw-pages .mw-category-group ul li {
margin: 0;
padding: 0;
}

#mw-pages .mw-category-group ul li a {
display: flex;
flex-direction: column;
padding: 7px 14px;
min-width: 140px;
max-width: 240px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.88em;
color: var(--color-base);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
line-height: 1.4;
position: relative;
}

#mw-pages .mw-category-group ul li a:hover {
background: var(--color-surface-2);
border-color: var(--wiki-primary);
text-decoration: none;
}

#mw-pages .mw-category-group ul li a .cat-item-name {
font-weight: 600;
color: var(--color-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#mw-pages .mw-category-group ul li a .cat-item-meta {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-top: 2px;
white-space: nowrap;
}

/* Loading shimmer on meta line until API responds */
#mw-pages .mw-category-group ul li a .cat-item-meta:not(.loaded) {
background: var(--color-surface-2);
border-radius: 3px;
color: transparent;
width: 80px;
height: 0.75em;
display: inline-block;
animation: cat-shimmer 1.4s infinite;
}

@keyframes cat-shimmer {
0% { opacity: 0.4; }
50% { opacity: 0.9; }
100% { opacity: 0.4; }
}

/* Red links */
#mw-pages .mw-category-group ul li a.new {
border-style: dashed;
opacity: 0.6;
}

#mw-pages .mw-category-group ul li a.new:hover {
border-color: var(--border-color-base);
background: var(--color-surface-1);
}

/* Search bar injected by JS */
.cat-search-wrap {
margin-bottom: 20px;
}

.cat-search-input {
width: 100%;
max-width: 400px;
padding: 7px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
color: var(--color-base);
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
}

.cat-search-input:focus {
border-color: var(--wiki-primary);
}

.cat-search-count {
margin-left: 10px;
font-size: 0.85em;
color: var(--color-base--subtle);
}

/* Page count note */
#mw-pages p,
#mw-subcategories p {
font-size: 0.88em;
color: var(--color-base--subtle);
margin-bottom: 12px;
}

/* =============================================================================
7. Tag-Based Hub — new styles added for unified Projects/Tutorials hubs
============================================================================= */

/* Hub wrapper */
.project-hub-wrapper,
.tutorial-hub-wrapper {
margin-top: 8px;
}

/* Filter bar (search, sort, count) */
.project-hub-filters,
.tutorial-hub-filters {
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.project-hub-search {
flex: 1;
min-width: 200px;
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.9em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
transition: border-color 0.15s;
}
.project-hub-search:focus { border-color: var(--wiki-primary); }

.project-hub-select {
padding: 6px 10px;
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 0.88em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.project-hub-select:focus { border-color: var(--wiki-primary); }

.project-hub-count,
.tutorial-hub-count {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-left: auto;
white-space: nowrap;
}

/* Tag cloud */
.project-hub-tagcloud,
.tutorial-hub-tagcloud {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin-bottom: 16px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border-color-base) transparent;
-webkit-overflow-scrolling: touch;
}

.project-hub-tagcloud::-webkit-scrollbar,
.tutorial-hub-tagcloud::-webkit-scrollbar {
height: 3px;
}

.project-hub-tagcloud::-webkit-scrollbar-thumb,
.tutorial-hub-tagcloud::-webkit-scrollbar-thumb {
background: var(--border-color-base);
border-radius: 2px;
}

/* Clickable tag — used in cloud AND on cards */
.js-tag-filter,
.js-tutorial-tag {
display: inline-block;
flex-shrink: 0;
padding: 3px 10px;
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}
.js-tag-filter:hover,
.js-tutorial-tag:hover,
.js-tag-filter.is-active,
.js-tutorial-tag.is-active {
background: var(--wiki-primary);
color: #fff;
border-color: var(--wiki-primary);
}

/* Card grid */
.project-hub-grid,
.tutorial-hub-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
margin-bottom: 8px;
}
.project-hub-grid .project-card-wrap,
.tutorial-hub-grid .tutorial-card-wrap {
font-size: 1rem;
}

/* Empty state */
.project-hub-empty {
width: 100%;
text-align: center;
padding: 40px 20px;
color: var(--color-base--subtle);
font-size: 0.95em;
}

/* Load more button */
.project-hub-loadmore,
.tutorial-hub-loadmore {
display: block;
width: 100%;
margin: 8px 0 16px;
padding: 12px;
background: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px;
font-size: 0.9em;
font-weight: 700;
color: var(--color-base);
cursor: pointer;
text-align: center;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.project-hub-loadmore:hover,
.tutorial-hub-loadmore:hover {
border-color: var(--wiki-primary);
color: var(--wiki-primary);
background: var(--color-surface-1);
}
/* =============================================================================
8.Hub Main Page Buttons
============================================================================= */

.hub-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
}

.hub-buttons a {
flex: 1;
min-width: 240px;
display: block;
padding: 24px 20px;
border-radius: 6px;
text-align: center;
font-size: 1.1em;
font-weight: 700;
color: #fff !important;
text-decoration: none !important;
line-height: 1.5;
transition: opacity 0.15s, transform 0.15s;
}

.hub-buttons a:hover {
opacity: 0.92;
transform: translateY(-1px);
text-decoration: none !important;
color: #fff !important;
}

.hub-buttons a:first-child {
background: var(--wiki-secondary);
}

.hub-buttons a:last-child {
background: rgba(228, 100, 25, 0.82);
}

.hub-buttons .hub-btn-sub {
display: block;
font-size: 0.78em;
font-weight: 400;
opacity: 0.88;
margin-top: 4px;
}

/* Fix for MediaWiki parser injecting <p> tags inside the container */
.hub-buttons,
.hub-buttons p {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
width: 100%;
}
.hub-buttons p {
margin: 0;
}

/* =============================================================================
9. License Cloud (Projects hub)
============================================================================= */

.project-hub-licensecloud {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding: 10px 14px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
}

.js-license-filter {
display: inline-block;
padding: 3px 10px;
background: var(--wiki-secondary-subtle);
color: var(--wiki-secondary);
border: 1px solid transparent;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
}

.js-license-filter:hover,
.js-license-filter.is-active {
background: var(--wiki-secondary);
color: #fff;
border-color: var(--wiki-secondary);
}
/* =============================================================================
10. Tag Tokenizer (Gadget-tagautocomplete.js)
============================================================================= */

.tag-tokenizer {
position: relative;
width: 100%;
}

.tag-tokenizer-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-height: 38px;
padding: 5px 8px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 3px;
cursor: text;
transition: border-color 0.15s;
box-sizing: border-box;
}

.tag-tokenizer-box:focus-within {
border-color: var(--wiki-primary);
}

.tag-token {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--wiki-primary-subtle);
border: 1px solid var(--wiki-primary);
color: var(--wiki-primary);
border-radius: 20px;
font-size: 0.82em;
font-weight: 600;
white-space: nowrap;
}

.tag-token-remove {
background: none;
border: none;
color: var(--wiki-primary);
font-size: 1.1em;
line-height: 1;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.1s;
}

.tag-token-remove:hover { opacity: 1; }

.tag-tokenizer-entry {
flex: 1;
min-width: 160px;
border: none;
outline: none;
background: transparent;
font-size: 0.9em;
color: var(--color-base);
padding: 2px 4px;
}

.tag-tokenizer-dropdown {
position: absolute;
top: calc(100% + 3px);
left: 0;
right: 0;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
list-style: none;
margin: 0;
padding: 4px 0;
z-index: 100;
max-height: 220px;
overflow-y: auto;
}

.tag-tokenizer-dropdown li {
padding: 7px 14px;
font-size: 0.88em;
color: var(--color-base);
cursor: pointer;
transition: background 0.1s;
}

.tag-tokenizer-dropdown li:hover {
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
}

MediaWiki:Gadget-tagautocomplete.js

2026-04-05T08:52:04Z

Anthony: Created page with "/* ============================================================================= Gadget-tagautocomplete.js Adds tokenized tag input with autocomplete on Submit Project / Submit Tutorial forms. Pulls existing tags from the Projects and Tutorials Cargo tables. ============================================================================= */ ( function () { var FORM_PAGES = [ 'Form:Submit_Project', 'Form:Submit_Tutorial' ]; if ( FORM_PAGES.indexOf( mw.co..."

/* =============================================================================
Gadget-tagautocomplete.js
Adds tokenized tag input with autocomplete on Submit Project / Submit Tutorial
forms. Pulls existing tags from the Projects and Tutorials Cargo tables.
============================================================================= */
( function () {

var FORM_PAGES = [ 'Form:Submit_Project', 'Form:Submit_Tutorial' ];
if ( FORM_PAGES.indexOf( mw.config.get( 'wgPageName' ) ) === -1 ) { return; }

$( function () {

// ── Find the tags input ──────────────────────────────────────────────
// Page Forms renders inputs near their label; match by placeholder text.
var $raw = $( 'input[type="text"]' ).filter( function () {
var ph = ( $( this ).attr( 'placeholder' ) || '' ).toLowerCase();
return ph.indexOf( 'tag' ) !== -1;
} );
if ( !$raw.length ) { return; }

// ── Load all existing tags from Cargo ────────────────────────────────
var allTags = [];

function fetchTags( table, field ) {
return $.getJSON( mw.util.wikiScript( 'api' ), {
action : 'cargoquery',
tables : table,
fields : field,
limit : 500,
format : 'json'
} ).then( function ( data ) {
( data.cargoquery || [] ).forEach( function ( r ) {
( r.title[ field ] || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim().toLowerCase();
if ( t && allTags.indexOf( t ) === -1 ) {
allTags.push( t );
}
} );
} );
} );
}

$.when(
fetchTags( 'Projects', 'tags' ),
fetchTags( 'Tutorials', 'tags' )
).then( function () {
allTags.sort();
$raw.each( function () {
initTokenizer( $( this ) );
} );
} );

// ── Tokenizer ────────────────────────────────────────────────────────
function initTokenizer( $input ) {
// Build wrapper to sit alongside the original (now hidden) input
$input.hide();

var $wrap = $( '<div>' ).addClass( 'tag-tokenizer' ).insertAfter( $input );
var $box = $( '<div>' ).addClass( 'tag-tokenizer-box' ).appendTo( $wrap );
var $entry = $( '<input>' ).attr( {
type : 'text',
placeholder : 'Type a tag and press Enter or comma\u2026',
autocomplete: 'off'
} ).addClass( 'tag-tokenizer-entry' ).appendTo( $box );
var $dropdown = $( '<ul>' ).addClass( 'tag-tokenizer-dropdown' ).hide().appendTo( $wrap );

// Seed from any value already in the hidden input (edit mode)
var existing = ( $input.val() || '' ).split( ',' ).map( function ( t ) { return t.trim(); } ).filter( Boolean );
existing.forEach( function ( tag ) { addToken( tag ); } );
syncHidden();

// ── Token rendering ──────────────────────────────────────────────
function addToken( tag ) {
tag = tag.trim().toLowerCase().replace( /\s+/g, '-' );
if ( !tag ) { return; }
// Prevent duplicates
if ( $box.find( '.tag-token' ).filter( function () {
return $( this ).data( 'tag' ) === tag;
} ).length ) { return; }

var $token = $( '<span>' ).addClass( 'tag-token' ).text( tag ).attr( 'data-tag', tag );
var $x = $( '<button>' ).attr( 'type', 'button' ).addClass( 'tag-token-remove' ).text( '\u00d7' );
$token.append( $x );
$x.on( 'click', function () {
$token.remove();
syncHidden();
} );
$token.insertBefore( $entry );
syncHidden();
}

function syncHidden() {
var tags = [];
$box.find( '.tag-token' ).each( function () {
tags.push( $( this ).data( 'tag' ) );
} );
$input.val( tags.join( ', ' ) );
}

// ── Autocomplete dropdown ────────────────────────────────────────
function showDropdown( query ) {
var existing = [];
$box.find( '.tag-token' ).each( function () {
existing.push( $( this ).data( 'tag' ) );
} );

var matches = allTags.filter( function ( t ) {
return t.indexOf( query ) === 0 && existing.indexOf( t ) === -1;
} ).slice( 0, 8 );

$dropdown.empty();
if ( !matches.length ) { $dropdown.hide(); return; }

matches.forEach( function ( tag ) {
$( '<li>' ).text( tag ).on( 'mousedown', function ( e ) {
e.preventDefault(); // keep focus in $entry
addToken( tag );
$entry.val( '' );
$dropdown.hide();
} ).appendTo( $dropdown );
} );
$dropdown.show();
}

// ── Events ───────────────────────────────────────────────────────
$entry.on( 'input', function () {
var val = $entry.val();
// Comma or space after a word = commit tag
if ( /[,]$/.test( val ) ) {
addToken( val.replace( /,$/, '' ) );
$entry.val( '' );
$dropdown.hide();
return;
}
var q = val.trim().toLowerCase();
if ( q.length >= 1 ) { showDropdown( q ); } else { $dropdown.hide(); }
} );

$entry.on( 'keydown', function ( e ) {
// Enter = commit current text or first suggestion
if ( e.key === 'Enter' ) {
e.preventDefault();
var first = $dropdown.find( 'li' ).first().text();
addToken( first || $entry.val() );
$entry.val( '' );
$dropdown.hide();
}
// Backspace on empty entry = remove last token
if ( e.key === 'Backspace' && $entry.val() === '' ) {
$box.find( '.tag-token' ).last().remove();
syncHidden();
}
} );

$entry.on( 'blur', function () {
setTimeout( function () { $dropdown.hide(); }, 150 );
// Commit anything partially typed on blur
var val = $entry.val().trim();
if ( val ) { addToken( val ); $entry.val( '' ); }
} );

$box.on( 'click', function () { $entry.trigger( 'focus' ); } );
}

} );

}() );

MediaWiki:Gadgets-definition

2026-04-05T08:51:36Z

Anthony: Adding tag autocomplete

Projects/Window Manager Central

2026-04-05T05:14:03Z

Anthony: Added an icon as your cover image so that it wouldn't just show blank on the project hub. Obviously feel free to change or remove it if you like.

{{ProjectMeta
| name = Window Manager Central
| status = Active
| description = Window Manager Cenral is small website where you can learn about window managers and hit the ground running with a fast new workflow. Discover guides, tips and resources for all levels of familiarity.
| website = wmc.codeberg.page
| repository = https://codeberg.org/wmc/pages-src
| image = Apps-preferences-system-windows.png
}}This is a small website project intending to serve as a dictionary of tips for window manager users. The idea is that anyone can upload tips, edit and improve the information available so that newcomers to window managers find it easier to start their journey.

It is particularly difficult for newcomers to find guides, more so with good guides, when things go south the most usual response is to give up on window managers altogether. Having one place (ideally) that points to all the guides that one may need, as well as other sources of interest should facilitate the pain of using a search engine over and over.

The point is not to babysit newcomers, but to point them in the right direction. While experienced users don't need regular help, they will definitely enjoy having a collection of resources instead of having the usual search engine route. They could find particular pleasure in sharing their own guides and mishaps that newbies will want to avoid.

The website is build with [https://gohugo.io Hugo] and hosted on [https://codeberg.page Codeberg Pages], contributing for people familiar with Git is easy, it is just a pull request away. For other ways of contributing one can get in contact with the team.

Projects/Amalgam

2026-04-05T05:07:07Z

Anthony: Added "promotional banner" thumbnail

{{SubpageNav|icon=Amalgam_Logo}}
{{AIBanner
| acceptability = 【 Images 🔴 No 】【 Code & Text 🟠 Yes, but see note¹ 】
| details = note¹: Currently the project is largely being developed with AI because I don’t have the skills, patience, or motivation to do it without, quite frankly. Because of this, the code is pretty sloppy. Right now, development is focused on just getting the project up and running so I can try to get other people to play the game. The end goal is to eventually find more skilled individuals to help refactor the project and build it “correctly.” For now, since it’s just me working on it, the project is mainly trying to hold together well enough to become playable. In short: I am using AI, and I don’t mind if others use it for code or text. However, the goal is to move away from AI-generated code over time, or at least use it more carefully with input from experienced programmers.
}}
{{ProjectMeta
|name=Amalgam
|status=Active
|license=AGPL-3.0
|creator=Anthony
|description=A two player abstract strategy game that requires you to tactically utilize your pieces in conjunction with one another to either eliminate the opponents pieces or carefully get a valuable piece to the other side of the board
|image=Amalgam_Logo.png
|tags=boardgame, game, software
|website=https://greenants.github.io/Amalgam_Webgame
|repository=https://codeberg.org/AnthonyDavis/Amalgam
|field1label=Players
|field1value=2 (two)
|field2label=Genre
|field2value=Abstract Strategy
|field3label=Playability
|field3value=Demo (Rules work, but BOT player is weak)
}}
==Under Development==
This Project Page is currently under development and is acting as a placeholder until more information is added.
[[File:Amalgam Banner.webp|alt=Amalgam Board Game, A battle of gemstones. ~30min, 2 players, ages 13+|thumb|One possible variation of a "promotional Cover" or "banner" for Amalgam Board Game.]]

File:Amalgam Banner.webp

2026-04-05T05:02:25Z

Anthony: A banner for amalgam board game

== Summary ==
A banner for amalgam board game
== Licensing ==
{{CC-BY-SA-4.0}}

Projects/Amalgam

2026-04-05T04:58:18Z

Anthony: Update AIBanner text

Projects/Amalgam/Changelog

2026-04-05T04:55:43Z

Anthony: Initialize Placeholder

== Amalgam Change-log ==
As more people are able to play-test the game, we realize that the rules need to be adjusted. This page is acting as a placeholder to track changes that have been made or that have been flagged for change due unbalanced rules or otherwise.

Projects/Amalgam/Story

2026-04-05T04:52:46Z

Anthony: Initialize Placeholder

== The Long Journey of Trying to Make Amalgam ==
This page is a placeholder to insert the "story" and background on trying to create this board game for more than a decade.

Projects/Amalgam/Contributors

2026-04-05T04:50:27Z

Anthony: Initialize Placeholder

== Contributors ==
This page is a placeholder for all contributors who worked on this project over time.

As members contribute to the project, they should come and add their name to this page with their contributions.

Projects/Amalgam/Documentation

2026-04-05T04:48:14Z

Anthony: Initialize Placeholder

== Development Documentation ==
This page is a placeholder for docs on developing the digital version of the board game.

Projects/Example Project

2026-04-05T04:45:01Z

Anthony: Added navbar logo icon

{{SubpageNav|icon=Logo}}
{{AIBanner
| acceptability = 【Text 🟢 Yes 】【 Images 🔴 No 】【 Code 🟠 Depends* 】
| details = LLM Generated text and code must be thoroughly reviewed and proofread. . .it should be used as a tool to ''assist'' and enhance your contributions, not replace them. *Code is allowed only if a) it is manually proofread and checked for quality or b) it is used as a temporary proof of concept/demo and is clearly labeled as such.
}}
{{ProjectMeta
| name = Example Project
| status = Completed
| license = CC BY-SA 4.0
| creator = UnfinishedProjects
| description = This is an example project. It demonstrates how a project page should be set up.
| image = Unfinished Projects Logo x512.png
| tags = example, demo, template
| website = forum.unfinishedprojects.net
| repository = https://codeberg.org/UnfinishedProjects/UnfinishedProjects.net
| field1label = Current Project Lead
| field1value = [https://forum.unfinishedprojects.net/user/unfinishedprojects UnfinishedProjects]
| field2label = Contributors
| field2value = [https://forum.unfinishedprojects.net/user/anthony Anthony], [https://forum.unfinishedprojects.net/user/www-gem www-gem], [https://forum.unfinishedprojects.net/user/alectronic alectronic]
| field3label = Forked From
| field3value = [[Example Page| Another Project (Creator Name)]]
}}

Animi et et quis ut totam inventore. Eligendi est ut ullam voluptatibus dolorum ex. In quisquam est enim soluta distinctio explicabo quidem voluptatem. Maxime neque dolor id in sunt quisquam quos.

Maiores in dolores laborum molestiae possimus. Ipsum ut et rerum. Neque et perspiciatis eaque autem unde molestias omnis voluptatem.

Aspernatur ut non impedit ea natus eveniet distinctio. Perferendis non eveniet in nihil aut. Quo aut atque natus quisquam laboriosam.

Dolor cumque sed quia quia quis debitis minus ipsa. Veniam recusandae voluptatem quia aut possimus veritatis. Omnis dolores unde quibusdam fugit officiis fugiat. Porro vel qui quia sequi enim nesciunt at. Omnis consequatur veniam quisquam numquam.

Suscipit ipsum impedit reprehenderit magni asperiores tempore tenetur. Id consequatur aut earum voluptas autem qui. Cum laboriosam suscipit est autem non voluptatem aut. Quae error repellendus libero aliquam. Quod quia atque qui doloremque est cupiditate libero. Necessitatibus illum provident et.

Projects/Amalgam

2026-04-05T04:44:30Z

Anthony: Added Navbar Logo Icon

{{SubpageNav|icon=Amalgam_Logo}}
{{AIBanner
| acceptability = 【 Images 🔴 No 】【 Code & Text 🟠 Yes, but see note¹ 】
| details = note¹: The project is currently being developed largely with AI because I didn’t have the skills, patience, or motivation to do it without it. Because of this, the code is pretty sloppy. Right now, development is focused on just getting the project up and running so I can try to get other people to play the game. The end goal is to eventually find more skilled individuals to help refactor the project and build it “correctly.” For now, since it’s just me working on it, the project is mainly trying to hold together well enough to become playable. In short: I am using AI, and I don’t mind if others use it for code or text. However, the goal is to move away from AI-generated code over time, or at least use it more carefully with input from experienced programmers.
}}
{{ProjectMeta
|name=Amalgam
|status=Active
|license=AGPL-3.0
|creator=Anthony
|description=A two player abstract strategy game that requires you to tactically utilize your pieces in conjunction with one another to either eliminate the opponents pieces or carefully get a valuable piece to the other side of the board
|image=Amalgam_Logo.png
|tags=boardgame, game, software
|website=https://greenants.github.io/Amalgam_Webgame
|repository=https://codeberg.org/AnthonyDavis/Amalgam
|field1label=Players
|field1value=2 (two)
|field2label=Genre
|field2value=Abstract Strategy
|field3label=Playability
|field3value=Demo (Rules work, but BOT player is weak)
}}
==Under Development==
This Project Page is currently under development and is acting as a placeholder until more information is added.

Template:SubpageNav

2026-04-05T04:38:16Z

Anthony: Fixed nav showing all projects (hopefully)

<templatestyles src="Template:SubpageNav/styles.css" />
<div class="subpage-nav-wrapper"><div class="subpage-nav" role="navigation" aria-label="{{#titleparts:{{PAGENAME}}|2}} navigation"><div class="subpage-nav-brand">{{#if:{{{icon|}}}|[[File:{{{icon}}}.png|20px|link={{{root|{{#titleparts:{{PAGENAME}}|2}}}}}]]|}}<span class="subpage-nav-title">[[{{{root|{{#titleparts:{{PAGENAME}}|2}}}}}|{{{name|{{#if:{{#titleparts:{{PAGENAME}}|1|2}}|{{#titleparts:{{PAGENAME}}|1|2}}|{{PAGENAME}}}}}}}]]</span></div><div class="subpage-nav-links">{{#if:{{{1|}}}| {{{1}}}|<div class="subpage-auto-list">{{Special:PrefixIndex/{{{root|{{#titleparts:{{PAGENAME}}|2}}}}}/ |stripprefix=1}}</div>}}</div></div></div><noinclude>
== SubpageNav ==
A compact, minimal horizontal navigation bar. Works on root pages and any depth of subpage. Auto-populates all subpages with full dropdown support for nested paths.

=== Basic Usage ===
Drop this at the top of any project or tutorial page:
<pre>
{{SubpageNav}}
</pre>

Works on the root page and any subpage depth. On <code>Example Project/About/More Details</code> the nav correctly shows <code>Example Project</code> as the brand and lists all of its subpages.

=== With an Icon ===
<pre>
{{SubpageNav|icon=emotes-face-smile-big}}
</pre>

=== Manual List ===
Pass a bulleted wikitext list as the first parameter. Nesting with <code>**</code> creates dropdown menus:
<pre>
{{SubpageNav|
* [[My Project/Overview|Overview]]
** [[My Project/Overview/Details|Details]]
* [[My Project/Gallery|Gallery]]
}}
</pre>

=== Parameters ===
; <code>1</code> : Optional manual wikitext list. If omitted, auto-populates via Special:PrefixIndex.
; <code>icon</code> : Icon filename without <code>File:</code> prefix or <code>.png</code> extension.
; <code>root</code> : Override the root page (defaults to <code>{{ROOTPAGENAME}}</code>).
; <code>name</code> : Override the brand label in the nav bar.

=== Technical Notes ===
* Styles: [[Template:SubpageNav/styles.css]]
* Dropdown & nesting: [[MediaWiki:Gadget-subpagenav.js]]

<templatedata>
{
"description": "Adds a compact horizontal subpage navigation bar. Auto-detects all subpages and builds dropdown menus for nested paths. Works correctly from any depth of subpage.",
"params": {
"1": {
"label": "Manual link list",
"description": "Optional. A bulleted wikitext list of links. Nesting with ** creates dropdown menus. If omitted, subpages are auto-detected.",
"type": "content",
"required": false
},
"icon": {
"label": "Icon",
"description": "Icon filename without File: prefix or .png extension (e.g. emotes-face-smile-big).",
"type": "string",
"required": false
},
"root": {
"label": "Root page",
"description": "Override the root page used for the brand link and subpage lookup. Defaults to {{ROOTPAGENAME}}.",
"type": "wiki-page-name",
"required": false
},
"name": {
"label": "Display name",
"description": "Override the brand label shown in the nav bar. Defaults to the root page name.",
"type": "string",
"required": false
}
},
"format": "inline"
}
</templatedata>
</noinclude>

Projects/Amalgam/Rulebook

2026-04-05T04:32:21Z

Anthony: Initialize Placeholder

== Amalgam Rules ==
This page is a placeholder for the game-play rules.

Projects/Amalgam

2026-04-05T04:29:47Z

Anthony: Added AIBanner and "Under Development". Current Edit will act as a placeholder until I get more time to flesh out the project page(s)

{{SubpageNav}}
{{AIBanner
| acceptability = 【 Images 🔴 No 】【 Code & Text 🟠 Yes, but see note¹ 】
| details = note¹: The project is currently being developed largely with AI because I didn’t have the skills, patience, or motivation to do it without it. Because of this, the code is pretty sloppy. Right now, development is focused on just getting the project up and running so I can try to get other people to play the game. The end goal is to eventually find more skilled individuals to help refactor the project and build it “correctly.” For now, since it’s just me working on it, the project is mainly trying to hold together well enough to become playable. In short: I am using AI, and I don’t mind if others use it for code or text. However, the goal is to move away from AI-generated code over time, or at least use it more carefully with input from experienced programmers.
}}
{{ProjectMeta
|name=Amalgam
|status=Active
|license=AGPL-3.0
|creator=Anthony
|description=A two player abstract strategy game that requires you to tactically utilize your pieces in conjunction with one another to either eliminate the opponents pieces or carefully get a valuable piece to the other side of the board
|image=Amalgam_Logo.png
|tags=boardgame, game, software
|website=https://greenants.github.io/Amalgam_Webgame
|repository=https://codeberg.org/AnthonyDavis/Amalgam
|field1label=Players
|field1value=2 (two)
|field2label=Genre
|field2value=Abstract Strategy
|field3label=Playability
|field3value=Demo (Rules work, but BOT player is weak)
}}
==Under Development==
This Project Page is currently under development and is acting as a placeholder until more information is added.

Projects/Amalgam

2026-04-05T04:16:16Z

Anthony: Created page with "{{ProjectMeta |name=Amalgam |status=Active |license=AGPL-3.0 |creator=Anthony |description=A two player abstract strategy game that requires you to tactically utilize your pieces in conjunction with one another to either eliminate the opponents pieces or carefully get a valuable piece to the other side of the board |image=amalgam_logo.png |tags=boardgame, game, software |website=https://greenants.github.io/Amalgam_Webgame |repository=https://codeberg.org/AnthonyDavis/Ama..."

{{ProjectMeta
|name=Amalgam
|status=Active
|license=AGPL-3.0
|creator=Anthony
|description=A two player abstract strategy game that requires you to tactically utilize your pieces in conjunction with one another to either eliminate the opponents pieces or carefully get a valuable piece to the other side of the board
|image=amalgam_logo.png
|tags=boardgame, game, software
|website=https://greenants.github.io/Amalgam_Webgame
|repository=https://codeberg.org/AnthonyDavis/Amalgam
|field1label=Players
|field1value=2 (two)
|field2label=Genre
|field2value=Abstract Strategy
|field3label=Playability
|field3value=Demo (Rules work, but BOT player is weak)
}}

Projects/Example Project

2026-04-05T02:31:28Z

Anthony: Missing a space after the comma

{{SubpageNav}}
{{AIBanner
| acceptability = 【Text 🟢 Yes 】【 Images 🔴 No 】【 Code 🟠 Depends* 】
| details = LLM Generated text and code must be thoroughly reviewed and proofread. . .it should be used as a tool to ''assist'' and enhance your contributions, not replace them. *Code is allowed only if a) it is manually proofread and checked for quality or b) it is used as a temporary proof of concept/demo and is clearly labeled as such.
}}
{{ProjectMeta
| name = Example Project
| status = Completed
| license = CC BY-SA 4.0
| creator = UnfinishedProjects
| description = This is an example project. It demonstrates how a project page should be set up.
| image = Unfinished Projects Logo x512.png
| tags = example, demo, template
| website = forum.unfinishedprojects.net
| repository = https://codeberg.org/UnfinishedProjects/UnfinishedProjects.net
| field1label = Current Project Lead
| field1value = [https://forum.unfinishedprojects.net/user/unfinishedprojects UnfinishedProjects]
| field2label = Contributors
| field2value = [https://forum.unfinishedprojects.net/user/anthony Anthony], [https://forum.unfinishedprojects.net/user/www-gem www-gem], [https://forum.unfinishedprojects.net/user/alectronic alectronic]
| field3label = Forked From
| field3value = [[Example Page| Another Project (Creator Name)]]
}}

Animi et et quis ut totam inventore. Eligendi est ut ullam voluptatibus dolorum ex. In quisquam est enim soluta distinctio explicabo quidem voluptatem. Maxime neque dolor id in sunt quisquam quos.

Maiores in dolores laborum molestiae possimus. Ipsum ut et rerum. Neque et perspiciatis eaque autem unde molestias omnis voluptatem.

Aspernatur ut non impedit ea natus eveniet distinctio. Perferendis non eveniet in nihil aut. Quo aut atque natus quisquam laboriosam.

Dolor cumque sed quia quia quis debitis minus ipsa. Veniam recusandae voluptatem quia aut possimus veritatis. Omnis dolores unde quibusdam fugit officiis fugiat. Porro vel qui quia sequi enim nesciunt at. Omnis consequatur veniam quisquam numquam.

Suscipit ipsum impedit reprehenderit magni asperiores tempore tenetur. Id consequatur aut earum voluptas autem qui. Cum laboriosam suscipit est autem non voluptatem aut. Quae error repellendus libero aliquam. Quod quia atque qui doloremque est cupiditate libero. Necessitatibus illum provident et.

Projects/Example Project

2026-04-05T02:30:57Z

Anthony: Fixed contrinbutor spacing in ProjectMeta

{{SubpageNav}}
{{AIBanner
| acceptability = 【Text 🟢 Yes 】【 Images 🔴 No 】【 Code 🟠 Depends* 】
| details = LLM Generated text and code must be thoroughly reviewed and proofread. . .it should be used as a tool to ''assist'' and enhance your contributions, not replace them. *Code is allowed only if a) it is manually proofread and checked for quality or b) it is used as a temporary proof of concept/demo and is clearly labeled as such.
}}
{{ProjectMeta
| name = Example Project
| status = Completed
| license = CC BY-SA 4.0
| creator = UnfinishedProjects
| description = This is an example project. It demonstrates how a project page should be set up.
| image = Unfinished Projects Logo x512.png
| tags = example, demo, template
| website = forum.unfinishedprojects.net
| repository = https://codeberg.org/UnfinishedProjects/UnfinishedProjects.net
| field1label = Current Project Lead
| field1value = [https://forum.unfinishedprojects.net/user/unfinishedprojects UnfinishedProjects]
| field2label = Contributors
| field2value = [https://forum.unfinishedprojects.net/user/anthony Anthony], [https://forum.unfinishedprojects.net/user/www-gem www-gem],[https://forum.unfinishedprojects.net/user/alectronic alectronic]
| field3label = Forked From
| field3value = [[Example Page| Another Project (Creator Name)]]
}}

Animi et et quis ut totam inventore. Eligendi est ut ullam voluptatibus dolorum ex. In quisquam est enim soluta distinctio explicabo quidem voluptatem. Maxime neque dolor id in sunt quisquam quos.

Maiores in dolores laborum molestiae possimus. Ipsum ut et rerum. Neque et perspiciatis eaque autem unde molestias omnis voluptatem.

Aspernatur ut non impedit ea natus eveniet distinctio. Perferendis non eveniet in nihil aut. Quo aut atque natus quisquam laboriosam.

Dolor cumque sed quia quia quis debitis minus ipsa. Veniam recusandae voluptatem quia aut possimus veritatis. Omnis dolores unde quibusdam fugit officiis fugiat. Porro vel qui quia sequi enim nesciunt at. Omnis consequatur veniam quisquam numquam.

Suscipit ipsum impedit reprehenderit magni asperiores tempore tenetur. Id consequatur aut earum voluptas autem qui. Cum laboriosam suscipit est autem non voluptatem aut. Quae error repellendus libero aliquam. Quod quia atque qui doloremque est cupiditate libero. Necessitatibus illum provident et.

MediaWiki:Anonnotice

2026-04-05T01:26:14Z

Anthony: Update padding width

<div style="text-align: center; padding: 12px 20px; border: 1px solid var(--wiki-primary); border-radius: 8px; background: var(--color-surface-1); margin: 15px auto; max-width: 1100px; width: calc(100% - 40px); line-height: 1.5; box-sizing: border-box;">

<div style="margin-bottom: 4px;">
<strong style="color:var(--wiki-primary);">🚧 True to our name, we’re still a work in progress. 🚧</strong>
</div>

<span style="font-size: 0.95em;">
You’re welcome to explore, but <strong>account registration is currently invite-only</strong> as we finalize the setup.
Join our <strong>[https://forum.unfinishedprojects.net forum]</strong> or follow <strong>[https://mastodon.social/@UnfinishedProjects Mastodon]</strong> for updates.
<i style="opacity: 0.8; margin-left: 5px;">Full Wiki launch coming soon!</i>
</span>

</div>

MediaWiki:Anonnotice

2026-04-05T01:24:00Z

Anthony: Updated to match forum registration opening

<div style="text-align: center; padding: 12px 20px; border: 1px solid var(--wiki-primary); border-radius: 8px; background: var(--color-surface-1); margin: 10px 0; line-height: 1.5;">
<div style="margin-bottom: 4px;">
<strong style="color:var(--wiki-primary);">🚧 True to our name, we’re still a work in progress. 🚧</strong>
</div>
<span style="font-size: 0.95em;">
You’re welcome to explore, but <strong>account registration is currently limited</strong> as we finalize the setup.
Join our <strong>[https://forum.unfinishedprojects.net forum]</strong> or follow <strong>[https://mastodon.social/@UnfinishedProjects Mastodon]</strong> for updates.
<i style="opacity: 0.8; margin-left: 5px;">Full Wiki launch coming soon!</i>
</span>
</div>

Form:Submit Tutorial

2026-04-05T01:06:53Z

Anthony: Fixing Page redirect

<includeonly>{{{info|page name=Tutorials/<TutorialMeta[name]>}}}</includeonly>
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{SubpageNav| icon=emotes-face-smile-big}}

{{{for template|TutorialMeta}}}
{| class="formtable"
! Tutorial Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Tutorial Name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over the tutorial card.}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, beginner, recording}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Tutorial}}} {{{standard input|cancel}}}

Template:HubHeader

2026-04-05T01:03:59Z

Anthony: FormStart to FormEdit to fix Pages posting to root

<div class="hub-container" style="margin-bottom: 24px;"><div class="hub-header-minimal" style="background: var(--color-surface-1); border: 1px solid var(--border-color-base); border-radius: 4px 4px 0 0; padding: 24px; text-align: left; border-bottom: none;"><div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px;"><div style="flex: 1; min-width: 300px;"><div style="font-size: 1.8em; font-weight: 800; color: var(--color-base); margin-bottom: 4px; letter-spacing: -0.01em;">{{{title|Title Text}}}</div><div style="font-size: 0.9em; color: var(--wiki-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px;">{{{subtitle|Subtitle Text}}}</div><div style="font-size: 1em; color: var(--color-base); line-height: 1.6; max-width: 850px; opacity: 0.9;">{{{description|}}}</div></div>{{#if:{{{category|}}}|<div style="background: var(--color-surface-2); border: 1px solid var(--border-color-base); padding: 16px 24px; border-radius: 4px; text-align: center; min-width: 140px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); flex-shrink: 0;"><div style="font-size: 0.7em; text-transform: uppercase; font-weight: 800; color: var(--color-base--subtle); letter-spacing: 0.08em; margin-bottom: 4px;">{{{count_label|Projects}}}</div><div style="font-size: 2em; font-weight: 900; color: var(--color-base); line-height: 1;">{{PAGESINCATEGORY:{{{category}}}|pages}}</div></div>|}}</div></div><div class="hub-banner" style="background: var(--color-surface-1); border: 1px solid var(--border-color-base); border-radius: 0 0 4px 4px; padding: 0; overflow: hidden;"><div class="hub-toolbar" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: 100%; border-top: 1px solid var(--border-color-base); box-sizing: border-box;">{{#if:{{{submit_form|}}}|[[Special:FormEdit/{{{submit_form|}}}|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--wiki-primary); color: #fff; padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border-right: 1px solid var(--border-color-base); letter-spacing: 0.05em; box-sizing: border-box;">+ Submit</span>]]|}} [[:Category:{{{category|{{PAGENAME}}}}}|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--color-surface-2); color: var(--color-base); padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border-right: 1px solid var(--border-color-base); letter-spacing: 0.05em; box-sizing: border-box;">Full Index</span>]] [[Guidebook/Quick Start/Projects|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--color-surface-2); color: var(--color-base); padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border-right: 1px solid var(--border-color-base); letter-spacing: 0.05em; box-sizing: border-box;">Submission Rules</span>]] [[MediaWiki:Licenses|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--color-surface-2); color: var(--color-base); padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border-right: 1px solid var(--border-color-base); letter-spacing: 0.05em; box-sizing: border-box;">License Options</span>]] [[{{TALKPAGENAME}}|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--color-surface-2); color: var(--color-base); padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border-right: 1px solid var(--border-color-base); letter-spacing: 0.05em; box-sizing: border-box;">Moderators</span>]] [[Special:PrefixIndex/Template:{{{hub_type|Project}}}|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--color-surface-2); color: var(--color-base); padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border-right: 1px solid var(--border-color-base); letter-spacing: 0.05em; box-sizing: border-box;">Templates</span>]] [[About|<span style="display: flex; align-items: center; justify-content: center; height: 100%; background: var(--color-surface-2); color: var(--color-base); padding: 12px 6px; font-size: 0.75em; font-weight: 700; text-align: center; text-transform: uppercase; border: none; letter-spacing: 0.05em; box-sizing: border-box;">About</span>]]</div><div class="hub-metadata" style="display: flex; flex-wrap: wrap; gap: 24px; font-size: 0.82em; align-items: center; border-top: 1px solid var(--border-color-base); padding: 14px 24px; background: var(--color-surface-1);"><div style="color: var(--color-base);"><span style="font-weight: 800; text-transform: uppercase; margin-right: 8px; letter-spacing: 0.05em; opacity: 0.7;">Last Submission</span><span id="hub-meta-last-submission" style="color: #007bff; font-weight: 700;">Loading...</span></div><div style="color: var(--color-base);"><span style="font-weight: 800; text-transform: uppercase; margin-right: 8px; letter-spacing: 0.05em; opacity: 0.7;">Activity</span><span id="hub-meta-last-edit" style="color: var(--wiki-primary); font-weight: 700;">Loading...</span></div></div></div></div><noinclude>
== HubHeader ==
Displays the full header block for project and tutorial hub pages. Includes a title/subtitle/description area, optional live count badge, toolbar row with a Submit button and navigation links, and a metadata bar showing default license and live activity (populated by [[MediaWiki:Gadget-projects.js]] or [[MediaWiki:Gadget-tutorials.js]]).

=== Usage — Projects hub ===
<pre>
{{HubHeader
| title = Audio Projects
| subtitle = Music, sound design, and anything audio
| description = Any openly licensed audio project — sound FX, music, field recordings, podcasts, etc.
| category = Projects/Audio
| count_label = Audio Projects
| submit_form = Submit_Project
| hub_path = Projects/Audio
| hub_type = ProjectCard
}}
</pre>

=== Usage — Tutorials hub ===
<pre>
{{HubHeader
| title = Community Tutorials
| subtitle = Step-by-step guides written by the community
| description = Browse tutorials by topic below.
| category = Tutorials
| count_label = Tutorials
| submit_form = Submit_Tutorial
| hub_path = Tutorials
| hub_type = TutorialCard
}}
</pre>

=== Parameters ===
; <code>title</code> : Main heading. Defaults to "Title Text".
; <code>subtitle</code> : Orange uppercase subtitle. Defaults to "Subtitle Text".
; <code>description</code> : Optional body paragraph below the subtitle.
; <code>category</code> : If provided, shows a live count badge using <code>PAGESINCATEGORY</code> (e.g. <code>Projects/Audio</code>).
; <code>count_label</code> : Label above the count badge. Defaults to "Projects".
; <code>submit_form</code> : If provided, adds an orange "+ Submit" button linking to <code>Special:FormStart/FormName</code>.
; <code>hub_path</code> : Path for the "Full Index" button. Defaults to current page name.
; <code>hub_type</code> : Template name for the "Templates" toolbar button. Defaults to "Project".

=== Notes ===
* "Last Submission" and "Activity" in the metadata bar are populated by JavaScript gadgets.
* The toolbar links to [[Project:Submission Guidelines]], [[Project:Licenses]], the page's talk page, and [[Project:Community]] — create these pages to avoid red links.

<templatedata>
{
"description": "Displays the full header block for a project or tutorial hub page, including title, count badge, toolbar, and a live metadata bar.",
"params": {
"title": {
"label": "Title",
"description": "Main heading for the hub page.",
"type": "string",
"default": "Title Text",
"required": false
},
"subtitle": {
"label": "Subtitle",
"description": "Orange uppercase subtitle shown below the title.",
"type": "string",
"default": "Subtitle Text",
"required": false
},
"description": {
"label": "Description",
"description": "Optional body paragraph below the subtitle. Supports wikitext.",
"type": "content",
"required": false
},
"category": {
"label": "Category",
"description": "Category name for the live count badge (e.g. Projects/Audio).",
"type": "string",
"required": false
},
"count_label": {
"label": "Count label",
"description": "Label shown above the count badge.",
"type": "string",
"default": "Projects",
"required": false
},
"submit_form": {
"label": "Submit form",
"description": "PageForms form name for the orange Submit button (e.g. Submit_Project or Submit_Tutorial).",
"type": "string",
"suggestedvalues": ["Submit_Project", "Submit_Tutorial"],
"required": false
},
"hub_path": {
"label": "Hub path",
"description": "Path used for the Full Index toolbar button. Defaults to the current page name.",
"type": "wiki-page-name",
"required": false
},
"hub_type": {
"label": "Hub type",
"description": "Template name linked in the Templates toolbar button.",
"type": "string",
"default": "Project",
"suggestedvalues": ["ProjectCard", "TutorialCard"],
"required": false
}
},
"format": "block"
}
</templatedata>

[[Category:Layout Templates]]
</noinclude>

Window Manager Central

2026-04-05T01:01:07Z

Anthony: Anthony moved page Window Manager Central to Projects/Window Manager Central: Moved page due to broken form submission that posts the project to the root. It should be nested under /wiki/Projects/

#REDIRECT [[Projects/Window Manager Central]]

Projects/Window Manager Central

2026-04-05T01:01:07Z

{{ProjectMeta
|name=Window Manager Central
|status=Active
|description=Window Manager Cenral is small website where you can learn about window managers and hit the ground running with a fast new workflow. Discover guides, tips and resources for all levels of familiarity.
|website=wmc.codeberg.page
|repository=https://codeberg.org/wmc/pages-src
}}This is a small website project intending to serve as a dictionary of tips for window manager users. The idea is that anyone can upload tips, edit and improve the information available so that newcomers to window managers find it easier to start their journey.

It is particularly difficult for newcomers to find guides, more so with good guides, when things go south the most usual response is to give up on window managers altogether. Having one place (ideally) that points to all the guides that one may need, as well as other sources of interest should facilitate the pain of using a search engine over and over.

The point is not to babysit newcomers, but to point them in the right direction. While experienced users don't need regular help, they will definitely enjoy having a collection of resources instead of having the usual search engine route. They could find particular pleasure in sharing their own guides and mishaps that newbies will want to avoid.

The website is build with [https://gohugo.io Hugo] and hosted on [https://codeberg.page Codeberg Pages], contributing for people familiar with Git is easy, it is just a pull request away. For other ways of contributing one can get in contact with the team.

MediaWiki:Gadget-projects.js

2026-04-05T00:56:20Z

Anthony:

/* =============================================================================
Gadget-projects.js v2.1
Unified project hub — API-powered search, tag/licence filtering, pagination.
============================================================================= */
( function () {

if ( mw.config.get( 'wgPageName' ) !== 'Projects' ) { return; }

$( function () {

var PAGE_SIZE = 24;
var generation = 0; // Incremented on every new search to discard stale responses

var state = {
search : '',
tag : '',
license : '',
sort : 'newest',
offset : 0,
done : false,
busy : false
};

var $wrapper = $( '.project-hub-wrapper' );
if ( !$wrapper.length ) { return; }

var $filters = $wrapper.find( '.project-hub-filters' );
var $tagCloud = $wrapper.find( '.project-hub-tagcloud' );
var $licenseCloud = $wrapper.find( '.project-hub-licensecloud' );
var $grid = $wrapper.find( '.project-hub-grid' );
var $count = $( '<span>' ).addClass( 'project-hub-count' );

// Create the Load More button entirely in JS.
// <button> tags are stripped by the MediaWiki HTML sanitiser if placed in wikitext.
var $more = $( '<button>' )
.addClass( 'project-hub-loadmore' )
.text( 'Load more projects' )
.hide()
.appendTo( $wrapper );

// ── Filter bar ────────────────────────────────────────────────────────
var $search = $( '<input>' ).attr( {
type : 'text',
placeholder : 'Search name, creator, license, tags, description\u2026',
'class' : 'project-hub-search'
} );
var $sort = $( '<select>' ).addClass( 'project-hub-select' ).append(
$( '<option>' ).val( 'newest' ).text( 'Newest first' ),
$( '<option>' ).val( 'alpha' ).text( 'A \u2013 Z' )
);
$filters.append( $search, $sort, $count );

// ── Events ────────────────────────────────────────────────────────────
var searchDebounce;
$search.on( 'input', function () {
clearTimeout( searchDebounce );
searchDebounce = setTimeout( function () {
state.search = $search.val().trim();
resetAndLoad();
}, 350 );
} );

$sort.on( 'change', function () {
state.sort = $sort.val();
resetAndLoad();
} );

$more.on( 'click', function () {
if ( !state.busy ) { fetchPage(); }
} );

// Tag pill — delegated so it works for both cloud pills and card tag spans
$( document ).on( 'click', '.js-tag-filter', function ( e ) {
e.stopPropagation();
var tag = $( this ).data( 'tag' );
if ( state.tag === tag ) {
state.tag = '';
$( '.js-tag-filter' ).removeClass( 'is-active' );
} else {
state.tag = tag;
$( '.js-tag-filter' ).removeClass( 'is-active' );
$( '.js-tag-filter' ).filter( function () {
return $( this ).data( 'tag' ) === tag;
} ).addClass( 'is-active' );
}
resetAndLoad();
} );

// License pill — delegated
$( document ).on( 'click', '.js-license-filter', function ( e ) {
e.stopPropagation();
var lic = $( this ).data( 'license' );
if ( state.license === lic ) {
state.license = '';
$( '.js-license-filter' ).removeClass( 'is-active' );
} else {
state.license = lic;
$( '.js-license-filter' ).removeClass( 'is-active' );
$( '.js-license-filter' ).filter( function () {
return $( this ).data( 'license' ) === lic;
} ).addClass( 'is-active' );
}
resetAndLoad();
} );

// ── Boot ─────────────────────────────────────────────────────────────
loadTagCloud();
loadLicenseCloud();
loadHubMeta();
fetchPage();

// ── Helpers ───────────────────────────────────────────────────────────
function resetAndLoad() {
generation++; // Any in-flight request with a lower generation is discarded
state.offset = 0;
state.done = false;
state.busy = false; // Unblock immediately so the new fetch can start
$grid.empty();
$more.hide();
fetchPage();
}

function buildWhere() {
var parts = [];
if ( state.search ) {
var q = state.search.replace( /'/g, "''" );
parts.push(
"( name LIKE '%" + q + "%'" +
" OR creator LIKE '%" + q + "%'" +
" OR license LIKE '%" + q + "%'" +
" OR description LIKE '%" + q + "%' )"
);
}
if ( state.tag ) {
parts.push( "tags HOLDS '" + state.tag.replace( /'/g, "''" ) + "'" );
}
if ( state.license ) {
parts.push( "license = '" + state.license.replace( /'/g, "''" ) + "'" );
}
return parts.join( ' AND ' );
}

function orderBy() {
return state.sort === 'alpha' ? 'name ASC' : '_pageID DESC';
}

// ── Data ──────────────────────────────────────────────────────────────
function fetchPage() {
if ( state.busy || state.done ) { return; }
state.busy = true;
var gen = ++generation;
$more.text( 'Loading\u2026' ).show();

var params = {
action : 'cargoquery',
tables : 'Projects',
fields : '_pageName=pagename,name,status,license,creator,' +
'description,image,tags,' +
'field1label,field1value,field2label,field2value,' +
'field3label,field3value,field4label,field4value',
order_by : orderBy(),
limit : PAGE_SIZE,
offset : state.offset,
format : 'json'
};
var w = buildWhere();
if ( w ) { params.where = w; }
if ( state.offset === 0 ) { fetchTotal( w ); }

$.getJSON( mw.util.wikiScript( 'api' ), params )
.done( function ( data ) {
if ( gen !== generation ) { return; } // Stale — discard silently

var rows = ( data.cargoquery || [] ).map( function ( r ) { return r.title; } );
var prevOff = state.offset;
var batch = [];

rows.forEach( function ( row ) {
var $c = buildCard( row );
$grid.append( $c );
batch.push( { $el: $c, page: row.pagename } );
} );

enrichCards( batch );

state.offset += rows.length;
state.done = rows.length < PAGE_SIZE;
state.busy = false;

$more.text( 'Load more projects' ).toggle( !state.done );

if ( rows.length === 0 && prevOff === 0 ) {
$grid.html( '<div class="project-hub-empty">No projects found matching your search.</div>' );
$more.hide();
}
} )
.fail( function () {
if ( gen !== generation ) { return; }
state.busy = false;
$more.text( 'Load more projects' ).toggle( !state.done );
} );
}

function fetchTotal( where ) {
var p = { action: 'cargoquery', tables: 'Projects', fields: 'COUNT(*)=n', limit: 1, format: 'json' };
if ( where ) { p.where = where; }
$.getJSON( mw.util.wikiScript( 'api' ), p ).done( function ( data ) {
var row = ( data.cargoquery || [] )[ 0 ];
var n = row ? ( parseInt( row.title.n, 10 ) || 0 ) : 0;
$count.text( n + ' project' + ( n === 1 ? '' : 's' ) );
} );
}

function loadTagCloud() {
$.getJSON( mw.util.wikiScript( 'api' ), {
action: 'cargoquery', tables: 'Projects', fields: 'tags', limit: 500, format: 'json'
} ).done( function ( data ) {
var freq = {};
( data.cargoquery || [] ).forEach( function ( r ) {
( r.title.tags || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim();
if ( t ) { freq[ t ] = ( freq[ t ] || 0 ) + 1; }
} );
} );
var top = Object.keys( freq )
.sort( function ( a, b ) { return freq[ b ] - freq[ a ]; } )
.slice( 0, 25 );
if ( !top.length ) { return; }
top.forEach( function ( tag ) {
$tagCloud.append(
$( '<span>' ).addClass( 'js-tag-filter' ).attr( 'data-tag', tag ).text( tag )
);
} );
$tagCloud.show();
} );
}

function loadLicenseCloud() {
$.getJSON( mw.util.wikiScript( 'api' ), {
action : 'cargoquery',
tables : 'Projects',
fields : 'license',
group_by : 'license',
where : "license IS NOT NULL AND license != ''",
order_by : 'license ASC',
limit : 20,
format : 'json'
} ).done( function ( data ) {
var licenses = ( data.cargoquery || [] )
.map( function ( r ) { return ( r.title.license || '' ).trim(); } )
.filter( Boolean );
if ( !licenses.length ) { return; }
licenses.forEach( function ( lic ) {
$licenseCloud.append(
$( '<span>' ).addClass( 'js-license-filter' )
.attr( 'data-license', lic ).text( lic )
);
} );
$licenseCloud.show();
} );
}

function loadHubMeta() {
mw.loader.using( 'mediawiki.api' ).then( function () {
new mw.Api().get( {
action: 'query', list: 'categorymembers', cmtitle: 'Category:Projects',
cmsort: 'timestamp', cmdir: 'desc', cmlimit: 1,
cmtype: 'page', cmprop: 'ids|title|timestamp', format: 'json'
} ).done( function ( data ) {
var m = data.query && data.query.categorymembers;
if ( !m || !m.length ) { return; }
var str = m[ 0 ].title.replace( /^.*\//, '' ) + ' \u2014 ' +
( m[ 0 ].timestamp
? new Date( m[ 0 ].timestamp ).toLocaleDateString(
'en-GB', { day: 'numeric', month: 'short', year: 'numeric' } )
: '\u2014' );
$( '#hub-meta-last-submission, #hub-meta-last-edit' ).text( str );
} );
} );
}

// ── Card rendering ────────────────────────────────────────────────────
function parseWikitext( text ) {
if ( !text ) { return ''; }
text = String( text );
// External links: [https://url Display Text]
text = text.replace( /\[(\S+?)\s+([^\]]+?)\]/g, function ( m, url, display ) {
if ( !/^https?:\/\//i.test( url ) ) { return mw.html.escape( m ); }
return '<a href="' + url.replace( /"/g, '%22' ) + '" target="_blank" rel="noopener noreferrer">' +
mw.html.escape( display ) + '</a>';
} );
// Internal links: [[Page Name|Display]] or [[Page Name]]
text = text.replace( /\[\[([^\]|]+?)(?:\|([^\]]+?))?\]\]/g, function ( m, page, display ) {
return '<a href="' + mw.util.getUrl( page.trim() ) + '">' +
mw.html.escape( ( display || page ).trim() ) + '</a>';
} );
// Newlines to line breaks
text = text.replace( /\n/g, '<br>' );
return text;
}

function esc( s ) { return mw.html.escape( s || '' ); }

function fileUrl( f ) {
return f ? mw.config.get( 'wgServer' ) + '/wiki/Special:FilePath/' + encodeURIComponent( f ) : '';
}

function buildCard( row ) {
var page = row.pagename || '';
var name = row.name || page.replace( /^.*\//, '' );
var url = mw.util.getUrl( page );

var img = row.image
? '<img src="' + esc( fileUrl( row.image ) ) + '" alt="' + esc( name ) + '" loading="lazy">'
: '<div class="project-card-image-fallback"></div>';

var badges = '';
if ( row.status ) {
badges += '<span class="project-badge-status project-badge-status--' +
esc( row.status.toLowerCase() ) + '">' + esc( row.status ) + '</span>';
}
if ( row.license ) {
badges += '<span class="project-badge-license">' + esc( row.license ) + '</span>';
}

var tags = '';
( row.tags || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim();
if ( t ) {
tags += '<span class="project-card-tag js-tag-filter" data-tag="' +
esc( t ) + '">' + esc( t ) + '</span>';
}
} );

var extras = '';
for ( var i = 1; i <= 4; i++ ) {
if ( row[ 'field' + i + 'label' ] ) {
extras += '<div class="project-card-extra">' +
esc( row[ 'field' + i + 'label' ] ) +
': <strong>' + parseWikitext( row[ 'field' + i + 'value' ] ) + '</strong></div>';
}
}

return $( [
'<div class="project-card-wrap">',
'<div class="project-card">',
'<div class="project-card-inner">',
'<div class="project-card-front">',
'<div class="project-card-image">', img, '</div>',
'<div class="project-card-body">',
'<div class="project-card-title"><a href="', url, '">', esc( name ), '</a></div>',
'<div class="project-card-badges">', badges, '</div>',
row.creator ? '<div class="project-card-creator"><span class="project-card-label">By</span> ' + esc( row.creator ) + '</div>' : '',
extras,
tags ? '<div class="project-card-tags">' + tags + '</div>' : '',
'<div class="project-card-footer">',
'<span class="project-card-meta-item project-card-contributors">—</span>',
'<span class="project-card-meta-item project-card-updated">—</span>',
'<button class="js-flip-btn project-card-flip-btn">Read more</button>',
'</div>',
'</div>',
'</div>',
'<div class="project-card-back">',
'<div class="project-card-back-header">',
'<span class="project-card-back-title">About</span>',
'<button class="js-flip-btn project-card-flip-btn">Close</button>',
'</div>',
'<div class="project-card-back-content">',
row.description ? esc( row.description ) : 'No description provided.',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>'
].join( '' ) );
}

// ── Enrichment (contributor count + last-edited date) ─────────────────
function enrichCards( batch ) {
if ( !batch.length ) { return; }
var api = new mw.Api();
for ( var i = 0; i < batch.length; i += 20 ) {
( function ( chunk ) {
api.get( {
action: 'query',
titles: chunk.map( function ( c ) { return c.page; } ).join( '|' ),
prop: 'revisions|contributors',
rvprop: 'timestamp',
format: 'json'
} ).done( function ( data ) {
if ( !data.query ) { return; }
$.each( data.query.pages || {}, function ( _, page ) {
if ( page.missing !== undefined ) { return; }
var normalise = function ( s ) { return ( s || '' ).replace( /_/g, ' ' ); };
var match = chunk.filter( function ( c ) { return normalise( c.page ) === normalise( page.title ); } );
if ( !match.length ) { return; }
var $el = match[ 0 ].$el;
var ts = ( page.revisions && page.revisions[ 0 ] && page.revisions[ 0 ].timestamp ) || '';
var n = ( page.contributors ? page.contributors.length : 0 ) + ( page.anoncontributors || 0 );
var d = ts ? new Date( ts ).toLocaleDateString( 'en-GB', { year: 'numeric', month: 'short' } ) : '\u2014';
$el.find( '.project-card-contributors' )
.text( n + ( n === 1 ? ' contributor' : ' contributors' ) ).addClass( 'loaded' );
$el.find( '.project-card-updated' )
.text( 'Edited ' + d ).addClass( 'loaded' );
} );
} );
} )( batch.slice( i, i + 20 ) );
}
}

} );

} () );

Form:Submit Project

2026-04-05T00:54:02Z

Anthony: Trying again to fix the same bug of posting to root

<includeonly>{{{info|page name=Projects/<ProjectMeta[name]>}}}</includeonly>
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{SubpageNav| icon=emotes-face-smile-big}}

{{{for template|ProjectMeta}}}
{| class="formtable"
! Project Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Project Name}}}
|-
! Status:
| {{{field|status|input type=dropdown|values=Active,Hiatus,Completed,Abandoned|default=Active}}}
|-
! License:
| {{{field|license|input type=dropdown|values=CC0 1.0,CC BY 4.0,CC BY-SA 4.0,MIT,Apache 2.0,GPL-3.0,AGPL-3.0,LGPL-3.0,BSD-3-Clause,MPL-2.0,EPL-2.0,EUPL-1.2}}}
|-
! Creator / Team:
| {{{field|creator|input type=text|size=40|placeholder=Your name or team name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over your project card.}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, ambient, synthesis}}}
|-
! Website:
| {{{field|website|input type=text|size=60|placeholder=example.com}}}
|-
! Repository:
| {{{field|repository|input type=text|size=60|placeholder=https://codeberg.org/...}}}
|-
! Extra Field 1 Label:
| {{{field|field1label|input type=text|size=30|placeholder=e.g. DAW}}}
|-
! Extra Field 1 Value:
| {{{field|field1value|input type=text|size=30|placeholder=e.g. Ableton}}}
|-
! Extra Field 2 Label:
| {{{field|field2label|input type=text|size=30|placeholder=e.g. Genre}}}
|-
! Extra Field 2 Value:
| {{{field|field2value|input type=text|size=30|placeholder=e.g. Ambient}}}
|-
! Extra Field 3 Label:
| {{{field|field3label|input type=text|size=30}}}
|-
! Extra Field 3 Value:
| {{{field|field3value|input type=text|size=30}}}
|-
! Extra Field 4 Label:
| {{{field|field4label|input type=text|size=30}}}
|-
! Extra Field 4 Value:
| {{{field|field4value|input type=text|size=30}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Project}}} {{{standard input|cancel}}}

MediaWiki:Gadget-subpagenav.js

2026-04-05T00:37:20Z

Anthony:

/* =============================================================================
MediaWiki:Gadget-subpagenav.js
UnfinishedProjects Wiki

Auto-builds nested dropdown menus from Special:PrefixIndex output and
wires up accessible toggle behaviour for Template:SubpageNav.

TABLE OF CONTENTS
Part 1 — Auto-Builder (converts flat PrefixIndex list → nested tree)
Part 2 — Manual Lists (adds carets to hand-authored <ul> trees)
Part 3 — Click Handlers
Part 4 — Current-Page Highlight
============================================================================= */
( function () {
$( function () {

var $navLinks = $( '.subpage-nav-links' );
if ( !$navLinks.length ) return;

/* =====================================================================
PART 1: AUTO-BUILDER
Converts the flat <a> list from Special:PrefixIndex into a proper
nested tree.

WHY TWO PASSES?
PrefixIndex lists pages alphabetically. If "About" appears before
"About/More Details", a single-pass builder would create "About" as a
leaf <li> (no child <ul>). When "About/More Details" is processed next
it tries to descend into a non-existent <ul> and silently drops the
item. Building a plain-JS tree first, then rendering, avoids this
entirely — a node can be both a real page AND a parent folder.
===================================================================== */
$navLinks.find( '.subpage-auto-list' ).each( function () {
var $autoContainer = $( this );

// --- Pass A: Build a plain-JS tree --------------------------------
// Each node shape: { href: null|string, children: {} }
var tree = {};

$autoContainer.find( 'a' ).each( function () {
var href = $( this ).attr( 'href' );
var fullPath = $( this ).text().trim(); // e.g. "About/More Details"
var parts = fullPath.split( '/' );

var node = tree;
for ( var i = 0; i < parts.length; i++ ) {
var part = parts[ i ].trim();
if ( !part ) { continue; }

if ( !node[ part ] ) {
node[ part ] = { href: null, children: {} };
}
// If this is the last segment it's a real, linkable page
if ( i === parts.length - 1 ) {
node[ part ].href = href;
}
// Descend regardless — the same segment can be both a page
// and a parent folder (dual-node case)
node = node[ part ].children;
}
} );

// --- Pass B: Render tree to DOM (recursive) -----------------------
function renderTree( treeNode ) {
var $ul = $( '<ul>' );

$.each( treeNode, function ( key, item ) {
var $li = $( '<li>' );
var hasChildren = Object.keys( item.children ).length > 0;

if ( item.href ) {
// Real page — render as a navigable link
$li.append( $( '<a>' ).attr( 'href', item.href ).text( key ) );
} else {
// Virtual folder — no page exists, render as a label
$li.append( $( '<span>' ).text( key ) );
}

if ( hasChildren ) {
// Add a SIBLING caret <button> — not inside the <a>.
// This keeps the link fully navigable; only the button toggles.
$li.addClass( 'has-dropdown' );
$li.append(
$( '<button>' )
.addClass( 'subpage-nav-caret' )
.attr( 'type', 'button' )
.attr( 'aria-label', 'Toggle submenu' )
.text( '▾' )
);
$li.append( renderTree( item.children ) );
}

$ul.append( $li );
} );

return $ul;
}

// Swap the raw PrefixIndex block with our clean nested list
$autoContainer.replaceWith( renderTree( tree ) );
} );

/* =====================================================================
PART 2: MANUAL LISTS
When the template is called with a hand-authored wikitext list
(parameter 1), MediaWiki already renders correct <ul>/<li> nesting.
We just need to find <li> elements that contain a child <ul> and
wire them up the same way the auto-builder does.

KEY DIFFERENCE from old approach:
Old code appended the caret INSIDE the <a> tag, then called
e.preventDefault() on the <a> click — this prevented navigation.
New code adds a separate sibling <button> for the caret, so the
link remains fully clickable for navigation.
===================================================================== */
$navLinks.find( 'li' ).has( 'ul' ).each( function () {
var $li = $( this );

// Skip anything already wired up by Part 1
if ( $li.hasClass( 'has-dropdown' ) ) { return; }
$li.addClass( 'has-dropdown' );

var $trigger = $li.children( 'a, span' ).first();
var $caret = $( '<button>' )
.addClass( 'subpage-nav-caret' )
.attr( 'type', 'button' )
.attr( 'aria-label', 'Toggle submenu' )
.text( '▾' );

if ( $trigger.is( 'a' ) ) {
// Link stays navigable — insert caret as a sibling AFTER the link
$trigger.after( $caret );
} else {
// No real link — caret goes inside the <span> as a child
$trigger.append( $caret );
}
} );

/* =====================================================================
PART 3: CLICK HANDLERS

Caret button → toggle is-open on parent <li>, close siblings
Folder <span> → same (clicking the label of a folder-only item)
Outside click → close all open dropdowns
===================================================================== */

// Caret button click
$navLinks.on( 'click', '.has-dropdown > .subpage-nav-caret', function ( e ) {
e.preventDefault();
e.stopPropagation();
var $parentLi = $( this ).parent();
// Close siblings at the same nesting level
$parentLi.siblings( '.is-open' ).removeClass( 'is-open' );
$parentLi.toggleClass( 'is-open' );
} );

// Folder label <span> click (virtual folder — no navigation possible)
$navLinks.on( 'click', '.has-dropdown > span', function ( e ) {
e.preventDefault();
var $parentLi = $( this ).parent();
$parentLi.siblings( '.is-open' ).removeClass( 'is-open' );
$parentLi.toggleClass( 'is-open' );
} );

// Click anywhere outside the nav closes all open dropdowns
$( document ).on( 'click', function ( e ) {
if ( !$( e.target ).closest( '.subpage-nav-links' ).length ) {
$navLinks.find( '.is-open' ).removeClass( 'is-open' );
}
} );

/* =====================================================================
PART 4: CURRENT-PAGE HIGHLIGHT
Reads the current page name from MediaWiki, finds the matching link
in the nav, marks it with .is-current, and auto-opens any ancestor
dropdown <li> elements so the user can immediately see where they are.

Normalises underscores ↔ spaces since MediaWiki uses both.
===================================================================== */
var currentPage = ( mw.config.get( 'wgPageName' ) || '' ).replace( /_/g, ' ' );
if ( !currentPage ) { return; }

$navLinks.find( 'a' ).each( function () {
var $a = $( this );
var href = decodeURIComponent( $a.attr( 'href' ) || '' );

// MediaWiki internal links look like /wiki/Page_Name
// Strip the /wiki/ prefix and normalise underscores
var linkPage = href.replace( /^.*\/wiki\//, '' ).replace( /_/g, ' ' );

if ( linkPage === currentPage ) {
$a.addClass( 'is-current' );

// Walk up the DOM and open ancestor dropdowns.
// Start from $a.parent() so we do NOT auto-open the dropdown
// that the current page itself belongs to — only true ancestors.
$a.parent().parents( '.subpage-nav-links li.has-dropdown' ).each( function () {
$( this ).addClass( 'is-open' );
} );

return false; // Stop iterating once found
}
} );

} );
}() );

MediaWiki:Gadget-projects.js

2026-04-05T00:36:33Z

Anthony:

/* =============================================================================
Gadget-projects.js v2.1
Unified project hub — API-powered search, tag/licence filtering, pagination.
============================================================================= */
( function () {

if ( mw.config.get( 'wgPageName' ) !== 'Projects' ) { return; }

$( function () {

var PAGE_SIZE = 24;
var generation = 0; // Incremented on every new search to discard stale responses

var state = {
search : '',
tag : '',
license : '',
sort : 'newest',
offset : 0,
done : false,
busy : false
};

var $wrapper = $( '.project-hub-wrapper' );
if ( !$wrapper.length ) { return; }

var $filters = $wrapper.find( '.project-hub-filters' );
var $tagCloud = $wrapper.find( '.project-hub-tagcloud' );
var $licenseCloud = $wrapper.find( '.project-hub-licensecloud' );
var $grid = $wrapper.find( '.project-hub-grid' );
var $count = $( '<span>' ).addClass( 'project-hub-count' );

// Create the Load More button entirely in JS.
// <button> tags are stripped by the MediaWiki HTML sanitiser if placed in wikitext.
var $more = $( '<button>' )
.addClass( 'project-hub-loadmore' )
.text( 'Load more projects' )
.hide()
.appendTo( $wrapper );

// ── Filter bar ────────────────────────────────────────────────────────
var $search = $( '<input>' ).attr( {
type : 'text',
placeholder : 'Search name, creator, license, tags, description\u2026',
'class' : 'project-hub-search'
} );
var $sort = $( '<select>' ).addClass( 'project-hub-select' ).append(
$( '<option>' ).val( 'newest' ).text( 'Newest first' ),
$( '<option>' ).val( 'alpha' ).text( 'A \u2013 Z' )
);
$filters.append( $search, $sort, $count );

// ── Events ────────────────────────────────────────────────────────────
var searchDebounce;
$search.on( 'input', function () {
clearTimeout( searchDebounce );
searchDebounce = setTimeout( function () {
state.search = $search.val().trim();
resetAndLoad();
}, 350 );
} );

$sort.on( 'change', function () {
state.sort = $sort.val();
resetAndLoad();
} );

$more.on( 'click', function () {
if ( !state.busy ) { fetchPage(); }
} );

// Tag pill — delegated so it works for both cloud pills and card tag spans
$( document ).on( 'click', '.js-tag-filter', function ( e ) {
e.stopPropagation();
var tag = $( this ).data( 'tag' );
if ( state.tag === tag ) {
state.tag = '';
$( '.js-tag-filter' ).removeClass( 'is-active' );
} else {
state.tag = tag;
$( '.js-tag-filter' ).removeClass( 'is-active' );
$( '.js-tag-filter' ).filter( function () {
return $( this ).data( 'tag' ) === tag;
} ).addClass( 'is-active' );
}
resetAndLoad();
} );

// License pill — delegated
$( document ).on( 'click', '.js-license-filter', function ( e ) {
e.stopPropagation();
var lic = $( this ).data( 'license' );
if ( state.license === lic ) {
state.license = '';
$( '.js-license-filter' ).removeClass( 'is-active' );
} else {
state.license = lic;
$( '.js-license-filter' ).removeClass( 'is-active' );
$( '.js-license-filter' ).filter( function () {
return $( this ).data( 'license' ) === lic;
} ).addClass( 'is-active' );
}
resetAndLoad();
} );

// ── Boot ─────────────────────────────────────────────────────────────
loadTagCloud();
loadLicenseCloud();
loadHubMeta();
fetchPage();

// ── Helpers ───────────────────────────────────────────────────────────
function resetAndLoad() {
generation++; // Any in-flight request with a lower generation is discarded
state.offset = 0;
state.done = false;
state.busy = false; // Unblock immediately so the new fetch can start
$grid.empty();
$more.hide();
fetchPage();
}

function buildWhere() {
var parts = [];
if ( state.search ) {
var q = state.search.replace( /'/g, "''" );
parts.push(
"( name LIKE '%" + q + "%'" +
" OR creator LIKE '%" + q + "%'" +
" OR license LIKE '%" + q + "%'" +
" OR description LIKE '%" + q + "%' )"
);
}
if ( state.tag ) {
parts.push( "tags HOLDS '" + state.tag.replace( /'/g, "''" ) + "'" );
}
if ( state.license ) {
parts.push( "license = '" + state.license.replace( /'/g, "''" ) + "'" );
}
return parts.join( ' AND ' );
}

function orderBy() {
return state.sort === 'alpha' ? 'name ASC' : '_pageID DESC';
}

// ── Data ──────────────────────────────────────────────────────────────
function fetchPage() {
if ( state.busy || state.done ) { return; }
state.busy = true;
var gen = ++generation;
$more.text( 'Loading\u2026' ).show();

var params = {
action : 'cargoquery',
tables : 'Projects',
fields : '_pageName=pagename,name,status,license,creator,' +
'description,image,tags,' +
'field1label,field1value,field2label,field2value,' +
'field3label,field3value,field4label,field4value',
order_by : orderBy(),
limit : PAGE_SIZE,
offset : state.offset,
format : 'json'
};
var w = buildWhere();
if ( w ) { params.where = w; }
if ( state.offset === 0 ) { fetchTotal( w ); }

$.getJSON( mw.util.wikiScript( 'api' ), params )
.done( function ( data ) {
if ( gen !== generation ) { return; } // Stale — discard silently

var rows = ( data.cargoquery || [] ).map( function ( r ) { return r.title; } );
var prevOff = state.offset;
var batch = [];

rows.forEach( function ( row ) {
var $c = buildCard( row );
$grid.append( $c );
batch.push( { $el: $c, page: row.pagename } );
} );

enrichCards( batch );

state.offset += rows.length;
state.done = rows.length < PAGE_SIZE;
state.busy = false;

$more.text( 'Load more projects' ).toggle( !state.done );

if ( rows.length === 0 && prevOff === 0 ) {
$grid.html( '<div class="project-hub-empty">No projects found matching your search.</div>' );
$more.hide();
}
} )
.fail( function () {
if ( gen !== generation ) { return; }
state.busy = false;
$more.text( 'Load more projects' ).toggle( !state.done );
} );
}

function fetchTotal( where ) {
var p = { action: 'cargoquery', tables: 'Projects', fields: 'COUNT(*)=n', limit: 1, format: 'json' };
if ( where ) { p.where = where; }
$.getJSON( mw.util.wikiScript( 'api' ), p ).done( function ( data ) {
var row = ( data.cargoquery || [] )[ 0 ];
var n = row ? ( parseInt( row.title.n, 10 ) || 0 ) : 0;
$count.text( n + ' project' + ( n === 1 ? '' : 's' ) );
} );
}

function loadTagCloud() {
$.getJSON( mw.util.wikiScript( 'api' ), {
action: 'cargoquery', tables: 'Projects', fields: 'tags', limit: 500, format: 'json'
} ).done( function ( data ) {
var freq = {};
( data.cargoquery || [] ).forEach( function ( r ) {
( r.title.tags || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim();
if ( t ) { freq[ t ] = ( freq[ t ] || 0 ) + 1; }
} );
} );
var top = Object.keys( freq )
.sort( function ( a, b ) { return freq[ b ] - freq[ a ]; } )
.slice( 0, 25 );
if ( !top.length ) { return; }
top.forEach( function ( tag ) {
$tagCloud.append(
$( '<span>' ).addClass( 'js-tag-filter' ).attr( 'data-tag', tag ).text( tag )
);
} );
$tagCloud.show();
} );
}

function loadLicenseCloud() {
$.getJSON( mw.util.wikiScript( 'api' ), {
action : 'cargoquery',
tables : 'Projects',
fields : 'license',
group_by : 'license',
where : "license IS NOT NULL AND license != ''",
order_by : 'license ASC',
limit : 20,
format : 'json'
} ).done( function ( data ) {
var licenses = ( data.cargoquery || [] )
.map( function ( r ) { return ( r.title.license || '' ).trim(); } )
.filter( Boolean );
if ( !licenses.length ) { return; }
licenses.forEach( function ( lic ) {
$licenseCloud.append(
$( '<span>' ).addClass( 'js-license-filter' )
.attr( 'data-license', lic ).text( lic )
);
} );
$licenseCloud.show();
} );
}

function loadHubMeta() {
mw.loader.using( 'mediawiki.api' ).then( function () {
new mw.Api().get( {
action: 'query', list: 'categorymembers', cmtitle: 'Category:Projects',
cmsort: 'timestamp', cmdir: 'desc', cmlimit: 1,
cmtype: 'page', cmprop: 'ids|title|timestamp', format: 'json'
} ).done( function ( data ) {
var m = data.query && data.query.categorymembers;
if ( !m || !m.length ) { return; }
var str = m[ 0 ].title.replace( /^.*\//, '' ) + ' \u2014 ' +
( m[ 0 ].timestamp
? new Date( m[ 0 ].timestamp ).toLocaleDateString(
'en-GB', { day: 'numeric', month: 'short', year: 'numeric' } )
: '\u2014' );
$( '#hub-meta-last-submission, #hub-meta-last-edit' ).text( str );
} );
} );
}

// ── Card rendering ────────────────────────────────────────────────────
function parseWikitext( text ) {
if ( !text ) { return ''; }
text = String( text );
// External links: [https://url Display Text]
text = text.replace( /\[(\S+?)\s+([^\]]+?)\]/g, function ( m, url, display ) {
if ( !/^https?:\/\//i.test( url ) ) { return mw.html.escape( m ); }
return '<a href="' + url.replace( /"/g, '%22' ) + '" target="_blank" rel="noopener noreferrer">' +
mw.html.escape( display ) + '</a>';
} );
// Internal links: [[Page Name|Display]] or [[Page Name]]
text = text.replace( /\[\[([^\]|]+?)(?:\|([^\]]+?))?\]\]/g, function ( m, page, display ) {
return '<a href="' + mw.util.getUrl( page.trim() ) + '">' +
mw.html.escape( ( display || page ).trim() ) + '</a>';
} );
// Newlines to line breaks
text = text.replace( /\n/g, '<br>' );
return text;
}

function esc( s ) { return mw.html.escape( s || '' ); }

function fileUrl( f ) {
return f ? mw.config.get( 'wgServer' ) + '/wiki/Special:FilePath/' + encodeURIComponent( f ) : '';
}

function buildCard( row ) {
var page = row.pagename || '';
var name = row.name || page.replace( /^.*\//, '' );
var url = mw.util.getUrl( page );

var img = row.image
? '<img src="' + esc( fileUrl( row.image ) ) + '" alt="' + esc( name ) + '" loading="lazy">'
: '<div class="project-card-image-fallback"></div>';

var badges = '';
if ( row.status ) {
badges += '<span class="project-badge-status project-badge-status--' +
esc( row.status.toLowerCase() ) + '">' + esc( row.status ) + '</span>';
}
if ( row.license ) {
badges += '<span class="project-badge-license">' + esc( row.license ) + '</span>';
}

var tags = '';
( row.tags || '' ).split( ',' ).forEach( function ( t ) {
t = t.trim();
if ( t ) {
tags += '<span class="project-card-tag js-tag-filter" data-tag="' +
esc( t ) + '">' + esc( t ) + '</span>';
}
} );

var extras = '';
for ( var i = 1; i <= 4; i++ ) {
if ( row[ 'field' + i + 'label' ] ) {
extras += '<div class="project-card-extra">' +
esc( row[ 'field' + i + 'label' ] ) +
': <strong>' + parseWikitext( row[ 'field' + i + 'value' ] ) + '</strong></div>';
}
}

return $( [
'<div class="project-card-wrap">',
'<div class="project-card">',
'<div class="project-card-inner">',
'<div class="project-card-front">',
'<div class="project-card-image">', img, '</div>',
'<div class="project-card-body">',
'<div class="project-card-title"><a href="', url, '">', esc( name ), '</a></div>',
'<div class="project-card-badges">', badges, '</div>',
row.creator ? '<div class="project-card-creator"><span class="project-card-label">By</span> ' + esc( row.creator ) + '</div>' : '',
extras,
tags ? '<div class="project-card-tags">' + tags + '</div>' : '',
'<div class="project-card-footer">',
'<span class="project-card-meta-item project-card-contributors">—</span>',
'<span class="project-card-meta-item project-card-updated">—</span>',
'<button class="js-flip-btn project-card-flip-btn">Read more</button>',
'</div>',
'</div>',
'</div>',
'<div class="project-card-back">',
'<div class="project-card-back-header">',
'<span class="project-card-back-title">About</span>',
'<button class="js-flip-btn project-card-flip-btn">Close</button>',
'</div>',
'<div class="project-card-back-content">',
row.description ? esc( row.description ) : 'No description provided.',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>'
].join( '' ) );
}

// ── Enrichment (contributor count + last-edited date) ─────────────────
function enrichCards( batch ) {
if ( !batch.length ) { return; }
var api = new mw.Api();
for ( var i = 0; i < batch.length; i += 20 ) {
( function ( chunk ) {
api.get( {
action: 'query',
titles: chunk.map( function ( c ) { return c.page; } ).join( '|' ),
prop: 'revisions|contributors',
rvprop: 'timestamp', rvlimit: 1, pclimit: 20,
format: 'json'
} ).done( function ( data ) {
if ( !data.query ) { return; }
$.each( data.query.pages || {}, function ( _, page ) {
if ( page.missing !== undefined ) { return; }
var normalise = function ( s ) { return ( s || '' ).replace( /_/g, ' ' ); };
var match = chunk.filter( function ( c ) { return normalise( c.page ) === normalise( page.title ); } );
if ( !match.length ) { return; }
var $el = match[ 0 ].$el;
var ts = ( page.revisions && page.revisions[ 0 ] && page.revisions[ 0 ].timestamp ) || '';
var n = ( page.contributors ? page.contributors.length : 0 ) + ( page.anoncontributors || 0 );
var d = ts ? new Date( ts ).toLocaleDateString( 'en-GB', { year: 'numeric', month: 'short' } ) : '\u2014';
$el.find( '.project-card-contributors' )
.text( n + ( n === 1 ? ' contributor' : ' contributors' ) ).addClass( 'loaded' );
$el.find( '.project-card-updated' )
.text( 'Edited ' + d ).addClass( 'loaded' );
} );
} );
} )( batch.slice( i, i + 20 ) );
}
}

} );

} () );

Form:Submit Tutorial

2026-04-05T00:33:35Z

Anthony: Trying to fix bug with New tutorials going to root wiki directory

{{{info|page name=Tutorials/<TutorialMeta[name]>}}}
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{SubpageNav| icon=emotes-face-smile-big}}

{{{for template|TutorialMeta}}}
{| class="formtable"
! Tutorial Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Tutorial Name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over the tutorial card.}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, beginner, recording}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Tutorial}}} {{{standard input|cancel}}}

Form:Submit Project

2026-04-05T00:30:36Z

Anthony: Fixed Bug with <name> causing parsing error

{{{info|page name=Projects/<ProjectMeta[name]>}}}
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{SubpageNav| icon=emotes-face-smile-big}}

{{{for template|ProjectMeta}}}
{| class="formtable"
! Project Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Project Name}}}
|-
! Status:
| {{{field|status|input type=dropdown|values=Active,Hiatus,Completed,Abandoned|default=Active}}}
|-
! License:
| {{{field|license|input type=dropdown|values=CC0 1.0,CC BY 4.0,CC BY-SA 4.0,MIT,Apache 2.0,GPL-3.0,AGPL-3.0,LGPL-3.0,BSD-3-Clause,MPL-2.0,EPL-2.0,EUPL-1.2}}}
|-
! Creator / Team:
| {{{field|creator|input type=text|size=40|placeholder=Your name or team name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over your project card.}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, ambient, synthesis}}}
|-
! Website:
| {{{field|website|input type=text|size=60|placeholder=example.com}}}
|-
! Repository:
| {{{field|repository|input type=text|size=60|placeholder=https://codeberg.org/...}}}
|-
! Extra Field 1 Label:
| {{{field|field1label|input type=text|size=30|placeholder=e.g. DAW}}}
|-
! Extra Field 1 Value:
| {{{field|field1value|input type=text|size=30|placeholder=e.g. Ableton}}}
|-
! Extra Field 2 Label:
| {{{field|field2label|input type=text|size=30|placeholder=e.g. Genre}}}
|-
! Extra Field 2 Value:
| {{{field|field2value|input type=text|size=30|placeholder=e.g. Ambient}}}
|-
! Extra Field 3 Label:
| {{{field|field3label|input type=text|size=30}}}
|-
! Extra Field 3 Value:
| {{{field|field3value|input type=text|size=30}}}
|-
! Extra Field 4 Label:
| {{{field|field4label|input type=text|size=30}}}
|-
! Extra Field 4 Value:
| {{{field|field4value|input type=text|size=30}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Project}}} {{{standard input|cancel}}}

Projects/Window Manager Central

2026-04-05T00:19:50Z

Anthony: Fixed broken website link in ProjectMeta (Removed https://)

{{ProjectMeta
|name=Window Manager Central
|status=Active
|description=Window Manager Cenral is small website where you can learn about window managers and hit the ground running with a fast new workflow. Discover guides, tips and resources for all levels of familiarity.
|website=wmc.codeberg.page
|repository=https://codeberg.org/wmc/pages-src
}}This is a small website project intending to serve as a dictionary of tips for window manager users. The idea is that anyone can upload tips, edit and improve the information available so that newcomers to window managers find it easier to start their journey.

It is particularly difficult for newcomers to find guides, more so with good guides, when things go south the most usual response is to give up on window managers altogether. Having one place (ideally) that points to all the guides that one may need, as well as other sources of interest should facilitate the pain of using a search engine over and over.

The point is not to babysit newcomers, but to point them in the right direction. While experienced users don't need regular help, they will definitely enjoy having a collection of resources instead of having the usual search engine route. They could find particular pleasure in sharing their own guides and mishaps that newbies will want to avoid.

The website is build with [https://gohugo.io Hugo] and hosted on [https://codeberg.page Codeberg Pages], contributing for people familiar with Git is easy, it is just a pull request away. For other ways of contributing one can get in contact with the team.

Projects/Example Project

2026-04-05T00:14:19Z

Anthony: Undo revision 1196 by Anthony (talk)

{{SubpageNav}}
{{AIBanner
| acceptability = 【Text 🟢 Yes 】【 Images 🔴 No 】【 Code 🟠 Depends* 】
| details = LLM Generated text and code must be thoroughly reviewed and proofread. . .it should be used as a tool to ''assist'' and enhance your contributions, not replace them. *Code is allowed only if a) it is manually proofread and checked for quality or b) it is used as a temporary proof of concept/demo and is clearly labeled as such.
}}
{{ProjectMeta
| name = Example Project
| status = Completed
| license = CC BY-SA 4.0
| creator = UnfinishedProjects
| description = This is an example project. It demonstrates how a project page should be set up.
| image = Unfinished Projects Logo x512.png
| tags = example, demo, template
| website = forum.unfinishedprojects.net
| repository = https://codeberg.org/UnfinishedProjects/UnfinishedProjects.net
| field1label = Current Project Lead
| field1value = [https://forum.unfinishedprojects.net/user/unfinishedprojects UnfinishedProjects]
| field2label = Contributors
| field2value = [https://forum.unfinishedprojects.net/user/anthony Anthony]

[https://forum.unfinishedprojects.net/user/www-gem www-gem]

[https://forum.unfinishedprojects.net/user/alectronic alectronic]
| field3label = Forked From
| field3value = [[Example Page| Another Project (Creator Name)]]
}}

Animi et et quis ut totam inventore. Eligendi est ut ullam voluptatibus dolorum ex. In quisquam est enim soluta distinctio explicabo quidem voluptatem. Maxime neque dolor id in sunt quisquam quos.

Maiores in dolores laborum molestiae possimus. Ipsum ut et rerum. Neque et perspiciatis eaque autem unde molestias omnis voluptatem.

Aspernatur ut non impedit ea natus eveniet distinctio. Perferendis non eveniet in nihil aut. Quo aut atque natus quisquam laboriosam.

Dolor cumque sed quia quia quis debitis minus ipsa. Veniam recusandae voluptatem quia aut possimus veritatis. Omnis dolores unde quibusdam fugit officiis fugiat. Porro vel qui quia sequi enim nesciunt at. Omnis consequatur veniam quisquam numquam.

Suscipit ipsum impedit reprehenderit magni asperiores tempore tenetur. Id consequatur aut earum voluptas autem qui. Cum laboriosam suscipit est autem non voluptatem aut. Quae error repellendus libero aliquam. Quod quia atque qui doloremque est cupiditate libero. Necessitatibus illum provident et.

Projects/Example Project

2026-04-05T00:13:29Z

Anthony: Reverting to old version to see if it fixes some javascript errors on the hub.

{{SubpageNav}}
{{AIBanner
| acceptability = 【Text 🟢 Yes 】【 Images 🔴 No 】【 Code 🟠 Depends* 】
| details = LLM Generated text and code must be thoroughly reviewed and proofread. . .it should be used as a tool to ''assist'' and enhance your contributions, not replace them. *Code is allowed only if a) it is manually proofread and checked for quality or b) it is used as a temporary proof of concept/demo and is clearly labeled as such.
}}
{{ProjectMeta
| name = Example Project
| status = Completed
| license = CC-BY-SA 4.0
| creator = UnfinishedProjects
| description = This is an example project. It demonstrates how a project page should be set up.
| image = Unfinished Projects Logo x512.png
| tags = example, demo, template
| website = forum.unfinishedprojects.net
| repository = https://codeberg.org/UnfinishedProjects/UnfinishedProjects.net
| field1label = Extra Label
| field1value = Value
| field2label = Another Label
| field2value = Another Value
}}

Animi et et quis ut totam inventore. Eligendi est ut ullam voluptatibus dolorum ex. In quisquam est enim soluta distinctio explicabo quidem voluptatem. Maxime neque dolor id in sunt quisquam quos.

Maiores in dolores laborum molestiae possimus. Ipsum ut et rerum. Neque et perspiciatis eaque autem unde molestias omnis voluptatem.

Aspernatur ut non impedit ea natus eveniet distinctio. Perferendis non eveniet in nihil aut. Quo aut atque natus quisquam laboriosam.

Dolor cumque sed quia quia quis debitis minus ipsa. Veniam recusandae voluptatem quia aut possimus veritatis. Omnis dolores unde quibusdam fugit officiis fugiat. Porro vel qui quia sequi enim nesciunt at. Omnis consequatur veniam quisquam numquam.

Suscipit ipsum impedit reprehenderit magni asperiores tempore tenetur. Id consequatur aut earum voluptas autem qui. Cum laboriosam suscipit est autem non voluptatem aut. Quae error repellendus libero aliquam. Quod quia atque qui doloremque est cupiditate libero. Necessitatibus illum provident et.

Form:Submit Project

2026-04-04T14:34:09Z

Anthony: Undo revision 1189 by Anthony (talk)

{{{info|page name=Projects/<name>}}}
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{SubpageNav| icon=emotes-face-smile-big}}

{{{for template|ProjectMeta}}}
{| class="formtable"
! Project Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Project Name}}}
|-
! Status:
| {{{field|status|input type=dropdown|values=Active,Hiatus,Completed,Abandoned|default=Active}}}
|-
! License:
| {{{field|license|input type=dropdown|values=CC0 1.0,CC BY 4.0,CC BY-SA 4.0,MIT,Apache 2.0,GPL-3.0,AGPL-3.0,LGPL-3.0,BSD-3-Clause,MPL-2.0,EPL-2.0,EUPL-1.2,Other}}}
| {{{field|license|input type=dropdown|values=}}}
|-
! Creator / Team:
| {{{field|creator|input type=text|size=40|placeholder=Your name or team name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over your project card.}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, ambient, synthesis}}}
|-
! Website:
| {{{field|website|input type=text|size=60|placeholder=example.com}}}
|-
! Repository:
| {{{field|repository|input type=text|size=60|placeholder=https://codeberg.org/...}}}
|-
! Extra Field 1 Label:
| {{{field|field1label|input type=text|size=30|placeholder=e.g. DAW}}}
|-
! Extra Field 1 Value:
| {{{field|field1value|input type=text|size=30|placeholder=e.g. Ableton}}}
|-
! Extra Field 2 Label:
| {{{field|field2label|input type=text|size=30|placeholder=e.g. Genre}}}
|-
! Extra Field 2 Value:
| {{{field|field2value|input type=text|size=30|placeholder=e.g. Ambient}}}
|-
! Extra Field 3 Label:
| {{{field|field3label|input type=text|size=30}}}
|-
! Extra Field 3 Value:
| {{{field|field3value|input type=text|size=30}}}
|-
! Extra Field 4 Label:
| {{{field|field4label|input type=text|size=30}}}
|-
! Extra Field 4 Value:
| {{{field|field4value|input type=text|size=30}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Project}}} {{{standard input|cancel}}}

Form:Submit Project

2026-04-04T14:29:35Z

Anthony: Fixed bugs for form pathing

<noinclude>
This is the "Project" form.
To create a page with this form, enter the project name below:
{{#forminput:form=Project|button text=Create Project Page}}
</noinclude><includeonly>
{{{info|page name=Projects/<ProjectMeta[name]>}}}

<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #aaa;"></div>

{{SubpageNav| icon=emotes-face-smile-big}}

{{{for template|ProjectMeta}}}
{| class="formtable"
! Project Name:
| {{{field|name|input type=text|mandatory|size=60|placeholder=My Project Name}}}
|-
! Status:
| {{{field|status|input type=dropdown|values=Active,Hiatus,Completed,Abandoned|default=Active}}}
|-
! License:
| {{{field|license|input type=dropdown|values=CC0 1.0,CC BY 4.0,CC BY-SA 4.0,MIT,Apache 2.0,GPL-3.0,AGPL-3.0,LGPL-3.0,BSD-3-Clause,MPL-2.0,EPL-2.0,EUPL-1.2,Other}}}
|-
! Creator / Team:
| {{{field|creator|input type=text|size=40|placeholder=Your name or team name}}}
|-
! Short Description:
| {{{field|description|input type=textarea|rows=3|cols=60|placeholder=A short description shown on hover over your project card.}}}
|-
! Cover Image:
| {{{field|image|input type=text|size=40|placeholder=MyImage.png (upload the file first)}}}
|-
! Tags:
| {{{field|tags|input type=text|size=60|placeholder=Comma-separated tags, e.g.: audio, ambient, synthesis}}}
|-
! Website:
| {{{field|website|input type=text|size=60|placeholder=example.com}}}
|-
! Repository:
| {{{field|repository|input type=text|size=60|placeholder=https://codeberg.org/...}}}
|-
! Extra Field 1 Label:
| {{{field|field1label|input type=text|size=30|placeholder=e.g. DAW}}}
|-
! Extra Field 1 Value:
| {{{field|field1value|input type=text|size=30|placeholder=e.g. Ableton}}}
|-
! Extra Field 2 Label:
| {{{field|field2label|input type=text|size=30|placeholder=e.g. Genre}}}
|-
! Extra Field 2 Value:
| {{{field|field2value|input type=text|size=30|placeholder=e.g. Ambient}}}
|-
! Extra Field 3 Label:
| {{{field|field3label|input type=text|size=30}}}
|-
! Extra Field 3 Value:
| {{{field|field3value|input type=text|size=30}}}
|-
! Extra Field 4 Label:
| {{{field|field4label|input type=text|size=30}}}
|-
! Extra Field 4 Value:
| {{{field|field4value|input type=text|size=30}}}
|}
{{{end template}}}

{{{standard input|save|label=Submit Project}}} {{{standard input|cancel}}}
</includeonly>

File:Amalgam Logo.png

2026-04-04T14:19:50Z

Anthony: A Simple Logo for Amalgam Board Game. Will likely get replaced in the future.

== Summary ==
A Simple Logo for Amalgam Board Game. Will likely get replaced in the future.
== Licensing ==
{{CC-BY-SA-4.0}}

MediaWiki:Licenses

2026-04-04T14:15:18Z

Anthony: Removed vague licenses

* Free & Open Licenses (Recommended)
** CC-BY-SA-4.0|Creative Commons Attribution-ShareAlike 4.0 (Default - Assets)
** CC-BY-4.0|Creative Commons Attribution 4.0
** PD|Public Domain / CC0 1.0
** AGPL-3.0|GNU Affero General Public License v3.0 (Default - Code)
** GPL-3.0|GNU General Public License v3.0
** MIT|MIT License
** BSD-3-Clause|3-Clause BSD License
** Apache-2.0|Apache License 2.0

* More Open Source Licenses
** LGPL-3.0|GNU Lesser General Public License v3.0
** MPL-2.0|Mozilla Public License 2.0
** EPL-2.0|Eclipse Public License 2.0
** EUPL-1.2|European Union Public License 1.2
** Other|Other Open License (Specify in summary)

* Wiki Specific
** UP-screenshot|UnfinishedProjects Screenshot (CC-BY-SA 4.0 + Captured Content Licensing)

* Non-Free / Protected (Exceptions)
** Logo|Fair Use: Official Logo (Trademarked, low-res, for brand identification only)

* Non-Compliant
** None|Unknown / No license (Warning: File will be removed - DO NOT UPLOAD)

Form:Submit Project

2026-04-04T14:12:47Z

Anthony: Removed Vague licenses

Projects/Example Project

2026-04-04T14:07:59Z

Anthony: Fixed license after updating form

{{SubpageNav}}
{{AIBanner
| acceptability = 【Text 🟢 Yes 】【 Images 🔴 No 】【 Code 🟠 Depends* 】
| details = LLM Generated text and code must be thoroughly reviewed and proofread. . .it should be used as a tool to ''assist'' and enhance your contributions, not replace them. *Code is allowed only if a) it is manually proofread and checked for quality or b) it is used as a temporary proof of concept/demo and is clearly labeled as such.
}}
{{ProjectMeta
| name = Example Project
| status = Completed
| license = CC BY-SA 4.0
| creator = UnfinishedProjects
| description = This is an example project. It demonstrates how a project page should be set up.
| image = Unfinished Projects Logo x512.png
| tags = example, demo, template
| website = forum.unfinishedprojects.net
| repository = https://codeberg.org/UnfinishedProjects/UnfinishedProjects.net
| field1label = Current Project Lead
| field1value = [https://forum.unfinishedprojects.net/user/unfinishedprojects UnfinishedProjects]
| field2label = Contributors
| field2value = [https://forum.unfinishedprojects.net/user/anthony Anthony]

[https://forum.unfinishedprojects.net/user/www-gem www-gem]

[https://forum.unfinishedprojects.net/user/alectronic alectronic]
| field3label = Forked From
| field3value = [[Example Page| Another Project (Creator Name)]]
}}

Animi et et quis ut totam inventore. Eligendi est ut ullam voluptatibus dolorum ex. In quisquam est enim soluta distinctio explicabo quidem voluptatem. Maxime neque dolor id in sunt quisquam quos.

Maiores in dolores laborum molestiae possimus. Ipsum ut et rerum. Neque et perspiciatis eaque autem unde molestias omnis voluptatem.

Aspernatur ut non impedit ea natus eveniet distinctio. Perferendis non eveniet in nihil aut. Quo aut atque natus quisquam laboriosam.

Dolor cumque sed quia quia quis debitis minus ipsa. Veniam recusandae voluptatem quia aut possimus veritatis. Omnis dolores unde quibusdam fugit officiis fugiat. Porro vel qui quia sequi enim nesciunt at. Omnis consequatur veniam quisquam numquam.

Suscipit ipsum impedit reprehenderit magni asperiores tempore tenetur. Id consequatur aut earum voluptas autem qui. Cum laboriosam suscipit est autem non voluptatem aut. Quae error repellendus libero aliquam. Quod quia atque qui doloremque est cupiditate libero. Necessitatibus illum provident et.