Superminaren/hackerspace.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: bake hackerspace-sh subsite into the management app

Browse Source 
Ports the existing hackerspace.sh Vue site (sibling repo) into this
codebase as a route group `app/(resources)/` so a single domain serves
both the public research / games subsite and the authenticated
management app.

Routes added (all public, all prerendered):
  /resources         landing page (the original HomePage.vue)
  /zine              iframe to the printable hackerspace zine
  /governance        iframe to Governance in a Box
  /space-after-dark  iframe to the isometric exploration game
  /proposal-duel     iframe to the proposal-debate game
  /atlas             iframe to the bundled atlas.html (2.2 MB)

The individual resource paths match the originals exactly so existing
deep links and bookmarks survive the domain switch-over.

Ports six Vue components to React: Wordmark, SpaceIcon, TraceIcon,
CubeIcon, KeyIcon, GridIcon, PromptIcon, AtlasLogo, ProjectCard,
IframeWrapper. CSS scoped under `.resources-root` so the dark IBM Plex
Mono / Libre Baskerville theme cannot bleed into the management app's
shadcn design system. Fonts loaded via next/font/google. The 2.2 MB
atlas.html lives in /public.

proxy.ts adds the six routes plus /atlas.html to PUBLIC_ROUTES so
anonymous visitors can reach them without redirecting to /login.

The management landing page links to /resources twice: a "Resources"
nav link, and a callout under the CTA buttons ("Not running a space?
Read the hackerspace research and games").
This commit is contained in:
Moheeb Zara
2026-05-14 15:18:54 -07:00
parent ea8d7a5f91
commit 7e15dd1e63
15 changed files with 49178 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(landing)/page.tsx
+9
View File
@@ -315,6 +315,9 @@ export default function LandingPage() {
<span className="font-mono text-sm font-bold text-white truncate">hackerspace.sh</span>
</div>
<div className="flex items-center gap-2 shrink-0">
<Link href="/resources" className="hidden sm:inline-flex font-sans text-sm text-sidebar-foreground hover:text-white transition px-3 py-1.5">
Resources
</Link>
<Link href="/login" className="font-sans text-sm text-sidebar-foreground hover:text-white transition px-3 py-1.5">
Log in
</Link>
@@ -482,6 +485,12 @@ export default function LandingPage() {
Log in
</Link>
</div>
<p className="mt-6 font-mono text-xs text-sidebar-foreground/60">
Not running a space? Read the{' '}
<Link href="/resources" className="text-primary hover:underline">
hackerspace research and games →
</Link>
</p>
</div>
</section>
app/(resources)/atlas/page.tsx
+10
View File
@@ -0,0 +1,10 @@
import { IframeWrapper } from '@/components/resources/iframe-wrapper'
export const metadata = {
title: 'Hackerspace Atlas — hackerspace.sh',
}
export default function AtlasPage() {
// atlas.html lives in /public, served by Next.js at the same path.
return <IframeWrapper url="/atlas.html" title="Hackerspace Atlas" />
}
app/(resources)/governance/page.tsx
+14
View File
@@ -0,0 +1,14 @@
import { IframeWrapper } from '@/components/resources/iframe-wrapper'
export const metadata = {
title: 'Governance in a Box — hackerspace.sh',
}
export default function GovernancePage() {
return (
<IframeWrapper
url="https://hackerspaceinabox.netlify.app/"
title="Governance in a Box"
/>
)
}
app/(resources)/layout.tsx
+33
View File
@@ -0,0 +1,33 @@
import type { Metadata } from 'next'
import { IBM_Plex_Mono, Libre_Baskerville } from 'next/font/google'
import './resources.css'
const ibmPlexMono = IBM_Plex_Mono({
subsets: ['latin'],
weight: ['400', '500'],
variable: '--font-ibm-plex-mono',
display: 'swap',
})
const libreBaskerville = Libre_Baskerville({
subsets: ['latin'],
weight: ['400', '700'],
style: ['normal', 'italic'],
variable: '--font-libre-baskerville',
display: 'swap',
})
export const metadata: Metadata = {
title: 'hackerspace.sh',
description:
'How hackerspaces actually work. Research, tools, and games for community workshop governance.',
}
export default function ResourcesLayout({ children }: { children: React.ReactNode }) {
return (
<div className={`resources-root ${ibmPlexMono.variable} ${libreBaskerville.variable}`}>
<div className="resources-grid-bg" aria-hidden="true" />
{children}
</div>
)
}
app/(resources)/proposal-duel/page.tsx
+14
View File
@@ -0,0 +1,14 @@
import { IframeWrapper } from '@/components/resources/iframe-wrapper'
export const metadata = {
title: 'Proposal Duel — hackerspace.sh',
}
export default function ProposalDuelPage() {
return (
<IframeWrapper
url="https://lumencanvas.nyc3.cdn.digitaloceanspaces.com/artifacts/hackerspace/proposal-duel.html"
title="Proposal Duel"
/>
)
}
app/(resources)/resources.css
+508
View File
@@ -0,0 +1,508 @@
/* =============================================================================
* Resources subsite stylesheet — ported from the hackerspace-sh Vue project.
*
* Scoped under .resources-root so it cannot bleed into the management app's
* shadcn/Tailwind design system. Every selector below must descend from
* .resources-root.
* ===========================================================================*/
.resources-root {
--res-bg: #0c0c0c;
--res-surface: #161616;
--res-border: #252525;
--res-text: #e8e8e8;
--res-text-dim: #707070;
--res-text-muted: #404040;
--res-accent: #d4ff00;
background: var(--res-bg);
color: var(--res-text);
font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
position: relative;
}
.resources-root ::selection {
background: var(--res-accent);
color: var(--res-bg);
}
.resources-root a {
color: inherit;
text-decoration: none;
}
.resources-root .wordmark {
height: 1.5em;
width: auto;
}
/* Grid background */
.resources-root .resources-grid-bg {
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--res-border) 1px, transparent 1px),
linear-gradient(90deg, var(--res-border) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
.resources-root > *:not(.resources-grid-bg):not(.resources-iframe-wrapper) {
position: relative;
z-index: 1;
}
/* Container */
.resources-root .resources-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
/* Header */
.resources-root header {
padding: 48px 0;
border-bottom: 1px solid var(--res-border);
}
.resources-root .resources-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.resources-root .resources-site-title {
display: flex;
align-items: center;
}
.resources-root .resources-site-title svg {
height: 24px;
width: auto;
}
.resources-root .resources-header-links {
display: flex;
gap: 32px;
font-size: 0.8125rem;
color: var(--res-text-dim);
}
.resources-root .resources-header-links a:hover {
color: var(--res-text);
}
.resources-root .resources-header-links a.resources-header-link-accent {
color: var(--res-accent);
}
.resources-root .resources-header-links a.resources-header-link-accent:hover {
color: var(--res-text);
}
/* Hero */
.resources-root .resources-hero {
padding: 32px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
}
.resources-root .resources-hero-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.resources-root .resources-hero-title {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.02em;
}
.resources-root .resources-hero-title em {
font-style: italic;
color: var(--res-accent);
}
.resources-root .resources-hero-prompt {
width: 32px;
height: 32px;
color: var(--res-text);
}
.resources-root .resources-hero-sub {
font-size: 0.9375rem;
color: var(--res-text-dim);
line-height: 1.7;
max-width: 380px;
}
/* Section header */
.resources-root .resources-section-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 48px 0 40px;
border-top: 1px solid var(--res-border);
}
.resources-root .resources-section-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--res-text-dim);
}
.resources-root .resources-section-count {
font-size: 0.75rem;
color: var(--res-text-muted);
}
/* Projects grid */
.resources-root .resources-projects {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--res-border);
border: 1px solid var(--res-border);
}
.resources-root .resources-card {
background: var(--res-bg);
padding: 40px;
display: flex;
flex-direction: column;
min-height: 280px;
position: relative;
transition: background 0.3s ease;
}
.resources-root .resources-card:hover {
background: var(--res-surface);
}
.resources-root .resources-card-content {
display: flex;
flex-direction: column;
flex: 1;
}
.resources-root .resources-card-icon {
position: absolute;
top: 24px;
right: 24px;
width: 48px;
height: 48px;
color: var(--res-text);
transition: all 0.3s ease;
}
.resources-root .resources-card-icon svg {
width: 100%;
height: 100%;
}
.resources-root .resources-card-has-icon .resources-card-num {
padding-right: 60px;
}
.resources-root .resources-card-num {
font-size: 0.6875rem;
color: var(--res-text-muted);
letter-spacing: 0.1em;
margin-bottom: 24px;
}
.resources-root .resources-card-title {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 1.625rem;
font-weight: 400;
letter-spacing: -0.01em;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.resources-root .resources-card:hover .resources-card-title {
color: var(--res-accent);
}
.resources-root .resources-card-desc {
font-size: 0.8125rem;
color: var(--res-text-dim);
line-height: 1.65;
flex-grow: 1;
}
.resources-root .resources-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--res-border);
}
.resources-root .resources-card-type {
font-size: 0.6875rem;
color: var(--res-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.resources-root .resources-card-arrow {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--res-border);
border-radius: 50%;
transition: all 0.3s ease;
}
.resources-root .resources-card-arrow svg {
width: 12px;
height: 12px;
color: var(--res-text-dim);
transition: all 0.3s ease;
}
.resources-root .resources-card:hover .resources-card-arrow {
background: var(--res-accent);
border-color: var(--res-accent);
}
.resources-root .resources-card:hover .resources-card-arrow svg {
color: var(--res-bg);
transform: translateX(2px);
}
.resources-root .resources-card-featured {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 60px;
min-height: auto;
padding: 48px;
}
.resources-root .resources-card-featured .resources-card-content {
flex: 1;
}
.resources-root .resources-card-visual {
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--res-text);
}
.resources-root .resources-card-visual svg {
width: 100%;
height: 100%;
}
/* Author */
.resources-root .resources-author {
padding: 80px 0;
border-top: 1px solid var(--res-border);
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.resources-root .resources-author-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.resources-root .resources-author-label {
font-size: 0.6875rem;
color: var(--res-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.resources-root .resources-author-name {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 1.5rem;
font-weight: 400;
}
.resources-root .resources-author-bio {
font-size: 0.8125rem;
color: var(--res-text-dim);
}
.resources-root .resources-author-link {
font-size: 0.8125rem;
padding: 14px 28px;
border: 1px solid var(--res-border);
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.resources-root .resources-author-link:hover {
background: var(--res-accent);
border-color: var(--res-accent);
color: var(--res-bg);
}
.resources-root .resources-author-link svg {
width: 12px;
height: 12px;
}
/* Footer */
.resources-root footer {
padding: 40px 0;
border-top: 1px solid var(--res-border);
font-size: 0.75rem;
color: var(--res-text-muted);
}
.resources-root .resources-footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.resources-root footer a {
color: var(--res-text-dim);
transition: color 0.2s;
}
.resources-root footer a:hover {
color: var(--res-text);
}
.resources-root .resources-footer-links {
display: flex;
gap: 24px;
}
/* Iframe wrapper (used by /zine, /governance, /space-after-dark, /proposal-duel, /atlas) */
.resources-root .resources-iframe-wrapper {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
background: var(--res-bg);
z-index: 2;
}
.resources-root .resources-iframe-topbar {
height: 48px;
min-height: 48px;
background: var(--res-bg);
border-bottom: 1px solid var(--res-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
font-size: 0.8125rem;
}
.resources-root .resources-iframe-back {
display: flex;
align-items: center;
gap: 8px;
color: var(--res-text-dim);
transition: color 0.2s;
}
.resources-root .resources-iframe-back:hover {
color: var(--res-text);
}
.resources-root .resources-iframe-back > svg:first-child {
width: 14px;
height: 14px;
}
.resources-root .resources-iframe-back .wordmark {
height: 18px;
width: auto;
}
.resources-root .resources-iframe-title {
color: var(--res-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.resources-root .resources-iframe-frame {
flex: 1;
width: 100%;
border: none;
background: #fff;
}
/* Mobile */
@media (max-width: 768px) {
.resources-root .resources-container {
padding: 0 20px;
}
.resources-root .resources-hero {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 0;
}
.resources-root .resources-hero-sub {
max-width: 100%;
}
.resources-root .resources-projects {
grid-template-columns: 1fr;
}
.resources-root .resources-card {
padding: 32px 24px;
min-height: auto;
}
.resources-root .resources-card-featured {
flex-direction: column;
gap: 32px;
}
.resources-root .resources-card-featured .resources-card-visual {
width: 140px;
height: 140px;
margin: 0 auto;
}
.resources-root .resources-author {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-root .resources-footer-inner {
flex-direction: column;
gap: 16px;
text-align: center;
}
}
app/(resources)/resources/page.tsx
+153
View File
@@ -0,0 +1,153 @@
import Link from 'next/link'
import { ProjectCard } from '@/components/resources/project-card'
import {
Wordmark,
PromptIcon,
SpaceIcon,
TraceIcon,
CubeIcon,
KeyIcon,
GridIcon,
} from '@/components/resources/icons'
import { AtlasLogo } from '@/components/resources/atlas-logo'
export const metadata = {
title: 'hackerspace.sh — projects',
description:
'How hackerspaces actually work: research, governance frameworks, games, and a global atlas of community workshops.',
}
export default function ResourcesLandingPage() {
return (
<>
<header>
<div className="resources-container">
<div className="resources-header-inner">
<Link href="/resources" className="resources-site-title" aria-label="hackerspace.sh">
<Wordmark />
</Link>
<nav className="resources-header-links">
<a href="https://github.com/virgilvox">GitHub</a>
<a href="https://hackster.io/virgilvox">Hackster</a>
<Link href="/" className="resources-header-link-accent">
Manage your space →
</Link>
</nav>
</div>
</div>
</header>
<main>
<div className="resources-container">
<section className="resources-hero">
<div className="resources-hero-content">
<h1 className="resources-hero-title">
How <em>hackerspaces</em> actually work
</h1>
<PromptIcon className="resources-hero-prompt" />
</div>
<p className="resources-hero-sub">
The dynamics, the drama, the governance patterns that make or break community
workshops. Research turned into tools you can use.
</p>
</section>
<section>
<div className="resources-section-header">
<span className="resources-section-label">Projects</span>
<span className="resources-section-count">06 tools</span>
</div>
<div className="resources-projects">
<ProjectCard
to="/atlas"
num="01"
title="Hackerspace Atlas"
description="An interactive map of hackerspaces around the world. Find active spaces, discover closed ones, and explore the global maker community network."
type="Map · Global"
featured
visual={<AtlasLogo />}
/>
<ProjectCard
to="/space-after-dark"
num="02"
title="The Space After Dark"
description="An isometric exploration game set in a hackerspace at night. Talk to the regulars — each one an archetype you'll recognize."
type="Game · 6 characters"
visual={<CubeIcon />}
/>
<ProjectCard
to="/proposal-duel"
num="03"
title="Proposal Duel"
description="Fallout-style dialogue combat for hackerspace governance. You have a proposal. Someone opposes it. Survive the meeting."
type="Game · 5 opponents"
visual={<TraceIcon />}
/>
<ProjectCard
to="/zine"
num="04"
title="The Hackerspace Game"
description="A printable zine covering archetypes, trust dynamics, and the lifecycle of community spaces. Based on research from HeatSync Labs, Noisebridge, Hackerspace Gent, and years of watching spaces rise and fall."
type="Zine · 12 pages"
visual={<SpaceIcon />}
/>
<ProjectCard
href="https://hackerspacegame.netlify.app/"
external
num="05"
title="Interactive Learner"
description="Nicky Case-style simulations for hackerspace dynamics. Tweak member ratios, watch trust networks form and collapse, run governance scenarios."
type="Web App · 8 chapters"
visual={<GridIcon />}
/>
<ProjectCard
to="/governance"
num="06"
title="Governance in a Box"
description="Templates and frameworks for running a hackerspace. Do-ocracy guidelines, conflict resolution, burnout prevention, succession planning. Fork it and make it yours."
type="Resource Kit"
featured
visual={<KeyIcon />}
/>
</div>
</section>
<section className="resources-author">
<div className="resources-author-content">
<span className="resources-author-label">Made by</span>
<h2 className="resources-author-name">Moheeb Zara</h2>
<p className="resources-author-bio">
Hardware hacker, new media artist, maker community advocate
</p>
</div>
<a href="https://hack.build" className="resources-author-link">
hack.build
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5}>
<path d="M4 12L12 4M12 4H6M12 4v6" />
</svg>
</a>
</section>
</div>
</main>
<footer>
<div className="resources-container resources-footer-inner">
<p>
A project from{' '}
<a href="https://heatsynclabs.org">HeatSync Labs</a>. Run your own space?{' '}
<Link href="/">Manage it here →</Link>
</p>
<nav className="resources-footer-links">
<a href="https://github.com/virgilvox">Source</a>
</nav>
</div>
</footer>
</>
)
}
app/(resources)/space-after-dark/page.tsx
+14
View File
@@ -0,0 +1,14 @@
import { IframeWrapper } from '@/components/resources/iframe-wrapper'
export const metadata = {
title: 'The Space After Dark — hackerspace.sh',
}
export default function SpaceAfterDarkPage() {
return (
<IframeWrapper
url="https://lumencanvas.nyc3.cdn.digitaloceanspaces.com/artifacts/hackerspace/space_dynamics.html"
title="The Space After Dark"
/>
)
}
app/(resources)/zine/page.tsx
+14
View File
@@ -0,0 +1,14 @@
import { IframeWrapper } from '@/components/resources/iframe-wrapper'
export const metadata = {
title: 'The Hackerspace Game — hackerspace.sh',
}
export default function ZinePage() {
return (
<IframeWrapper
url="https://lumencanvas.nyc3.cdn.digitaloceanspaces.com/artifacts/hackerspace-zine.html"
title="The Hackerspace Game"
/>
)
}