Added a "View all files"

.exclude

@@ -1,3 +1,4 @@
 index.html
 .gitignore
-.gitkeep
+.gitkeep
+all-files.html

.gitignore

@@ -1,3 +1,4 @@
 # For development use
 test.html
-index.html
+index.html
+all-files.html

generate-directory-index.js

@@ -3,7 +3,7 @@ const path = require("path");
 
 const config = require("./config.js");
 const { generateStyles } = require("./styles.js");
-const { generateHtml } = require("./template.js");
+const { generateHtml, generateAllFilesHtml } = require("./template.js");
 
 function readFileContent(filePath) {
   return fs.readFileSync(filePath, config.encoding);
@@ -97,4 +97,51 @@ function generateIndex(dir) {
     .forEach((file) => generateIndex(path.join(dir, file.name)));
 }
 
+function getAllFiles(dir, fileList = []) {
+  const files = fs.readdirSync(dir);
+  const filterList = getFilterList();
+
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stats = fs.statSync(filePath);
+    const relativePath = path.relative(config.root.directory, filePath).replace(/\\/g, "/");
+
+    if (stats.isDirectory()) {
+      getAllFiles(filePath, fileList);
+    } else if (!filterList.includes(file)) {
+      fileList.push({
+        name: file,
+        path: relativePath,
+        size: formatBytes(stats.size),
+        lastModified: stats.mtime.toISOString().split('T')[0]
+      });
+    }
+  });
+
+  return fileList;
+}
+
+function generateAllFilesPage() {
+  const allFiles = getAllFiles(config.root.directory);
+  const publicDir = path.join(config.root.directory, '.');
+
+  if (!fs.existsSync(publicDir)) {
+    fs.mkdirSync(publicDir);
+  }
+
+  const metaTags = readFileContent(config.files.meta_tags);
+  const seoTags = readFileContent(config.files.seo_tags);
+  const styles = generateStyles("all-files");
+
+  const htmlContent = generateAllFilesHtml({
+    allFiles,
+    metaTags,
+    seoTags,
+    styles,
+  });
+
+  fs.writeFileSync(path.join(publicDir, "all-files.html"), htmlContent);
+}
+
 generateIndex(config.root.directory);
+generateAllFilesPage();

styles.js

@@ -1,12 +1,155 @@
 const config = require("./config");
 
-function generateStyles() {
+function generateStyles(page) {
   const { theme } = config;
 
-  return `
+  if (page === "all-files") {
+    return `
+  * {
+    --color-accent: ${theme.colors.accent.default};
+    --color-accent-hover: ${theme.colors.accent.hover};
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: ${theme.general.font_family};
+    background: ${theme.colors.background.default};
+    color: ${theme.colors.text.general};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 10px;
+    margin: 0;
+  }
+  
+  .title {
+    font-size: 2em;
+    text-align: center;
+    word-break: break-word;
+  }
+  
+  .files {
+    width: 100%;
+    max-width: 800px;
+    background: ${theme.colors.elements.files.background};
+    border-radius: ${theme.element_styles.files.border_radius};
+    box-shadow: 0 0 5px 0 ${theme.colors.elements.files.shadow};
+    padding: 10px;
+    margin-bottom: 20px;
+  }
+  
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  li {
+    background: ${theme.colors.elements.li_file.default};
+    border-bottom: 1px solid var(--color-accent-hover);
+    padding: 10px;
+    transition: background 0.3s ease;
+  }
+  
+  li:hover {
+    background: ${theme.colors.elements.li_file.hover};
+  }
+  
+  li:last-child {
+    border-bottom: none;
+  }
+  
+  a, a span {
+    text-decoration: ${
+      theme.general.link.underline === "true" ? "underline" : "none"
+    };
+    color: var(--color-accent);
+    transition: color 0.3s ease;
+  }
+  
+  a:hover, a:hover span {
+    text-decoration: underline;
+    color: var(--color-accent-hover);
+  }
+  
+  .search {
+    width: 100%; 
+      max-width: 600px; 
+      padding: 5px 10px; 
+      margin-bottom: 20px; 
+      border: none; 
+      outline: 0; 
+      border-radius: ${theme.element_styles.search.border_radius}; 
+      font-size: 1em; 
+      background:${theme.colors.elements.search.background}; 
+  }
+  
+  .go-home {
+    margin: 20px 0;
+    font-size: 1.2em;
+  }
+  
+  .go-home span {
+    color: var(--color-accent) !important;
+  }
+  
+  table {
+    width: 100%;
+    max-width: 800px;
+    border-collapse: collapse;
+    margin-top: 20px;
+  }
+  
+  th, td {
+    padding: 10px;
+    border-bottom: 1px solid rgb(45,45,45);
+    text-align: left;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  
+  th {
+    background-color: rgb(20,20,20);
+    border-bottom: 0;
+  }
+
+  @media (max-width: 768px) {
+    .title {
+      font-size: 1.5em;
+    }
+    
+    .files, table {
+      font-size: 0.9em;
+    }
+    
+    th, td {
+      padding: 8px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    body {
+      padding: 10px 5px;
+    }
+    
+    .title {
+      font-size: 1.2em;
+    }
+    
+    .files, table {
+      font-size: 0.8em;
+    }
+    
+    th, td {
+      padding: 6px;
+    }
+  }
+`;
+  } else {
+    return `
     * { --color-accent: ${theme.colors.accent.default}; --color-accent-hover: ${
-    theme.colors.accent.hover
-  }; }
+      theme.colors.accent.hover
+    }; }
     *, ::after, ::before { box-sizing: border-box; color: ${
       theme.colors.text.general
     }; }
@@ -33,6 +176,9 @@ function generateStyles() {
       justify-content: flex-start; 
       flex-direction: column; 
     }
+      .all-files-link {
+        margin-top: 20px;
+      }
     ul { 
       width: 100%; 
       margin: 0; 
@@ -111,6 +257,7 @@ function generateStyles() {
         : ""
     }
   `;
+  }
 }
 
 module.exports = { generateStyles };

template.js

@@ -81,6 +81,7 @@ function generateHtml({
             ${generateFileList(files, relativeDir)}
           </ul>
         </div>
+        <a href="/all-files.html" class="all-files-link">View All Files</a>
         <script>
           function filterFiles() {
             const searchInput = document.getElementById('search').value.toLowerCase();
@@ -100,4 +101,60 @@ function generateHtml({
   `;
 }
 
-module.exports = { generateHtml };
+function generateAllFilesHtml({ allFiles, metaTags, seoTags, styles }) {
+  const fileList = allFiles
+    .map(
+      (file) => `
+    <tr>
+      <td><a href="/${file.path}">${file.name}</a></td>
+      <td>${file.size}</td>
+      <td>${file.lastModified}</td>
+    </tr>
+  `
+    )
+    .join("");
+
+  return `
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        ${metaTags}
+        ${seoTags}
+        <title>All Files</title>
+        <style>
+          ${styles}
+        </style>
+      </head>
+      <body>
+        <h1 class="title">All Files</h1>
+        <input class="search" id="search" onkeyup="filterFiles()" placeholder="Search files...">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Size</th>
+              <th>Last Modified</th>
+            </tr>
+          </thead>
+          <tbody id="fileList">
+            ${fileList}
+          </tbody>
+        </table>
+        <script>
+          function filterFiles() {
+            const searchInput = document.getElementById('search').value.toLowerCase();
+            const rows = document.querySelectorAll('#fileList tr');
+            rows.forEach(row => {
+              const text = row.textContent.toLowerCase();
+              row.style.display = text.includes(searchInput) ? '' : 'none';
+            });
+          }
+        </script>
+      </body>
+    </html>
+  `;
+}
+
+module.exports = { generateHtml, generateAllFilesHtml };