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

Reviewed-on: nm3clol/nm3clol-express-app#15

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';

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,
 };

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 });
       }
     });
   });

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);

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.`);
 });

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
-  }
+}

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>

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>
+  </head>
-
+  <body>
-<body>
     <main>
       <section>
         <span><% if (typeof statusCode !== 'undefined') { %><%= statusCode %><% } %></span>
         <p><% if (typeof message !== 'undefined') { %><%= message %><% } %></p>
       </section>
     </main>
-</body>
+  </body>
-
 </html>

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>

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>

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>

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>
+  </head>
-<body>
+  <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>

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>
+  </head>
-<body>
+  <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>

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>