Skip to content

Commit 36d811c

Browse files
GhDjGhDj
authored
Merge pull request #37 from GhDj/feature/sort-lines
Add Sort Lines tool
2 parents 1fceb4a + 09dff08 commit 36d811c

5 files changed

Lines changed: 397 additions & 5 deletions

File tree

‎app/Http/Controllers/ToolController.php‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,12 @@ public function index(): View
147147
'route' => 'tools.diff',
148148
'icon' => 'diff',
149149
],
150+
[
151+
'name' => 'Sort Lines',
152+
'description' => 'Sort, deduplicate, reverse, and shuffle lines',
153+
'route' => 'tools.sort-lines',
154+
'icon' => 'sort',
155+
],
150156
];
151157

152158
return view('home', compact('tools'));
@@ -266,4 +272,9 @@ public function diff(): View
266272
{
267273
return view('tools.diff');
268274
}
275+
276+
public function sortLines(): View
277+
{
278+
return view('tools.sort-lines');
279+
}
269280
}

‎resources/views/home.blade.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,11 @@
151151
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
152152
</svg>
153153
@break
154+
@case('sort')
155+
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
156+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
157+
</svg>
158+
@break
154159
@endswitch
155160
</div>
156161
<div class="flex-1 min-w-0">

‎resources/views/tools/sort-lines.blade.php‎

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,351 @@
1+
@extends('layouts.app')
2+
3+
@section('title', 'Sort Lines - Sort, Dedupe, Reverse, Shuffle Text | Dev Tools')
4+
@section('meta_description', 'Free online line sorter. Sort lines alphabetically, numerically, remove duplicates, reverse order, or shuffle randomly. Fast and private - no data stored.')
5+
@section('meta_keywords', 'sort lines, line sorter, sort text, remove duplicates, dedupe lines, reverse lines, shuffle lines, alphabetical sort, natural sort')
6+
7+
@push('schema')
8+
<script type="application/ld+json">
9+
{
10+
"@@context": "https://schema.org",
11+
"@@type": "SoftwareApplication",
12+
"name": "Sort Lines",
13+
"description": "Sort, deduplicate, reverse, and shuffle text lines",
14+
"url": "{{ route('tools.sort-lines') }}",
15+
"applicationCategory": "DeveloperApplication",
16+
"operatingSystem": "Any",
17+
"offers": {
18+
"@@type": "Offer",
19+
"price": "0",
20+
"priceCurrency": "USD"
21+
},
22+
"author": {
23+
"@@type": "Person",
24+
"name": "Ghabri Djalel"
25+
}
26+
}
27+
</script>
28+
@endpush
29+
30+
@section('content')
31+
<div x-data="sortLines()" class="space-y-6">
32+
<div class="flex items-center justify-between">
33+
<div>
34+
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Sort Lines</h1>
35+
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Sort, deduplicate, reverse, and shuffle text lines</p>
36+
</div>
37+
<a href="{{ route('home') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">&larr; Back</a>
38+
</div>
39+
40+
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
41+
<div class="lg:col-span-3 space-y-4">
42+
<div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
43+
<div class="flex items-center justify-between mb-2">
44+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Input Text</label>
45+
<div class="flex items-center gap-3">
46+
<button
47+
@click="loadSample()"
48+
class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
49+
>
50+
Sample
51+
</button>
52+
<button
53+
@click="clear()"
54+
class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
55+
>
56+
Clear
57+
</button>
58+
</div>
59+
</div>
60+
<textarea
61+
x-model="input"
62+
class="w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-bg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none font-mono text-sm"
63+
placeholder="Enter text with multiple lines...&#10;Each line will be sorted separately"
64+
></textarea>
65+
<div class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
66+
<div class="flex gap-4">
67+
<span><span x-text="stats.lines"></span> lines</span>
68+
<span><span x-text="stats.unique"></span> unique</span>
69+
<span><span x-text="stats.duplicates"></span> duplicates</span>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
75+
<div class="flex items-center justify-between mb-2">
76+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
77+
<button
78+
@click="copy($event.currentTarget)"
79+
:disabled="!output"
80+
class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline disabled:opacity-50 disabled:no-underline"
81+
>
82+
Copy to clipboard
83+
</button>
84+
</div>
85+
<textarea
86+
x-model="output"
87+
readonly
88+
class="w-full h-48 p-3 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-100 resize-none font-mono text-sm"
89+
placeholder="Sorted output will appear here..."
90+
></textarea>
91+
<div class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
92+
<div class="flex gap-4">
93+
<span><span x-text="outputStats.lines"></span> lines</span>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<div class="space-y-4">
100+
<div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
101+
<h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Sort Options</h2>
102+
<div class="space-y-2">
103+
<template x-for="action in sortActions" :key="action.id">
104+
<button
105+
@click="sort(action.id)"
106+
class="w-full text-left p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-bg transition-colors border border-transparent"
107+
:class="activeAction === action.id ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800' : ''"
108+
>
109+
<div class="font-medium text-sm text-gray-900 dark:text-white" x-text="action.name"></div>
110+
<div class="text-xs text-gray-500 dark:text-gray-400" x-text="action.desc"></div>
111+
</button>
112+
</template>
113+
</div>
114+
</div>
115+
116+
<div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
117+
<h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Options</h2>
118+
<div class="space-y-3">
119+
<label class="flex items-center gap-2 cursor-pointer">
120+
<input type="checkbox" x-model="options.caseSensitive" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500 dark:bg-dark-bg">
121+
<span class="text-sm text-gray-700 dark:text-gray-300">Case sensitive</span>
122+
</label>
123+
<label class="flex items-center gap-2 cursor-pointer">
124+
<input type="checkbox" x-model="options.trimWhitespace" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500 dark:bg-dark-bg">
125+
<span class="text-sm text-gray-700 dark:text-gray-300">Trim whitespace</span>
126+
</label>
127+
<label class="flex items-center gap-2 cursor-pointer">
128+
<input type="checkbox" x-model="options.removeEmpty" class="rounded border-gray-300 dark:border-dark-border text-indigo-600 focus:ring-indigo-500 dark:bg-dark-bg">
129+
<span class="text-sm text-gray-700 dark:text-gray-300">Remove empty lines</span>
130+
</label>
131+
</div>
132+
</div>
133+
134+
<div class="bg-white dark:bg-dark-card rounded-lg border border-gray-200 dark:border-dark-border p-4">
135+
<h2 class="text-lg font-medium text-gray-900 dark:text-white mb-3">Quick Actions</h2>
136+
<div class="grid grid-cols-2 gap-2">
137+
<button
138+
@click="sort('az')"
139+
class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
140+
>
141+
A-Z
142+
</button>
143+
<button
144+
@click="sort('za')"
145+
class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
146+
>
147+
Z-A
148+
</button>
149+
<button
150+
@click="sort('dedupe')"
151+
class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
152+
>
153+
Dedupe
154+
</button>
155+
<button
156+
@click="sort('shuffle')"
157+
class="p-2 text-xs font-medium bg-gray-100 dark:bg-dark-bg text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
158+
>
159+
Shuffle
160+
</button>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
@endsection
167+
168+
@push('scripts')
169+
<script>
170+
function sortLines() {
171+
return {
172+
input: '',
173+
output: '',
174+
activeAction: null,
175+
options: {
176+
caseSensitive: false,
177+
trimWhitespace: true,
178+
removeEmpty: true
179+
},
180+
sortActions: [
181+
{ id: 'az', name: 'Sort A-Z', desc: 'Alphabetical ascending' },
182+
{ id: 'za', name: 'Sort Z-A', desc: 'Alphabetical descending' },
183+
{ id: 'natural', name: 'Natural Sort', desc: 'Smart alphanumeric (file1, file2, file10)' },
184+
{ id: 'numeric', name: 'Sort Numeric', desc: 'By number value (ascending)' },
185+
{ id: 'numeric-desc', name: 'Sort Numeric Desc', desc: 'By number value (descending)' },
186+
{ id: 'length', name: 'Sort by Length', desc: 'Shortest to longest' },
187+
{ id: 'length-desc', name: 'Sort by Length Desc', desc: 'Longest to shortest' },
188+
{ id: 'reverse', name: 'Reverse Lines', desc: 'Flip line order' },
189+
{ id: 'dedupe', name: 'Remove Duplicates', desc: 'Keep unique lines only' },
190+
{ id: 'shuffle', name: 'Shuffle', desc: 'Randomize line order' },
191+
],
192+
193+
get stats() {
194+
const lines = this.getLines(this.input);
195+
const uniqueSet = new Set(lines.map(l => this.options.caseSensitive ? l : l.toLowerCase()));
196+
return {
197+
lines: lines.length,
198+
unique: uniqueSet.size,
199+
duplicates: lines.length - uniqueSet.size
200+
};
201+
},
202+
203+
get outputStats() {
204+
const lines = this.output ? this.output.split('\n').filter(l => l.length > 0) : [];
205+
return {
206+
lines: lines.length
207+
};
208+
},
209+
210+
getLines(text) {
211+
let lines = text.split('\n');
212+
213+
if (this.options.trimWhitespace) {
214+
lines = lines.map(l => l.trim());
215+
}
216+
217+
if (this.options.removeEmpty) {
218+
lines = lines.filter(l => l.length > 0);
219+
}
220+
221+
return lines;
222+
},
223+
224+
sort(type) {
225+
this.activeAction = type;
226+
let lines = this.getLines(this.input);
227+
228+
if (lines.length === 0) {
229+
this.output = '';
230+
return;
231+
}
232+
233+
switch (type) {
234+
case 'az':
235+
lines = this.sortAlpha(lines, true);
236+
break;
237+
case 'za':
238+
lines = this.sortAlpha(lines, false);
239+
break;
240+
case 'natural':
241+
lines = this.sortNatural(lines);
242+
break;
243+
case 'numeric':
244+
lines = this.sortNumeric(lines, true);
245+
break;
246+
case 'numeric-desc':
247+
lines = this.sortNumeric(lines, false);
248+
break;
249+
case 'length':
250+
lines = this.sortByLength(lines, true);
251+
break;
252+
case 'length-desc':
253+
lines = this.sortByLength(lines, false);
254+
break;
255+
case 'reverse':
256+
lines = lines.reverse();
257+
break;
258+
case 'dedupe':
259+
lines = this.removeDuplicates(lines);
260+
break;
261+
case 'shuffle':
262+
lines = this.shuffleArray(lines);
263+
break;
264+
}
265+
266+
this.output = lines.join('\n');
267+
},
268+
269+
sortAlpha(lines, ascending) {
270+
return [...lines].sort((a, b) => {
271+
const compareA = this.options.caseSensitive ? a : a.toLowerCase();
272+
const compareB = this.options.caseSensitive ? b : b.toLowerCase();
273+
const result = compareA.localeCompare(compareB);
274+
return ascending ? result : -result;
275+
});
276+
},
277+
278+
sortNatural(lines) {
279+
return [...lines].sort((a, b) => {
280+
const compareA = this.options.caseSensitive ? a : a.toLowerCase();
281+
const compareB = this.options.caseSensitive ? b : b.toLowerCase();
282+
return compareA.localeCompare(compareB, undefined, { numeric: true, sensitivity: 'base' });
283+
});
284+
},
285+
286+
sortNumeric(lines, ascending) {
287+
return [...lines].sort((a, b) => {
288+
const numA = parseFloat(a.replace(/[^\d.-]/g, '')) || 0;
289+
const numB = parseFloat(b.replace(/[^\d.-]/g, '')) || 0;
290+
return ascending ? numA - numB : numB - numA;
291+
});
292+
},
293+
294+
sortByLength(lines, ascending) {
295+
return [...lines].sort((a, b) => {
296+
return ascending ? a.length - b.length : b.length - a.length;
297+
});
298+
},
299+
300+
removeDuplicates(lines) {
301+
if (this.options.caseSensitive) {
302+
return [...new Set(lines)];
303+
}
304+
const seen = new Map();
305+
return lines.filter(line => {
306+
const key = line.toLowerCase();
307+
if (seen.has(key)) return false;
308+
seen.set(key, true);
309+
return true;
310+
});
311+
},
312+
313+
shuffleArray(array) {
314+
const shuffled = [...array];
315+
for (let i = shuffled.length - 1; i > 0; i--) {
316+
const j = Math.floor(Math.random() * (i + 1));
317+
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
318+
}
319+
return shuffled;
320+
},
321+
322+
copy(button) {
323+
if (this.output) {
324+
DevTools.copyToClipboard(this.output, button);
325+
}
326+
},
327+
328+
clear() {
329+
this.input = '';
330+
this.output = '';
331+
this.activeAction = null;
332+
},
333+
334+
loadSample() {
335+
this.input = `banana
336+
Apple
337+
cherry
338+
apple
339+
Date
340+
banana
341+
Fig
342+
grape
343+
Cherry
344+
date`;
345+
this.output = '';
346+
this.activeAction = null;
347+
}
348+
};
349+
}
350+
</script>
351+
@endpush

0 commit comments

Comments
 (0)