testing: added 'minify: true' under build for vite.config.js

Author: brightowltutoring

.svelte-kit/ambient.d.ts

@@ -123,6 +123,7 @@ declare module '$env/static/private' {
 	export const npm_node_execpath: string;
 	export const npm_config_prefix: string;
 	export const COLORTERM: string;
+	export const NODE_ENV: string;
 }
 
 /**
@@ -256,6 +257,7 @@ declare module '$env/dynamic/private' {
 		npm_node_execpath: string;
 		npm_config_prefix: string;
 		COLORTERM: string;
+		NODE_ENV: string;
 		[key: `PUBLIC_${string}`]: undefined;
 		[key: string]: string | undefined;
 	}

src/.DS_Store

@@ -74,7 +74,7 @@
 >
   {#key resetLogoClick}
     <button
-      class="md:translate-y-[0.1rem] md:translate-x-3 hidden md:block text-xl font-Poppins 
+      class=" p-2 md:translate-y-[0.1rem] md:translate-x-3 hidden md:block text-xl font-Poppins 
     md:text-[min(5.5vw,40px)] active:text-red-600 hover:scale-110 transition-transform selection:bg-transparent"
       in:scale={{ duration: 1200, easing: elasticOut }}
       on:click={clickLogo}

src/lib/Navbar.svelte

@@ -1,6 +1,7 @@
 <script>
   import { preloadCode } from "$app/navigation";
   import { isDarkMode, elementColor } from "$lib/store";
+
   import { scale } from "svelte/transition";
   import { elasticOut } from "svelte/easing";
 

src/lib/Plans/PlansCard.svelte

@@ -2,25 +2,21 @@
   import PlansCard from "$lib/Plans/PlansCard.svelte";
   import InView from "$lib/InView.svelte";
   import { elasticOut } from "svelte/easing";
+  import { scaleYN } from "$lib/utils";
+  // import { fade, fly, scale, slide } from "svelte/transition";
   import { plansCardArray } from "$lib/Plans/plansCardArray";
   import { onMount, createEventDispatcher } from "svelte";
-  import { cssToHead, jsToHead, scaleYN } from "$lib/utils";
+  import { cssToHead, jsToHead } from "$lib/utils";
   let dispatch = createEventDispatcher();
 
   export let plansCards = plansCardArray;
-  // When the importing component has 'zeroTransition = true' this component produces no transition animation for both navbar AND direct navigation
 
   export let noTransition = false; // when user does include noTransition as a prop then this is rewritten to 'true'
 
   let ready = noTransition;
   onMount(() => (ready = true));
   // the 'ready' variable logic allows the in:scale div to animate (svelte transition) when going directly to this plans route ..otherwise only works when navigating from another route
-</script>
-
-<InView
-  once
-  margin={"200px"}
-  onview={() => {
+  function addCalendlyCSSandJS() {
     console.log("📅");
     jsToHead(
       "calendlyJS",
@@ -30,39 +26,38 @@
       "calendlyCSS",
       "https://assets.calendly.com/assets/external/widget.css"
     );
-  }}
->
-  <!-- Can also do 'use:boop' where boop() is a function containing the dispatch logic. -->
+  }
+
+  // This 'boop-function' dispatches a 'boop-event' when called; below, it's called as soon as the element is created with 'use:boop'.  An alternative to 'use:boop' logic is 'use={ dispatch("boop", OBJECT) }' ... but I think the former is more html-readable
+  function boop() {
+    dispatch("boop", { plansCardArray, message: "n i boop" });
+  }
+</script>
+
+<InView once margin={"200px"} onview={addCalendlyCSSandJS}>
   <plans-section
-    use={dispatch("boop", { plansCardArray, message: "n i boop" })}
+    use:boop
     class="grid grid-cols-1 sm:grid-cols-dynamic sm:px-4 px-[7%] md:m-7"
   >
     <!-- class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 sm:px-4 px-10 md:m-7" -->
-    {#each plansCards as item, i}
-      {#if ready}
+    {#if ready}
+      {#each plansCards as { card, payNowUrl, payLaterUrl, cardTitle, cardText }, i}
         <div
           in:scaleYN={{
-            noTransition: noTransition,
+            delay: 100 * i,
             duration: 1000,
             easing: elasticOut,
-            delay: 100 * i,
+            noTransition,
           }}
         >
-          <PlansCard
-            card={item.card}
-            payNowUrl={item.payNowUrl}
-            payLaterUrl={item.payLaterUrl}
-          >
-            <!-- <span slot="buttonText"> {item.buttonText} </span> -->
-            <span slot="cardTitle"> {item.cardTitle} </span>
-
-            <span slot="cardText">
-              {item.cardText}
-            </span>
+          <PlansCard {card} {payNowUrl} {payLaterUrl}>
+            <!-- <span slot="buttonText"> {buttonText} </span> -->
+            <span slot="cardTitle"> {cardTitle} </span>
+            <span slot="cardText"> {cardText} </span>
           </PlansCard>
         </div>
-      {/if}
-    {/each}
+      {/each}
+    {/if}
   </plans-section>
 </InView>
 

src/lib/Plans/PlansComponent.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { isDarkMode } from "./../lib/store.js";
   import "../app.css";
   import { scale, fly, slide, fade, blur } from "svelte/transition";
   import { elasticOut, quintOut } from "svelte/easing";
@@ -104,17 +105,19 @@
 
 <!-- bgTint={"text-white bg-gradient-to-br from-[#6c79f4] to-rose-400"} -->
 <main>
-  <Modal showModal={contactLinkClicked} bgTint={"backdrop-blur-xl "}>
+  <Modal showModal={contactLinkClicked} bgTint={"backdrop-blur-3xl "}>
     {#key !contactLinkClicked}
       <ul
         in:scale={{
           duration: 1500,
           easing: elasticOut,
         }}
-        class="text-center flex flex-col gap-y-2 font-Poppins sm:text-5xl text-3xl text-transparent bg-clip-text bg-gradient-to-r  from-teal-500 via-rose-600 to-pink-600  "
+        class="text-center flex flex-col gap-y-2 font-Poppins sm:text-5xl text-3xl text-transparent bg-clip-text bg-gradient-to-r  {$isDarkMode
+          ? 'from-teal-200 via-rose-300 to-pink-200 '
+          : 'from-teal-700 via-rose-700 to-pink-700 '}"
       >
         <li>Email:</li>
-        <li>[email protected]</li>
+        <li class="p-5">[email protected]</li>
       </ul>
     {/key}
   </Modal>

src/routes/+layout.svelte

@@ -101,6 +101,7 @@
         }}
         plansCards={classicoAndMock}
       />
+
       <!-- TODO: 'boop' is a custom svelte event sent from within planscomponent.svelte, containing 'plansCardArray'; here I decide to modify a copy of this data and name it 'classicoAndMock' ... upside of this is not having to import 'plansCardArray' from a js file ...downside is while waiting for this boop event the change in content flashes on the home route (when refreshing the page at the plans section)-->
     </div>
 

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <!-- Update dec, 12 2022: first time using css has selector; doesnt yet work in firefox -->
 <script>
   import { fly, fade, slide } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
   import { showHomeworkModal, showLoginModal } from "$lib/store";
   let faqContainer;
   let selectedTd;
@@ -38,7 +39,7 @@
 
 <!-- in:slide={{ duration: 800 }} -->
 <div
-  in:fly={{ y: 50, duration: 500 }}
+  in:fly={{ y: 50, duration: 800, easing: quintOut }}
   class="grid place-content-center py-16"
   on:dblclick={() => {
     faqContainer.querySelectorAll("DETAILS").forEach((el) => (el.open = false));
@@ -51,7 +52,8 @@
   </span>
 </div>
 <!-- TODO: some weird reason I have to add 'class="highlight"' ot at least one summary element before the css/js logic can work -->
-<div class="faqContainer">
+
+<div in:fly={{ y: -50, duration: 500 }} class="faqContainer">
   <details>
     <summary class="highlight"> How are we screen-sharing? Zoom? </summary>
 

src/routes/faq/+page.svelte

@@ -4,6 +4,7 @@ import { sveltekit } from "@sveltejs/kit/vite";
 const config = {
   plugins: [sveltekit()],
   build: {
+    minify: true,
     rollupOptions: {
       external: [
         "/Users/brightowl/Documents/GitHub/sveltekit/node_modules/dropzone/dist/dropzone.css",