-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjsdFileExplorerWithCDN.js
159 lines (139 loc) · 5.85 KB
/
jsdFileExplorerWithCDN.js
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
/*
jsdFileExplorer
Author: Javier Vicente Medina - [email protected]
bricobit.com - jaction.org
@license
This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL
was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
Unless required by applicable law or agreed to in writing, software distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.
*/
const fs = require('fs');
const path = require('path');
const Prism = require('prismjs');
require('prismjs/components/prism-javascript');
const sourceDir = 'app';
const destinationDir = 'jsdoc';
function createIndexFile() {
const indexFilePath = 'index.html';
const indexContent = `
<!DOCTYPE html>
<html>
<head>
<title>Índice de Archivos HTML</title>
<style>
body {font-family: Arial, sans-serif; margin: 0; display: flex; height: 100vh;}
nav {width: 250px; background-color: #333; padding: 10px; color: white; overflow-y: auto;}
main {flex-grow: 1; padding: 20px;}
a {color: #ddd; text-decoration: none;}
.dropdown-btn {cursor: pointer; padding: 8px; width: 100%; text-align: left; border: none; background: none; color: #ddd; font-size: 16px;}
.dropdown-container {display: none; padding-left: 15px;}
a:hover, .dropdown-btn:hover {color: #fff;}
.folder {color: #ffcc00;}
.file {color: #00ccff;}
.indent {margin-left: 20px;}
.line {border-left: 1px solid #ddd; padding-left: 10px; margin-left: 10px;}
</style>
</head>
<body>
<nav>
<h2>📂 Índice de Archivos HTML</h2>
<ul id="fileList"></ul>
</nav>
<main>
<iframe name="contentFrame" style="width:100%; height:100%; border:none;"></iframe>
</main>
<script>
function toggleDropdown(element) {
var container = element.nextElementSibling;
container.style.display = container.style.display === "block" ? "none" : "block";
element.textContent = container.style.display === "block" ? "📂 " + element.dataset.folderName + " ▼" : "📁 " + element.dataset.folderName + " ▶";
}
</script>
</body>
</html>
`;
fs.writeFileSync(indexFilePath, indexContent, 'utf8');
}
function processFile(filePath) {
const fileName = path.basename(filePath, '.js');
const relativePath = path.relative(sourceDir, filePath);
const htmlPath = path.join(destinationDir, relativePath + '.html');
const htmlDir = path.dirname(htmlPath);
if (!fs.existsSync(htmlDir)) {
fs.mkdirSync(htmlDir, { recursive: true });
}
const fileContent = fs.readFileSync(filePath, 'utf8');
const highlightedContent = Prism.highlight(fileContent, Prism.languages.javascript, 'javascript');
// const htmlContent = `<!DOCTYPE html>
// <html>
// <head>
// <title>${fileName}</title>
// <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
// </head>
// <body>
// <pre><code class="language-javascript">${highlightedContent}</code></pre>
// </body>
// </html>`;
const htmlContent = `<!DOCTYPE html>
<html>
<head>
<title>${fileName}</title>
<link href="../node_modules/prismjs/themes/prism.min.css" rel="stylesheet" />
</head>
<body>
<pre><code class="language-javascript">${highlightedContent}</code></pre>
<script src="../node_modules/prismjs/prism.js"></script>
</body>
</html>`;
fs.writeFileSync(htmlPath, htmlContent, 'utf8');
}
function processDirectory(dir, indentLevel = 0) {
const files = fs.readdirSync(dir);
files.forEach(file => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
processDirectory(filePath, indentLevel + 1);
} else if (path.extname(file) === '.js') {
processFile(filePath);
}
});
}
function generateIndex() {
const indexFilePath = 'index.html';
let indexContent = fs.readFileSync(indexFilePath, 'utf8');
let fileListContent = '';
function addFilesToIndex(dir, parentFolder = '', indentLevel = 0) {
const files = fs.readdirSync(dir);
files.forEach(file => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
const folderName = path.basename(filePath);
fileListContent += `<button class="dropdown-btn folder indent line" style="margin-left: ${indentLevel * 20}px;" onclick="toggleDropdown(this)" data-folder-name="${folderName}">📁 ${folderName} ▶</button><ul class="dropdown-container">`;
addFilesToIndex(filePath, folderName, indentLevel + 1);
fileListContent += '</ul>';
} else if (path.extname(file) === '.html') {
const relativePath = path.relative(destinationDir, filePath).replace(/\\/g, '/');
const fileName = path.basename(file, '.html');
fileListContent += `<li class="file indent" style="margin-left: ${indentLevel * 20}px;"><a href="${destinationDir}/${relativePath}" target="contentFrame">📄 ${fileName}</a></li>`;
}
});
}
addFilesToIndex(destinationDir);
indexContent = indexContent.replace('<ul id="fileList"></ul>', `<ul id="fileList">${fileListContent}</ul>`);
fs.writeFileSync(indexFilePath, indexContent, 'utf8');
}
function main() {
if (fs.existsSync(destinationDir)) {
fs.rmSync(destinationDir, { recursive: true, force: true });
}
fs.mkdirSync(destinationDir);
createIndexFile();
processDirectory(sourceDir);
generateIndex();
console.log('Archivo índice y conversiones completadas.');
}
main();