initial commit

src/pages/bbs/amiga/esprit.astro

@@ -0,0 +1,68 @@
+---
+import { getCollection } from 'astro:content';
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_ESPRIT } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+const releases = await getCollection('esprit');
+---
+<TerminalLayout title="ESPRIT Releases" description="Amiga DemoMaker releases and utility discs">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_ESPRIT} />
+    <NavBar />
+    <h1>ESPRIT Releases</h1>
+    <p>A collection of demos built on the Amiga 500.</p>
+    {releases.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Year: {release.data.year ?? '19xx'} &nbsp; Platform: {release.data.platform}</p>
+        </div>
+        <a class="diz-box esprit-thumb" href="#" data-img={release.data.screenshot} onclick="return false;">
+          {release.data.screenshot && <img src={release.data.screenshot} alt={release.data.title} />}
+          {!release.data.screenshot && release.data.file_id_diz}
+        </a>
+      </div>
+    ))}
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+  <div id="esprit-modal" class="modal-overlay" style="display:none;">
+    <div class="modal-content">
+      <button class="modal-close" aria-label="Close">&times;</button>
+      <img id="esprit-modal-img" src="" alt="Screenshot" />
+    </div>
+  </div>
+  <script is:inline>
+    document.addEventListener('DOMContentLoaded', () => {
+      const modal = document.getElementById('esprit-modal');
+      const modalImg = document.getElementById('esprit-modal-img');
+      document.querySelectorAll('.esprit-thumb').forEach(thumb => {
+        thumb.addEventListener('click', (e) => {
+          e.preventDefault();
+          const img = thumb.getAttribute('data-img');
+          if (!img) return;
+          modalImg.src = img;
+          modal.style.display = 'flex';
+        });
+      });
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal || e.target.classList.contains('modal-close')) {
+          modal.style.display = 'none';
+          modalImg.src = '';
+        }
+      });
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && modal.style.display === 'flex') {
+          modal.style.display = 'none';
+          modalImg.src = '';
+        }
+      });
+    });
+  </script>
+</TerminalLayout>

src/pages/bbs/amiga/mods.astro

@@ -0,0 +1,23 @@
+---
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_AMIGA } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+import ModPlayer from '../../../components/ModPlayer';
+import mods from '../../../data/mods.json';
+---
+<TerminalLayout title="MOD Files" description="Amiga module music collection">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_AMIGA} />
+    <NavBar />
+    <h1>MOD Files</h1>
+    <p>My personal MOD file collection — all tracks composed by me on the Amiga. Click ▶ to play in-browser (WASM, libopenmpt).</p>
+    <ModPlayer client:load mods={mods} />
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/atari/tropic-dreams.astro

@@ -0,0 +1,30 @@
+---
+import { getCollection } from 'astro:content';
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_ATARI } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+const releases = (await getCollection('tropicdreams')).sort((a, b) => (a.data.year ?? 0) - (b.data.year ?? 0));
+---
+<TerminalLayout title="Tropic DREAMs" description="Atari ST games and tools, 1990-1992">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_ATARI} />
+    <NavBar />
+    <h1>Tropic DREAMs</h1>
+    <p>Stefan's pseudonym for everything released on the Atari ST - a 1040 STFM (1MB, low-res) and later a Mega 4 (4MB, 60MB HD, hi-res 640x400). Four releases between 1990 and 1992:</p>
+    {releases.map((release) => (
+      <div class="release-row">
+        <div><h3>{release.data.title} ({release.data.year})</h3><p>{release.data.description}</p><p>Credits: {release.data.credits.map((c) => `${c.role} - ${c.name}`).join(' | ')}</p></div>
+        <a class="diz-box" href="#" id={release.slug}>
+{release.data.file_id_diz}
+        </a>
+      </div>
+    ))}
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/cds.astro

@@ -0,0 +1,161 @@
+---
+import TerminalLayout from '../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../components/TerminalShell';
+import StatusBar from '../../components/StatusBar.astro';
+import NavBar from '../../components/NavBar.astro';
+import LetterFooter from '../../components/LetterFooter.astro';
+import AnsiArt from '../../components/AnsiArt.astro';
+import { BANNER_TEMPLE } from '../../lib/ansiArt';
+
+const cds = [
+  { id: 1, title: 'tHE tEMPLE cD #1', file: 'templecd1.txt', url: 'https://www.moonweb.org/files/bbs/templecd1.txt', size: '650 MB' },
+  { id: 2, title: 'tHE tEMPLE cD #2', file: 'templecd2.txt', url: 'https://www.moonweb.org/files/bbs/templecd2.txt', size: '650 MB' },
+  { id: 3, title: 'tHE tEMPLE cD #3', file: 'templecd3.txt', url: 'https://www.moonweb.org/files/bbs/templecd3.txt', size: '650 MB' },
+  { id: 4, title: 'tHE tEMPLE cD #4', file: 'templecd4.txt', url: 'https://www.moonweb.org/files/bbs/templecd4.txt', size: '650 MB' },
+];
+---
+<TerminalLayout title="tHE tEMPLE bBS CDs" description="tHE tEMPLE bBS CD compilations - file listings from the FidoNet era">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_TEMPLE} />
+    <h1>tHE tEMPLE bBS CDs</h1>
+    <p>Four CD compilations with files from the FidoNet networks of the 1990s. Each CD contains approx. 650 MB of Shareware, Freeware, Demoscene productions and BBS utilities.</p>
+    <div class="cd-layout">
+      <div class="cd-list">
+        {cds.map((cd) => (
+          <a href="#" class="cd-row" data-url={cd.url} data-title={cd.title} onclick="return false;">
+            <span class="cd-number">#{cd.id}</span>
+            <span class="cd-title">{cd.title}</span>
+            <span class="cd-size">{cd.size}</span>
+          </a>
+        ))}
+      </div>
+      <img src="https://www.moonweb.org/files/bbs/templecd1.png" alt="tHE tEMPLE cD" class="cd-thumb" />
+    </div>
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+  <div id="cd-modal" class="modal-overlay" style="display:none;">
+    <div class="modal-content modal-content--text">
+      <button class="modal-close" aria-label="Close">&times;</button>
+      <pre id="cd-modal-text" class="cd-modal-text"></pre>
+      <div class="cd-modal-actions">
+        <a id="cd-modal-link" href="" target="_blank" rel="noopener" class="cd-download-link">Download File Listing</a>
+      </div>
+    </div>
+  </div>
+  <style>
+    .cd-layout {
+      display: flex;
+      gap: 1.5rem;
+      align-items: flex-start;
+      margin: 1rem 0;
+    }
+    .cd-list { flex: 1; }
+    .cd-thumb { width: 180px; display: block; }
+    @media (max-width: 600px) {
+      .cd-layout { flex-direction: column; }
+      .cd-thumb { width: 100%; margin-top: 1rem; }
+    }
+    .cd-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 0.6rem 0.8rem;
+      border: 1px solid var(--red-dark);
+      margin-bottom: 0.4rem;
+      color: var(--text);
+      text-decoration: none;
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .cd-row:hover, .cd-row:focus {
+      background: var(--red-dim);
+      border-color: var(--red);
+    }
+    .cd-number { color: var(--red); font-weight: bold; min-width: 2.5rem; }
+    .cd-title { flex: 1; }
+    .cd-size { color: var(--grey); }
+    .modal-content--text {
+      max-width: 80vw;
+      max-height: 85vh;
+      display: flex;
+      flex-direction: column;
+      background: var(--bg);
+      border: 2px solid var(--red-dark);
+      padding: 1rem;
+    }
+    .cd-modal-text {
+      overflow-y: auto;
+      flex: 1;
+      margin: 0;
+      font-family: var(--font-ansi);
+      font-size: 14px;
+      line-height: 1.15;
+      white-space: pre;
+      word-wrap: normal;
+      overflow-x: auto;
+      color: var(--yellow);
+      max-height: 65vh;
+      scrollbar-width: thin;
+      scrollbar-color: var(--red-dark) #000;
+    }
+    .cd-modal-actions {
+      margin-top: 1rem;
+      text-align: center;
+    }
+    .cd-download-link {
+      color: var(--cyan);
+      border: 1px solid var(--cyan);
+      padding: 0.5rem 1rem;
+      text-decoration: none;
+      display: inline-block;
+    }
+    .cd-download-link:hover {
+      background: var(--cyan);
+      color: var(--bg);
+    }
+  </style>
+  <script is:inline>
+    document.addEventListener('DOMContentLoaded', () => {
+      const modal = document.getElementById('cd-modal');
+      const modalText = document.getElementById('cd-modal-text');
+      const modalLink = document.getElementById('cd-modal-link');
+
+      document.querySelectorAll('.cd-row').forEach(row => {
+        row.addEventListener('click', async (e) => {
+          e.preventDefault();
+          const url = row.getAttribute('data-url');
+          const title = row.getAttribute('data-title');
+          if (!url) return;
+
+          modalText.textContent = `Loading ${title}...`;
+          modalLink.href = url;
+          modal.style.display = 'flex';
+
+          try {
+            const resp = await fetch(url);
+            const text = await resp.text();
+            modalText.textContent = text;
+          } catch (err) {
+            modalText.textContent = `Error loading file listing.\n\n${err.message}`;
+          }
+        });
+      });
+
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal || e.target.classList.contains('modal-close')) {
+          modal.style.display = 'none';
+          modalText.textContent = '';
+        }
+      });
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && modal.style.display === 'flex') {
+          modal.style.display = 'none';
+          modalText.textContent = '';
+        }
+      });
+    });
+  </script>
+</TerminalLayout>

src/pages/bbs/fido/ansi-art.astro

@@ -0,0 +1,34 @@
+---
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_ANSI, BANNER_SKYLINE, BANNER_TEMPLE3, BANNER_INFOFILE, BANNER_MAINBASE, BANNER_LOGGED } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+
+const screens = [
+  { title: "SKYLINE VERSION", html: BANNER_SKYLINE },
+  { title: "NETLIST", html: BANNER_TEMPLE3 },
+  { title: "INFOFILE", html: BANNER_INFOFILE },
+  { title: "MAINBASE", html: BANNER_MAINBASE },
+  { title: "LOGGED", html: BANNER_LOGGED },
+];
+---
+<TerminalLayout title="BBS ANSI Art" description="Original ANSI art screens from tHE tEMPLE bBS">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_ANSI} />
+    <NavBar />
+    <h1>BBS ANSI Art</h1>
+    <p>Original .ANS screens from tHE tEMPLE bBS (Augsburg, FidoNet 2:2480/330).</p>
+    {screens.map((screen) => (
+      <figure class="gallery-item">
+        <figcaption>{screen.title}</figcaption>
+        <AnsiArt html={screen.html} />
+      </figure>
+    ))}
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/fido/nodelist.astro

@@ -0,0 +1,35 @@
+---
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import {
+  BANNER_FIDONET, BOX_USEFUL_INFO, BOX_SUPPORTED_NETS,
+  BOX_REGULAR_NETS, BOX_CLONE_NETS, BOX_SINGLE_TOPIC_NETS,
+  BOX_SPECIAL_NETS, BOX_CHAT_NETS, BOX_DEMO_NETS, BOX_AVAILABLE_NETS,
+} from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+---
+<TerminalLayout title="Fidonets and Nodelists" description="Node 2:2480/330 history and the networks tHE tEMPLE bBS was part of">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_FIDONET} />
+    <NavBar />
+    <h1>Fidonets and Nodelists</h1>
+    <p>tHE tEMPLE bBS was Fidonet node <strong>2:2480/330</strong> (with a point network at 2:2480/331), running as a multi-net-server with a long list of other networks, most free to join and free to use for downloads. Sysop: Stefan Koelle.</p>
+    <AnsiArt html={BOX_USEFUL_INFO} />
+    <AnsiArt html={BOX_SUPPORTED_NETS} />
+    <h2>Net Groups (as listed on the original welcome screen)</h2>
+    <AnsiArt html={BOX_REGULAR_NETS} />
+    <AnsiArt html={BOX_CLONE_NETS} />
+    <AnsiArt html={BOX_SINGLE_TOPIC_NETS} />
+    <AnsiArt html={BOX_SPECIAL_NETS} />
+    <AnsiArt html={BOX_CHAT_NETS} />
+    <AnsiArt html={BOX_DEMO_NETS} />
+    <h2>Full Available Nets List (HOST/HUB roles)</h2>
+    <AnsiArt html={BOX_AVAILABLE_NETS} />
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/index.astro

@@ -0,0 +1,55 @@
+---
+import TerminalLayout from '../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../components/TerminalShell';
+import Tile from '../../components/Tile.astro';
+import StatusBar from '../../components/StatusBar.astro';
+import LetterFooter from '../../components/LetterFooter.astro';
+import NavBar from '../../components/NavBar.astro';
+import AnsiArt from '../../components/AnsiArt.astro';
+import { BANNER_TEMPLE } from '../../lib/ansiArt';
+---
+<TerminalLayout title="Main Menu" description="tHE tEMPLE bBS - main menu">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_TEMPLE} />
+    <div class="tile-grid">
+      <Tile sections={[
+        {
+          title: 'PC SECTION',
+          hardware: 'Colani 486 DX-50 / DOS / VGA / SB AWE32',
+          items: [
+            { key: 'S', label: 'SkyLINE Productions', href: '/bbs/pc/skyline' },
+            { key: 'T', label: 'Tr@nceMISSION', href: '/bbs/pc/trancemission' },
+            { key: 'P', label: 'PHOB!A', href: '/bbs/pc/phobia' },
+            { key: 'K', label: 'Kosmos Design [KDS]', href: '/bbs/pc/kosmos-design' },
+          ],
+        },
+        {
+          title: 'ATARI ST SECTION',
+          hardware: '1040 STFM (1MB) / Mega 4 (4MB, 60MB HD)',
+          items: [{ key: 'D', label: 'Tropic DREAMs', href: '/bbs/atari/tropic-dreams' }],
+        },
+      ]} />
+      <Tile sections={[
+        {
+          title: 'AMIGA SECTION',
+          hardware: 'Amiga 500, 1MB, 2 Diskdrives',
+          items: [
+            { key: 'E', label: 'ESPRIT Releases', href: '/bbs/amiga/esprit' },
+            { key: 'M', label: 'MOD Files', href: '/bbs/amiga/mods' },
+          ],
+        },
+        {
+          title: 'BBS & FIDO SECTION',
+          hardware: '486dx2-66 OS/2 Warp 3 / PHOBOS Mailbox',
+          items: [
+            { key: 'A', label: 'BBS ANSI Art', href: '/bbs/fido/ansi-art' },
+            { key: 'F', label: 'Fidonets and Nodelists', href: '/bbs/fido/nodelist' },
+            { key: 'C', label: 'tHE tEMPLE bBS CDs', href: '/bbs/cds' },
+          ],
+        },
+      ]} />
+    </div>
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/legal-notice.astro

@@ -0,0 +1,25 @@
+---
+import TerminalLayout from '../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../components/TerminalShell';
+import StatusBar from '../../components/StatusBar.astro';
+import NavBar from '../../components/NavBar.astro';
+import LetterFooter from '../../components/LetterFooter.astro';
+---
+<TerminalLayout title="Legal Notice" description="Legal notice and privacy information">
+  <TerminalShell client:load>
+    <NavBar />
+    <h1>Legal Notice</h1>
+    <p>Stefan Kölle<br />
+Neumarkter Str. 86c<br />
+81673 München, Germany<br />
+<br />
+Phone/Fax: +49-(89)-20006547<br />
+Email: 28k8@moonweb.org
+</p>
+    <p>Responsible for content according to § 18 (2) MStV: Stefan Kölle, address as above.</p>
+    <p>Full legal notice &amp; privacy policy for this website and the moonweb.org network: <a href="https://hub.moonweb.org/impressum">hub.moonweb.org/impressum</a></p>
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/pc/kosmos-design.astro

@@ -0,0 +1,86 @@
+---
+import { getCollection } from 'astro:content';
+import { readFileSync } from 'node:fs';
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_KOSMOS } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+import TextOverlay from '../../../components/TextOverlay.astro';
+import TextOverlayScript from '../../../components/TextOverlayScript.astro';
+const kosmosTxt = readFileSync('src/data/kds-kosmos.txt', 'utf-8');
+const filesBbs = readFileSync('src/data/kds-files-bbs.txt', 'utf-8');
+const allReleases = await getCollection('kosmos-design');
+const outsideReleases = allReleases.filter((r) => r.data.group.includes('Outside Productions'));
+const lethalIllusion = allReleases.filter((r) => r.data.group.includes('Lethal Illusion'));
+const tapes = allReleases.filter((r) => r.data.platform === 'Audio');
+const remaining = allReleases.filter((r) => !r.data.group.includes('Outside Productions') && !r.data.group.includes('Lethal Illusion') && r.data.platform !== 'Audio');
+const tools = remaining.filter((r) => r.data.platform === 'DOS');
+---
+<TerminalLayout title="Kosmos Design [KDS]" description="Kosmos Design releases and outside productions">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_KOSMOS} />
+    <NavBar />
+    <h1>kOSMOS-d-Sign [KDS]</h1>
+    <p>marc JiNX^kDS^SBR (Stefan Koelle) - Augsburg, May '96. After giving up as coordinator of SkyLINE ("you probably think SkyLINE was lame and it was sure!"), KDS became the outlet for personal releases that couldn't go through a demogroup. Also a member of SBR.</p>
+    <p>Closely tied to tHE tEMPLE bBS - a reference screen even carried the tag "%KDS world headquarter%". BBS: 49.821.2191038 (Modem), 49.821.2191036 (ISDN). Networks: stoned brain records, comanet, scenenet, oanet, 8bitnet.</p>
+    <p>Source files: <TextOverlay title="kosmos.txt" content={kosmosTxt} /> <TextOverlay title="FILES.BBS" content={filesBbs} /></p>
+    <h2>Tools</h2>
+    {tools.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Year: {release.data.year ?? '19xx'} &nbsp; Platform: {release.data.platform}</p>
+          {release.data.download_url && <p><a href={release.data.download_url}>Download</a></p>}
+        </div>
+        <pre class="diz-box">{release.data.file_id_diz}</pre>
+      </div>
+    ))}
+    <h2>DJ Mix Tapes</h2>
+    {tapes.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Year: {release.data.year ?? '19xx'} &nbsp; Length: 90 min</p>
+          {release.data.download_url && <p><a href={release.data.download_url}>Download</a></p>}
+        </div>
+        {release.data.file_id_diz && <pre class="diz-box">{release.data.file_id_diz}</pre>}
+      </div>
+    ))}
+    <h2>Lethal Illusion [Duke 3D]</h2>
+    {lethalIllusion.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Year: {release.data.year ?? '19xx'} &nbsp; Platform: {release.data.platform}</p>
+          {release.data.download_url && <p><a href={release.data.download_url}>Download</a></p>}
+        </div>
+        <pre class="diz-box">{release.data.file_id_diz}</pre>
+      </div>
+    ))}
+    <h2>Outside Productions (BBS Intros)</h2>
+    {outsideReleases.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Credits: {release.data.credits.map((c) => `${c.role} - ${c.name}`).join(' | ')}</p>
+          {release.data.download_url && <p><a href={release.data.download_url}>Download</a></p>}
+        </div>
+        <pre class="diz-box">{release.data.file_id_diz}</pre>
+      </div>
+    ))}
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+  <TextOverlayScript overlays={[
+    { id: 'overlay-kosmos-txt', title: 'kosmos.txt', content: kosmosTxt },
+    { id: 'overlay-files-bbs', title: 'FILES.BBS', content: filesBbs },
+  ]} />
+</TerminalLayout>

src/pages/bbs/pc/phobia.astro

@@ -0,0 +1,33 @@
+---
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_PHOBIA } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+---
+<TerminalLayout title="PHOB!A" description="PHOB!A DemoGroup Archive">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_PHOBIA} />
+    <NavBar />
+    <img src="/images/phobia-header.png" alt="PHOB!A" style="width:100%; max-width: 640px; display:block; margin: 0 auto 1rem;" />
+    <h1>PHOB!A</h1>
+    <div class="release-row">
+      <div>
+        <p>PHOB!A was a short-lived but memorable PC DemoGroup in 1994. The highlight was the Phobia Welcome Intro — coded in Turbo Pascal with inline assembler on a 486 DX50, using palette tricks for animation and a custom font compiled into the executable.</p>
+        <p>Source code is available on GitHub.</p>
+      </div>
+      <pre class="diz-box">{`PHOB!A DemoGroup
+------------------
+PC Intros - 1994
+Turbo Pascal + ASM
+486 DX50
+X-LIB TextGraf`}</pre>
+    </div>
+    <p><a href="https://www.moonweb.org/phobia/">-&gt; Visit the full PHOB!A archive with screenshots &amp; videos</a></p>
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>

src/pages/bbs/pc/skyline.astro

@@ -0,0 +1,61 @@
+---
+import { getCollection } from 'astro:content';
+import { readFileSync } from 'node:fs';
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_SKYLINE } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+import TextOverlay from '../../../components/TextOverlay.astro';
+import TextOverlayScript from '../../../components/TextOverlayScript.astro';
+const skylineFilesBbs = readFileSync('src/data/skyline-files-bbs.txt', 'utf-8');
+const skyline94 = readFileSync('src/data/skyline94.txt', 'utf-8');
+const skyline95 = readFileSync('src/data/skyline95.txt', 'utf-8');
+const releases = await getCollection('skyline');
+const tools = releases.filter((r) => !r.data.title.toLowerCase().includes('intro') && !r.data.title.toLowerCase().includes('demo') && !r.data.title.toLowerCase().includes('copper') && !r.data.title.toLowerCase().includes('shark') && !r.data.title.toLowerCase().includes('highland') && !r.data.title.toLowerCase().includes('searching'));
+const intros = releases.filter((r) => r.data.title.toLowerCase().includes('intro') || r.data.title.toLowerCase().includes('demo') || r.data.title.toLowerCase().includes('copper') || r.data.title.toLowerCase().includes('shark') || r.data.title.toLowerCase().includes('highland') || r.data.title.toLowerCase().includes('searching'));
+---
+<TerminalLayout title="SkyLINE Productions" description="SkyLINE Productions - tools, demos and utilities for the 486" accentClass="skyline-accent">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_SKYLINE} />
+    <NavBar />
+    <h1>SkyLINE Productions</h1>
+    <p>Augsburg's first DemoGroup. Sterling (Stefan Kölle) and M.H. (Matthias Hebeisen) coding utilities, intros and games since 1993.</p>
+    <p>"We want to code real cool demos in asm."</p>
+    <p>Source files: <TextOverlay title="skyline94.txt" content={skyline94} /> <TextOverlay title="skyline95.txt" content={skyline95} /> <TextOverlay title="FILES.BBS" content={skylineFilesBbs} /></p>
+    <h2>Tools & Utilities</h2>
+    {tools.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Year: {release.data.year ?? '19xx'} &nbsp; Platform: {release.data.platform}</p>
+          {release.data.download_url && <p><a href={release.data.download_url}>Download</a></p>}
+        </div>
+        <pre class="diz-box">{release.data.file_id_diz}</pre>
+      </div>
+    ))}
+    <h2>Intros & Demos</h2>
+    {intros.map((release) => (
+      <div class="release-row">
+        <div>
+          <h3>{release.data.title}</h3>
+          <p>{release.data.description}</p>
+          <p>Year: {release.data.year ?? '19xx'} &nbsp; Platform: {release.data.platform}</p>
+          {release.data.download_url && <p><a href={release.data.download_url}>Download</a></p>}
+        </div>
+        <pre class="diz-box">{release.data.file_id_diz}</pre>
+      </div>
+    ))}
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+  <TextOverlayScript overlays={[
+    { id: 'overlay-skyline94-txt', title: 'skyline94.txt', content: skyline94 },
+    { id: 'overlay-skyline95-txt', title: 'skyline95.txt', content: skyline95 },
+    { id: 'overlay-files-bbs', title: 'FILES.BBS', content: skylineFilesBbs },
+  ]} />
+</TerminalLayout>

src/pages/bbs/pc/trancemission.astro

@@ -0,0 +1,33 @@
+---
+import TerminalLayout from '../../../layouts/TerminalLayout.astro';
+import TerminalShell from '../../../components/TerminalShell';
+import StatusBar from '../../../components/StatusBar.astro';
+import NavBar from '../../../components/NavBar.astro';
+import AnsiArt from '../../../components/AnsiArt.astro';
+import { BANNER_TRANCE } from '../../../lib/ansiArt';
+import LetterFooter from '../../../components/LetterFooter.astro';
+---
+<TerminalLayout title="Tr@nceMISSION" description="Tr@nceMISSION Archive of Releases">
+  <TerminalShell client:load>
+    <AnsiArt html={BANNER_TRANCE} />
+    <NavBar />
+    <img src="/images/trancemission-header.png" alt="Tr@nceMISSION" style="width:100%; max-width: 640px; display:block; margin: 0 auto 1rem;" />
+    <h1>Tr@nceMISSION</h1>
+    <div class="release-row">
+      <div>
+        <p>Tr@nceMISSION was a Programming &amp; Cracking Crew active from 1992 to 1995. The group was led by Stefan Koelle and created DOS demos and intros using Turbo Pascal and assembler, pushing the hardware capabilities of the time with creative animations, sound effects, and interactive elements.</p>
+        <p>The archive features three Pascal intros — Star Intro, Logo Intro, and Menu Intro — each showcasing animated graphics, sine wave text effects, and SoundBlaster support. Source code is available on GitHub.</p>
+      </div>
+      <pre class="diz-box">{`Tr@nceMISSION
+------------------
+DOS Demos & Intros
+Turbo Pascal + ASM
+1992 - 1995
+SoundBlaster FX`}</pre>
+    </div>
+    <p><a href="https://www.moonweb.org/tcm/">-&gt; Visit the full Tr@nceMISSION archive with screenshots &amp; videos</a></p>
+    <NavBar />
+    <LetterFooter />
+    <StatusBar />
+  </TerminalShell>
+</TerminalLayout>