Temporarily hide "Mail" app (aka contact form) while I'm fixing it. Replaced with link to my blog.

Author: lynkos

.github/workflows/gh-pages.yml

@@ -95,7 +95,9 @@ jobs:
         with:
           deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
           publish_branch: prod
-          exclude_assets: '.github,.gitignore,README.md,LICENSE.md,node_modules,src,package.json,package-lock.json,assets/img/misc/pipeline.webp,assets/stylesheets/sass'
+
+          # TODO: Remove 'assets/stylesheets/css/mail.css,assets/img/apps/mail.webp,dist/components/email.js' from exclude_assets once "Mail" app is fixed
+          exclude_assets: '.github,.gitignore,README.md,LICENSE.md,node_modules,src,package.json,package-lock.json,assets/img/misc/pipeline.webp,assets/stylesheets/sass,assets/stylesheets/css/mail.css,assets/img/apps/mail.webp,dist/components/email.js'
           publish_dir: .
           cname: lynkos.dev
           disable_nojekyll: true

README.md

@@ -314,6 +314,8 @@ Includes (but is not limited to):
 
 > [!NOTE]
 > [`prod`](https://github.com/lynkos/lynkos.github.io/tree/prod) is used for production
+> 
+> All mail-related files have been removed from this branch (see [Line #99 in `gh-pages.yml`](.github/workflows/gh-pages.yml#L99)) till the "Mail" app (aka contact form) is fixed
 
 <details open>
   <summary><a title="Prod branch" href="https://github.com/lynkos/lynkos.github.io/tree/prod"><code>prod</code></a> branch</summary>
@@ -328,7 +330,6 @@ Includes (but is not limited to):
 │   │   │   ├── github.svg
 │   │   │   ├── iterm.webp
 │   │   │   ├── launchpad.webp
-│   │   │   ├── mail.webp
 │   │   │   ├── notes.webp
 │   │   │   ├── preview.webp
 │   │   │   ├── safari.webp
@@ -367,7 +368,6 @@ Includes (but is not limited to):
 │   │       ├── dock.css
 │   │       ├── jquery-ui.css
 │   │       ├── launchpad.css
-│   │       ├── mail.css
 │   │       ├── menubar.css
 │   │       ├── notes.css
 │   │       ├── preflight.css
@@ -381,7 +381,6 @@ Includes (but is not limited to):
 │   ├── components/
 │   │   ├── 404.js
 │   │   ├── calculator.js
-│   │   ├── email.js
 │   │   ├── notes.js
 │   │   ├── preview.js
 │   │   ├── text-edit.js

index.html

@@ -11,9 +11,11 @@
     <meta charset="utf-8">
     <title>Lynkos</title>
 
+    <!-- TODO: Uncomment once "Mail" app is fixed -->
+    <!-- <link rel="preload" as="style" href="/assets/stylesheets/css/mail.css" onload="this.onload=null;this.rel='stylesheet'"> -->
+
     <link rel="preload" as="style" href="/assets/stylesheets/css/preview.css" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" as="style" href="/assets/stylesheets/css/calculator.css" onload="this.onload=null;this.rel='stylesheet'">
-    <link rel="preload" as="style" href="/assets/stylesheets/css/mail.css" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" as="style" href="/assets/stylesheets/css/text-edit.css" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" as="style" href="/assets/stylesheets/css/notes.css" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" as="style" href="/assets/stylesheets/css/launchpad.css" onload="this.onload=null;this.rel='stylesheet'">
@@ -27,7 +29,10 @@
     <noscript>
       <link rel="stylesheet" href="/assets/stylesheets/css/preview.css">
       <link rel="stylesheet" href="/assets/stylesheets/css/calculator.css">
-      <link rel="stylesheet" href="/assets/stylesheets/css/mail.css">
+
+      <!-- TODO: Uncomment once "Mail" app is fixed -->
+      <!-- <link rel="stylesheet" href="/assets/stylesheets/css/mail.css"> -->
+
       <link rel="stylesheet" href="/assets/stylesheets/css/text-edit.css">
       <link rel="stylesheet" href="/assets/stylesheets/css/notes.css">
       <link rel="stylesheet" href="/assets/stylesheets/css/launchpad.css">
@@ -67,7 +72,10 @@
 
     <link rel="preload" as="image" href="/assets/img/apps/iterm.webp">
     <link rel="preload" as="image" href="/assets/img/apps/launchpad.webp">
-    <link rel="preload" as="image" href="/assets/img/apps/mail.webp">
+
+    <!-- TODO: Uncomment once "Mail" app is fixed -->
+    <!-- <link rel="preload" as="image" href="/assets/img/apps/mail.webp"> -->
+
     <link rel="preload" as="image" href="/assets/img/apps/notes.webp">
     <link rel="preload" as="image" href="/assets/img/apps/safari.webp">
     <link rel="preload" as="image" href="/assets/img/apps/text-edit.webp">
@@ -901,14 +909,16 @@
           </div>
         </div>
 
-        <form class="gform" method="post" action="https://script.google.com/macros/s/AKfycbx8I8BI2KW2kkHmf4apq4o8qRW5Z7MqP_5kenyjCdWqL7tPJJ2JJdaLLDZvw12QedGB/exec">
+        <!-- TODO: Uncomment once "Mail" app is fixed -->
+        <!-- <form class="gform" method="post" action="https://script.google.com/macros/s/AKfycbx8I8BI2KW2kkHmf4apq4o8qRW5Z7MqP_5kenyjCdWqL7tPJJ2JJdaLLDZvw12QedGB/exec">
           <div id="email" class="windows">
             <div class="email-header handle">
               <div class="email-header__op">
                 <span role="button" tabindex="0" class="email-header__op-icon email-header__op-icon--red cancel"></span>
                 <span role="button" tabindex="0" class="email-header__op-icon email-header__op-icon--yellow cancel"></span>
                 <span role="button" tabindex="0" class="email-header__op-icon email-header__op-icon--green cancel"></span>
               </div>
+              <div id="cf-turnstile"></div>
               <div class="g-recaptcha" data-theme="dark" data-callback="callback" data-sitekey="6Lcd6rIqAAAAAOabj0rba6jICI-HqlQr8A1uNSBt"></div>
               <button id="send-btn" class="cancel" type="submit" onclick="google.script.run.processForm(this.parentNode.parentNode.parentNode)" title="Send message" disabled="disabled"><i alt="Paper plane icon" class="fa fa-paper-plane" aria-hidden="true"></i></button>
             </div>
@@ -924,7 +934,7 @@
             
             <textarea class="body" name="message" placeholder="Compose your message here, complete the captcha above, then click the paper plane button in the upper-right corner to send me your message. This window will automatically close once your message is sent, which may take a few seconds." required></textarea>
           </div>
-        </form>
+        </form> -->
 
         <div id="notes" class="windows">
           <div class="body">
@@ -3589,7 +3599,9 @@ <h3 class="heading">ChatGPT</h3>
             <div class="search"><input type="search" id="launchInput" onkeyup="filterLaunchpad()" placeholder="Search" title="Type in an app name"></div>
 
             <nav id="launchNav">
-              <a role="button" tabindex="0" class="icon-mail launch" id="mailLaunch"><img src="/assets/img/apps/mail.webp" draggable="true" loading="lazy" fetchpriority="low" alt="Mail"> Mail (WIP)</a>
+              <!-- Temporarily hide "Mail" app / Contact form while it's being fixed -->
+              <!-- <a role="button" tabindex="0" class="icon-mail launch" id="mailLaunch"><img src="/assets/img/apps/mail.webp" draggable="true" loading="lazy" fetchpriority="low" alt="Mail"> Mail (WIP)</a> -->
+              
               <a role="button" tabindex="0" class="icon-safari launch" id="safariLaunch"><img src="/assets/img/apps/safari.webp" draggable="true" loading="lazy" fetchpriority="low" alt="Safari"> Safari</a>
               <a role="button" tabindex="0" class="icon-notes launch" id="notesLaunch"><img src="/assets/img/apps/notes.webp" draggable="true" loading="lazy" fetchpriority="low" alt="Notes"> Notes</a>
               <a role="button" tabindex="0" class="icon-textedit launch" id="textLaunch"><img src="/assets/img/apps/text-edit.webp" draggable="true" loading="lazy" fetchpriority="low" alt="TextEdit"> TextEdit</a>
@@ -3650,13 +3662,24 @@ <h3 class="heading">ChatGPT</h3>
 
       <div id="dock">
         <div role="tooltip" tabindex="0" id="open-menu" class="icon" aria-label="Launchpad" data-microtip-position="top"><img src="/assets/img/apps/launchpad.webp" draggable="false" fetchpriority="high" alt="Launchpad"></div>
-        <div role="tooltip" tabindex="0" id="mailDockIcon" class="icon" aria-label="Mail (WIP)" data-microtip-position="top"><img src="/assets/img/apps/mail.webp" draggable="false" fetchpriority="high" alt="Mail"></div>
+
+        <!-- Temporarily hide "Mail" app / Contact form while it's being fixed -->
+        <!-- <div role="tooltip" tabindex="0" id="mailDockIcon" class="icon" aria-label="Mail" data-microtip-position="top"><img src="/assets/img/apps/mail.webp" draggable="false" fetchpriority="high" alt="Mail"></div> -->
+        
         <div role="tooltip" tabindex="0" id="safariDockIcon" class="icon" aria-label="Safari" data-microtip-position="top"><img src="/assets/img/apps/safari.webp" draggable="false" fetchpriority="high" alt="Safari"></div>
         <div role="tooltip" tabindex="0" id="notesDockIcon" class="icon" aria-label="Notes" data-microtip-position="top"><img src="/assets/img/apps/notes.webp" draggable="false" fetchpriority="high" alt="Notes"></div>
         <div role="tooltip" tabindex="0" id="textEditDockIcon" class="icon" aria-label="TextEdit" data-microtip-position="top"><img style="height:4rem !important;image-rendering:smooth" src="/assets/img/apps/text-edit.webp" draggable="false" fetchpriority="high" alt="Notes"></div>
         <div role="tooltip" tabindex="0" id="iTermDockIcon" class="icon open" aria-label="iTerm" data-microtip-position="top"><img src="/assets/img/apps/iterm.webp" draggable="false" fetchpriority="high" alt="iTerm"></div>
         <div role="tooltip" tabindex="0" id="calcDockIcon" style="display:none" class="icon" aria-label="Calculator" data-microtip-position="top"><img src="/assets/img/apps/calc.webp" draggable="false" loading="lazy" fetchpriority="low" alt="Calculator"></div>
         <div role="tooltip" tabindex="0" id="previewDockIcon" style="display:none" class="icon" aria-label="Preview" data-microtip-position="top"><img src="/assets/img/apps/preview.webp" draggable="false" loading="lazy" fetchpriority="low" alt="Preview"></div>
+        
+        <!-- Temporarily replace "Mail" app (while it's being fixed) in dock with link to my blog... -->
+        <div role="tooltip" tabindex="0" id="blogDockIcon" class="icon" aria-label="Blog" data-microtip-position="top">
+          <a target="_blank" href="https://blog.lynkos.dev">
+            <img style="width:95%;padding-left:.25rem" src="/assets/img/favicons/favicon.svg" class="icon" draggable="false" fetchpriority="high" alt="Blog">
+          </a>
+        </div>
+        
         <div class="dock-divider"></div>
         <div role="tooltip" tabindex="0" id="trash-icon" class="icon" aria-label="Trash" data-microtip-position="top"><img id="trash" src="/assets/img/system/trash.webp" draggable="false" fetchpriority="high" alt="Trash"></div>
       </div>
@@ -3678,11 +3701,16 @@ <h3 class="heading">ChatGPT</h3>
     <script src="/dist/utilities/timestamp.js"></script>
     <script src="/dist/components/notes.js" defer></script>
     <script src="/dist/components/text-edit.js" defer></script>
-    <script data-cfasync="false" src="/dist/components/email.js" defer></script>
+
+    <!-- TODO: Uncomment once "Mail" app is fixed -->
+    <!-- <script data-cfasync="false" src="/dist/components/email.js" defer></script> -->
+    
     <script src="/dist/components/preview.js" defer></script>
     <script src="/dist/components/calculator.js" defer></script>
     <script src="/dist/utilities/context-menu.js" defer></script>
-    <script>
+
+    <!-- TODO: Uncomment once "Mail" app is fixed -->
+    <!-- <script>
       // Make launchpad searchable
       function filterLaunchpad() {
         const input = document.getElementById("launchInput"),
@@ -3713,6 +3741,33 @@ <h3 class="heading">ChatGPT</h3>
         let content = document.querySelector(`${item}-content`);
         content.classList.toggle("hidden-content");
       }
-    </script>
+
+      // IIFE (creates isolated scope)
+      (function() {
+        // Reveal hidden elements once page loads to avoid FOUC
+        function revealHiddenElements() {
+          // Find all elements with the 'hidden' class
+          const hiddenElements = document.querySelectorAll('.hidden');
+          
+          // Convert NodeList to Array for better browser compatibility
+          Array.from(hiddenElements).forEach(function(element, index) {
+            // Add a slight stagger effect for visual appeal
+            setTimeout(function() {
+              element.classList.add('reveal');
+            }, index * 50); // 50ms delay between each element
+          });
+        }
+        
+        // Multiple trigger points for maximum reliability
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', revealHiddenElements);
+        } else { // Document is already loaded
+          revealHiddenElements();
+        }
+        
+        // Safety net: reveal after 2.5 seconds regardless
+        setTimeout(revealHiddenElements, 2500);
+      })();
+    </script> -->
   </body>
 </html>

src/components/windows.js

@@ -558,7 +558,8 @@ document.addEventListener("DOMContentLoaded", function() {
     });
 
     // Make some windows resizeable
-    $("#mac-terminal, #email, #notes, #browser, .preview, .resume").resizable({
+    // TODO: Add #email once mail app (aka contact form) is fixed
+    $("#mac-terminal, #notes, #browser, .preview, .resume").resizable({
         containment: "#main-content",
         handles: "n, e, s, w, ne, nw, se, sw",
         animate: true
@@ -597,9 +598,6 @@ document.addEventListener("DOMContentLoaded", function() {
     // Open terminal
     openWindow("#iTermDockIcon", "#mac-terminal", "inline-block");
 
-    // Open mail
-    //openWindow("#mailDockIcon", "#email");
-
     // Open about me
     openWindow("#textEditDockIcon", "#text-edit");
 
@@ -630,9 +628,6 @@ document.addEventListener("DOMContentLoaded", function() {
     // Launch terminal
     launchApp("#itermLaunch", "#mac-terminal", "#iTermDockIcon", "inline-block");
 
-    // Launch mail
-    //launchApp("#mailLaunch", "#email", "#mailDockIcon");
-
     // Launch about me
     launchApp("#textLaunch", "#text-edit", "#textEditDockIcon");
 
@@ -648,9 +643,6 @@ document.addEventListener("DOMContentLoaded", function() {
     // Close terminal
     closeWindow(".header__op-icon--red", "#mac-terminal", "#iTermDockIcon");
 
-    // Close mail
-    closeWindow(".email-header__op-icon--red", "#email", "#mailDockIcon");
-
     // Close about me
     closeWindow(".text-edit-header__op-icon--red", "#text-edit", "#textEditDockIcon");
 
@@ -675,9 +667,6 @@ document.addEventListener("DOMContentLoaded", function() {
     // Maximize Safari browser
     maximizeWindow(".browser-buttons-icon--green", "#browser");
 
-    // Maximize mail
-    maximizeWindow(".email-header__op-icon--green", "#email");
-
     // Maximize projects
     maximizeWindow(".buttons-icon--green", "#notes");
 
@@ -689,4 +678,18 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Maximize about me
     //maximizeWindow(".text-edit-header__op-icon--green", "#text-edit");
+
+    // TODO: UNCOMMENT THE FOLLOWING ONCE MAIL APP (AKA CONTACT FORM) IS FIXED
+
+    // Maximize mail
+    //maximizeWindow(".email-header__op-icon--green", "#email");
+
+    // Close mail
+    //closeWindow(".email-header__op-icon--red", "#email", "#mailDockIcon");
+
+    // Launch mail
+    //launchApp("#mailLaunch", "#email", "#mailDockIcon");
+
+    // Open mail
+    //openWindow("#mailDockIcon", "#email");
 });