feat: bake hackerspace-sh subsite into the management app
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
@@ -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>
|
||||
|
||||
|
||||
@@ -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" />
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import type { SVGProps } from 'react'
|
||||
|
||||
export function AtlasLogo(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="60 -5 280 350"
|
||||
role="img"
|
||||
aria-label="Hackerspace Atlas logo"
|
||||
{...props}
|
||||
>
|
||||
{/* Globe outer */}
|
||||
<circle cx="200" cy="185" r="115" stroke="currentColor" fill="none" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Meridians */}
|
||||
<ellipse cx="200" cy="185" rx="45" ry="115" stroke="currentColor" fill="none" strokeWidth={4} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<ellipse cx="200" cy="185" rx="85" ry="115" stroke="currentColor" fill="none" strokeWidth={4} strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Equator */}
|
||||
<line x1="85" y1="185" x2="315" y2="185" stroke="currentColor" fill="none" strokeWidth={4} strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Latitude rings */}
|
||||
<ellipse cx="200" cy="133" rx="100" ry="28" stroke="currentColor" fill="none" strokeWidth={4} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<ellipse cx="200" cy="237" rx="100" ry="28" stroke="currentColor" fill="none" strokeWidth={4} strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Vias at intersections */}
|
||||
<g fill="currentColor" stroke="none">
|
||||
<circle cx="85" cy="185" r="9" /><circle cx="85" cy="185" r="3.5" fill="#0c0c0c" />
|
||||
<circle cx="115" cy="185" r="7" /><circle cx="115" cy="185" r="2.5" fill="#0c0c0c" />
|
||||
<circle cx="155" cy="185" r="7" /><circle cx="155" cy="185" r="2.5" fill="#0c0c0c" />
|
||||
<circle cx="245" cy="185" r="7" /><circle cx="245" cy="185" r="2.5" fill="#0c0c0c" />
|
||||
<circle cx="285" cy="185" r="7" /><circle cx="285" cy="185" r="2.5" fill="#0c0c0c" />
|
||||
<circle cx="315" cy="185" r="9" /><circle cx="315" cy="185" r="3.5" fill="#0c0c0c" />
|
||||
<circle cx="200" cy="70" r="8" /><circle cx="200" cy="70" r="3" fill="#0c0c0c" />
|
||||
<circle cx="200" cy="300" r="8" /><circle cx="200" cy="300" r="3" fill="#0c0c0c" />
|
||||
</g>
|
||||
{/* Hackerspace markers */}
|
||||
<g>
|
||||
<circle cx="145" cy="160" r="11" fill="currentColor" />
|
||||
<circle cx="145" cy="160" r="4.5" fill="#0c0c0c" />
|
||||
<circle cx="145" cy="160" r="16" stroke="currentColor" fill="none" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="260" cy="205" r="10" fill="currentColor" />
|
||||
<circle cx="260" cy="205" r="4" fill="#0c0c0c" />
|
||||
<circle cx="260" cy="205" r="15" stroke="currentColor" fill="none" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="170" cy="255" r="9" fill="currentColor" />
|
||||
<circle cx="170" cy="255" r="3.5" fill="#0c0c0c" />
|
||||
<circle cx="170" cy="255" r="14" stroke="currentColor" fill="none" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
{/* Soldering iron compass needle */}
|
||||
<g>
|
||||
<line x1="200" y1="75" x2="200" y2="285" stroke="currentColor" strokeWidth={10} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M200 28 L186 82 L200 98 L214 82 Z" fill="currentColor" />
|
||||
<rect x="192" y="96" width="16" height="12" rx="2" fill="currentColor" />
|
||||
<rect x="186" y="258" width="28" height="55" rx="6" fill="currentColor" />
|
||||
<line x1="189" y1="272" x2="211" y2="272" stroke="#0c0c0c" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<line x1="189" y1="286" x2="211" y2="286" stroke="#0c0c0c" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<line x1="189" y1="300" x2="211" y2="300" stroke="#0c0c0c" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<rect x="190" y="310" width="20" height="12" rx="4" fill="currentColor" />
|
||||
<path d="M200 335 L212 295 L200 278 L188 295 Z" fill="currentColor" opacity={0.9} />
|
||||
<g stroke="currentColor" fill="none" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" opacity={0.8}>
|
||||
<path d="M184 28 Q174 14 184 4" />
|
||||
<path d="M216 28 Q226 14 216 4" />
|
||||
<path d="M200 22 Q200 12 200 2" />
|
||||
</g>
|
||||
</g>
|
||||
{/* East/west pointers */}
|
||||
<path d="M330 185 L290 170 L275 185 L290 200 Z" fill="currentColor" opacity={0.9} />
|
||||
<path d="M70 185 L110 200 L125 185 L110 170 Z" fill="currentColor" opacity={0.9} />
|
||||
{/* Center hub */}
|
||||
<circle cx="200" cy="185" r="18" fill="currentColor" />
|
||||
<circle cx="200" cy="185" r="7" fill="#d4ff00" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
// Iconography ported from the original hackerspace-sh Vue subsite.
|
||||
// All SVGs render with `currentColor` so they inherit the surrounding
|
||||
// text colour and can be tinted by parent styles. The lime accent
|
||||
// (#d4ff00) is hardcoded where the original components used it.
|
||||
|
||||
import type { SVGProps } from 'react'
|
||||
|
||||
type IconProps = SVGProps<SVGSVGElement>
|
||||
|
||||
export function Wordmark(props: IconProps) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 240 48"
|
||||
className="wordmark"
|
||||
{...props}
|
||||
>
|
||||
<text
|
||||
x="0"
|
||||
y="34"
|
||||
fontFamily="'IBM Plex Mono', monospace"
|
||||
fontSize="28"
|
||||
fontWeight="500"
|
||||
fill="currentColor"
|
||||
letterSpacing="-1"
|
||||
>
|
||||
hackerspace
|
||||
<tspan fill="#d4ff00">.sh</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function SpaceIcon(props: IconProps) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
|
||||
<path d="M6 6 L6 30 L18 30 L18 18 L30 18 L30 6 Z" fill="currentColor" />
|
||||
<path d="M18 18 L18 42 L42 42 L42 18 Z" fill="none" stroke="currentColor" strokeWidth={2.5} />
|
||||
<circle cx="30" cy="30" r="5" fill="#d4ff00" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function TraceIcon(props: IconProps) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
|
||||
<path
|
||||
d="M8 8 L8 24 L24 24 L24 40 L40 40"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={3.5}
|
||||
strokeLinecap="square"
|
||||
/>
|
||||
<circle cx="8" cy="8" r="5" fill="currentColor" />
|
||||
<circle cx="24" cy="24" r="5" fill="currentColor" />
|
||||
<circle cx="40" cy="40" r="6" fill="#d4ff00" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function CubeIcon(props: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 48 48" fill="none" {...props}>
|
||||
<path d="M24 4 L44 16 L44 36 L24 48 L4 36 L4 16 Z" stroke="currentColor" strokeWidth={2.5} />
|
||||
<path d="M24 4 L24 24 M4 16 L24 24 L44 16" stroke="currentColor" strokeWidth={2.5} />
|
||||
<path d="M24 24 L24 48" stroke="#d4ff00" strokeWidth={2.5} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function KeyIcon(props: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 48 48" fill="none" {...props}>
|
||||
<circle cx="14" cy="14" r="10" stroke="currentColor" strokeWidth={3} />
|
||||
<path d="M22 22 L42 42" stroke="currentColor" strokeWidth={4} strokeLinecap="round" />
|
||||
<path d="M34 34 L40 28" stroke="#d4ff00" strokeWidth={4} strokeLinecap="round" />
|
||||
<path d="M38 38 L44 32" stroke="#d4ff00" strokeWidth={4} strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function GridIcon(props: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 48 48" fill="none" {...props}>
|
||||
<rect x="6" y="6" width="16" height="16" fill="currentColor" />
|
||||
<rect x="26" y="6" width="16" height="16" fill="currentColor" opacity={0.5} />
|
||||
<rect x="6" y="26" width="16" height="16" fill="currentColor" opacity={0.5} />
|
||||
<rect x="26" y="26" width="16" height="16" fill="#d4ff00" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function PromptIcon(props: IconProps) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
|
||||
<path
|
||||
d="M8 12 L24 24 L8 36"
|
||||
fill="none"
|
||||
stroke="#d4ff00"
|
||||
strokeWidth={5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M28 36 L40 36"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import Link from 'next/link'
|
||||
import { Wordmark } from './icons'
|
||||
|
||||
/**
|
||||
* Renders an iframe at full-viewport size with a thin top bar that links
|
||||
* back to /resources and labels the embedded content. Used by /zine,
|
||||
* /governance, /space-after-dark, /proposal-duel, and /atlas.
|
||||
*/
|
||||
export function IframeWrapper({ url, title }: { url: string; title: string }) {
|
||||
return (
|
||||
<div className="resources-iframe-wrapper">
|
||||
<div className="resources-iframe-topbar">
|
||||
<Link href="/resources" className="resources-iframe-back">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path d="M10 4L6 8l4 4" />
|
||||
</svg>
|
||||
<Wordmark />
|
||||
</Link>
|
||||
<span className="resources-iframe-title">{title}</span>
|
||||
</div>
|
||||
<iframe src={url} className="resources-iframe-frame" title={title} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import Link from 'next/link'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
type CommonProps = {
|
||||
num: string
|
||||
title: string
|
||||
description: string
|
||||
type: string
|
||||
featured?: boolean
|
||||
visual?: ReactNode
|
||||
}
|
||||
|
||||
type InternalProps = CommonProps & { to: string; href?: never; external?: false }
|
||||
type ExternalProps = CommonProps & { href: string; to?: never; external?: true }
|
||||
type Props = InternalProps | ExternalProps
|
||||
|
||||
/**
|
||||
* Project card on /resources. Behaves as either an internal next/link
|
||||
* (when `to` is set) or an external anchor with target=_blank (when
|
||||
* `href` is set). Featured cards span full width with the visual on the
|
||||
* right; non-featured render with a small icon in the top-right corner.
|
||||
*/
|
||||
export function ProjectCard(props: Props) {
|
||||
const { num, title, description, type, featured = false, visual } = props
|
||||
const hasIcon = visual && !featured
|
||||
|
||||
const body = (
|
||||
<>
|
||||
{hasIcon && <span className="resources-card-icon">{visual}</span>}
|
||||
<div className="resources-card-content">
|
||||
<span className="resources-card-num">{num}</span>
|
||||
<h2 className="resources-card-title">{title}</h2>
|
||||
<p className="resources-card-desc">{description}</p>
|
||||
<div className="resources-card-footer">
|
||||
<span className="resources-card-type">{type}</span>
|
||||
<span className="resources-card-arrow">
|
||||
{'external' in props && props.external ? (
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path d="M4 12L12 4M12 4H6M12 4v6" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path d="M3 8h10M9 4l4 4-4 4" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{featured && visual && <div className="resources-card-visual">{visual}</div>}
|
||||
</>
|
||||
)
|
||||
|
||||
const className = `resources-card${featured ? ' resources-card-featured' : ''}${hasIcon ? ' resources-card-has-icon' : ''}`
|
||||
|
||||
if ('to' in props && props.to) {
|
||||
return (
|
||||
<Link href={props.to} className={className}>
|
||||
{body}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<a href={(props as ExternalProps).href} className={className} target="_blank" rel="noopener noreferrer">
|
||||
{body}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -2,7 +2,25 @@ import { updateSession } from '@/lib/supabase/proxy'
|
||||
import { createServerClient } from '@supabase/ssr'
|
||||
import { NextResponse, type NextRequest } from 'next/server'
|
||||
|
||||
const PUBLIC_ROUTES = ['/', '/login', '/signup', '/auth', '/api/health']
|
||||
// Public routes are reachable without an authenticated session. The
|
||||
// /resources subsite is the legacy hackerspace.sh content baked in; the
|
||||
// five individual resource routes (/zine, /governance, /space-after-dark,
|
||||
// /proposal-duel, /atlas) must keep these exact paths so existing deep
|
||||
// links and bookmarks survive the domain switch-over.
|
||||
const PUBLIC_ROUTES = [
|
||||
'/',
|
||||
'/login',
|
||||
'/signup',
|
||||
'/auth',
|
||||
'/api/health',
|
||||
'/resources',
|
||||
'/zine',
|
||||
'/governance',
|
||||
'/space-after-dark',
|
||||
'/proposal-duel',
|
||||
'/atlas',
|
||||
'/atlas.html',
|
||||
]
|
||||
|
||||
export async function proxy(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl
|
||||
|
||||
+48112
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user