dumpall/index.html at master · DishantPal/dumpall · 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dumpall - The Smart File Aggregator for AI Context</title>
    <meta name="description" content="A CLI utility to display the contents of files in a directory, formatted in Markdown for AI context.">

    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Customizing Tailwind's default theme to match Terminalist branding
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'midnight-blue': '#1A1B26',
                        'light-gray': '#D4D4D4',
                        'terminal-green': '#39FF14',
                        'muted-gray': '#5A5A5A',
                        'border-dark': '#333440',
                    },
                    fontFamily: {
                        mono: ['"JetBrains Mono"', 'monospace'], // Using JetBrains Mono
                    },
                    // You can add more spacing, fontSize, etc. if needed
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="text-light-gray font-mono antialiased flex flex-col items-center min-h-screen" style="background: linear-gradient(225deg, #1a1b26 0%, #0f1019 30%, #1a1b26 60%, #252642 100%);">

    <!-- Navigation -->
    <nav class="w-full border-b border-border-dark">
        <div class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
            <a href="index.html" class="text-2xl font-bold text-terminal-green">dumpall.</a>
            <div class="flex items-center space-x-6">
                <a href="index.html" class="text-terminal-green font-semibold">Home</a>
                <a href="why.html" class="text-light-gray hover:text-terminal-green transition-colors">Why</a>
                <a href="https://github.com/ThisIsntMyId/dumpall" target="_blank" rel="noopener noreferrer" class="text-light-gray hover:text-terminal-green transition-colors flex items-center gap-2">
                    GitHub
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-6 h-6">
                        <path fill="#39FF14" d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM252.8 8c-138.7 0-244.8 105.3-244.8 244 0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1 100-33.2 167.8-128.1 167.8-239 0-138.7-112.5-244-251.2-244zM105.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
                    </svg>
                </a>
            </div>
        </div>
    </nav>

    <section class="w-full max-w-4xl px-4 py-16 flex flex-col items-center text-center">
        <img src="logo.png" alt="dumpall logo" class="h-20 sm:h-12 md:h-16 mb-4">
        <p class="text-xl sm:text-2xl mb-8 max-w-2xl">
            The smart file aggregator for <span class="text-terminal-green">AI context</span>, <br class="hidden sm:inline">code reviews, or archiving.
        </p>

        <div class="bg-border-dark p-3 rounded-lg flex items-center justify-between space-x-4 mb-12 shadow-md">
            <code class="text-lg sm:text-xl text-light-gray select-all">npx dumpall . -e node_modules</code>
            <button class="bg-terminal-green text-midnight-blue px-4 py-2 rounded-md font-bold text-lg hover:bg-opacity-80 transition-colors duration-200"
                    onclick="navigator.clipboard.writeText('npx dumpall . -e node_modules -e .git'); alert('Command copied!')">
                Copy
            </button>
        </div>
    </section>

    <section class="w-full max-w-4xl px-4 py-16 border-t border-border-dark flex flex-col items-center text-center">
        <h2 class="text-4xl font-bold text-terminal-green mb-8">See it in Action</h2>
        <p class="text-lg mb-8 max-w-2xl">
            Watch `dumpall` quickly transform your project files into structured Markdown.
        </p>
        <div class="bg-border-dark p-2 rounded-lg shadow-lg max-w-full">
            <img src="demo.gif" alt="dumpall visual demo" class="w-full h-auto rounded-md">
        </div>
    </section>

    <section class="w-full max-w-4xl px-4 py-16 border-t border-border-dark">
        <h2 class="text-4xl font-bold text-terminal-green mb-12 text-center">Powerful Features</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">

            <div class="flex flex-col items-center p-6 bg-border-dark rounded-lg shadow-md">
                <svg class="h-12 w-12 text-terminal-green mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h3 class="text-xl font-bold mb-2 text-light-gray">LLM-Optimized Output</h3>
                <p class="text-muted-gray text-base">Formats content into clean Markdown fenced code blocks, ideal for AI consumption.</p>
            </div>

            <div class="flex flex-col items-center p-6 bg-border-dark rounded-lg shadow-md">
                <svg class="h-12 w-12 text-terminal-green mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
                </svg>
                <h3 class="text-xl font-bold mb-2 text-light-gray">Clipboard Integration</h3>
                <p class="text-muted-gray text-base">Copy the entire formatted output directly to your clipboard with a single flag.</p>
            </div>

            <div class="flex flex-col items-center p-6 bg-border-dark rounded-lg shadow-md">
                <svg class="h-12 w-12 text-terminal-green mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
                </svg>
                <h3 class="text-xl font-bold mb-2 text-light-gray">Smart Exclusions</h3>
                <p class="text-muted-gray text-base">Easily ignore unwanted directories like `node_modules` or `.git` with `--exclude`.</p>
            </div>
        </div>
    </section>

    <section class="w-full max-w-4xl px-4 py-16 border-t border-border-dark flex flex-col items-center text-center">
        <h2 class="text-4xl font-bold text-terminal-green mb-8">Command-Line Options</h2>
        <p class="text-lg mb-8 max-w-2xl">
            Fine-tune `dumpall`'s behavior to fit your exact needs.
        </p>

        <div class="w-full overflow-x-auto bg-border-dark rounded-lg shadow-md">
            <table class="w-full text-left whitespace-nowrap">
                <thead>
                    <tr class="bg-muted-gray/20 text-terminal-green uppercase text-sm leading-normal">
                        <th class="py-3 px-6">Option</th>
                        <th class="py-3 px-6">Alias</th>
                        <th class="py-3 px-6">Description</th>
                    </tr>
                </thead>
                <tbody class="text-light-gray text-base font-light">
                    <tr class="border-b border-border-dark hover:bg-muted-gray/10">
                        <td class="py-3 px-6"><code>--exclude &lt;name&gt;</code></td>
                        <td class="py-3 px-6">-e</td>
                        <td class="py-3 px-6">Exclude files or directories by name. Can be used multiple times.</td>
                    </tr>
                    <tr class="border-b border-border-dark hover:bg-muted-gray/10">
                        <td class="py-3 px-6"><code>--clip</code></td>
                        <td class="py-3 px-6">-c</td>
                        <td class="py-3 px-6">Copy the output directly to the clipboard.</td>
                    </tr>
                    <tr class="border-b border-border-dark hover:bg-muted-gray/10">
                        <td class="py-3 px-6"><code>--color</code></td>
                        <td class="py-3 px-6"></td>
                        <td class="py-3 px-6">Enable colorized output for display in a terminal.</td>
                    </tr>
                    <tr class="border-b border-border-dark hover:bg-muted-gray/10">
                        <td class="py-3 px-6"><code>--no-progress</code></td>
                        <td class="py-3 px-6"></td>
                        <td class="py-3 px-6">Disable the progress indicator animation.</td>
                    </tr>
                    <tr class="border-b border-border-dark hover:bg-muted-gray/10">
                        <td class="py-3 px-6"><code>--version</code></td>
                        <td class="py-3 px-6">-v</td>
                        <td class="py-3 px-6">Show the current version of the script.</td>
                    </tr>
                    <tr class="hover:bg-muted-gray/10">
                        <td class="py-3 px-6"><code>--help</code></td>
                        <td class="py-3 px-6">-h</td>
                        <td class="py-3 px-6">Show this help message.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section class="w-full max-w-4xl px-4 py-16 border-t border-border-dark flex flex-col items-center text-center">
        <h2 class="text-4xl font-bold text-terminal-green mb-8">Practical Examples</h2>
        <p class="text-lg mb-8 max-w-2xl">
            Get started quickly with these common use cases.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
            <div class="bg-border-dark p-6 rounded-lg text-left shadow-md">
                <h3 class="text-xl font-bold text-terminal-green mb-4">Dump Current Directory (Excluding)</h3>
                <p class="text-muted-gray text-base mb-4">Process all files in the current folder, ignoring `node_modules` and `.git` directories.</p>
                <div class="bg-midnight-blue p-4 rounded-md text-sm text-light-gray overflow-x-auto">
                    <code>npx dumpall . -e node_modules -e .git</code>
                </div>
            </div>

            <div class="bg-border-dark p-6 rounded-lg text-left shadow-md">
                <h3 class="text-xl font-bold text-terminal-green mb-4">Dump `src` and Copy to Clipboard</h3>
                <p class="text-muted-gray text-base mb-4">Get the formatted content of your `src` folder directly into your clipboard.</p>
                <div class="bg-midnight-blue p-4 rounded-md text-sm text-light-gray overflow-x-auto">
                    <code>npx dumpall ./src --clip</code>
                </div>
            </div>

            <div class="bg-border-dark p-6 rounded-lg text-left shadow-md">
                <h3 class="text-xl font-bold text-terminal-green mb-4">View Single File with Color</h3>
                <p class="text-muted-gray text-base mb-4">Display a specific file's content in your terminal with syntax highlighting enabled.</p>
                <div class="bg-midnight-blue p-4 rounded-md text-sm text-light-gray overflow-x-auto">
                    <code>npx dumpall package.json --color</code>
                </div>
            </div>

            <div class="bg-border-dark p-6 rounded-lg text-left shadow-md">
                <h3 class="text-xl font-bold text-terminal-green mb-4">Disable Progress (for CI/Scripting)</h3>
                <p class="text-muted-gray text-base mb-4">Run `dumpall` without the animated spinner, useful for automated environments.</p>
                <div class="bg-midnight-blue p-4 rounded-md text-sm text-light-gray overflow-x-auto">
                    <code>npx dumpall . --no-progress</code>
                </div>
            </div>
        </div>
    </section>

    <footer class="w-full py-8 text-center border-t border-border-dark mt-auto">
        <p class="text-muted-gray text-sm">&copy; 2023 dumpall. All rights reserved.</p>
        <p class="mt-2">
            <a href="https://github.com/ThisIsntMyId/dumpall" target="_blank" rel="noopener noreferrer"
               class="text-terminal-green hover:underline">View on GitHub</a>
        </p>
    </footer>

    <style>
        .shadow-terminal-glow {
            text-shadow: 0 0 5px var(--terminal-green), 0 0 15px rgba(57, 255, 20, 0.5), 0 0 25px rgba(57, 255, 20, 0.3);
        }
    </style>

</body>
</html>