-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (128 loc) · 6.1 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en" class="dark">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Austin Spraggins">
<!-- Google Verification -->
<meta name="google-site-verification" content="5geoIuJcu0jl0sWHVmuay-KESjt23g7Hk93HVOj_Srs" />
<title>MDX Combiner Pro</title>
<!-- Favicon Links -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" href="favicon.ico">
<link rel="manifest" href="site.webmanifest">
<!-- Primary Meta Tags -->
<meta name="title" content="MDX Combiner Pro">
<meta name="description"
content="Effortlessly merge multiple MDX or Markdown files into a single document for easy download, completely free. Perfect for consolidating notes, projects, or documentation.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://spragginsdesigns.github.io/mdx-combinefiles-project/">
<!-- Enahnced Keywords -->
<meta name="keywords"
content="MDX, markdown, combine files, MDX combiner, markdown preview, file download, MDX tool, markdown tool, Free MDX tool, Free markdown tool">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://spragginsdesigns.github.io/mdx-combinefiles-project/">
<meta property="og:title" content="MDX Combiner Pro">
<meta property="og:description" content="Combine multiple MDX or MD files into a single file.">
<meta property="og:image" content="https://utfs.io/f/0c5a28d1-0790-4d66-a84b-07a34e26c00e-el8luv.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://x.com/spragginsdesign">
<meta property="twitter:title" content="MDX Combiner Pro">
<meta property="twitter:description" content="Combine multiple MDX or MD files into a single file.">
<meta property="twitter:image" content="https://utfs.io/f/0c5a28d1-0790-4d66-a84b-07a34e26c00e-el8luv.jpg">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
vercel: {
dark: '#121212',
light: '#fff',
gradientStart: '#0F0C29',
gradientMiddle: '#302B63',
gradientEnd: '#24243E',
},
},
},
},
}
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body
class="bg-gradient-to-r from-vercel-gradientStart via-vercel-gradientMiddle to-vercel-gradientEnd text-vercel-light min-h-screen flex items-center justify-center">
<div class="container mx-auto p-4 flex-grow flex items-center justify-center">
<div class="w-full max-w-4xl bg-vercel-dark p-8 rounded-lg shadow-lg relative">
<div id="loadingIndicator"
class="hidden absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
</div>
<h1 class="text-4xl font-bold mb-6 text-center">MDX Combiner Pro</h1>
<div class="mb-4 mt-10 flex flex-wrap space-x-2 justify-center">
<input type="file" id="mdxInput" multiple accept=".mdx,.md" class="hidden" />
<label for="mdxInput"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded cursor-pointer shadow mb-2">
Select MDX Files
</label>
<button id="combineButton"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded shadow mb-2">
Combine Files
</button>
<button id="downloadButton"
class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded shadow mb-2" disabled>
Download Combined File
</button>
</div>
<div class="mb-4">
<label for="outputFormat" class="block mb-2">Output Format:</label>
<select id="outputFormat" class="bg-gray-700 text-white rounded p-2 w-full">
<option value="mdx">.mdx</option>
<option value="md">.md</option>
</select>
</div>
<div class="mb-4">
<label for="separator" class="block mb-2">File Separator:</label>
<input type="text" id="separator" value="---" class="bg-gray-700 text-white rounded p-2 w-full">
</div>
<div class="mb-4">
<label for="filenamePrefix" class="block mb-2">Filename Prefix:</label>
<input type="text" id="filenamePrefix" value="combined_" class="bg-gray-700 text-white rounded p-2 w-full">
</div>
<textarea id="output" class="w-full h-64 p-2 bg-gray-800 text-white rounded mb-4" readonly></textarea>
<div id="fileList" class="text-sm mb-4"></div>
<!-- Button to toggle markdown rendering -->
<button id="renderMarkdownButton"
class="mt-4 bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded shadow">
Render Markdown
</button>
<!-- Container for rendered markdown -->
<div id="renderedMarkdown" class="mt-4 bg-gray-800 text-white p-4 rounded hidden"></div>
<span class="text-sm text-gray-400 block text-center">Created By Austin Spraggins</span>
<p class="text-sm text-gray-400 text-center">
<a href="https://github.com/spragginsdesigns/mdx-combinefiles-project"
class="text-blue-500 hover:text-blue-600">
View on GitHub
</a>
</p>
</div>
</div>
<!-- Defer Scripts -->
<script src="script.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('renderMarkdownButton').addEventListener('click', function () {
const markdownText = document.getElementById('output').value;
const renderedHtml = marked.parse(markdownText);
const renderedMarkdownContainer = document.getElementById('renderedMarkdown');
renderedMarkdownContainer.innerHTML = renderedHtml;
renderedMarkdownContainer.classList.toggle('hidden');
});
</script>
</body>
</html>