Merge branch 'dev'

bin/build.js

@@ -1,37 +1,31 @@
-import glob from 'tiny-glob';
+import esbuild from 'esbuild';
 
 const DEV_BUILD_PATH = './dist/dev';
 const PROD_BUILD_PATH = './dist';
 const production = process.env.NODE_ENV === 'production';
 
+const BUILD_DIRECTORY = !production ? DEV_BUILD_PATH : PROD_BUILD_PATH;
+
 const files = ['./src/*.ts', './src/components/*.ts', './src/pages/*.ts'];
 
-const result = await Bun.build({
-  entrypoints: (await Promise.all(files.map((pattern) => glob(pattern)))).flat(),
-  outdir: !production ? DEV_BUILD_PATH : PROD_BUILD_PATH,
-  sourcemap: !production ? 'external' : 'none',
-  minify: !production ? false : true,
+const buildSettings = {
+  entryPoints: files,
   bundle: true,
-});
-
-if (!result.success) {
-  console.error('Build failed', result.logs);
-}
+  outdir: BUILD_DIRECTORY,
+  minify: !production ? false : true,
+  sourcemap: !production,
+  target: production ? 'es2017' : 'esnext',
+};
 
 if (!production) {
-  const server = Bun.serve({
+  let ctx = await esbuild.context(buildSettings);
+
+  let { port } = await ctx.serve({
+    servedir: BUILD_DIRECTORY,
     port: 3000,
-    development: true,
-    fetch(req) {
-      const filePath = DEV_BUILD_PATH + new URL(req.url).pathname;
-      const file = Bun.file(filePath);
-      return new Response(file);
-    },
-    error() {
-      console.log('Error handler triggered');
-      return new Response('File not found', { status: 404 });
-    },
   });
 
-  console.log(`Serving at http://localhost:${server.port}`);
+  console.log(`Serving at http://localhost:${port}`);
+} else {
+  esbuild.build(buildSettings);
 }

dist/components/home-hero-image-reveal.js

@@ -0,0 +1 @@
+"use strict";(()=>{function t(){window.gsap.fromTo("[data-image-reveal-parent] > div",{opacity:1},{opacity:0,duration:3/50,stagger:{each:3/50,from:"random"}})}})();

dist/components/home-projects-load.js

@@ -0,0 +1 @@
+"use strict";(()=>{window.fsAttributes=window.fsAttributes||[];window.fsAttributes.push(["cmsload",t=>{let[s]=t;s.on("renderitems",o=>{console.log(o)})}]);})();

global.d.ts

@@ -16,6 +16,8 @@ declare global {
      * A wrapper function to directly console log when debug mode is active
      */
     DEBUG: (...args: any[]) => void;
+
+    gsap: GSAP;
   }
 
   // Extend `querySelector` and `querySelectorAll` function to stop the nagging of converting `Element` to `HTMLElement` all the time

home-projects-lightbox.ts

@@ -0,0 +1 @@
+window.Webflow?.push(() => {});

package.json

@@ -18,6 +18,7 @@
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.20.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -26,6 +27,11 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
+    "@finsweet/attributes-cmscore": "^1.13.0",
+    "@finsweet/attributes-cmsload": "^1.12.0",
+    "@finsweet/attributes-scrolldisable": "^1.6.2",
+    "@finsweet/ts-utils": "^0.40.0",
+    "gsap": "^3.12.5",
     "htmx.org": "^1.9.10",
     "swiper": "^11.0.7"
   }

src/components/accordions.ts

@@ -0,0 +1,59 @@
+const ITEM_SELECTOR = 'details';
+const TOGGLE_SELECTOR = 'summary';
+const CONTENT_SELECTOR = 'summary + div';
+
+const ANIMATION_DURATION = 0.3;
+
+export function animatedDetailsAccordions() {
+  const accordionsList = document.querySelectorAll<HTMLDetailsElement>(ITEM_SELECTOR);
+  accordionsList.forEach((accordion) => {
+    const accordionToggleEl = accordion.querySelector(TOGGLE_SELECTOR);
+    const accordionContentEl = accordion.querySelector(CONTENT_SELECTOR);
+
+    if (!accordionToggleEl || !accordionContentEl) {
+      window.DEBUG(
+        'Accordion toggle or content not found',
+        { accordionToggleEl },
+        { accordionContentEl }
+      );
+      return;
+    }
+
+    let SHOULD_CLOSE_ACCORDION = false;
+
+    window.gsap.set(accordionContentEl, {
+      height: 0,
+    });
+
+    const animationTimeline = window.gsap.timeline({
+      onComplete: () => {
+        if (SHOULD_CLOSE_ACCORDION && accordion.open) {
+          window.DEBUG('accordion close');
+          accordion.open = false;
+        }
+      },
+    });
+
+    accordionToggleEl.addEventListener('click', (clickEv) => {
+      clickEv.preventDefault();
+      clickEv.stopPropagation();
+
+      SHOULD_CLOSE_ACCORDION = true;
+      let height: number | string = 0;
+
+      if (!accordion.open) {
+        window.DEBUG('accordion open');
+        accordion.open = true;
+        height = 'auto';
+        SHOULD_CLOSE_ACCORDION = false;
+      } else {
+        height = 0;
+      }
+
+      animationTimeline.to(accordionContentEl, {
+        height: height,
+        duration: ANIMATION_DURATION,
+      });
+    });
+  });
+}

src/components/home-hero-image-reveal.ts

@@ -0,0 +1,20 @@
+export function homeHeroImageReveal() {
+  const COMPONENT_SELECTOR = '[data-image-reveal-parent]';
+  const boxes = 10 * 5;
+  const DURATION_IN_SEC = 3;
+
+  window.gsap.fromTo(
+    `${COMPONENT_SELECTOR} > div`,
+    {
+      opacity: 1,
+    },
+    {
+      opacity: 0,
+      duration: DURATION_IN_SEC / boxes,
+      stagger: {
+        each: DURATION_IN_SEC / boxes,
+        from: 'random',
+      },
+    }
+  );
+}

src/components/home-projects-load.ts

@@ -0,0 +1,13 @@
+import '@finsweet/attributes-cmsload';
+
+window.fsAttributes = window.fsAttributes || [];
+window.fsAttributes.push([
+  'cmsload',
+  (listInstances) => {
+    const [listInstance] = listInstances;
+
+    listInstance.on('renderitems', (renderedItems) => {
+      console.log(renderedItems);
+    });
+  },
+]);

src/global.ts

@@ -0,0 +1,11 @@
+import '@finsweet/attributes-scrolldisable';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { animatedDetailsAccordions } from './components/accordions';
+
+window.gsap = gsap;
+window.gsap.registerPlugin(ScrollTrigger);
+
+window.Webflow?.push(() => {
+  animatedDetailsAccordions();
+});

src/pages/home.ts

@@ -1,6 +1,5 @@
 import { initProcessSlider } from 'src/components/home-process-slider';
 
-window.Webflow = window.Webflow || [];
-window.Webflow.push(() => {
+window.Webflow?.push(() => {
   initProcessSlider();
 });