Merge pull request 'main' (#15) from daball/nm3clol-express-app:main into main

Reviewed-on: nm3clol/nm3clol-express-app#15
2024-06-24 01:03:50 -04:00 · 2024-06-24 01:03:50 -04:00 · b38d7ee07e
commit b38d7ee07e
parent ef40ca967c 1f1071f5a9
22 changed files with 620 additions and 595 deletions
--- a/app/config.mts
+++ b/app/config.mts
@ -182,8 +182,6 @@ export interface Config {
  tikaUrl: string;
 }

-console.log(`Configuring .env and expanding .env to include environment variable references.`);
-
 import path from 'path';
 import dotenv from 'dotenv';
 import dotenvExpand from 'dotenv-expand';
--- a/app/helpers/functions.mts
+++ b/app/helpers/functions.mts
@ -186,6 +186,14 @@ const renderArchive = (html: string, paths: string[]) => {
  return html;
 }

+const isMsOfficeViewerSupported = (file: string) => {
+  return path.extname(file).search(/^((?:.pptx)|(?:.docx)|(?:.xlsx)|(?:.ppt)|(?:.doc)|(?:.xls))$/ig) != -1;
+}
+
+const isGoogleDocsViewerSupported = (file: string) => {
+  return isMsOfficeViewerSupported(file) || path.extname(file).search(/^((?:.pdf))$/ig) != -1;
+}
+
 export default {
  leftTrimFirstDirectory,
  trimSlashes,
@ -205,4 +213,6 @@ export default {
  inspect,
  md,
  moment,
+  isMsOfficeViewerSupported,
+  isGoogleDocsViewerSupported,
 };
--- a/app/page/router.mts
+++ b/app/page/router.mts
@ -78,7 +78,7 @@ export default function () {
        }
      });
      const renderData = { breadcrumbs, content, filePath, fullFilePath, paths, req, route, ...fmData };
-      res.render("page", { h: helpers, ...renderData });
+      res.render("page", { h: helpers, path, config, ...renderData });
    });
  });

@ -122,7 +122,7 @@ export default function () {
    console.log(`Setting route for ${route}`);
    pageRouter.get(route, async (req, res) => {
      const html = fs.readFileSync(fullFilePath).toString();
-      const renderData = { route, filePath, fullFilePath, req, paths, html };
+      const renderData = { route, filePath, fullFilePath, req, paths, html, path, config };
      res.render("archive", { h: helpers, ...renderData });
    });
  });
@ -183,7 +183,7 @@ export default function () {
          }	  
        });
        const renderData = { breadcrumbs, route, filePath, fullFilePath, req, paths, directory: path.join('public', directory), videoURL, subtitleURL, subtitleVTT, info };
-        res.render("video-player", { h: helpers, ...renderData });
+        res.render("video-player", { h: helpers, path, config, ...renderData });
      }
    });
  });
--- a/app/page/vercel-serve.mts
+++ b/app/page/vercel-serve.mts
@ -184,8 +184,9 @@ export const directoryTemplate = (vals: ServeDirectoryTemplateParameters) => {
 		});
 	}
 	return new Promise((resolve, reject) => {
-		ejs.renderFile(path.join(config.viewsPath, 'directory.ejs'), { breadcrumbs, h: helpers, ...vals }, (err, str) => {
+		ejs.renderFile(path.join(config.viewsPath, 'directory.ejs'), { h: helpers, path, config, breadcrumbs, ...vals }, (err, str) => {
 			if (err) {
+				console.error(err);
 				reject(err);
 			} else {
 				resolve(str);
@ -196,8 +197,9 @@ export const directoryTemplate = (vals: ServeDirectoryTemplateParameters) => {

 export const errorTemplate = (vals: ServeErrorTemplateParameters) => {
 	return new Promise((resolve, reject) => {
-		ejs.renderFile(path.join(config.viewsPath, 'error.ejs'), { h: helpers, ...vals }, (err, str) => {
+		ejs.renderFile(path.join(config.viewsPath, 'error.ejs'), { h: helpers, path, config, ...vals }, (err, str) => {
 			if (err) {
+				console.error(err);
 				reject(err);
 			} else {
 				resolve(str);
--- a/app/server.mts
+++ b/app/server.mts
@ -38,5 +38,5 @@ app.listen(config.appHttpPort, () => {
  console.log(`To access your app, you can use the 127.0.0.1 host, http://127.0.0.1:${config.appHttpPort}.`);
  console.log(`To access your app, you can use the ::1 host, http://[::1]:${config.appHttpPort}.`);
  console.log(`To access your app, you might can use the app host name, ${config.appHttpUrl}.`);
-  console.log(`This app is configured to use the web site URL, ${config.siteUrl}.`);
+  console.log(`This app is configured to use the web site URL for URL generation, as needed, ${config.siteUrl}. Certain site features won't work correctly unless this is on a publicly accessible URL.`);
 });
--- a/app/tika/types.mts
+++ b/app/tika/types.mts
@ -37,9 +37,9 @@ export interface MetadataResource {
  'pdf:docinfo:created': string
  'pdf:annotationSubtypes': string
  'pdf:containsDamagedFont': string
-  }
+}

-  export interface ContentResource {
+export interface ContentResource {
  'pdf:unmappedUnicodeCharsPerPage': string[]
  'pdf:PDFVersion': string
  'xmp:CreatorTool': string
@ -78,4 +78,4 @@ export interface MetadataResource {
  'pdf:docinfo:created': string
  'pdf:annotationSubtypes': string
  'pdf:containsDamagedFont': string
-  }
+}
--- a/app/views/directory.ejs
+++ b/app/views/directory.ejs
@ -4,18 +4,13 @@
    <title><%=h.getDirectoryTitle(directory)%></title>
    <%- include('./includes/common-head.ejs') %>
  </head>
-
  <body onload="initPage()">
-
    <%- include('./includes/top-navbar.ejs') %>
-
    <%- include('./includes/no-trash-svg.ejs') %>
-
    <main class="container">
      <header>
        <%- include('./includes/breadcrumbs.ejs') %>
      </header>
-
      <% if (h.directoryContainsReadme(directory)) {%>
        <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
          <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
@ -27,13 +22,69 @@
                    <b>Document Date:</b> <%= h.moment(h.readmeFm(directory).docDate).format('MMMM D, YYYY') %>
                  <% } %>
                  <%if (typeof h.readmeFm(directory).file !== 'undefined') { %>
-                    <b>Attached Document:</b> <a href="<%- encodeURI(h.readmeFm(directory).file) %>"><%- h.readmeFm(directory).file %></a>
+                    <b>Document:</b> <a href="<%- encodeURI(path.basename(h.readmeFm(directory).file)) %>"><%- h.readmeFm(directory).file %></a>
                  <% } %>
                </small>
              </p>
            <% } %>
            <% if (typeof h.readmeFm(directory).file !== 'undefined') { %>
-              <iframe src="<%- encodeURI(h.readmeFm(directory).file) %>" style="width: 100%; height: 90vh;"></iframe>
+              <ul class="nav nav-tabs" id="readerTab" role="tablist">
+                <% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %>
+                  <li class="nav-item" role="presentation">
+                    <button class="nav-link active" id="ms-office-viewer-tab" data-bs-toggle="tab" data-bs-target="#ms-office-viewer" type="button" role="tab" aria-controls="ms-office-viewer" aria-selected="true">Microsoft Office Web Viewer</button>
+                  </li>
+                <% } %>
+                <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
+                  <li class="nav-item" role="presentation">
+                    <button class="nav-link<%=h.isMsOfficeViewerSupported(h.readmeFm(directory).file) ? '' : ' active'%>" id="google-docs-viewer-tab" data-bs-toggle="tab" data-bs-target="#google-docs-viewer" type="button" role="tab" aria-controls="google-docs-viewer" aria-selected="false">Google Docs Viewer</button>
+                  </li>
+                <% } %>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link" id="view-download-tab" data-bs-toggle="tab" data-bs-target="#view-download" type="button" role="tab" aria-controls="view-download" aria-selected="false">View/Download</button>
+                </li>
+              </ul>
+              <div class="tab-content">
+                <% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %>
+                  <div class="tab-pane active" id="ms-office-viewer" role="tabpanel" aria-labelledby="ms-office-viewer-tab" tabindex="0">
+                    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=<%- encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/')))) %>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                  </div>
+                <% } %>
+                <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
+                  <div class="tab-pane<%=h.isMsOfficeViewerSupported(h.readmeFm(directory).file) ? '' : ' active'%>" id="google-docs-viewer" role="tabpanel" aria-labelledby="google-docs-viewer-tab" tabindex="0">
+                    <iframe src="https://docs.google.com/gview?embedded=true&url=<%- encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/')))) %>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                  </div>
+                <% } %>
+                <div class="tab-pane<%=(h.isMsOfficeViewerSupported(h.readmeFm(directory).file) || h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) ? '' : ' active'%>" id="view-download" role="tabpanel" aria-labelledby="view-download-tab" tabindex="0">
+                  <iframe src="about:blank" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                </div>
+                <script>
+                  $(document).ready(function () {
+                    var viewDownloadTabButton = $('button#view-download-tab');
+                    var viewDownloadTab = new bootstrap.Tab(viewDownloadTabButton);
+                    var viewDownloadTabPaneIFrame = $('#view-download iframe');
+                    viewDownloadTabButton.on('click', function (event) {
+                      event.preventDefault();
+                      viewDownloadTab.show();
+                      if (viewDownloadTabPaneIFrame.attr('src') == 'about:blank') {
+                        console.log('View/Download tab clicked. Loading iframe.');
+                        viewDownloadTabPaneIFrame.attr('src', '<%- encodeURI(h.readmeFm(directory).file) %>');
+                      } else {
+                        console.log('View/Download tab clicked. iframe previously loaded.');
+                      }
+                    })
+                  })
+                </script>
+                <% if (!h.isMsOfficeViewerSupported(h.readmeFm(directory).file) && !h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
+                  <script>
+                    $(document).ready(function () {
+                      setTimeout(function () {
+                        var viewDownloadTabButton = $('button#view-download-tab');
+                        viewDownloadTabButton.click();
+                      }, 100);
+                    });
+                  </script>
+                <% } %>
+              </div>
            <% } else { %>
              <%- h.printReadme(directory) %>
            <% } %>
@ -54,7 +105,6 @@
          </div>
        <% } %>
      <% } %>
-
      <ul id="files" class="list-group shadow-lg">
        <% files.forEach(function(value, index) { %>
          <li class="list-group-item list-group-item-action flex-column align-items-start">
@ -65,7 +115,6 @@
        <% }); %>
      </ul>
    </main>
-
    <%- include('./includes/bottom-navbar.ejs') %>
    <%- include('./includes/bottom-scripts.ejs') %>
 	</body>
--- a/app/views/error.ejs
+++ b/app/views/error.ejs
@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
-
-<head>
+  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <style>
      body {
@ -23,7 +22,6 @@
        display: flex;
        flex-direction: column;
      }
-
      main,
      aside,
      section {
@ -32,29 +30,24 @@
        align-items: center;
        flex-direction: column;
      }
-
      main {
        height: 100%;
      }
-
      aside {
        background: #000;
        flex-shrink: 1;
        padding: 30px 20px;
      }
-
      aside p {
        margin: 0;
        color: #999999;
        font-size: 14px;
        line-height: 24px;
      }
-
      aside a {
        color: #fff;
        text-decoration: none;
      }
-
      section span {
        font-size: 24px;
        font-weight: 500;
@ -64,59 +57,49 @@
        padding-bottom: 20px;
        width: 100px;
      }
-
      section p {
        font-size: 14px;
        font-weight: 400;
      }
-
      section span+p {
        margin: 20px 0 0 0;
      }
-
      @media (min-width: 768px) {
        section {
          height: 40px;
          flex-direction: row;
        }
-
        section span,
        section p {
          height: 100%;
          line-height: 40px;
        }
-
        section span {
          border-bottom: 0;
          border-right: 1px solid #EAEAEA;
          padding: 0 20px 0 0;
          width: auto;
        }
-
        section span+p {
          margin: 0;
          padding-left: 20px;
        }
-
        aside {
          padding: 50px 0;
        }
-
        aside p {
          max-width: 520px;
          text-align: center;
        }
      }
    </style>
-</head>
-
-<body>
+  </head>
+  <body>
    <main>
      <section>
        <span><% if (typeof statusCode !== 'undefined') { %><%= statusCode %><% } %></span>
        <p><% if (typeof message !== 'undefined') { %><%= message %><% } %></p>
      </section>
    </main>
-</body>
-
+  </body>
 </html>
--- a/app/views/includes/bottom-scripts.ejs
+++ b/app/views/includes/bottom-scripts.ejs
@ -1,5 +1,4 @@
 <!-- Bootstrap JS (optional, if you need Bootstrap JS features) -->
-<script src="https://daball.me/vendor/jquery/jquery.min.js"></script>
 <script src="https://daball.me/vendor/popper.js/dist/popper.min.js"></script>
 <script src="https://daball.me/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="https://daball.me/vendor/jquery-easing/jquery.easing.min.js"></script>
--- a/app/views/includes/common-head.ejs
+++ b/app/views/includes/common-head.ejs
@ -10,7 +10,6 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8937572456576531" crossorigin="anonymous"></script>
-
 <!-- Bootstrap CSS -->
 <link href="https://daball.me/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
@ -26,3 +25,4 @@
 <link href="https://daball.me/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" />
 <link href="https://daball.me/layouts/blog/css/blog.min.css" rel="stylesheet" />
 <link href="/css/nm3clol.css" rel="stylesheet" />
+<script src="https://daball.me/vendor/jquery/jquery.min.js"></script>
--- a/app/views/page.ejs
+++ b/app/views/page.ejs
@ -4,18 +4,13 @@
    <title><%= (typeof fm.title !== 'undefined') ? `${fm.title} - ${h.getSiteName()}` : h.getSiteName() %></title>
    <%- include('./includes/common-head.ejs') %>
  </head>
-
  <body onload="initPage()">
-
    <%- include('./includes/top-navbar.ejs') %>
-
    <%- include('./includes/no-trash-svg.ejs') %>
-
    <main class="container">
      <header>
        <%- include('./includes/breadcrumbs.ejs') %>
      </header>
-
      <% if (typeof content !== 'undefined') {%>
        <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
          <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
@ -29,7 +24,6 @@
          </div>
        </div>
      <% } %>
-    
      <ul id="files" class="list-group shadow-lg">
        <% if (typeof files !== 'undefined') files.forEach(function(value, index) { %>
          <li class="list-group-item list-group-item-action flex-column align-items-start">
@ -40,7 +34,6 @@
        <% }) %>
      </ul>
    </main>
-
    <%- include('./includes/bottom-navbar.ejs') %>
    <%- include('./includes/bottom-scripts.ejs') %>
 	</body>
--- a/app/views/search-error.ejs
+++ b/app/views/search-error.ejs
@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
    <title>Search Error for <%- query %> - <%- h.getSiteName() %></title>
    <%- include('./includes/common-head.ejs') %>
-</head>
-<body>
+  </head>
+  <body>
    <%- include('./includes/top-navbar.ejs') %>
    <%- include('./includes/no-trash-svg.ejs') %>
    <main class="container">
@ -28,8 +28,7 @@
          <% } %>
        <% } %>
      </div>
-
    <%- include('./includes/bottom-navbar.ejs') %>
    <%- include('./includes/bottom-scripts.ejs') %>
-</body>
+  </body>
 </html>
--- a/app/views/search-results.ejs
+++ b/app/views/search-results.ejs
@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
    <title>Search Results for <%- query %> - <%- h.getSiteName() %></title>
    <%- include('./includes/common-head.ejs') %>
-</head>
-<body>
+  </head>
+  <body>
    <%- include('./includes/top-navbar.ejs') %>
    <%- include('./includes/no-trash-svg.ejs') %>
    <main class="container">
@ -66,8 +66,7 @@
        <p class="center">Page <%= page %> out of <%= totalPages %>. Displaying results <%= (page-1)*pageSize+1 %> through <%= Math.min(page*pageSize, totalResults) %> out of <%= totalResults %> total results.</p>
      <% } %>
    </main>
-
    <%- include('./includes/bottom-navbar.ejs') %>
    <%- include('./includes/bottom-scripts.ejs') %>
-</body>
+  </body>
 </html>
--- a/app/views/video-player.ejs
+++ b/app/views/video-player.ejs
@ -4,17 +4,13 @@
    <title><%=h.getDirectoryTitle(directory)%></title>
    <%- include('./includes/common-head.ejs') %>
  </head>
-
  <body onload="initPage()">
-
    <%- include('./includes/top-navbar.ejs') %>
    <%- include('./includes/no-trash-svg.ejs') %>
-
    <main class="container">
      <header>
        <%- include('./includes/breadcrumbs.ejs') %>
      </header>
-
      <% if (typeof videoURL !== 'undefined') {%>
        <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
          <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
@ -49,7 +45,6 @@
          </div>
        </div>
        <% } %>
-
        <% if (typeof subtitleVTT !== 'undefined') {%>
          <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg" style="max-height:65vh;overflow-y:scroll">
          <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
@ -65,9 +60,7 @@
          </div>
        </div>
      <% } %>
-
    </main>
-
    <%- include('./includes/bottom-navbar.ejs') %>
    <%- include('./includes/bottom-scripts.ejs') %>
 	</body>