From ab191e8d9b028e4bc8f1ebfb24023dd1c3354e87 Mon Sep 17 00:00:00 2001
From: Brian Zalewski <brian@megabyte.space>
Date: Sat, 27 Apr 2024 00:06:52 -0400
Subject: [PATCH] Removed AI desktop-only splash in favor of better mobile
 splash

---
 .../assets/js => .frontmatter}/rbtools.min.js |   0
 {src/assets/js => .frontmatter}/rs6.min.js    |   0
 {src/assets/js => .frontmatter}/three.min.js  |   0
 src/components.d.ts                           |  16 +-
 .../capacitor-site/capacitor-site.scss        |  21 ++
 .../capacitor-site/capacitor-site.tsx         | 251 +++++++++---------
 src/components/code-snippet/code-snippet.tsx  |  24 +-
 src/global/style-default.scss                 |  19 +-
 src/manifest.json                             |   2 +-
 .../landing-page/components/top-parallax.scss |   6 +-
 .../landing-page/components/top-parallax.tsx  |  26 +-
 src/pages/landing-page/landing-page.scss      |   2 +-
 src/pages/landing-page/landing-page.tsx       |   8 +-
 13 files changed, 210 insertions(+), 165 deletions(-)
 rename {src/assets/js => .frontmatter}/rbtools.min.js (100%)
 rename {src/assets/js => .frontmatter}/rs6.min.js (100%)
 rename {src/assets/js => .frontmatter}/three.min.js (100%)

diff --git a/src/assets/js/rbtools.min.js b/.frontmatter/rbtools.min.js
similarity index 100%
rename from src/assets/js/rbtools.min.js
rename to .frontmatter/rbtools.min.js
diff --git a/src/assets/js/rs6.min.js b/.frontmatter/rs6.min.js
similarity index 100%
rename from src/assets/js/rs6.min.js
rename to .frontmatter/rs6.min.js
diff --git a/src/assets/js/three.min.js b/.frontmatter/three.min.js
similarity index 100%
rename from src/assets/js/three.min.js
rename to .frontmatter/three.min.js
diff --git a/src/components.d.ts b/src/components.d.ts
index 8802841..184b885 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -42,13 +42,7 @@ export namespace Components {
   interface CapacitorHubspotForm {
     defaults: typeof defaults;
   }
-  interface CapacitorSite {
-    fullScreenSliderHTML: string;
-    isTouchscreen: any;
-    scriptsLoaded: number;
-    showCommunity: boolean;
-    showEmailInput: boolean;
-  }
+  interface CapacitorSite {}
   interface CapacitorSiteFooter {
     defaults: typeof defaults;
   }
@@ -362,13 +356,7 @@ declare namespace LocalJSX {
   interface CapacitorHubspotForm {
     defaults?: typeof defaults;
   }
-  interface CapacitorSite {
-    fullScreenSliderHTML?: string;
-    isTouchscreen?: any;
-    scriptsLoaded?: number;
-    showCommunity?: boolean;
-    showEmailInput?: boolean;
-  }
+  interface CapacitorSite {}
   interface CapacitorSiteFooter {
     defaults?: typeof defaults;
   }
diff --git a/src/components/capacitor-site/capacitor-site.scss b/src/components/capacitor-site/capacitor-site.scss
index 1465fa0..4134319 100644
--- a/src/components/capacitor-site/capacitor-site.scss
+++ b/src/components/capacitor-site/capacitor-site.scss
@@ -183,3 +183,24 @@ body.home .alt-btns {
 .hide-buttons {
   display: none !important;
 }
+@media (max-width: 420px) {
+  .btns {
+    zoom: 0.9;
+  }
+}
+
+@media (max-width: 390px) {
+  .btns {
+    zoom: 0.8;
+  }
+}
+
+@media (max-width: 360px) {
+  .btns {
+    zoom: 0.7;
+  }
+}
+
+.hidesplash {
+  display: none;
+}
diff --git a/src/components/capacitor-site/capacitor-site.tsx b/src/components/capacitor-site/capacitor-site.tsx
index 670c018..d8d5bb2 100644
--- a/src/components/capacitor-site/capacitor-site.tsx
+++ b/src/components/capacitor-site/capacitor-site.tsx
@@ -1,23 +1,27 @@
-import { Component, h, Prop, Build } from '@stencil/core';
+//import { Component, h, Prop, Build } from '@stencil/core'
+import { Component, h } from '@stencil/core';
 import { Routes } from '../../router';
 import state from '../../store';
-import { importResource } from '../../utils/common';
-import { Button } from 'ionic-ds-no-fonts';
-import { defaults } from '../../store';
-declare let window: any;
-declare let jQuery: any;
-declare let RS_MODULES: any;
-declare let revapi2: any;
-declare let revslider_showDoubleJqueryError: any;
+//import { importResource } from '../../utils/common'
+//import { Button } from 'ionic-ds-no-fonts'
+//import { defaults } from '../../store'
+//declare let window: any
+//declare let jQuery: any
+//declare let RS_MODULES: any
+//declare let revapi2: any
+//declare let revslider_showDoubleJqueryError: any
 @Component({
   tag: 'capacitor-site',
   styleUrl: 'capacitor-site.scss',
 })
 export class App {
-  @Prop() showEmailInput: boolean = false;
+  /*@Prop() showEmailInput: boolean = false;
   @Prop() showCommunity: boolean = false;
   @Prop() scriptsLoaded: number = 0;
-  @Prop() isTouchscreen = (window as any).mobileSliderHero;
+  isTouchscreen = 'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0 ||
+    (navigator as any).msMaxTouchPoints > 0 ||
+    window.innerWidth < 1024
   @Prop() fullScreenSliderHTML = `
   <rs-module-wrap id="ai-id-slider_wrapper" data-alias="ai-particles-id" data-source="gallery"
   style="visibility:hidden;background:transparent;padding:0;">
@@ -245,52 +249,52 @@ export class App {
 `;
 
   onScriptLoaded() {
-    this.scriptsLoaded++;
+    this.scriptsLoaded++
     if (this.scriptsLoaded === 3) {
       const interv = setInterval(() => {
         if (window.location.pathname === '/') {
-          clearInterval(interv);
-          document.body.classList.add('home');
+          clearInterval(interv)
+          document.body.classList.add('home')
           setTimeout(() => {
             setInterval(() => {
               if (document.body.classList.contains('home')) {
-                const btnsContainer: any = document.getElementsByClassName('btns-container');
+                const btnsContainer: any = document.getElementsByClassName('btns-container')
                 if (btnsContainer.length) {
-                  const addBtnsContainer = document.getElementsByClassName('add-buttons');
+                  const addBtnsContainer = document.getElementsByClassName('add-buttons')
                   if (addBtnsContainer.length) {
                     btnsContainer[0].style.setProperty(
                       'top',
                       addBtnsContainer[0].getBoundingClientRect().top +
-                        addBtnsContainer[0].getBoundingClientRect().height -
-                        document.body.getBoundingClientRect().y +
-                        30 +
-                        'px'
-                    );
+                      addBtnsContainer[0].getBoundingClientRect().height -
+                      document.body.getBoundingClientRect().y +
+                      30 +
+                      'px'
+                    )
                   }
                 }
               }
-            }, 100);
-            if (window.RS_MODULES === undefined) window.RS_MODULES = {};
-            if (RS_MODULES.modules === undefined) RS_MODULES.modules = {};
+            }, 100)
+            if (window.RS_MODULES === undefined) window.RS_MODULES = {}
+            if (RS_MODULES.modules === undefined) RS_MODULES.modules = {}
             RS_MODULES.modules['aiidslider'] = {
               once: RS_MODULES.modules['aiidslider'] !== undefined ? RS_MODULES.modules['aiidslider'].once : undefined,
               init: function () {
                 window.revapi2 =
                   window.revapi2 === undefined || window.revapi2 === null || window.revapi2.length === 0
                     ? document.getElementById('ai-id-slider')
-                    : window.revapi2;
+                    : window.revapi2
                 if (window.revapi2 === null || window.revapi2 === undefined || window.revapi2.length == 0) {
-                  window.revapi2initTry = window.revapi2initTry === undefined ? 0 : window.revapi2initTry + 1;
+                  window.revapi2initTry = window.revapi2initTry === undefined ? 0 : window.revapi2initTry + 1
                   if (window.revapi2initTry < 20)
                     requestAnimationFrame(function () {
-                      RS_MODULES.modules['aiidslider'].init();
-                    });
-                  return;
+                      RS_MODULES.modules['aiidslider'].init()
+                    })
+                  return
                 }
-                window.revapi2 = jQuery(window.revapi2);
+                window.revapi2 = jQuery(window.revapi2)
                 if (window.revapi2.revolution == undefined) {
-                  revslider_showDoubleJqueryError('ai-id-slider');
-                  return;
+                  revslider_showDoubleJqueryError('ai-id-slider')
+                  return
                 }
                 revapi2.revolutionInit({
                   revapi: 'revapi2',
@@ -350,151 +354,160 @@ export class App {
                   fallbacks: {
                     allowHTML5AutoPlayOnAndroid: true,
                   },
-                });
+                })
                 revapi2.bind('revolution.slide.onbeforeswap', function (e, data) {
-                  const btnsContainer: any = document.getElementsByClassName('btns-container');
+                  const btnsContainer: any = document.getElementsByClassName('btns-container')
                   if (btnsContainer.length) {
                     if (data.nextSlideIndex === 1) {
-                      btnsContainer[0].classList.remove('hide-buttons');
+                      btnsContainer[0].classList.remove('hide-buttons')
                     } else {
-                      btnsContainer[0].classList.add('hide-buttons');
+                      btnsContainer[0].classList.add('hide-buttons')
                     }
                   }
-                });
+                })
                 if (revapi2 !== undefined)
                   jQuery.fn.revolution.theClusterInit(revapi2[0].id, {
                     url: 'https://wordpress.megabyte.space/wp-content/plugins/revslider-thecluster-addon/',
-                  });
+                  })
               },
-            }; // End of RevInitScript
+            } // End of RevInitScript
             if (window.RS_MODULES.checkMinimal !== undefined) {
-              window.RS_MODULES.checkMinimal();
+              window.RS_MODULES.checkMinimal()
             }
-          }, 0);
+          }, 0)
         }
-      }, 50);
+      }, 50)
     }
   }
 
   importResources() {
     if (!this.isTouchscreen) {
-      window.RS_MODULES = window.RS_MODULES || {};
-      window.RS_MODULES.modules = window.RS_MODULES.modules || {};
-      window.RS_MODULES.waiting = window.RS_MODULES.waiting || [];
-      window.RS_MODULES.defered = true;
-      window.RS_MODULES.waiting = window.RS_MODULES.waiting.concat(['thecluster', 'threejs']);
-      window.RS_MODULES.moduleWaiting = window.RS_MODULES.moduleWaiting || {};
-      window.RS_MODULES.type = 'compiled';
+      window.RS_MODULES = window.RS_MODULES || {}
+      window.RS_MODULES.modules = window.RS_MODULES.modules || {}
+      window.RS_MODULES.waiting = window.RS_MODULES.waiting || []
+      window.RS_MODULES.defered = true
+      window.RS_MODULES.waiting = window.RS_MODULES.waiting.concat(['thecluster', 'threejs'])
+      window.RS_MODULES.moduleWaiting = window.RS_MODULES.moduleWaiting || {}
+      window.RS_MODULES.type = 'compiled'
       if (!(window as any).jQueryLoaded) {
         if (Build.isServer) return;
-        (window as any).jQueryLoaded = true;
-        importResource({ propertyName: 'jquery', link: '/assets/js/jquery-slider.min.js', async: true }, () => {
-          importResource({ propertyName: 'three', link: '/assets/js/three.min.js', defer: true }, () => {
-            this.onScriptLoaded();
-          });
-          importResource({ propertyName: 'rs6', link: '/assets/js/rs6.min.js', defer: true }, () => {
-            this.onScriptLoaded();
-          });
-          importResource({ propertyName: 'rbtools', link: '/assets/js/rbtools.min.js', defer: true }, () => {
-            this.onScriptLoaded();
-          });
-        });
+        (window as any).jQueryLoaded = true
+        importResource({ propertyName: 'three', link: '/assets/js/three.min.js', defer: true }, () => {
+          this.onScriptLoaded()
+        })
+        importResource({ propertyName: 'rs6', link: '/assets/js/rs6.min.js', defer: true }, () => {
+          this.onScriptLoaded()
+        })
+        importResource({ propertyName: 'rbtools', link: '/assets/js/rbtools.min.js', defer: true }, () => {
+          this.onScriptLoaded()
+        })
       }
     }
   }
   componentDidLoad() {
     if (!this.isTouchscreen) {
-      this.importResources();
+      this.importResources()
     }
     if (document.location.hash) {
-      const hashId = document.location.hash.substring(1);
+      const hashId = document.location.hash.substring(1)
       setTimeout(() => {
-        const element = document.getElementById(hashId);
+        const element = document.getElementById(hashId)
         if (element) {
           setTimeout(() => {
-            element.scrollIntoView({ behavior: 'smooth' });
+            element.scrollIntoView({ behavior: 'smooth' })
             setTimeout(() => {
-              element.scrollIntoView({ behavior: 'smooth' });
-            }, 667);
-          }, 667);
+              element.scrollIntoView({ behavior: 'smooth' })
+            }, 667)
+          }, 667)
         }
-      }, 333);
+      }, 333)
     }
   }
 
   showEmail(e) {
     if (!this.showCommunity) {
-      e.preventDefault();
-      this.showEmailInput = true;
-      const parallaxInput = document.getElementById('parallax-input');
+      e.preventDefault()
+      this.showEmailInput = true
+      const parallaxInput = document.getElementById('parallax-input')
       if (parallaxInput) {
-        parallaxInput.focus();
+        parallaxInput.focus()
       }
     }
   }
 
   inputBlur(ev) {
-    this.showEmailInput = false;
+    this.showEmailInput = false
   }
 
   scrollWelcome(ev) {
-    const startEl = document.getElementById('welcome');
+    const startEl = document.getElementById('welcome')
     setTimeout(() => {
       if (startEl) {
-        startEl.scrollIntoView({ behavior: 'smooth' });
+        startEl.scrollIntoView({ behavior: 'smooth' })
         setTimeout(() => {
-          startEl.scrollIntoView({ behavior: 'smooth' });
-        }, 667);
+          startEl.scrollIntoView({ behavior: 'smooth' })
+        }, 667)
       }
-    }, 667);
+    }, 667)
   }
 
-  render() {
+  /*render() {
     return (
       <site-root>
         <div id="slider" innerHTML={this.isTouchscreen ? '' : this.fullScreenSliderHTML}></div>
-        <div class="btns-container alt-btns">
-          <div class="btns">
-            <Button
-              class="reveal step-5"
-              kind="round"
-              color="indigo"
-              variation="light"
-              href={this.showCommunity ? '/community' : ''}
-              onClick={(e) => this.showEmail(e)}
-              anchor={true}
-            >
-              {this.showCommunity ? 'Join Community' : 'Get Beta Access'} <span>{'->'}</span>
-            </Button>
-            <Button
-              class="reveal step-6"
-              kind="round"
-              color="indigo"
-              href="#welcome"
-              onClick={(ev) => {
-                this.scrollWelcome(ev);
-              }}
-              rel="noopener"
-              anchor={true}
-            >
-              Learn More <span>{'->'}</span>
-            </Button>
-            {!this.isTouchscreen && (
-              <newsletter-signup-parallax
-                defaults={defaults}
-                onSubmissionSuccess={() => {
-                  this.showCommunity = true;
-                }}
-                onEmailInputBlur={(ev) => {
-                  this.inputBlur(ev);
-                }}
-                class={{
-                  open: this.showEmailInput,
+        <div class={`page-theme--${state.pageTheme}`}>
+          <Routes />
+        </div>
+        <div class={{ hidesplash: this.isTouchscreen }}>
+          <div class="btns-container alt-btns">
+            <div class="btns">
+              <Button
+                class="reveal step-5"
+                kind="round"
+                color="indigo"
+                variation="light"
+                href={this.showCommunity ? '/community' : ''}
+                onClick={(e) => this.showEmail(e)}
+                anchor={true}
+              >
+                {this.showCommunity ? 'Join Community' : 'Get Beta Access'} <span>{'->'}</span>
+              </Button>
+              <Button
+                class="reveal step-6"
+                kind="round"
+                color="indigo"
+                href="#welcome"
+                onClick={(ev) => {
+                  this.scrollWelcome(ev)
                 }}
-              />
-            )}
+                rel="noopener"
+                anchor={true}
+              >
+                Learn More <span>{'->'}</span>
+              </Button>
+              {!this.isTouchscreen && (
+                <newsletter-signup-parallax
+                  defaults={defaults}
+                  onSubmissionSuccess={() => {
+                    this.showCommunity = true
+                  }}
+                  onEmailInputBlur={(ev) => {
+                    this.inputBlur(ev)
+                  }}
+                  class={{
+                    open: this.showEmailInput,
+                  }}
+                />
+              )}
+            </div>
           </div>
         </div>
+      </site-root>
+    )
+  }*/
+  render() {
+    return (
+      <site-root>
         <div class={`page-theme--${state.pageTheme}`}>
           <Routes />
         </div>
diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx
index 9a97bed..4ca91b7 100644
--- a/src/components/code-snippet/code-snippet.tsx
+++ b/src/components/code-snippet/code-snippet.tsx
@@ -40,17 +40,21 @@ export class CodeSnippet {
     }
     if (!window.prismLanguageLoaded[`Prism.languages.${this.language}`]) {
       window.prismLanguageLoaded[`Prism.languages.${this.language}`] = true;
-      importResource(
-        {
-          propertyName: `Prism.languages.${this.language}`,
-          link: `${CodeSnippet.prismCdn}/prism-${this.language}.min.js`,
-        },
-        () => {
-          this.highlightCode();
-        }
-      );
+      if (this.language) {
+        importResource(
+          {
+            propertyName: `Prism.languages.${this.language}`,
+            link: `${CodeSnippet.prismCdn}/prism-${this.language}.min.js`,
+          },
+          () => {
+            this.highlightCode();
+          }
+        );
+      }
     } else {
-      this.highlightCode();
+      if (this.language) {
+        this.highlightCode();
+      }
     }
   };
 
diff --git a/src/global/style-default.scss b/src/global/style-default.scss
index 197a120..1623062 100644
--- a/src/global/style-default.scss
+++ b/src/global/style-default.scss
@@ -1,6 +1,6 @@
 @use 'vars' as *;
 @use 'prism' as *;
-@use 'rs6' as *;
+//@use 'rs6' as *;
 @use 'hint' as *;
 
 span,
@@ -120,7 +120,6 @@ landing-page {
   }
 
   #start {
-    margin-top: 100vh;
     padding-top: 64px;
   }
 
@@ -129,7 +128,14 @@ landing-page {
     top: 0;
   }
 }
+.ascode {
+  margin-left: 0;
+  padding-left: 0;
+}
 
+.inline-flex {
+  display: inline-flex;
+}
 enterprise-page {
   #top img {
     width: 100%;
@@ -1312,8 +1318,9 @@ landing-page #start {
 #slider-container,
 .btns-container {
   > .ui-container {
-    margin-top: 90px;
-    margin-bottom: 90px;
+    padding-top: 90px;
+    padding-bottom: 90px;
+    width: 100%;
   }
   p.parallax-header {
     font-weight: 400;
@@ -1657,3 +1664,7 @@ h4.parallax-header {
     margin-top: 10px;
   }
 }
+
+body {
+  overflow-x: hidden;
+}
diff --git a/src/manifest.json b/src/manifest.json
index ec46f0b..137771d 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -110,7 +110,7 @@
     {
       "name": "Go To Homepage",
       "short_name": "Home",
-      "url": "https://install.doctor/",
+      "url": "https://install.doctor",
       "description": "Homepage of Install Doctor, the best free, open-source, multi-OS desktop provisioning system",
       "icons": [{ "src": "/assets/img/manifest/home.png", "sizes": "192x192" }]
     },
diff --git a/src/pages/landing-page/components/top-parallax.scss b/src/pages/landing-page/components/top-parallax.scss
index 653353d..49d0827 100644
--- a/src/pages/landing-page/components/top-parallax.scss
+++ b/src/pages/landing-page/components/top-parallax.scss
@@ -4,6 +4,7 @@
   z-index: 1;
   position: relative;
   min-height: calc(100vh - 64px);
+  width: 100%;
   display: block;
 }
 
@@ -22,8 +23,9 @@
   width: 100%;
 
   > .ui-container {
-    margin-top: 90px;
-    margin-bottom: 90px;
+    padding-top: 90px;
+    padding-bottom: 90px;
+    width: 100%;
   }
   p.parallax-header {
     font-weight: 400;
diff --git a/src/pages/landing-page/components/top-parallax.tsx b/src/pages/landing-page/components/top-parallax.tsx
index 688961f..1402474 100644
--- a/src/pages/landing-page/components/top-parallax.tsx
+++ b/src/pages/landing-page/components/top-parallax.tsx
@@ -20,7 +20,11 @@ export class LandingPage {
   @State() showEmailInput: boolean = false;
   @State() showCommunity: boolean = false;
   @Prop() data: typeof LandingPageData;
-  isTouchscreen = (window as any).mobileSliderHero;
+  isTouchscreen =
+    'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0 ||
+    (navigator as any).msMaxTouchPoints > 0 ||
+    window.innerWidth < 1024;
 
   disconnectedCallback() {
     // this.parallaxInstance.distroy()
@@ -232,16 +236,14 @@ export class LandingPage {
     });
   }
   componentDidLoad() {
-    if (this.isTouchscreen) {
-      if (!(window as any).jQueryLoaded) {
-        if (Build.isServer) return;
-        (window as any).jQueryLoaded = true;
-        importResource({ propertyName: 'jquery', link: '/assets/js/jquery-slider.min.js', async: true }, () => {
-          this.initParticles();
-        });
-      } else {
+    if (!(window as any).jQueryLoaded) {
+      if (Build.isServer) return;
+      (window as any).jQueryLoaded = true;
+      importResource({ propertyName: 'jquery', link: '/assets/js/jquery-slider.min.js', async: true }, () => {
         this.initParticles();
-      }
+      });
+    } else {
+      this.initParticles();
     }
   }
 
@@ -278,8 +280,8 @@ export class LandingPage {
         <div id="homing-particles" class="section-overlay"></div>
         <ResponsiveContainer>
           <h1 class="parallax-header">
-            <div class="reveal step-1">
-              Desktop-<div class="underlined-header">as-Code</div>,
+            <div class="reveal step-1 inline-flex">
+              Desktop-<div class="underlined-header ascode">as-Code</div>,
             </div>
             <div class="reveal step-2">Batteries Included</div>
           </h1>
diff --git a/src/pages/landing-page/landing-page.scss b/src/pages/landing-page/landing-page.scss
index a9ed9f0..fe0babc 100644
--- a/src/pages/landing-page/landing-page.scss
+++ b/src/pages/landing-page/landing-page.scss
@@ -242,7 +242,7 @@ h6 {
   font-size: 12px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
 
-  @media screen and (max-width: $screen-xs-max) {
+  @media screen and (max-width: 640px) {
     top: calc(100% + 32px);
   }
 
diff --git a/src/pages/landing-page/landing-page.tsx b/src/pages/landing-page/landing-page.tsx
index a3e3540..63e318b 100644
--- a/src/pages/landing-page/landing-page.tsx
+++ b/src/pages/landing-page/landing-page.tsx
@@ -23,7 +23,11 @@ export class LandingPage {
 
   @State() selectedCodeTab: string = 'notifications';
   @State() ebookModalOpen = false;
-  isTouchscreen = (window as any).mobileSliderHero;
+  isTouchscreen =
+    'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0 ||
+    (navigator as any).msMaxTouchPoints > 0 ||
+    window.innerWidth < 1024;
 
   render() {
     const {
@@ -44,7 +48,7 @@ export class LandingPage {
           description={this.data.defaults.landingPage.meta.description}
         />
         <site-header defaults={this.data.defaults} class="heading-container" sticky={true} />
-        {this.isTouchscreen && <top-parallax data={this.data} />}
+        <top-parallax data={this.data} />
         <Top />
         <Started />
         {/* <Ebook /> */}