---
import { Prism } from "@astrojs/prism";
import { FileTree } from '@astrojs/starlight/components';
import fs from "node:fs";
import path from "node:path";
// Configuration for examples dir
const EXAMPLES_DIR = "src/assets/examples";
const exampleDirs = fs
.readdirSync(EXAMPLES_DIR)
.filter((dir) => fs.statSync(path.join(EXAMPLES_DIR, dir)).isDirectory());
// Function to extract directory structure from prompt.md
function extractDirectoryTree(promptContent: string) {
const treeMatch = promptContent.match(/```txt\n([\s\S]*?)```/);
return treeMatch ? treeMatch[1].trim() : "";
}
// Function to parse prompt.md to get example data
function parsePromptMd(promptPath: string) {
try {
const promptContent = fs.readFileSync(promptPath, "utf-8");
const directoryTree = extractDirectoryTree(promptContent);
// Extract question if it exists in a separate file
let question = "";
const questionPath = path.dirname(promptPath) + "/question.txt";
if (fs.existsSync(questionPath)) {
question = fs.readFileSync(questionPath, "utf-8").trim();
} else {
// Default to a generated question
question = `Add me a this cool feature`;
}
return {
promptContent,
directoryTree,
question,
};
} catch (error) {
console.error(`Error parsing prompt.md: ${error}`);
return null;
}
}
// Map directory names to categories
const categoryMap: Record<string, string> = {
"node_app": "Codebase 👨💻",
"history_notes": "Personal Notes 📖",
"my_recipes": "Recipes Database 🧑🍳"
};
// Load data for all examples and categorize them
const examples = exampleDirs
.map((dir) => {
const promptPath = path.join(EXAMPLES_DIR, dir, "prompt.md");
if (fs.existsSync(promptPath)) {
const data = parsePromptMd(promptPath);
if (data) {
return {
name: dir,
category: categoryMap[dir] || "Other",
directoryTree: data.directoryTree,
prompt: data.question,
promptContent: data.promptContent.trim()
};
}
}
return null;
})
.filter((example): example is NonNullable<typeof example> => example !== null);
// Default to first example
const { defaultTab = 2 } = Astro.props;
---
<script>
// Tabs functionality
const tabButtons = document.querySelectorAll('[role="tab"]');
const tabPanes = document.querySelectorAll('.tab-pane');
function matchColumnHeights() {
// Wait for content to render
setTimeout(() => {
const activePane = document.querySelector('.tab-pane:not(.hidden)');
if (activePane) {
const leftColumn = activePane.querySelector('.left-column') as HTMLElement;
const rightColumn = activePane.querySelector('.right-column') as HTMLElement;
const contextContent = activePane.querySelector('.context-content') as HTMLElement;
if (leftColumn && rightColumn && contextContent) {
// Reset heights
rightColumn.style.height = 'auto';
contextContent.style.height = 'auto';
// Get left column height
const leftHeight = leftColumn.offsetHeight;
// Set right column to match left column height
rightColumn.style.height = leftHeight + 'px';
// Calculate available space for context content
const rightColumnPadding = 48; // 6 * 8px (p-6)
const contextHeader = rightColumn.querySelector('.context-header') as HTMLElement;
const headerHeight = contextHeader ? contextHeader.offsetHeight : 0;
const availableHeight = leftHeight - rightColumnPadding - headerHeight - 12; // 12px for margin
contextContent.style.height = availableHeight + 'px';
}
}
}, 100);
}
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// Hide all tab content
tabPanes.forEach(pane => {
pane.classList.add('hidden');
pane.classList.remove('block');
});
// Deactivate all tabs
tabButtons.forEach(tab => {
tab.classList.remove('border-blue-600', 'text-blue-600');
tab.classList.add('border-transparent', 'text-gray-500');
tab.setAttribute('aria-selected', 'false');
});
// Activate the clicked tab
button.classList.add('border-blue-600', 'text-blue-600');
button.classList.remove('border-transparent', 'text-gray-500');
button.setAttribute('aria-selected', 'true');
// Show the corresponding content
const index = button.getAttribute('data-index');
const targetContent = document.getElementById(`tab-content-${index}`);
if (targetContent) {
targetContent.classList.add('block');
targetContent.classList.remove('hidden');
matchColumnHeights();
}
});
});
// Match heights on initial load
document.addEventListener('DOMContentLoaded', matchColumnHeights);
window.addEventListener('resize', matchColumnHeights);
</script>
<div class="w-full bg-gray-100">
<section id="what" class="bg-gray-100 py-12 max-w-[90vw] mx-auto">
<div class="mx-auto px-4">
<!-- Section Header -->
<div class="text-center mb-10">
<h2 class="text-3xl font-bold text-gray-800">What is Code2Prompt ?</h2>
<p class="mb-2 m-4 text-gray-800">
Code2Prompt is a context engineering tool that ingests your codebase, turning your repository into structured, AI-ready prompts.
</p>
<p class="text-lg text-gray-600 mt-2">Transform any repository into meaningful context following the Goal + Format + Context framework... Check it out !</p>
</div>
<!-- Tab Navigation -->
<div class="mb-6">
<div class="border-b border-gray-200 bg-white rounded-t-lg shadow-sm">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="exampleTabs" role="tablist">
{examples.map((example, index) => (
<li class="mr-2" role="presentation">
<button
class={`inline-block p-4 rounded-t-lg border-b-2 ${index === defaultTab ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
id={`tab-${index}`}
data-tabs-target={`#tab-content-${index}`}
type="button"
role="tab"
aria-controls={`tab-content-${index}`}
aria-selected={index === defaultTab}
data-index={index}
>
{example.category}
</button>
</li>
))}
</ul>
</div>
</div>
<div class="tab-content">
{examples.map((example, index) => (
<div
class={`tab-pane ${index === defaultTab ? 'block' : 'hidden'}`}
id={`tab-content-${index}`}
role="tabpanel"
aria-labelledby={`tab-${index}`}
>
<div class="flex flex-col md:flex-row md:gap-6 md:items-start">
<!-- Left Column: Directory Tree + Goal + Format -->
<div class="w-full md:w-1/3 mb-6 md:mb-0 p-6 bg-white rounded-md shadow-md left-column">
<header class="mb-4 border-b pb-2">
<h2 class="text-xl font-bold text-gray-800">{example.category}</h2>
</header>
<div class="text-gray-800 p-2">
<pre class="text-sm font-mono whitespace-pre bg-gray-50 p-4 rounded-md border border-gray-200">{example.directoryTree}</pre>
</div>
<!-- Command Section -->
<div class="mt-6 pt-4 border-t border-gray-200">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Command</h3>
<div class="bg-gray-900 p-3 rounded-md text-gray-200 font-mono text-sm overflow-x-auto">
$ code2prompt {example.name}
</div>
</div>
<!-- Goal Section -->
<div class="mt-6 pt-4 border-t border-gray-200">
<header class="mb-3">
<h3 class="text-lg font-bold text-blue-600">Goal</h3>
<p class="text-xs text-gray-600">What you want to achieve</p>
</header>
<div class="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-md">
<div class="text-gray-800 text-sm">
{example.prompt.split('\n\nFormat:')[0].replace('Goal: ', '')}
</div>
</div>
</div>
<!-- Format Section -->
<div class="mt-4">
<header class="mb-3">
<h3 class="text-lg font-bold text-green-600">Format</h3>
<p class="text-xs text-gray-600">How you want the output structured</p>
</header>
<div class="bg-green-50 border-l-4 border-green-500 p-3 rounded-md">
<div class="text-gray-800 text-sm whitespace-pre-line">
{example.prompt.split('Format: ')[1] || 'Standard format'}
</div>
</div>
</div>
</div>
<!-- Right Column: Context Only -->
<div class="w-full md:w-2/3 relative p-6 bg-white rounded-md shadow-md right-column">
<!-- Context Section -->
<div>
<header class="mb-3 context-header">
<h3 class="text-xl font-bold text-purple-600">Context</h3>
<p class="text-sm text-gray-600">Relevant information provided by Code2Prompt</p>
</header>
<div class="prose max-w-none context-content">
<Prism
code={example.promptContent}
lang="markdown"
class="overflow-auto w-full prism-small-font h-full"
/>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
</div>
