1556 lines
37 KiB
Markdown
1556 lines
37 KiB
Markdown
# TekDek Documentation Website Architecture
|
|
|
|
**Designed by:** Daedalus, Chief Architect
|
|
**Date:** 2026-04-12
|
|
**Status:** Ready for Implementation (Talos + Icarus)
|
|
|
|
---
|
|
|
|
## 1. FOLDER STRUCTURE
|
|
|
|
```
|
|
/web.tekdek.dev/
|
|
├── index.php # Landing page router
|
|
├── .htaccess # URL rewriting (if Apache)
|
|
├── config.php # Global config (colors, menus, paths)
|
|
│
|
|
├── /includes/ # PHP components
|
|
│ ├── top.php # Header + navigation
|
|
│ ├── bottom.php # Footer
|
|
│ ├── menu.php # Menu builder (uses config)
|
|
│ └── helpers.php # Utility functions
|
|
│
|
|
├── /pages/ # Content pages
|
|
│ ├── landing.php # Home page
|
|
│ ├── about/
|
|
│ │ ├── vision.php # Vision & Strategy
|
|
│ │ └── model.php # Our Model
|
|
│ ├── projects/
|
|
│ │ ├── master-plan.php # Master Project Plan
|
|
│ │ ├── status.php # Project Status
|
|
│ │ └── overview.php # Project Overview
|
|
│ ├── tools/
|
|
│ │ ├── index.php # Tools overview
|
|
│ │ └── tech-stack.php # Tech Stack info
|
|
│ ├── team.php # Team page (redirect to /team.html)
|
|
│ └── decisions/
|
|
│ └── checklist.php # Quick Checklist
|
|
│
|
|
├── /css/ # Stylesheets
|
|
│ ├── base.css # Colors, typography, layout
|
|
│ ├── components.css # Buttons, cards, sections
|
|
│ ├── responsive.css # Mobile, tablet, desktop
|
|
│ └── print.css # Print styles (optional)
|
|
│
|
|
├── /js/ # JavaScript (minimal)
|
|
│ └── menu.js # Mobile menu toggle
|
|
│
|
|
├── /team.html # Existing employees page (static)
|
|
│
|
|
└── /assets/ # Images, icons, downloads
|
|
├── /images/
|
|
│ └── tekdek-logo.svg
|
|
└── /docs/ # Source markdown files (if serving originals)
|
|
├── TekDek-Strategy.md
|
|
├── TekDek-Brainstorm-Reference.md
|
|
├── TekDek-Master-Project-Plan.md
|
|
├── PROJECT-STATUS.md
|
|
├── PROJECT-OVERVIEW.md
|
|
├── Tool-Requirements.md
|
|
└── Master-Plan-Quick-Checklist.md
|
|
```
|
|
|
|
---
|
|
|
|
## 2. MENU DATA STRUCTURE
|
|
|
|
**File: `/includes/config.php`**
|
|
|
|
```php
|
|
<?php
|
|
// TekDek Documentation Site Configuration
|
|
|
|
// Color Scheme
|
|
define('COLOR_BG', '#0d0d0f');
|
|
define('COLOR_GOLD', '#C4A24E');
|
|
define('COLOR_STEEL', '#7B8794');
|
|
define('COLOR_AMBER', '#E07A2F');
|
|
define('COLOR_TEXT', '#e0e0e0');
|
|
|
|
// Typography
|
|
define('FONT_HEADERS', "'Cinzel', serif");
|
|
define('FONT_BODY', "'Inter', sans-serif");
|
|
define('FONT_CODE', "'JetBrains Mono', monospace");
|
|
|
|
// Site Meta
|
|
define('SITE_NAME', 'TekDek');
|
|
define('SITE_DESC', 'Strategic Documentation & Project Portal');
|
|
define('SITE_URL', 'https://web.tekdek.dev');
|
|
|
|
// Navigation Menu Structure
|
|
$MENU = [
|
|
[
|
|
'label' => 'Home',
|
|
'url' => '/',
|
|
'icon' => 'home',
|
|
],
|
|
[
|
|
'label' => 'About',
|
|
'url' => '#',
|
|
'icon' => 'info',
|
|
'children' => [
|
|
[
|
|
'label' => 'Vision & Strategy',
|
|
'url' => '/about/vision.php',
|
|
'source' => 'TekDek-Strategy.md',
|
|
],
|
|
[
|
|
'label' => 'Our Model',
|
|
'url' => '/about/model.php',
|
|
'source' => 'TekDek-Brainstorm-Reference.md',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'label' => 'Projects',
|
|
'url' => '#',
|
|
'icon' => 'projects',
|
|
'children' => [
|
|
[
|
|
'label' => 'Master Plan',
|
|
'url' => '/projects/master-plan.php',
|
|
'source' => 'TekDek-Master-Project-Plan.md',
|
|
],
|
|
[
|
|
'label' => 'Status',
|
|
'url' => '/projects/status.php',
|
|
'source' => 'PROJECT-STATUS.md',
|
|
],
|
|
[
|
|
'label' => 'Overview',
|
|
'url' => '/projects/overview.php',
|
|
'source' => 'PROJECT-OVERVIEW.md',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'label' => 'Tools & Tech',
|
|
'url' => '/tools/',
|
|
'icon' => 'tools',
|
|
'children' => [
|
|
[
|
|
'label' => 'Requirements',
|
|
'url' => '/tools/index.php',
|
|
'source' => 'Tool-Requirements.md',
|
|
],
|
|
[
|
|
'label' => 'Tech Stack',
|
|
'url' => '/tools/tech-stack.php',
|
|
'source' => null, // Custom content
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'label' => 'Team',
|
|
'url' => '/team.html',
|
|
'icon' => 'people',
|
|
],
|
|
[
|
|
'label' => 'Decisions',
|
|
'url' => '/decisions/checklist.php',
|
|
'icon' => 'checklist',
|
|
'source' => 'Master-Plan-Quick-Checklist.md',
|
|
'admin' => false, // Not hidden, but can be toggled
|
|
],
|
|
];
|
|
|
|
// Page metadata mapping (for breadcrumbs, titles, descriptions)
|
|
$PAGE_META = [
|
|
'/' => [
|
|
'title' => 'TekDek',
|
|
'desc' => 'Strategic Documentation & Project Portal',
|
|
'breadcrumb' => [],
|
|
],
|
|
'/about/vision.php' => [
|
|
'title' => 'Vision & Strategy',
|
|
'desc' => 'Our strategic vision for TekDek',
|
|
'breadcrumb' => ['About', 'Vision & Strategy'],
|
|
],
|
|
'/about/model.php' => [
|
|
'title' => 'Our Model',
|
|
'desc' => 'How TekDek operates',
|
|
'breadcrumb' => ['About', 'Our Model'],
|
|
],
|
|
'/projects/master-plan.php' => [
|
|
'title' => 'Master Project Plan',
|
|
'desc' => 'Complete project roadmap',
|
|
'breadcrumb' => ['Projects', 'Master Plan'],
|
|
],
|
|
'/projects/status.php' => [
|
|
'title' => 'Project Status',
|
|
'desc' => 'Current project status and updates',
|
|
'breadcrumb' => ['Projects', 'Status'],
|
|
],
|
|
'/projects/overview.php' => [
|
|
'title' => 'Project Overview',
|
|
'desc' => 'High-level project overview',
|
|
'breadcrumb' => ['Projects', 'Overview'],
|
|
],
|
|
'/tools/' => [
|
|
'title' => 'Tools & Tech',
|
|
'desc' => 'Tools and technology requirements',
|
|
'breadcrumb' => ['Tools & Tech'],
|
|
],
|
|
'/tools/tech-stack.php' => [
|
|
'title' => 'Tech Stack',
|
|
'desc' => 'Technology stack overview',
|
|
'breadcrumb' => ['Tools & Tech', 'Tech Stack'],
|
|
],
|
|
'/team.html' => [
|
|
'title' => 'Team',
|
|
'desc' => 'Meet the TekDek team',
|
|
'breadcrumb' => ['Team'],
|
|
],
|
|
'/decisions/checklist.php' => [
|
|
'title' => 'Quick Checklist',
|
|
'desc' => 'Decision checklist and quick reference',
|
|
'breadcrumb' => ['Decisions', 'Checklist'],
|
|
],
|
|
];
|
|
?>
|
|
```
|
|
|
|
---
|
|
|
|
## 3. PAGE LAYOUT SPECIFICATION
|
|
|
|
### 3.1 Header Component (`includes/top.php`)
|
|
|
|
```php
|
|
<?php
|
|
// Header with navigation
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo isset($PAGE_TITLE) ? $PAGE_TITLE . ' | ' . SITE_NAME : SITE_NAME; ?></title>
|
|
<meta name="description" content="<?php echo isset($PAGE_DESC) ? $PAGE_DESC : SITE_DESC; ?>">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="/css/base.css">
|
|
<link rel="stylesheet" href="/css/components.css">
|
|
<link rel="stylesheet" href="/css/responsive.css">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="header-container">
|
|
<!-- Logo -->
|
|
<div class="logo">
|
|
<a href="/">
|
|
<span class="logo-text">TekDek</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Toggle (Mobile) -->
|
|
<button class="menu-toggle" id="menuToggle">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="site-nav" id="siteNav">
|
|
<?php include 'menu.php'; ?>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Breadcrumb (if applicable) -->
|
|
<?php if (isset($BREADCRUMB) && !empty($BREADCRUMB)): ?>
|
|
<div class="breadcrumb">
|
|
<div class="breadcrumb-container">
|
|
<a href="/">Home</a>
|
|
<?php foreach ($BREADCRUMB as $crumb): ?>
|
|
<span class="separator">→</span>
|
|
<span><?php echo $crumb; ?></span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Main Content -->
|
|
<main class="site-main">
|
|
```
|
|
|
|
### 3.2 Navigation Component (`includes/menu.php`)
|
|
|
|
```php
|
|
<?php
|
|
// Multi-level navigation menu builder
|
|
function renderMenu($menuArray, $level = 0) {
|
|
$html = '<ul class="menu menu-level-' . $level . '">';
|
|
|
|
foreach ($menuArray as $item) {
|
|
$hasChildren = !empty($item['children']);
|
|
$activeClass = (isset($_SERVER['REQUEST_URI']) &&
|
|
$_SERVER['REQUEST_URI'] === $item['url']) ? 'active' : '';
|
|
|
|
$html .= '<li class="menu-item ' . $activeClass . ($hasChildren ? 'has-submenu' : '') . '">';
|
|
|
|
if ($hasChildren) {
|
|
$html .= '<a href="#" class="menu-link has-submenu-trigger">';
|
|
$html .= $item['label'];
|
|
$html .= '<span class="submenu-arrow">▼</span>';
|
|
$html .= '</a>';
|
|
$html .= renderMenu($item['children'], $level + 1);
|
|
} else {
|
|
$html .= '<a href="' . $item['url'] . '" class="menu-link">';
|
|
$html .= $item['label'];
|
|
$html .= '</a>';
|
|
}
|
|
|
|
$html .= '</li>';
|
|
}
|
|
|
|
$html .= '</ul>';
|
|
return $html;
|
|
}
|
|
|
|
echo renderMenu($MENU);
|
|
?>
|
|
```
|
|
|
|
### 3.3 Footer Component (`includes/bottom.php`)
|
|
|
|
```php
|
|
<?php
|
|
// Footer
|
|
?>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-container">
|
|
<div class="footer-content">
|
|
<p>© 2026 TekDek. All rights reserved.</p>
|
|
<p class="footer-tagline">Strategic Documentation & Project Portal</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="/" class="footer-link">Home</a>
|
|
<a href="/team.html" class="footer-link">Team</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/js/menu.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### 3.4 Landing Page (`pages/landing.php`)
|
|
|
|
```php
|
|
<?php
|
|
$PAGE_TITLE = 'Home';
|
|
$PAGE_DESC = 'Strategic Documentation & Project Portal';
|
|
$BREADCRUMB = [];
|
|
|
|
include '../includes/top.php';
|
|
?>
|
|
|
|
<div class="hero-section">
|
|
<div class="hero-container">
|
|
<h1 class="hero-title">TekDek</h1>
|
|
<p class="hero-subtitle">Strategic Documentation & Project Portal</p>
|
|
<p class="hero-desc">
|
|
TekDek is a multifaceted organization building unique personas
|
|
with independent development styles, brands, and roles within a
|
|
living narrative ecosystem.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="/about/vision.php" class="btn btn-primary">Learn Our Vision</a>
|
|
<a href="/projects/master-plan.php" class="btn btn-secondary">View Projects</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="quick-links">
|
|
<div class="quick-links-container">
|
|
<h2>Quick Access</h2>
|
|
<div class="quick-links-grid">
|
|
<div class="quick-link-card">
|
|
<h3><a href="/about/vision.php">Vision & Strategy</a></h3>
|
|
<p>Our strategic direction and vision</p>
|
|
</div>
|
|
<div class="quick-link-card">
|
|
<h3><a href="/projects/master-plan.php">Master Plan</a></h3>
|
|
<p>Complete project roadmap</p>
|
|
</div>
|
|
<div class="quick-link-card">
|
|
<h3><a href="/team.html">Meet the Team</a></h3>
|
|
<p>Meet our personas and team members</p>
|
|
</div>
|
|
<div class="quick-link-card">
|
|
<h3><a href="/projects/status.php">Project Status</a></h3>
|
|
<p>Current updates and progress</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php include '../includes/bottom.php'; ?>
|
|
```
|
|
|
|
### 3.5 Content Pages (Example: `/pages/about/vision.php`)
|
|
|
|
```php
|
|
<?php
|
|
$PAGE_TITLE = 'Vision & Strategy';
|
|
$PAGE_DESC = 'Our strategic vision for TekDek';
|
|
$BREADCRUMB = ['About', 'Vision & Strategy'];
|
|
|
|
include '../../includes/top.php';
|
|
?>
|
|
|
|
<div class="content-container">
|
|
<article class="content-article">
|
|
<h1><?php echo $PAGE_TITLE; ?></h1>
|
|
|
|
<!-- Content loaded from markdown or custom HTML -->
|
|
<div class="content-body">
|
|
<?php
|
|
// Option 1: Load from markdown file
|
|
$markdownFile = '../../assets/docs/TekDek-Strategy.md';
|
|
if (file_exists($markdownFile)) {
|
|
$markdown = file_get_contents($markdownFile);
|
|
// Use a markdown parser (e.g., Parsedown) to convert to HTML
|
|
require '../../includes/parsedown.php';
|
|
$pd = new Parsedown();
|
|
echo $pd->text($markdown);
|
|
} else {
|
|
echo '<p>Content not found.</p>';
|
|
}
|
|
?>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Sidebar (optional) -->
|
|
<aside class="content-sidebar">
|
|
<div class="sidebar-section">
|
|
<h4>In This Section</h4>
|
|
<nav class="section-nav">
|
|
<a href="/about/vision.php" class="section-link active">Vision & Strategy</a>
|
|
<a href="/about/model.php" class="section-link">Our Model</a>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<?php include '../../includes/bottom.php'; ?>
|
|
```
|
|
|
|
---
|
|
|
|
## 4. CSS FILE ORGANIZATION
|
|
|
|
### 4.1 Base Styles (`css/base.css`)
|
|
|
|
```css
|
|
/* TekDek Documentation Site - Base Styles */
|
|
|
|
:root {
|
|
/* Colors */
|
|
--color-bg: #0d0d0f;
|
|
--color-fg: #e0e0e0;
|
|
--color-gold: #C4A24E;
|
|
--color-steel: #7B8794;
|
|
--color-amber: #E07A2F;
|
|
--color-border: #2a2a2d;
|
|
|
|
/* Typography */
|
|
--font-header: 'Cinzel', serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--font-code: 'JetBrains Mono', monospace;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.5rem;
|
|
--spacing-sm: 1rem;
|
|
--spacing-md: 1.5rem;
|
|
--spacing-lg: 2rem;
|
|
--spacing-xl: 3rem;
|
|
--spacing-2xl: 4rem;
|
|
|
|
/* Sizing */
|
|
--header-height: 80px;
|
|
--max-width: 1200px;
|
|
|
|
/* Z-index */
|
|
--z-base: 1;
|
|
--z-dropdown: 100;
|
|
--z-modal: 1000;
|
|
}
|
|
|
|
/* Reset */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-fg);
|
|
font-family: var(--font-body);
|
|
line-height: 1.6;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Typography */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-header);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
h1 { font-size: 3rem; }
|
|
h2 { font-size: 2.25rem; }
|
|
h3 { font-size: 1.75rem; }
|
|
h4 { font-size: 1.5rem; }
|
|
h5 { font-size: 1.25rem; }
|
|
h6 { font-size: 1.1rem; }
|
|
|
|
p {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-gold);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-code);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: var(--spacing-md);
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Header */
|
|
.site-header {
|
|
background: linear-gradient(135deg, var(--color-bg) 0%, rgba(0, 0, 0, 0.5) 100%);
|
|
border-bottom: 1px solid var(--color-border);
|
|
height: var(--header-height);
|
|
display: flex;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-base);
|
|
}
|
|
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: var(--max-width);
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
|
|
.logo {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logo-text {
|
|
font-family: var(--font-header);
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: var(--color-gold);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.logo a:hover .logo-text {
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--spacing-xs);
|
|
}
|
|
|
|
.menu-toggle span {
|
|
width: 25px;
|
|
height: 3px;
|
|
background-color: var(--color-gold);
|
|
margin: 4px 0;
|
|
transition: 0.3s;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Navigation */
|
|
.site-nav {
|
|
flex: 1;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: var(--spacing-lg);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.menu-item {
|
|
position: relative;
|
|
}
|
|
|
|
.menu-link {
|
|
color: var(--color-fg);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.menu-link:hover {
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
.menu-link.active {
|
|
color: var(--color-gold);
|
|
border-bottom: 2px solid var(--color-gold);
|
|
}
|
|
|
|
/* Dropdown menus */
|
|
.menu-level-1 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: rgba(13, 13, 15, 0.95);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
padding: var(--spacing-sm) 0;
|
|
min-width: 200px;
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
|
|
.menu-item.has-submenu:hover .menu-level-1 {
|
|
display: block;
|
|
}
|
|
|
|
.menu-level-1 .menu-link {
|
|
display: block;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
/* Main content */
|
|
.site-main {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: var(--spacing-2xl) var(--spacing-md);
|
|
min-height: calc(100vh - var(--header-height));
|
|
}
|
|
|
|
/* Footer */
|
|
.site-footer {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-top: 1px solid var(--color-border);
|
|
padding: var(--spacing-2xl) var(--spacing-md);
|
|
margin-top: var(--spacing-2xl);
|
|
}
|
|
|
|
.footer-container {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-content p {
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.footer-tagline {
|
|
color: var(--color-steel);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--color-steel);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: var(--spacing-md) 0;
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
font-size: 0.95rem;
|
|
color: var(--color-steel);
|
|
}
|
|
|
|
.breadcrumb-container a {
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
.separator {
|
|
margin: 0 var(--spacing-xs);
|
|
color: var(--color-steel);
|
|
}
|
|
```
|
|
|
|
### 4.2 Components (`css/components.css`)
|
|
|
|
```css
|
|
/* TekDek Documentation Site - Components */
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: 6px;
|
|
font-family: var(--font-header);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--color-gold);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--color-amber);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(196, 162, 78, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--color-gold);
|
|
border: 2px solid var(--color-gold);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-gold);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
padding: var(--spacing-lg);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: var(--color-gold);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, rgba(196, 162, 78, 0.05) 0%, rgba(224, 122, 47, 0.05) 100%);
|
|
border-radius: 12px;
|
|
margin-bottom: var(--spacing-2xl);
|
|
}
|
|
|
|
.hero-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 4rem;
|
|
margin-bottom: var(--spacing-md);
|
|
background: linear-gradient(135deg, var(--color-gold), var(--color-amber));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.5rem;
|
|
color: var(--color-steel);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: 1.1rem;
|
|
color: var(--color-fg);
|
|
margin-bottom: var(--spacing-xl);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Quick Links Grid */
|
|
.quick-links {
|
|
margin: var(--spacing-2xl) 0;
|
|
}
|
|
|
|
.quick-links-container {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
|
|
.quick-links-container h2 {
|
|
margin-bottom: var(--spacing-xl);
|
|
text-align: center;
|
|
}
|
|
|
|
.quick-links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.quick-link-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
padding: var(--spacing-lg);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.quick-link-card:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: var(--color-gold);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.quick-link-card h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.quick-link-card h3 a {
|
|
color: var(--color-gold);
|
|
}
|
|
|
|
.quick-link-card p {
|
|
color: var(--color-steel);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Content Layout */
|
|
.content-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
gap: var(--spacing-2xl);
|
|
margin: var(--spacing-2xl) 0;
|
|
}
|
|
|
|
.content-article {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid var(--color-border);
|
|
padding: var(--spacing-xl);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.content-article h1 {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.content-body h2 {
|
|
margin-top: var(--spacing-xl);
|
|
}
|
|
|
|
.content-body ul,
|
|
.content-body ol {
|
|
margin-left: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.content-body li {
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
/* Sidebar */
|
|
.content-sidebar {
|
|
position: sticky;
|
|
top: calc(var(--header-height) + var(--spacing-md));
|
|
height: fit-content;
|
|
}
|
|
|
|
.sidebar-section {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid var(--color-border);
|
|
padding: var(--spacing-md);
|
|
border-radius: 8px;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.sidebar-section h4 {
|
|
margin-bottom: var(--spacing-md);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.section-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.section-link {
|
|
color: var(--color-steel);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-left: 3px solid transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.section-link:hover {
|
|
color: var(--color-gold);
|
|
border-left-color: var(--color-gold);
|
|
}
|
|
|
|
.section-link.active {
|
|
color: var(--color-gold);
|
|
border-left-color: var(--color-gold);
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
th {
|
|
background: rgba(196, 162, 78, 0.1);
|
|
color: var(--color-gold);
|
|
padding: var(--spacing-md);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
tr:hover {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
/* Blockquotes */
|
|
blockquote {
|
|
border-left: 4px solid var(--color-gold);
|
|
padding-left: var(--spacing-md);
|
|
margin: var(--spacing-md) 0;
|
|
color: var(--color-steel);
|
|
font-style: italic;
|
|
}
|
|
```
|
|
|
|
### 4.3 Responsive Styles (`css/responsive.css`)
|
|
|
|
```css
|
|
/* TekDek Documentation Site - Responsive */
|
|
|
|
/* Tablet (768px and below) */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
}
|
|
|
|
.header-container {
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.site-nav {
|
|
position: absolute;
|
|
top: var(--header-height);
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(13, 13, 15, 0.98);
|
|
border-bottom: 1px solid var(--color-border);
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.site-nav.active {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.menu {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: var(--spacing-md);
|
|
margin: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.menu-link {
|
|
display: block;
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.menu-level-1 {
|
|
position: static;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: none;
|
|
border-radius: 0;
|
|
margin-top: 0;
|
|
display: none;
|
|
padding: 0;
|
|
min-width: auto;
|
|
}
|
|
|
|
.menu-item.has-submenu:hover .menu-level-1 {
|
|
display: block;
|
|
}
|
|
|
|
.menu-level-1 .menu-link {
|
|
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-md) * 2);
|
|
}
|
|
|
|
/* Hero */
|
|
.hero-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* Content Layout */
|
|
.content-container {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.content-sidebar {
|
|
position: static;
|
|
}
|
|
|
|
/* Quick Links Grid */
|
|
.quick-links-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer-container {
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
|
|
h1 { font-size: 2rem; }
|
|
h2 { font-size: 1.75rem; }
|
|
h3 { font-size: 1.5rem; }
|
|
}
|
|
|
|
/* Mobile (480px and below) */
|
|
@media (max-width: 480px) {
|
|
:root {
|
|
font-size: 14px;
|
|
--header-height: 70px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.hero-section {
|
|
padding: var(--spacing-lg) 0;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hero-cta {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.content-article {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
h1 { font-size: 1.5rem; }
|
|
h2 { font-size: 1.25rem; }
|
|
h3 { font-size: 1.1rem; }
|
|
|
|
.site-main {
|
|
padding: var(--spacing-lg) var(--spacing-sm);
|
|
}
|
|
}
|
|
|
|
/* Print */
|
|
@media print {
|
|
.site-header,
|
|
.site-footer,
|
|
.breadcrumb,
|
|
.content-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
a {
|
|
color: #0066cc;
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 5. HELPER FUNCTIONS (`includes/helpers.php`)
|
|
|
|
```php
|
|
<?php
|
|
// Utility functions for site
|
|
|
|
/**
|
|
* Get the current page URL
|
|
*/
|
|
function getCurrentPage() {
|
|
return strtok($_SERVER['REQUEST_URI'], '?');
|
|
}
|
|
|
|
/**
|
|
* Check if a page is active
|
|
*/
|
|
function isActivePage($page) {
|
|
return getCurrentPage() === $page ? 'active' : '';
|
|
}
|
|
|
|
/**
|
|
* Render a menu item with active state
|
|
*/
|
|
function getMenuClass($url) {
|
|
return (getCurrentPage() === $url) ? 'active' : '';
|
|
}
|
|
|
|
/**
|
|
* Get page meta (title, description, breadcrumb)
|
|
*/
|
|
function getPageMeta($pagePath = null) {
|
|
global $PAGE_META;
|
|
|
|
$page = $pagePath ?? getCurrentPage();
|
|
|
|
return $PAGE_META[$page] ?? [
|
|
'title' => 'TekDek',
|
|
'desc' => SITE_DESC,
|
|
'breadcrumb' => [],
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Convert markdown file to HTML (requires Parsedown)
|
|
*/
|
|
function renderMarkdown($filePath) {
|
|
if (!file_exists($filePath)) {
|
|
return '<p class="error">Content not found.</p>';
|
|
}
|
|
|
|
$markdown = file_get_contents($filePath);
|
|
require_once 'parsedown.php';
|
|
|
|
$pd = new Parsedown();
|
|
return $pd->text($markdown);
|
|
}
|
|
|
|
/**
|
|
* Escape HTML output
|
|
*/
|
|
function esc($text) {
|
|
return htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
|
|
}
|
|
|
|
/**
|
|
* Generate a unique page ID for anchors
|
|
*/
|
|
function slugify($text) {
|
|
$text = strtolower($text);
|
|
$text = preg_replace('/[^\w\s-]/', '', $text);
|
|
$text = preg_replace('/-+/', '-', $text);
|
|
return trim($text, '-');
|
|
}
|
|
|
|
?>
|
|
```
|
|
|
|
---
|
|
|
|
## 6. JAVASCRIPT (`js/menu.js`)
|
|
|
|
```javascript
|
|
// TekDek Documentation Site - Menu Toggle
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const menuToggle = document.getElementById('menuToggle');
|
|
const siteNav = document.getElementById('siteNav');
|
|
|
|
if (!menuToggle || !siteNav) return;
|
|
|
|
// Toggle mobile menu
|
|
menuToggle.addEventListener('click', function() {
|
|
siteNav.classList.toggle('active');
|
|
menuToggle.classList.toggle('active');
|
|
});
|
|
|
|
// Close menu when clicking on a link
|
|
const menuLinks = siteNav.querySelectorAll('a');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
siteNav.classList.remove('active');
|
|
menuToggle.classList.remove('active');
|
|
});
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
if (!siteNav.contains(event.target) && !menuToggle.contains(event.target)) {
|
|
siteNav.classList.remove('active');
|
|
menuToggle.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## 7. ROUTING & URL PATTERNS
|
|
|
|
### 7.1 URL Structure
|
|
|
|
```
|
|
/ # Landing page
|
|
/about/vision.php # Vision & Strategy
|
|
/about/model.php # Our Model
|
|
/projects/master-plan.php # Master Plan
|
|
/projects/status.php # Project Status
|
|
/projects/overview.php # Project Overview
|
|
/tools/ # Tools overview (index.php)
|
|
/tools/tech-stack.php # Tech Stack
|
|
/team.html # Team page (external link, no rewrite)
|
|
/decisions/checklist.php # Quick Checklist
|
|
```
|
|
|
|
### 7.2 Apache `.htaccess` (Optional - for clean URLs)
|
|
|
|
```apache
|
|
<IfModule mod_rewrite.c>
|
|
RewriteEngine On
|
|
RewriteBase /
|
|
|
|
# Don't rewrite existing files or directories
|
|
RewriteCond %{REQUEST_FILENAME} !-f
|
|
RewriteCond %{REQUEST_FILENAME} !-d
|
|
|
|
# Rewrite /vision to /about/vision.php
|
|
RewriteRule ^about/vision/?$ /about/vision.php [L,QSA]
|
|
RewriteRule ^about/model/?$ /about/model.php [L,QSA]
|
|
|
|
RewriteRule ^projects/master-plan/?$ /projects/master-plan.php [L,QSA]
|
|
RewriteRule ^projects/status/?$ /projects/status.php [L,QSA]
|
|
RewriteRule ^projects/overview/?$ /projects/overview.php [L,QSA]
|
|
|
|
RewriteRule ^tools/?$ /tools/index.php [L,QSA]
|
|
RewriteRule ^tools/tech-stack/?$ /tools/tech-stack.php [L,QSA]
|
|
|
|
RewriteRule ^decisions/checklist/?$ /decisions/checklist.php [L,QSA]
|
|
</IfModule>
|
|
```
|
|
|
|
---
|
|
|
|
## 8. INDEX.PHP (MAIN ROUTER)
|
|
|
|
```php
|
|
<?php
|
|
// TekDek Documentation Site - Main Router
|
|
require_once 'config.php';
|
|
require_once 'includes/helpers.php';
|
|
|
|
// Get the requested URI
|
|
$requestUri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
|
|
$requestUri = str_replace('/web/', '', $requestUri); // Adjust based on actual path
|
|
|
|
// Route mapping
|
|
$routes = [
|
|
'/' => 'pages/landing.php',
|
|
'/about/vision.php' => 'pages/about/vision.php',
|
|
'/about/model.php' => 'pages/about/model.php',
|
|
'/projects/master-plan.php' => 'pages/projects/master-plan.php',
|
|
'/projects/status.php' => 'pages/projects/status.php',
|
|
'/projects/overview.php' => 'pages/projects/overview.php',
|
|
'/tools/' => 'pages/tools/index.php',
|
|
'/tools/index.php' => 'pages/tools/index.php',
|
|
'/tools/tech-stack.php' => 'pages/tools/tech-stack.php',
|
|
'/team.html' => 'team.html',
|
|
'/decisions/checklist.php' => 'pages/decisions/checklist.php',
|
|
];
|
|
|
|
// Find matching route
|
|
$filePath = $routes[$requestUri] ?? null;
|
|
|
|
if ($filePath && file_exists($filePath)) {
|
|
include $filePath;
|
|
} else {
|
|
// 404 Not Found
|
|
http_response_code(404);
|
|
include 'pages/404.php';
|
|
}
|
|
?>
|
|
```
|
|
|
|
---
|
|
|
|
## 9. HANDOFF SPECIFICATIONS
|
|
|
|
### 9.1 For Talos (PHP Implementation)
|
|
|
|
**Responsibilities:**
|
|
|
|
1. **Setup & Installation**
|
|
- Create folder structure exactly as specified
|
|
- Copy CSS files from Icarus
|
|
- Implement routing in `index.php`
|
|
- Install markdown parser (e.g., Parsedown) in `/includes/`
|
|
|
|
2. **Template Implementation**
|
|
- Create `includes/top.php` with header and navigation
|
|
- Create `includes/bottom.php` with footer
|
|
- Create `includes/menu.php` with recursive menu builder
|
|
- Ensure all PHP includes work correctly with relative paths
|
|
|
|
3. **Page Creation**
|
|
- Create all page files in `/pages/` structure
|
|
- Implement markdown rendering for content pages
|
|
- Ensure breadcrumb generation works
|
|
- Test all navigation links
|
|
|
|
4. **Configuration**
|
|
- Update `config.php` with actual domain/paths
|
|
- Set up database connection if needed (not in current spec)
|
|
- Configure error handling and logging
|
|
|
|
5. **Testing Checklist**
|
|
- [ ] All pages load without errors
|
|
- [ ] Navigation works on desktop & mobile
|
|
- [ ] Responsive design functions properly
|
|
- [ ] Markdown content renders correctly
|
|
- [ ] 404 page displays for missing routes
|
|
- [ ] Performance acceptable (page load < 2s)
|
|
|
|
---
|
|
|
|
### 9.2 For Icarus (CSS/Design Implementation)
|
|
|
|
**Responsibilities:**
|
|
|
|
1. **CSS Files Creation**
|
|
- Implement `base.css` with variables and typography
|
|
- Implement `components.css` with all component styles
|
|
- Implement `responsive.css` with media queries
|
|
- Ensure color consistency with design spec
|
|
|
|
2. **Design Elements**
|
|
- Hero section visual hierarchy
|
|
- Card hover effects and transitions
|
|
- Button states (default, hover, active)
|
|
- Form elements (if needed in future)
|
|
- Icon integration (optional)
|
|
|
|
3. **Typography**
|
|
- Cinzel for headers (load from Google Fonts)
|
|
- Inter for body (load from Google Fonts)
|
|
- JetBrains Mono for code (load from Google Fonts)
|
|
- Ensure proper font scaling at different breakpoints
|
|
|
|
4. **Responsive Design**
|
|
- Tablet layout (768px breakpoint)
|
|
- Mobile layout (480px breakpoint)
|
|
- Test on real devices/browser DevTools
|
|
- Ensure touch-friendly buttons and links
|
|
|
|
5. **Dark Theme Consistency**
|
|
- Maintain color scheme (#0d0d0f, #C4A24E, #7B8794, #E07A2F)
|
|
- Ensure contrast ratios meet accessibility standards
|
|
- Test with browser dark mode detection
|
|
|
|
6. **Testing Checklist**
|
|
- [ ] All colors render correctly
|
|
- [ ] Fonts load and display properly
|
|
- [ ] Responsive breakpoints work
|
|
- [ ] Hover states are clear
|
|
- [ ] Print styles work
|
|
- [ ] Accessibility: color contrast OK
|
|
- [ ] Animation performance smooth
|
|
|
|
---
|
|
|
|
## 10. DEPLOYMENT & HOSTING
|
|
|
|
### 10.1 Server Requirements
|
|
|
|
- **PHP:** 7.4+ (for arrow functions and match expressions)
|
|
- **Web Server:** Apache (with mod_rewrite) or Nginx
|
|
- **Storage:** ~500MB (includes documentation)
|
|
- **SSL:** HTTPS recommended
|
|
|
|
### 10.2 File Permissions
|
|
|
|
```bash
|
|
chmod 755 /web.tekdek.dev # Directory
|
|
chmod 644 /web.tekdek.dev/*.php # PHP files
|
|
chmod 644 /web.tekdek.dev/css/* # CSS files
|
|
chmod 644 /web.tekdek.dev/js/* # JavaScript files
|
|
chmod 755 /web.tekdek.dev/assets # Asset directories
|
|
```
|
|
|
|
---
|
|
|
|
## 11. CONTENT PIPELINE
|
|
|
|
### 11.1 Markdown to Website Workflow
|
|
|
|
1. **Source Files** → `/web.tekdek.dev/assets/docs/`
|
|
- `TekDek-Strategy.md`
|
|
- `TekDek-Brainstorm-Reference.md`
|
|
- etc.
|
|
|
|
2. **Page Template** → `/web.tekdek.dev/pages/[category]/[page].php`
|
|
- Includes top.php
|
|
- Calls `renderMarkdown()` to load and convert markdown
|
|
- Includes bottom.php
|
|
|
|
3. **Display** → Browser
|
|
- PHP processes markdown
|
|
- CSS styles output
|
|
- User sees formatted content
|
|
|
|
### 11.2 Future Automation
|
|
|
|
If desired, a script can:
|
|
- Watch `/assets/docs/` for changes
|
|
- Auto-regenerate static HTML if markdown changes
|
|
- Commit changes to Gitea (Brain repo)
|
|
|
|
---
|
|
|
|
## 12. SUMMARY & NEXT STEPS
|
|
|
|
| Role | Task | Timeline |
|
|
|------|------|----------|
|
|
| **Talos** | Implement PHP templates and routing | Week 1 |
|
|
| **Icarus** | Create CSS files and responsive design | Week 1 |
|
|
| **Both** | Integration testing | Week 2 |
|
|
| **Talos** | Deploy to web.tekdek.dev | Week 2 |
|
|
| **Glytcht + ParzivalTD** | Content review and go-live | Week 2-3 |
|
|
|
|
---
|
|
|
|
## Questions for Clarification
|
|
|
|
Before implementation, confirm:
|
|
|
|
1. **Markdown Parser:** Use Parsedown or another library?
|
|
2. **Caching:** Need to cache rendered HTML pages?
|
|
3. **Analytics:** Google Analytics or other tracking?
|
|
4. **Search:** Full-text search across documentation pages?
|
|
5. **Admin Panel:** Need ability to manage content via web UI?
|
|
6. **Database:** Store metadata (authors, dates, versions) in database?
|
|
7. **SSL Certificate:** Already provisioned on web.tekdek.dev?
|
|
|
|
---
|
|
|
|
**Architecture Document Complete.**
|
|
Ready for Talos & Icarus to implement.
|