927 lines
35 KiB
HTML
927 lines
35 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Provisioning Poster - Interactive HOWTO Guide</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary-color: #00d4ff;
|
||
|
|
--secondary-color: #1e40af;
|
||
|
|
--accent-color: #00ffb3;
|
||
|
|
--rust-color: #ce422b;
|
||
|
|
--dark-bg: #0a0a0a;
|
||
|
|
--card-bg: #1a1a1a;
|
||
|
|
--text-primary: #ffffff;
|
||
|
|
--text-secondary: #cbd5e1;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
background: var(--dark-bg);
|
||
|
|
color: var(--text-primary);
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
|
|
padding: 2rem 0;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
color: var(--dark-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header p {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: var(--dark-bg);
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav {
|
||
|
|
background: var(--card-bg);
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
position: sticky;
|
||
|
|
top: 1rem;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-items {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 1rem;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item {
|
||
|
|
background: var(--secondary-color);
|
||
|
|
color: white;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
border-radius: 6px;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item:hover, .nav-item.active {
|
||
|
|
background: var(--primary-color);
|
||
|
|
color: var(--dark-bg);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
background: var(--card-bg);
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section.active {
|
||
|
|
display: block;
|
||
|
|
animation: fadeIn 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(20px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header {
|
||
|
|
background: linear-gradient(45deg, var(--rust-color), #f97316);
|
||
|
|
padding: 1.5rem 2rem;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-content {
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-card {
|
||
|
|
background: rgba(0, 212, 255, 0.1);
|
||
|
|
border: 1px solid var(--primary-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-number {
|
||
|
|
position: absolute;
|
||
|
|
top: -10px;
|
||
|
|
left: 20px;
|
||
|
|
background: var(--primary-color);
|
||
|
|
color: var(--dark-bg);
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.code-block {
|
||
|
|
background: #000;
|
||
|
|
border: 1px solid var(--secondary-color);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
overflow-x: auto;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.code-block pre {
|
||
|
|
margin: 0;
|
||
|
|
color: var(--accent-color);
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
background: var(--secondary-color);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-btn:hover {
|
||
|
|
background: var(--primary-color);
|
||
|
|
color: var(--dark-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.terminal {
|
||
|
|
background: #1a1a1a;
|
||
|
|
border: 2px solid var(--accent-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terminal::before {
|
||
|
|
content: "Terminal";
|
||
|
|
position: absolute;
|
||
|
|
top: -12px;
|
||
|
|
left: 10px;
|
||
|
|
background: var(--accent-color);
|
||
|
|
color: var(--dark-bg);
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terminal-line {
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prompt {
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.command {
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.output {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
margin-left: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metrics-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-card {
|
||
|
|
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
|
||
|
|
padding: 1.5rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--dark-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-value {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-label {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warning {
|
||
|
|
background: rgba(206, 66, 43, 0.1);
|
||
|
|
border: 1px solid var(--rust-color);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warning::before {
|
||
|
|
content: "⚠️ ";
|
||
|
|
color: var(--rust-color);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success {
|
||
|
|
background: rgba(0, 255, 179, 0.1);
|
||
|
|
border: 1px solid var(--accent-color);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success::before {
|
||
|
|
content: "✅ ";
|
||
|
|
color: var(--accent-color);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-tree {
|
||
|
|
background: rgba(30, 64, 175, 0.1);
|
||
|
|
border: 1px solid var(--secondary-color);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 1rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-tree .folder {
|
||
|
|
color: var(--primary-color);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-tree .file {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-tree .comment {
|
||
|
|
color: var(--accent-color);
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interactive-demo {
|
||
|
|
background: linear-gradient(45deg, rgba(0, 212, 255, 0.1), rgba(0, 255, 179, 0.1));
|
||
|
|
border: 2px solid var(--primary-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 2rem;
|
||
|
|
margin: 2rem 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-button {
|
||
|
|
background: var(--primary-color);
|
||
|
|
color: var(--dark-bg);
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: bold;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0.5rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-button:hover {
|
||
|
|
background: var(--accent-color);
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
border-radius: 10px;
|
||
|
|
height: 20px;
|
||
|
|
margin: 1rem 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-fill {
|
||
|
|
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 10px;
|
||
|
|
transition: width 0.5s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--dark-bg);
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.container {
|
||
|
|
padding: 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-items {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metrics-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<div class="container">
|
||
|
|
<h1>🚀 Provisioning Poster</h1>
|
||
|
|
<p>Interactive HOWTO Guide - Build System Optimization</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<nav class="nav">
|
||
|
|
<div class="nav-items">
|
||
|
|
<a href="#setup" class="nav-item active" onclick="showSection('setup')">🏁 Quick Setup</a>
|
||
|
|
<a href="#development" class="nav-item" onclick="showSection('development')">🛠️ Development</a>
|
||
|
|
<a href="#optimization" class="nav-item" onclick="showSection('optimization')">⚡ Optimization</a>
|
||
|
|
<a href="#production" class="nav-item" onclick="showSection('production')">🚀 Production</a>
|
||
|
|
<a href="#troubleshooting" class="nav-item" onclick="showSection('troubleshooting')">🔧 Troubleshooting</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Setup Section -->
|
||
|
|
<section id="setup" class="section active">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>🏁 Quick Setup (5 Minutes)</h2>
|
||
|
|
<p>Get the build system running in no time</p>
|
||
|
|
</div>
|
||
|
|
<div class="section-content">
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">1</div>
|
||
|
|
<h3>Verify Prerequisites</h3>
|
||
|
|
<p>Make sure you have Nushell installed and working.</p>
|
||
|
|
<div class="terminal">
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">$</span> <span class="command">nu --version</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line output">0.105.2 (or higher)</div>
|
||
|
|
</div>
|
||
|
|
<div class="warning">
|
||
|
|
If Nushell is not installed, visit <a href="https://www.nushell.sh/book/installation.html" target="_blank">nushell.sh</a> for installation instructions.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">2</div>
|
||
|
|
<h3>Navigate to Project</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre>cd poster/
|
||
|
|
ls</pre>
|
||
|
|
</div>
|
||
|
|
<p>You should see the following structure:</p>
|
||
|
|
<div class="file-tree">
|
||
|
|
<span class="folder">poster/</span>
|
||
|
|
├── <span class="folder">src/</span> <span class="comment"># Source files</span>
|
||
|
|
├── <span class="folder">scripts/</span> <span class="comment"># Build scripts</span>
|
||
|
|
├── <span class="folder">config/</span> <span class="comment"># Configuration</span>
|
||
|
|
├── <span class="folder">docs/</span> <span class="comment"># Documentation</span>
|
||
|
|
└── <span class="file">README.md</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">3</div>
|
||
|
|
<h3>First Build</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre>nu scripts/dev.nu build</pre>
|
||
|
|
</div>
|
||
|
|
<div class="success">
|
||
|
|
Success! Your first development build is complete.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">4</div>
|
||
|
|
<h3>Start Development Server</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre>nu scripts/dev.nu --watch --port 3000</pre>
|
||
|
|
</div>
|
||
|
|
<p>Open <strong>http://localhost:3000</strong> in your browser to see the poster.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="interactive-demo">
|
||
|
|
<h3>🎯 Setup Progress</h3>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" style="width: 100%">Setup Complete!</div>
|
||
|
|
</div>
|
||
|
|
<button class="demo-button" onclick="nextSection('development')">Continue to Development →</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Development Section -->
|
||
|
|
<section id="development" class="section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>🛠️ Development Workflow</h2>
|
||
|
|
<p>Daily development tasks and best practices</p>
|
||
|
|
</div>
|
||
|
|
<div class="section-content">
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">1</div>
|
||
|
|
<h3>Start Development Session</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Clean previous build and start fresh
|
||
|
|
nu scripts/dev.nu clean
|
||
|
|
|
||
|
|
# Start with file watching (auto-rebuild)
|
||
|
|
nu scripts/dev.nu --watch --verbose</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">2</div>
|
||
|
|
<h3>Edit Files</h3>
|
||
|
|
<p>The build system watches these files for changes:</p>
|
||
|
|
<div class="file-tree">
|
||
|
|
<span class="folder">src/</span>
|
||
|
|
├── <span class="file">index.html</span> <span class="comment"># Main HTML file</span>
|
||
|
|
├── <span class="folder">assets/css/modules/</span>
|
||
|
|
│ ├── <span class="file">base.css</span> <span class="comment"># Reset, typography</span>
|
||
|
|
│ ├── <span class="file">components.css</span> <span class="comment"># UI components</span>
|
||
|
|
│ ├── <span class="file">animations.css</span> <span class="comment"># All animations</span>
|
||
|
|
│ └── <span class="file">patterns.css</span> <span class="comment"># Visual patterns</span>
|
||
|
|
└── <span class="folder">assets/svg/</span>
|
||
|
|
├── <span class="file">symbols.svg</span> <span class="comment"># Animated symbols</span>
|
||
|
|
└── <span class="file">decorative-sprites.svg</span> <span class="comment"># Decorative elements</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">3</div>
|
||
|
|
<h3>Real-time Feedback</h3>
|
||
|
|
<div class="terminal">
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">👁️</span> <span class="output">Watching 12 files for changes...</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">📝</span> <span class="output">Changed files: src/assets/css/modules/animations.css</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">🔨</span> <span class="output">Rebuilding...</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">✅</span> <span class="output">Rebuild completed in 1.2s</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">4</div>
|
||
|
|
<h3>Validate Your Work</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Lint and validate source files
|
||
|
|
nu scripts/dev.nu lint
|
||
|
|
|
||
|
|
# Analyze file sizes
|
||
|
|
nu scripts/dev.nu analyze</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="interactive-demo">
|
||
|
|
<h3>🎨 Try Live Editing</h3>
|
||
|
|
<p>Make changes to your CSS and see them instantly!</p>
|
||
|
|
<button class="demo-button" onclick="simulateEdit()">Simulate File Edit</button>
|
||
|
|
<button class="demo-button" onclick="nextSection('optimization')">Learn Optimization →</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Optimization Section -->
|
||
|
|
<section id="optimization" class="section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>⚡ Optimization Techniques</h2>
|
||
|
|
<p>Measure and improve performance</p>
|
||
|
|
</div>
|
||
|
|
<div class="section-content">
|
||
|
|
<div class="metrics-grid">
|
||
|
|
<div class="metric-card">
|
||
|
|
<div class="metric-value">42%</div>
|
||
|
|
<div class="metric-label">Total Size Reduction</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric-card">
|
||
|
|
<div class="metric-value">70KB</div>
|
||
|
|
<div class="metric-label">Optimized Size</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric-card">
|
||
|
|
<div class="metric-value">18KB</div>
|
||
|
|
<div class="metric-label">Gzipped Size</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric-card">
|
||
|
|
<div class="metric-value">A+</div>
|
||
|
|
<div class="metric-label">Performance Score</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">1</div>
|
||
|
|
<h3>Analyze Current Performance</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Build with detailed analysis
|
||
|
|
nu scripts/prod.nu full</pre>
|
||
|
|
</div>
|
||
|
|
<div class="terminal">
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">📊</span> <span class="output">Performance Audit</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line output">📄 HTML: 32.1 KB (40% reduction)</div>
|
||
|
|
<div class="terminal-line output">🎨 CSS: 24.8 KB (37% reduction)</div>
|
||
|
|
<div class="terminal-line output">🖼️ SVG: 14.2 KB (52% reduction)</div>
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">⭐</span> <span class="output">Performance Score: A+ (Excellent)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">2</div>
|
||
|
|
<h3>Optimization Strategies</h3>
|
||
|
|
<h4>CSS Optimization:</h4>
|
||
|
|
<ul>
|
||
|
|
<li>✅ Modular architecture (4 focused modules)</li>
|
||
|
|
<li>✅ Critical CSS inlining (above-the-fold)</li>
|
||
|
|
<li>✅ Minification (comments & whitespace removal)</li>
|
||
|
|
<li>✅ Async loading (non-critical styles)</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h4>SVG Optimization:</h4>
|
||
|
|
<ul>
|
||
|
|
<li>✅ Smart inlining (animated elements)</li>
|
||
|
|
<li>✅ External sprites (decorative elements)</li>
|
||
|
|
<li>✅ Data URIs (small icons in CSS)</li>
|
||
|
|
<li>✅ Size-based decisions (automatic)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">3</div>
|
||
|
|
<h3>Custom Configuration</h3>
|
||
|
|
<p>Adjust optimization settings in <code>config/build.config.nu</code>:</p>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># More aggressive optimization
|
||
|
|
export const config = {
|
||
|
|
critical_css_modules: 3, # More CSS inline
|
||
|
|
inline_css_max_size: 15360, # 15KB threshold
|
||
|
|
svg_precision: 1, # Less precision = smaller files
|
||
|
|
enable_gzip: true # Auto-compression
|
||
|
|
}</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="interactive-demo">
|
||
|
|
<h3>📈 Optimization Simulator</h3>
|
||
|
|
<p>See how different settings affect file sizes:</p>
|
||
|
|
<button class="demo-button" onclick="simulateOptimization('conservative')">Conservative</button>
|
||
|
|
<button class="demo-button" onclick="simulateOptimization('balanced')">Balanced</button>
|
||
|
|
<button class="demo-button" onclick="simulateOptimization('aggressive')">Aggressive</button>
|
||
|
|
<div id="optimization-result"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Production Section -->
|
||
|
|
<section id="production" class="section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>🚀 Production Deployment</h2>
|
||
|
|
<p>Build and deploy optimized assets</p>
|
||
|
|
</div>
|
||
|
|
<div class="section-content">
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">1</div>
|
||
|
|
<h3>Production Build</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Full production build with all optimizations
|
||
|
|
nu scripts/prod.nu full</pre>
|
||
|
|
</div>
|
||
|
|
<div class="success">
|
||
|
|
Generates optimized files in <code>dist/</code> directory.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">2</div>
|
||
|
|
<h3>Generated Files</h3>
|
||
|
|
<div class="file-tree">
|
||
|
|
<span class="folder">dist/</span>
|
||
|
|
├── <span class="file">index.html</span> <span class="comment"># Minified HTML with inlined critical CSS</span>
|
||
|
|
├── <span class="folder">assets/</span>
|
||
|
|
│ ├── <span class="folder">css/</span>
|
||
|
|
│ │ ├── <span class="file">main.min.css</span> <span class="comment"># Combined & minified CSS</span>
|
||
|
|
│ │ └── <span class="file">main.min.css.gz</span> <span class="comment"># Gzipped version</span>
|
||
|
|
│ └── <span class="folder">svg/</span>
|
||
|
|
│ └── <span class="file">sprites.svg</span> <span class="comment"># Optimized SVG sprites</span>
|
||
|
|
├── <span class="file">.htaccess</span> <span class="comment"># Apache configuration</span>
|
||
|
|
├── <span class="file">nginx.conf</span> <span class="comment"># Nginx configuration</span>
|
||
|
|
├── <span class="file">deploy.sh</span> <span class="comment"># Deployment script</span>
|
||
|
|
└── <span class="file">robots.txt</span> <span class="comment"># SEO robots file</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">3</div>
|
||
|
|
<h3>Test Production Build</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Preview production build locally
|
||
|
|
nu scripts/dev.nu preview --port 8080</pre>
|
||
|
|
</div>
|
||
|
|
<p>Open <strong>http://localhost:8080</strong> to test the optimized version.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">4</div>
|
||
|
|
<h3>Deploy to Server</h3>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Configure deployment variables
|
||
|
|
export DEPLOY_HOST="your-server.com"
|
||
|
|
export DEPLOY_PATH="/var/www/provisioning-poster"
|
||
|
|
export DEPLOY_USER="deploy"
|
||
|
|
|
||
|
|
# Run deployment script
|
||
|
|
./dist/deploy.sh</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="interactive-demo">
|
||
|
|
<h3>🎯 Deployment Checklist</h3>
|
||
|
|
<div id="deployment-checklist">
|
||
|
|
<label><input type="checkbox"> ✅ Production build complete</label><br>
|
||
|
|
<label><input type="checkbox"> ✅ Local preview works</label><br>
|
||
|
|
<label><input type="checkbox"> ✅ Performance score A+</label><br>
|
||
|
|
<label><input type="checkbox"> ✅ Server configuration ready</label><br>
|
||
|
|
<label><input type="checkbox"> ✅ DNS pointing to server</label><br>
|
||
|
|
<label><input type="checkbox"> ✅ SSL certificate active</label><br>
|
||
|
|
</div>
|
||
|
|
<button class="demo-button" onclick="checkDeployment()">Validate Deployment</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Troubleshooting Section -->
|
||
|
|
<section id="troubleshooting" class="section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>🔧 Troubleshooting</h2>
|
||
|
|
<p>Common issues and solutions</p>
|
||
|
|
</div>
|
||
|
|
<div class="section-content">
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">?</div>
|
||
|
|
<h3>Build Fails</h3>
|
||
|
|
<div class="warning">
|
||
|
|
<strong>Problem:</strong> Build command returns errors
|
||
|
|
</div>
|
||
|
|
<h4>Solutions:</h4>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Check Nushell version
|
||
|
|
nu --version
|
||
|
|
|
||
|
|
# Clean and retry
|
||
|
|
nu scripts/dev.nu clean
|
||
|
|
nu scripts/dev.nu build --verbose</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">?</div>
|
||
|
|
<h3>Server Won't Start</h3>
|
||
|
|
<div class="warning">
|
||
|
|
<strong>Problem:</strong> Development server fails to start
|
||
|
|
</div>
|
||
|
|
<h4>Solutions:</h4>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Check if port is in use
|
||
|
|
netstat -an | grep 8080
|
||
|
|
|
||
|
|
# Use different port
|
||
|
|
nu scripts/dev.nu --port 3000</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">?</div>
|
||
|
|
<h3>Files Too Large</h3>
|
||
|
|
<div class="warning">
|
||
|
|
<strong>Problem:</strong> Optimized files still too large
|
||
|
|
</div>
|
||
|
|
<h4>Solutions:</h4>
|
||
|
|
<div class="code-block">
|
||
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||
|
|
<pre># Edit config/build.config.nu for more aggressive optimization:
|
||
|
|
export const config = {
|
||
|
|
svg_precision: 1, # Less precision
|
||
|
|
inline_css_max_size: 5120, # 5KB threshold
|
||
|
|
critical_css_modules: 1 # Less inline CSS
|
||
|
|
}</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="step-card">
|
||
|
|
<div class="step-number">?</div>
|
||
|
|
<h3>Animations Broken</h3>
|
||
|
|
<div class="warning">
|
||
|
|
<strong>Problem:</strong> SVG animations not working after optimization
|
||
|
|
</div>
|
||
|
|
<h4>Solution:</h4>
|
||
|
|
<p>Animated SVGs must remain inline. Check that critical animations are in the HTML file, not external SVG files.</p>
|
||
|
|
<div class="success">
|
||
|
|
The build system automatically handles this for you.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="interactive-demo">
|
||
|
|
<h3>🆘 Interactive Troubleshooter</h3>
|
||
|
|
<p>Select your issue for specific guidance:</p>
|
||
|
|
<button class="demo-button" onclick="showTroubleshooting('build')">Build Issues</button>
|
||
|
|
<button class="demo-button" onclick="showTroubleshooting('server')">Server Issues</button>
|
||
|
|
<button class="demo-button" onclick="showTroubleshooting('performance')">Performance Issues</button>
|
||
|
|
<div id="troubleshooting-result"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function showSection(sectionId) {
|
||
|
|
// Hide all sections
|
||
|
|
document.querySelectorAll('.section').forEach(section => {
|
||
|
|
section.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Remove active class from nav items
|
||
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
||
|
|
item.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Show selected section
|
||
|
|
document.getElementById(sectionId).classList.add('active');
|
||
|
|
|
||
|
|
// Activate nav item
|
||
|
|
event.target.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
function nextSection(sectionId) {
|
||
|
|
showSection(sectionId);
|
||
|
|
document.querySelector(`[onclick="showSection('${sectionId}')"]`).classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
function copyCode(button) {
|
||
|
|
const codeBlock = button.nextElementSibling;
|
||
|
|
const text = codeBlock.textContent;
|
||
|
|
|
||
|
|
navigator.clipboard.writeText(text).then(() => {
|
||
|
|
button.textContent = 'Copied!';
|
||
|
|
button.style.background = '#00ffb3';
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
button.textContent = 'Copy';
|
||
|
|
button.style.background = '';
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function simulateEdit() {
|
||
|
|
const demo = document.querySelector('#development .interactive-demo');
|
||
|
|
demo.innerHTML = `
|
||
|
|
<h3>🎨 File Change Detected!</h3>
|
||
|
|
<div class="terminal">
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">📝</span> <span class="output">Changed: src/assets/css/modules/animations.css</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">🔨</span> <span class="output">Rebuilding...</span>
|
||
|
|
</div>
|
||
|
|
<div class="terminal-line">
|
||
|
|
<span class="prompt">✅</span> <span class="output">Rebuild completed in 0.8s</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="demo-button" onclick="nextSection('optimization')">Continue to Optimization →</button>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function simulateOptimization(level) {
|
||
|
|
const results = {
|
||
|
|
conservative: { size: '85KB', reduction: '29%', score: 'B+' },
|
||
|
|
balanced: { size: '70KB', reduction: '42%', score: 'A' },
|
||
|
|
aggressive: { size: '58KB', reduction: '52%', score: 'A+' }
|
||
|
|
};
|
||
|
|
|
||
|
|
const result = results[level];
|
||
|
|
document.getElementById('optimization-result').innerHTML = `
|
||
|
|
<div class="success">
|
||
|
|
<strong>${level.toUpperCase()} Optimization:</strong><br>
|
||
|
|
Final size: ${result.size} (${result.reduction} reduction)<br>
|
||
|
|
Performance score: ${result.score}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkDeployment() {
|
||
|
|
const checkboxes = document.querySelectorAll('#deployment-checklist input[type="checkbox"]');
|
||
|
|
const checked = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||
|
|
const total = checkboxes.length;
|
||
|
|
const percentage = Math.round((checked / total) * 100);
|
||
|
|
|
||
|
|
let message, color;
|
||
|
|
if (percentage === 100) {
|
||
|
|
message = '🎉 Ready for deployment!';
|
||
|
|
color = '#00ffb3';
|
||
|
|
} else if (percentage >= 80) {
|
||
|
|
message = '⚠️ Almost ready - check remaining items';
|
||
|
|
color = '#f59e0b';
|
||
|
|
} else {
|
||
|
|
message = '❌ Not ready - complete checklist first';
|
||
|
|
color = '#ce422b';
|
||
|
|
}
|
||
|
|
|
||
|
|
const demo = document.querySelector('#production .interactive-demo');
|
||
|
|
demo.innerHTML += `
|
||
|
|
<div style="margin-top: 1rem; padding: 1rem; border: 2px solid ${color}; border-radius: 6px; color: ${color};">
|
||
|
|
<strong>${message}</strong><br>
|
||
|
|
Progress: ${checked}/${total} items (${percentage}%)
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function showTroubleshooting(type) {
|
||
|
|
const solutions = {
|
||
|
|
build: `
|
||
|
|
<div class="success">
|
||
|
|
<strong>Build Issues Solutions:</strong><br>
|
||
|
|
1. Verify Nushell version: nu --version<br>
|
||
|
|
2. Clean build cache: nu scripts/dev.nu clean<br>
|
||
|
|
3. Check source files: nu scripts/dev.nu lint<br>
|
||
|
|
4. Use verbose mode: nu scripts/dev.nu build --verbose
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
server: `
|
||
|
|
<div class="success">
|
||
|
|
<strong>Server Issues Solutions:</strong><br>
|
||
|
|
1. Check port availability: netstat -an | grep 8080<br>
|
||
|
|
2. Use different port: nu scripts/dev.nu --port 3000<br>
|
||
|
|
3. Check firewall settings<br>
|
||
|
|
4. Verify build completed: ls dist/
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
performance: `
|
||
|
|
<div class="success">
|
||
|
|
<strong>Performance Issues Solutions:</strong><br>
|
||
|
|
1. Use production build: nu scripts/prod.nu full<br>
|
||
|
|
2. Enable compression: set enable_gzip: true in config<br>
|
||
|
|
3. Optimize SVG precision: set svg_precision: 1<br>
|
||
|
|
4. Reduce inline CSS threshold: inline_css_max_size: 5120
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
};
|
||
|
|
|
||
|
|
document.getElementById('troubleshooting-result').innerHTML = solutions[type];
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|