code-context-generator/index.html at main · parthamk/code-context-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Context Generator | VS Code Extension</title>
    <style>
        :root {
            --bg-color: #0d1117;
            --text-color: #c9d1d9;
            --accent-color: #58a6ff;
            --code-bg: #161b22;
            --border-color: #30363d;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        header {
            text-align: center;
            padding: 3rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        h1 {
            color: #ffffff;
            margin-bottom: 0.5rem;
        }

        h2 {
            color: #ffffff;
            margin-top: 2.5rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem;
        }

        p.subtitle {
            font-size: 1.2rem;
            color: #8b949e;
        }

        .cta-button {
            display: inline-block;
            background-color: #238636;
            color: #ffffff;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            margin-top: 1rem;
            transition: background-color 0.2s;
        }

        .cta-button:hover {
            background-color: #2ea043;
        }

        code {
            background-color: var(--code-bg);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: "Courier New", Courier, monospace;
            font-size: 0.9em;
        }

        .tech-stack {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .tech-badge {
            background-color: var(--code-bg);
            border: 1px solid var(--border-color);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        footer {
            margin-top: 4rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
            text-align: center;
            color: #8b949e;
            font-size: 0.9rem;
        }

        a {
            color: var(--accent-color);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <header>
        <h1>Code Context Generator</h1>
        <p class="subtitle">A VS Code extension to instantly generate codebase context for LLMs.</p>
        <a href="https://github.com/parthamk/code-context-generator" class="btn cta-button">View on GitHub</a>
    </header>

    <main>
        <section>
            <h2>Purpose</h2>
            <p>Feeding your local files into Large Language Models (like ChatGPT, Claude, or local AI) can be tedious. <strong>Code Context Generator</strong> solves this by reading your project's complete code structure and automatically generating a clean, unified <code>codecontext.txt</code> file containing your visual folder hierarchy and the raw code of your files.</p>
            <p>It intelligently respects your <code>.gitignore</code> rules and filters out heavy dependencies and binaries so your context window remains clean and secure.</p>
        </section>

        <section>
            <h2>How to Use</h2>
            <ol>
                <li>Open your project in Visual Studio Code.</li>
                <li><strong>Method 1:</strong> Right-click on any specific folder in your File Explorer and select <code>Generate Code Context</code>.</li>
                <li><strong>Method 2:</strong> Open the Command Palette (<code>Ctrl+Shift+P</code> or <code>Cmd+Shift+P</code>) and run <code>Generate Code Context</code> to parse the entire root workspace.</li>
                <li>A <code>codecontext.txt</code> file will be instantly generated at the target location.</li>
            </ol>
        </section>

        <section>
            <h2>Tech Stack</h2>
            <p>Built with performance and native integration in mind:</p>
            <div class="tech-stack">
                <span class="tech-badge">TypeScript</span>
                <span class="tech-badge">Node.js API (fs, path)</span>
                <span class="tech-badge">VS Code Extension API</span>
            </div>
        </section>
    </main>

    <footer>
        <p>Built for the open-source community by <a href="https://github.com/parthamk">parthamk</a>.</p>
        <p>Check out more projects at <a href="#" target="_blank">Code Context Generator</a></p>
    </footer>

</body>
</html>