bundle optimisations

src/index.css

@@ -64,25 +64,20 @@
 
   .marquee-container {
     --offset: -0%;
-    /* --move-initial: calc(- (100 / 40) % + var(--offset)); */
     --move-initial: -0;
     --move-final: calc(-50% + var(--offset));
-    /* --move-initial--reverse: calc((100 / 44) %);
-    --move-final--reverse: calc(50%); */
   }
 
   .marquee-inner {
-    /* transform: translateX(var(--move-initial), 0, 0) translateZ(0); */
     animation: marquee 240s linear infinite;
     transform: translateZ(0) translateX(var(--move-initial));
-    /* animation-play-state: paused; */
     will-change: contents;
     transition: all 0.4s ease;
     -webkit-transition: all 0.4s ease;
   }
 
   .marquee-card {
-    @apply mx-2 flex h-auto w-max max-w-[324px] items-center rounded-2xl border border-zinc-800 bg-material/40  px-4 py-4 shadow-sm;
+    @apply mx-2 flex h-auto w-max max-w-[324px] items-center rounded-2xl border border-zinc-800 bg-material/40 px-4 py-4 shadow-sm;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -98,29 +93,17 @@
   .marquee-wrapper {
     -webkit-transform: translate3d(0, 0, 0);
   }
-
-  *:hover > .darken-container-hover {
-    @apply bg-orange-600;
-  }
-
-  .delay-0 {
-    transition-delay: 0ms;
-  }
 }
 
 @layer components {
   ph {
     @apply font-medium text-violet-300/70;
   }
   .shadow-title-r {
-    /* background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 75%) 100%); */
     background: linear-gradient(to bottom right, #fff 30%, hsla(0, 0%, 100%, 0.5));
-    @apply block bg-clip-text !text-transparent;
   }
   .shadow-title-b {
-    /* background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 75%) 100%); */
     background: linear-gradient(to bottom, #fff 5%, #fff 30%, hsla(0, 0%, 100%, 0.6));
-    @apply block bg-clip-text !text-transparent;
   }
   .glink {
     @apply text-violet-300/70 transition-colors hover:text-violet-300;
@@ -146,50 +129,6 @@
     @apply rounded-xl border border-zinc-800 bg-material/10 px-1.5 py-0.5 font-mono text-[0.825rem] leading-6;
   }
 
-  .stepper-pill {
-    @apply flex w-max min-w-max items-center rounded-full border border-zinc-800 bg-material px-3 py-1 shadow-md transition-colors duration-300 group-[.active]:border-purple-400/60 group-[.active]:bg-side-purple-700/30 group-[.active]:font-title  hover:border-purple-400/40 hover:bg-side-purple-700/20 xs:group-[.active]:font-medium;
-  }
-
-  .btn-fill.disabled,
-  .btn-fill[disabled] {
-    @apply cursor-not-allowed bg-gray-700 focus:pointer-events-none focus:bg-gray-700 focus:ring-0 hover:bg-gray-700;
-  }
-
-  .split-btn-base {
-    @apply flex flex-grow flex-col justify-center bg-side-purple-600 text-left font-medium text-white shadow-sm transition-colors duration-200 ease-in-out focus:bg-side-purple-700 focus:outline-none focus:ring-4 focus:ring-side-purple-300 hover:bg-side-purple-700;
-  }
-
-  .split-btn-base.disabled,
-  .split-btn-base[disabled] {
-    @apply cursor-not-allowed bg-side-purple-600/40 !text-gray-400 focus:pointer-events-none focus:bg-side-purple-600/40 focus:ring-0 hover:bg-side-purple-600/40;
-  }
-
-  .split-btn-base.disabled span,
-  .split-btn-base[disabled] span {
-    @apply cursor-not-allowed !text-gray-400;
-  }
-
-  .split-btn-right {
-    @apply flex flex-grow-0 rounded-r-lg border-l border-side-purple-border px-4 py-2.5 focus:ring-0;
-  }
-
-  .dropdown-box {
-    @apply z-10 mt-2 hidden divide-y divide-gray-100 rounded-xl bg-material px-2 shadow-sm;
-  }
-
-  .dropdown-link {
-    @apply block w-full rounded-lg px-4 py-3 transition-colors duration-100 ease-in-out hover:bg-side-purple-600/30 hover:text-white;
-  }
-
-  .dropdown-link.disabled,
-  .dropdown-link[disabled] {
-    @apply cursor-not-allowed text-gray-700 focus:pointer-events-none focus:bg-transparent focus:ring-0 hover:bg-transparent;
-  }
-
-  .dropdown-list {
-    @apply w-full py-2 text-sm text-gray-700 dark:text-gray-200;
-  }
-
   .grid-fix {
     -webkit-margin-top-collapse: discard;
   }

src/index.html

@@ -84,7 +84,7 @@
         </a>
         <div class="flex-grow"></div>
 
-        <div class="flex justify-center space-x-[0.95rem] py-1.5 px-2 mx-0.5 border rounded-full border-zinc-800">
+        <div class="flex justify-center space-x-[0.95rem] py-1.5 px-2.5 mx-0.5 border rounded-full border-zinc-800">
           <!-- github -->
           <a title="GitHub" href="https://github.com/SideStore/SideStore/" target="_blank"
             class="flex justify-center w-6 h-6 transition-colors duration-100 text-zinc-300 hover:text-white">
@@ -122,7 +122,9 @@
     <div
       class="mt-8 sm:mt-12 flex h-full w-full max-w-[90rem] flex-col items-center overflow-hidden lg:mt-0 lg:grid lg:grid-cols-8 lg:px-12 snap-center">
       <div class="flex flex-col justify-center px-4 text-left lg:col-span-4 lg:-translate-y-2/4 lg:pl-12 2xl:pl-0">
-        <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text-5xl lg:text-7xl">SideStore
+        <h1
+          class="text-4xl font-medium tracking-tight shadow-title-r block bg-clip-text !text-transparent font-title sm:text-5xl lg:text-7xl">
+          SideStore
         </h1>
         <p class="max-w-xl mt-5 text-lg text-zinc-300">
           An alternative app store for seamless sideloading. No jailbreak
@@ -165,7 +167,7 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
         <span
           class="px-3 py-1 border rounded-full shadow-[inset_0_-7px_11px_#a48fff1f] text-[0.92rem] border-side-purple-400/60 flex text-white bg-material/50 backdrop-blur-md w-max">Apps</span>
         <h1
-          class="text-3xl xs:text-4xl sm:leading-none sm:text-[3rem] font-medium text-white font-title shadow-title-b mt-6">
+          class="text-3xl xs:text-4xl sm:leading-none sm:text-[3rem] font-medium text-white font-title shadow-title-b block bg-clip-text !text-transparent mt-6">
           Install
           any .ipa</h1>
         <p class="mt-2 sm:mt-3 text-zinc-300/70">
@@ -197,7 +199,7 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
           class="px-3 py-1 border rounded-full shadow-[inset_0_-7px_11px_#a48fff1f] text-[0.92rem] border-side-purple-400/60 flex text-white bg-material/50 backdrop-blur-md w-max">Open
           Source</span>
         <h1
-          class="text-3xl xs:text-4xl sm:leading-none sm:text-[3rem] font-medium text-white font-title shadow-title-b mt-6">
+          class="text-3xl xs:text-4xl sm:leading-none sm:text-[3rem] font-medium text-white font-title shadow-title-b block bg-clip-text !text-transparent mt-6">
           Free, forever</h1>
         <p class="mt-2 sm:mt-3 text-zinc-300/70">
           SideStore is <ph>fully open-source</ph> and <ph>run by contributors</ph>, supported by our <ph>community</ph>
@@ -243,7 +245,7 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
         <span
           class="px-3 py-1 border rounded-full shadow-[inset_0_-7px_11px_#a48fff1f] text-[0.92rem] border-side-purple-400/60 flex text-white bg-material/50 backdrop-blur-md w-max">Download</span>
         <h1
-          class="text-3xl xs:text-4xl sm:leading-none sm:text-[3rem] font-medium text-white font-title shadow-title-b mt-6">
+          class="text-3xl xs:text-4xl sm:leading-none sm:text-[3rem] font-medium text-white font-title shadow-title-b block bg-clip-text !text-transparent mt-6">
           Get started</h1>
         <p class="mt-2 sm:mt-3 text-zinc-300/70">
           SideStore works on iOS 14.0 and higher. You'll need a computer for the initial setup, but after that you can
@@ -261,7 +263,8 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
           <ol class="flex items-center w-full text-sm text-center lg:flex-col sm:text-base peer/stepper lg:items-start"
             id="setup-stepper">
             <li class="flex items-center group active w-max">
-              <span class="stepper-pill">
+              <span
+                class="flex w-max min-w-max items-center rounded-full border border-zinc-800 bg-material px-3 py-1 shadow-md transition-colors duration-300 group-[.active]:border-purple-400/60 group-[.active]:bg-side-purple-700/30 group-[.active]:font-title  hover:border-purple-400/40 hover:bg-side-purple-700/20 xs:group-[.active]:font-medium">
                 <span class="font-bold ">1</span>
                 <span class="hidden md:block md:ml-2 xs:group-[.active]:block xs:group-[.active]:ml-2 w-max">Download
                   SideServer</span>
@@ -272,7 +275,8 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
             </li>
 
             <li class="flex items-center group">
-              <span class="stepper-pill">
+              <span
+                class="flex w-max min-w-max items-center rounded-full border border-zinc-800 bg-material px-3 py-1 shadow-md transition-colors duration-300 group-[.active]:border-purple-400/60 group-[.active]:bg-side-purple-700/30 group-[.active]:font-title  hover:border-purple-400/40 hover:bg-side-purple-700/20 xs:group-[.active]:font-medium">
                 <span class="font-bold ">2</span>
                 <span class="hidden md:block md:ml-2 xs:group-[.active]:block xs:group-[.active]:ml-2">Sideload
                   App</span>
@@ -284,7 +288,8 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
 
 
             <li class="flex items-center group ">
-              <span class="stepper-pill">
+              <span
+                class="flex w-max min-w-max items-center rounded-full border border-zinc-800 bg-material px-3 py-1 shadow-md transition-colors duration-300 group-[.active]:border-purple-400/60 group-[.active]:bg-side-purple-700/30 group-[.active]:font-title  hover:border-purple-400/40 hover:bg-side-purple-700/20 xs:group-[.active]:font-medium">
                 <span class="font-bold ">3</span>
                 <span class="hidden md:block md:ml-2 xs:group-[.active]:block xs:group-[.active]:ml-2">WireGuard
                   VPN</span>
@@ -294,7 +299,8 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
               class="flex-grow inline-block w-full h-1 mx-1 ml-3 border-b border-gray-700 lg:border-b-0 lg:border-r lg:w-1 lg:h-3 xs:mx-3 lg:my-3 border-1">
             </li>
             <li class="flex items-center group ">
-              <span class="stepper-pill">
+              <span
+                class="flex w-max min-w-max items-center rounded-full border border-zinc-800 bg-material px-3 py-1 shadow-md transition-colors duration-300 group-[.active]:border-purple-400/60 group-[.active]:bg-side-purple-700/30 group-[.active]:font-title  hover:border-purple-400/40 hover:bg-side-purple-700/20 xs:group-[.active]:font-medium">
                 <span class="font-bold ">4</span>
                 <span class="hidden md:block md:ml-2 xs:group-[.active]:block xs:group-[.active]:ml-2">Finished</span>
               </span>

src/index.js

@@ -1,5 +1,7 @@
 import icons from './assets/apps_data/*.webp';
 import rawApps from './assets/apps_data/applist.json';
+const $ = document.querySelector.bind(document);
+const $$ = document.querySelectorAll.bind(document);
 
 const observer = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
@@ -23,7 +25,7 @@ const observer = new IntersectionObserver((entries) => {
 });
 
 const observeElements = () =>
-  document.querySelectorAll('.section-fade,.section-fade-items').forEach((element) => {
+  $$('.section-fade,.section-fade-items').forEach((element) => {
     observer.observe(element);
   });
 
@@ -63,11 +65,11 @@ let setupStepContents = [
     `Now to finish the process: <ul class="list-disc list-inside"><li>Open SideStore and sign in with the same Apple ID you used to install SideStore.</li><li>Go to the Apps tab and refresh the SideStore app itself once (you might have to swipe up to your homescreen for the process to complete).</li></ul><br> Now, you're all set! You can install apps from the sources tab or any other <code>.ipa</code> file you have.<br>If you run into any more issues, you can get support in our <a class="glink" target="_blank" href="https://discord.gg/sidestore">Discord server.</a>`,
 ];
 
-const osSelect = document.querySelector('#setup-os-select');
-const setupNextBtn = document.querySelector('#setup-next-btn');
-const setupPrevBtn = document.querySelector('#setup-prev-btn');
-const setupContent = document.querySelector('#setup-content');
-const setupStepper = [...document.querySelectorAll('#setup-stepper li:not([aria-hidden="true"])')];
+const osSelect = $('#setup-os-select');
+const setupNextBtn = $('#setup-next-btn');
+const setupPrevBtn = $('#setup-prev-btn');
+const setupContent = $('#setup-content');
+const setupStepper = [...$$('#setup-stepper li:not([aria-hidden="true"])')];
 const update = (act) => {
   setupStepper.map((item, idx) => item.classList.toggle('active', idx == act));
 
@@ -82,25 +84,25 @@ const update = (act) => {
   }, 300);
   setupPrevBtn.classList.toggle('hidden', act == 0);
   setupNextBtn.classList.toggle('hidden', act == 3);
-  document.querySelector('#setup-btn-wrap').classList.toggle('onlyprev', act == 3);
+  $('#setup-btn-wrap').classList.toggle('onlyprev', act == 3);
 };
 
 setupNextBtn.addEventListener('click', () => {
-  let activeStep = document.querySelector('#setup-stepper li.active');
+  let activeStep = $('#setup-stepper li.active');
   let activeStepIndex = setupStepper.indexOf(activeStep);
   if (activeStepIndex == 3) return;
   update(activeStepIndex + 1);
 });
 
 setupPrevBtn.addEventListener('click', () => {
-  let activeStep = document.querySelector('#setup-stepper li.active');
+  let activeStep = $('#setup-stepper li.active');
   let activeStepIndex = setupStepper.indexOf(activeStep);
   if (activeStepIndex == 0) return;
   update(activeStepIndex - 1);
 });
 osSelect.addEventListener('change', (e) => {
   detectedOS = e.target.value;
-  update(setupStepper.indexOf(document.querySelector('#setup-stepper li.active')));
+  update(setupStepper.indexOf($('#setup-stepper li.active')));
 });
 osSelect.value = detectedOS;
 
@@ -128,29 +130,29 @@ const repoItem = `<a style="--custom-index:{{index}}" href="{{url}}" target="_bl
   let set1 = apps.join('');
   let set2 = apps.reverse().join('');
 
-  document.querySelectorAll('#marquee1').forEach((el) => (el.innerHTML = set1));
-  document.querySelectorAll('#marquee2').forEach((el) => (el.innerHTML = set2));
+  $$('#marquee1').forEach((el) => (el.innerHTML = set1));
+  $$('#marquee2').forEach((el) => (el.innerHTML = set2));
   observeElements();
   // ensure gpu acceleration
-  document.querySelectorAll('.marquee-inner').forEach((e) => (e.style['transform'] = 'translateZ(0)'));
+  $$('.marquee-inner').forEach((e) => (e.style['transform'] = 'translateZ(0)'));
 
-  document.querySelector('#show-all-downloads').addEventListener('click', () => {
-    document.querySelector('#all-downloads').classList.remove('hidden');
-    document.querySelector('#all-downloads').classList.add('flex');
+  $('#show-all-downloads').addEventListener('click', () => {
+    $('#all-downloads').classList.remove('hidden');
+    $('#all-downloads').classList.add('flex');
     setTimeout(() => {
-      document.querySelector('#all-downloads').classList.add('show');
+      $('#all-downloads').classList.add('show');
     }, 10);
   });
-  document.querySelector('#close-all-downloads').addEventListener('click', () => {
-    document.querySelector('#all-downloads').classList.remove('show');
+  $('#close-all-downloads').addEventListener('click', () => {
+    $('#all-downloads').classList.remove('show');
     setTimeout(() => {
-      document.querySelector('#all-downloads').classList.remove('flex');
-      document.querySelector('#all-downloads').classList.add('hidden');
+      $('#all-downloads').classList.remove('flex');
+      $('#all-downloads').classList.add('hidden');
     }, 150);
   });
   // start animation
 
-  // document.querySelectorAll('.marquee-inner').forEach((e) => (e.style['animation-play-state'] = 'running'));
+  // $$('.marquee-inner').forEach((e) => (e.style['animation-play-state'] = 'running'));
 
   console.log(`Loaded apps marquee with ${apps.length} items.`);
 
@@ -179,11 +181,11 @@ const repoItem = `<a style="--custom-index:{{index}}" href="{{url}}" target="_bl
     }
   }
 
-  // document.querySelectorAll('[linked-dropdown]').forEach((el) => {
+  // $$('[linked-dropdown]').forEach((el) => {
   //   const linkedDropdown = document.getElementById(el.getAttribute('linked-dropdown'));
   //   const dropdownHidden = linkedDropdown.getAttribute('dropdown-hidden').split(' ') || [];
   //   const dropdownVisible = linkedDropdown.getAttribute('dropdown-visible').split(' ') || [];
-  //   const copyWidth = linkedDropdown.getAttribute('dd-copy-width') ? document.querySelector(linkedDropdown.getAttribute('dd-copy-width')) : false;
+  //   const copyWidth = linkedDropdown.getAttribute('dd-copy-width') ? $(linkedDropdown.getAttribute('dd-copy-width')) : false;
   //   console.log(`Linked dropdown button to ${`#` + linkedDropdown.id || `.` + el.class}.`);
   //   const hide = () => {
   //     linkedDropdown.classList.remove('dd-visible');
@@ -228,7 +230,7 @@ const repoItem = `<a style="--custom-index:{{index}}" href="{{url}}" target="_bl
     })
     .join('');
 
-  document.querySelector('#repos-grid').innerHTML = builtRepos;
+  $('#repos-grid').innerHTML = builtRepos;
   observeElements();
   const typeMap = {
     PushEvent: 'commit',
@@ -301,12 +303,12 @@ const repoItem = `<a style="--custom-index:{{index}}" href="{{url}}" target="_bl
     })
     .slice(0, 9);
 
-  document.querySelectorAll('#event-log').forEach((el) => (el.innerHTML = log.join('')));
+  $$('#event-log').forEach((el) => (el.innerHTML = log.join('')));
   observeElements();
 
   // for every button with id "hookPlatformDL"
-  // document.querySelectorAll('#hookPlatformDL').forEach((el) => {
-  //   const ddList = document.querySelector(el.getAttribute('platform-dl-list'));
+  // $$('#hookPlatformDL').forEach((el) => {
+  //   const ddList = $(el.getAttribute('platform-dl-list'));
   //   const platformDLElement = ddList.querySelector(`[dl-platform=${os}]`);
   //   const platformText = el.querySelector('#platformText');
   //   console.log(platformDLElement);
@@ -318,6 +320,6 @@ const repoItem = `<a style="--custom-index:{{index}}" href="{{url}}" target="_bl
 
   // const releaseData = await (await fetch('https://api.github.com/repos/sidestore/sidestore/releases/latest')).json();
   // const versionTag = releaseData.tag_name || '?.?.?';
-  // const label = document.querySelector('#hook-latest-ipa-version');
+  // const label = $('#hook-latest-ipa-version');
   // label.innerText = `v${versionTag}`;
 })();