@jjlmoya/landings 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/landings",
-    "version": "0.5.0",
+    "version": "0.7.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/scripts/copy-public-assets.mjs

@@ -1,4 +1,5 @@
-import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import { cp, mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -6,41 +7,48 @@ const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
 const consumerRoot = packageRoot.includes("node_modules")
     ? join(packageRoot, "../../..")
     : packageRoot;
-const publicRoot = join(consumerRoot, "public", "landings", "team");
-const styleFiles = [
-    "team-landing.css",
-    "TeamHero.css",
-    "CompanyWorks.css",
-    "BobMasterPlan.css",
-    "TeamComicScenes.css",
-    "HumanTouch.css",
-    "ProductManifesto.css",
-    "BobModelBook.css",
-    "SupportTransition.css",
-    "MemoryWall.css",
-    "TeamRoster.css",
-    "BehindJoke.css",
-];
+const publicRoot = join(consumerRoot, "public", "landings");
+const srcLandingRoot = join(packageRoot, "src", "landing");
 
-const copies = [
-    ["src/landing/team/assets", "assets"],
-];
+const landings = await readdir(srcLandingRoot);
 
-await mkdir(publicRoot, { recursive: true });
+for (const name of landings) {
+    const landingPublicDir = join(publicRoot, name);
+    await mkdir(landingPublicDir, { recursive: true });
 
-for (const [from, to] of copies) {
-    await cp(join(packageRoot, from), join(publicRoot, to), {
-        recursive: true,
-        force: true,
-        errorOnExist: false,
-    });
-}
+    const stylesRoot = join(srcLandingRoot, name, "styles");
+    let hasStyles = false;
+    try {
+        const styleFiles = (await readdir(stylesRoot)).filter((f) =>
+            f.endsWith(".css"),
+        );
+        if (styleFiles.length > 0) {
+            const cssBundle = await Promise.all(
+                styleFiles.map(async (file) => {
+                    const content = await readFile(join(stylesRoot, file), "utf8");
+                    return `/* ${file} */\n${content.trim()}\n`;
+                }),
+            );
+            await writeFile(
+                join(landingPublicDir, `${name}.css`),
+                `${cssBundle.join("\n")}\n`,
+            );
+            hasStyles = true;
+        }
+    } catch {
+        // no styles dir
+    }
 
-const cssBundle = await Promise.all(
-    styleFiles.map(async (file) => {
-        const content = await readFile(join(packageRoot, "src", "landing", "team", "styles", file), "utf8");
-        return `/* ${file} */\n${content.trim()}\n`;
-    }),
-);
+    if (!hasStyles) {
+        console.log(`[landings] No styles found for "${name}"`);
+    }
 
-await writeFile(join(publicRoot, "team.css"), `${cssBundle.join("\n")}\n`);
+    const assetsDir = join(srcLandingRoot, name, "assets");
+    if (existsSync(assetsDir)) {
+        await cp(assetsDir, join(landingPublicDir, "assets"), {
+            recursive: true,
+            force: true,
+            errorOnExist: false,
+        });
+    }
+}

package/src/landing/team/components/BobModelBook.astro

@@ -37,10 +37,10 @@ const { t } = Astro.props;
 const poses = [
     { image: coverPose, variant: 'large' },
     { image: attitudePose, variant: 'portrait' },
-    { image: expensivePose, variant: 'wide' },
-    { image: finalPose, variant: 'portrait' },
-    { image: pose05, variant: 'portrait' },
-    { image: pose06, variant: 'wide' },
+    { image: expensivePose, variant: 'wide', locked: true },
+    { image: finalPose, variant: 'portrait', locked: true },
+    { image: pose05, variant: 'portrait', locked: true },
+    { image: pose06, variant: 'wide', locked: true },
     { image: pose07Locked, variant: 'portrait', locked: true },
     { image: pose08Locked, variant: 'portrait', locked: true },
     { image: pose09Locked, variant: 'wide', locked: true },

package/src/landing/team/components/CompanyWorks.astro

@@ -11,15 +11,13 @@ interface Props {
         eyebrow: string;
         title: string;
         text: string;
-        secretDossier: string;
-        closeDossier: string;
         members: {
-            bob: { name: string; role: string; status: string; dossier: string };
-            terra: { name: string; role: string; status: string; dossier: string };
-            ambar: { name: string; role: string; status: string; dossier: string };
-            ambarChiquilla: { name: string; role: string; status: string; dossier: string };
-            drac: { name: string; role: string; status: string; dossier: string };
-            jj: { name: string; role: string; status: string; dossier: string };
+            bob: { name: string; role: string; status: string };
+            terra: { name: string; role: string; status: string };
+            ambar: { name: string; role: string; status: string };
+            ambarChiquilla: { name: string; role: string; status: string };
+            drac: { name: string; role: string; status: string };
+            jj: { name: string; role: string; status: string };
         };
     };
 }
@@ -32,9 +30,7 @@ const members = [
         name: t.members.bob.name,
         role: t.members.bob.role,
         status: t.members.bob.status,
-        dossier: t.members.bob.dossier,
         hierarchy: 'chief',
-        mark: 'B',
         sprite: bobSprite,
     },
     {
@@ -42,9 +38,7 @@ const members = [
         name: t.members.terra.name,
         role: t.members.terra.role,
         status: t.members.terra.status,
-        dossier: t.members.terra.dossier,
         hierarchy: 'orbit orbit-terra',
-        mark: 'T',
         sprite: terraSprite,
     },
     {
@@ -52,9 +46,7 @@ const members = [
         name: t.members.ambar.name,
         role: t.members.ambar.role,
         status: t.members.ambar.status,
-        dossier: t.members.ambar.dossier,
         hierarchy: 'orbit orbit-ambar',
-        mark: 'A',
         sprite: ambarSprite,
     },
     {
@@ -62,9 +54,7 @@ const members = [
         name: t.members.ambarChiquilla.name,
         role: t.members.ambarChiquilla.role,
         status: t.members.ambarChiquilla.status,
-        dossier: t.members.ambarChiquilla.dossier,
         hierarchy: 'orbit orbit-chiquilla',
-        mark: 'AC',
         sprite: ambarChiquillaSprite,
     },
     {
@@ -72,9 +62,7 @@ const members = [
         name: t.members.drac.name,
         role: t.members.drac.role,
         status: t.members.drac.status,
-        dossier: t.members.drac.dossier,
         hierarchy: 'orbit orbit-drac',
-        mark: 'D',
         sprite: dracSprite,
     },
     {
@@ -82,9 +70,7 @@ const members = [
         name: t.members.jj.name,
         role: t.members.jj.role,
         status: t.members.jj.status,
-        dossier: t.members.jj.dossier,
         hierarchy: 'human',
-        mark: 'JJ',
         sprite: jjSprite,
     },
 ];
@@ -98,18 +84,11 @@ const members = [
             {t.text}
         </p>
 
-        <div class="company-works-system" data-company-grid>
+        <div class="company-works-system">
             <div class="company-works-orbit-ring" aria-hidden="true"></div>
             {
                 members.map((member) => (
-                    <button
-                        class={`company-works-node company-works-node-${member.hierarchy}`}
-                        type="button"
-                        data-dossier-name={member.name}
-                        data-dossier-role={member.role}
-                        data-dossier-status={member.status}
-                        data-dossier-copy={member.dossier}
-                    >
+                    <div class={`company-works-node company-works-node-${member.hierarchy}`}>
                         <span class="company-works-sprite" data-member={member.id} aria-hidden="true">
                             <img
                                 src={member.sprite.src}
@@ -124,57 +103,9 @@ const members = [
                             <span class="company-works-role">{member.role}</span>
                             <span class="company-works-status">{member.status}</span>
                         </span>
-                    </button>
+                    </div>
                 ))
             }
         </div>
     </div>
-
-    <div class="company-works-focus" data-company-focus></div>
-    <aside class="company-works-drawer" data-company-drawer aria-hidden="true">
-        <button class="company-works-drawer-close" type="button" data-company-close aria-label={t.closeDossier}>×</button>
-        <p class="company-works-drawer-eyebrow">{t.secretDossier}</p>
-        <h3 data-company-drawer-name></h3>
-        <p class="company-works-drawer-role" data-company-drawer-role></p>
-        <p class="company-works-drawer-status" data-company-drawer-status></p>
-        <p class="company-works-drawer-copy" data-company-drawer-copy></p>
-    </aside>
 </section>
-
-<script>
-    const drawer = document.querySelector<HTMLElement>('[data-company-drawer]');
-    const closeButton = document.querySelector<HTMLButtonElement>('[data-company-close]');
-    const focusLayer = document.querySelector<HTMLElement>('[data-company-focus]');
-    const closeDrawer = () => {
-        drawer?.classList.remove('is-open');
-        drawer?.setAttribute('aria-hidden', 'true');
-        focusLayer?.classList.remove('is-drawer-open');
-    };
-
-    document.querySelectorAll<HTMLButtonElement>('[data-dossier-name]').forEach((card) => {
-        card.addEventListener('mouseenter', () => {
-            focusLayer?.classList.add('is-active');
-            card.classList.add('is-focused');
-        });
-
-        card.addEventListener('mouseleave', () => {
-            focusLayer?.classList.remove('is-active');
-            card.classList.remove('is-focused');
-        });
-
-        card.addEventListener('click', () => {
-            if (!drawer) return;
-
-            drawer.querySelector('[data-company-drawer-name]')!.textContent = card.dataset.dossierName ?? '';
-            drawer.querySelector('[data-company-drawer-role]')!.textContent = card.dataset.dossierRole ?? '';
-            drawer.querySelector('[data-company-drawer-status]')!.textContent = card.dataset.dossierStatus ?? '';
-            drawer.querySelector('[data-company-drawer-copy]')!.textContent = card.dataset.dossierCopy ?? '';
-            drawer.classList.add('is-open');
-            drawer.setAttribute('aria-hidden', 'false');
-            focusLayer?.classList.add('is-drawer-open');
-        });
-    });
-
-    closeButton?.addEventListener('click', closeDrawer);
-    focusLayer?.addEventListener('click', closeDrawer);
-</script>

package/src/landing/team/components/HumanTouch.astro

@@ -3,15 +3,16 @@ import tinderProfile from "../assets/jjlmoya/tinder-profile.webp";
 import tinderProfileWinked from "../assets/jjlmoya/tinder-profile-winked.webp";
 import bobPointingSprite from "../assets/bob-model-book/bob-pointing.webp";
 import bobTechnoTrack from "../assets/music/bob-techno.mp3";
+import { Icon } from "astro-icon/components";
 
 interface Props {
     t: {
+        eyebrow: string;
+        title: string;
         textBefore: string;
         wordWithRagebait: string;
         textAfter: string;
         ragebaitExplanation: string;
-        eyebrow: string;
-        title: string;
         chipsLabel: string;
         boardLabel: string;
         alert: string;
@@ -38,17 +39,52 @@ interface Props {
 const { t } = Astro.props;
 ---
 
-<section class="team-section human-touch" aria-labelledby="human-touch-title" data-human-touch>
-    <div class="human-touch-party-player" aria-label={t.partyPlayer.audioLabel}>
-        <audio class="human-touch-audio" preload="metadata" data-human-touch-audio>
-            <source src={bobTechnoTrack} type="audio/mpeg" />
-        </audio>
+<section
+    class="team-section human-touch"
+    aria-labelledby="human-touch-title"
+    data-human-touch
+>
+    <div class="human-touch-bg-wrap" aria-hidden="true">
+        <div class="human-touch-equalizer">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    <audio
+        src={bobTechnoTrack}
+        data-human-touch-audio
+        class="human-touch-audio"
+        loop
+    ></audio>
+
+    <div class="human-touch-border-player top-border-player" aria-label={t.partyPlayer.audioLabel}>
         <button
-            class="human-touch-player-toggle"
+            class="human-touch-border-toggle"
             type="button"
+            data-human-touch-toggle
+            data-play-label={t.partyPlayer.playLabel}
+            data-pause-label={t.partyPlayer.pauseLabel}
             aria-label={t.partyPlayer.playLabel}
+        >
+            <span class="border-toggle-icon"></span>
+        </button>
+        <div class="human-touch-border-progress-bar" data-human-touch-seek aria-hidden="true">
+            <span data-human-touch-progress></span>
+        </div>
+    </div>
+
+    <div
+        class="human-touch-party-player"
+        aria-label={t.partyPlayer.audioLabel}
+    >
+        <button
+            class="human-touch-player-toggle"
+            type="button"
             data-play-label={t.partyPlayer.playLabel}
             data-pause-label={t.partyPlayer.pauseLabel}
+            aria-label={t.partyPlayer.playLabel}
             data-human-touch-toggle
         >
             <span class="human-touch-player-icon" aria-hidden="true"></span>
@@ -83,12 +119,6 @@ const { t } = Astro.props;
         </div>
         <span class="human-touch-player-time" data-human-touch-current aria-hidden="true">0:00</span>
     </div>
-    <div class="human-touch-equalizer" aria-hidden="true">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-    </div>
 
     <div class="team-landing-inner">
         <div class="human-touch-shell">
@@ -179,33 +209,57 @@ const { t } = Astro.props;
                     <a
                         href="https://es.linkedin.com/in/jjlmoya"
                         target="_blank"
-                        rel="noreferrer">LinkedIn</a
+                        rel="noreferrer"
+                        aria-label="LinkedIn"
                     >
+                        <Icon name="mdi:linkedin" style="width: 24px; height: 24px;" />
+                    </a>
                     <a
                         href="https://github.com/jjlmoya"
                         target="_blank"
-                        rel="noreferrer">GitHub</a
+                        rel="noreferrer"
+                        aria-label="GitHub"
                     >
+                        <Icon name="mdi:github" style="width: 24px; height: 24px;" />
+                    </a>
                 </div>
             </div>
         </div>
     </div>
+
+    <div class="human-touch-border-player bottom-border-player" aria-label={t.partyPlayer.audioLabel}>
+        <button
+            class="human-touch-border-toggle"
+            type="button"
+            data-human-touch-toggle
+            data-play-label={t.partyPlayer.playLabel}
+            data-pause-label={t.partyPlayer.pauseLabel}
+            aria-label={t.partyPlayer.playLabel}
+        >
+            <span class="border-toggle-icon"></span>
+        </button>
+        <div class="human-touch-border-progress-bar" data-human-touch-seek aria-hidden="true">
+            <span data-human-touch-progress></span>
+        </div>
+    </div>
 </section>
 
 <script>
     const humanTouch = document.querySelector<HTMLElement>('[data-human-touch]');
     const humanTouchAudio = document.querySelector<HTMLAudioElement>('[data-human-touch-audio]');
-    const humanTouchToggle = document.querySelector<HTMLButtonElement>('[data-human-touch-toggle]');
-    const humanTouchProgress = document.querySelector<HTMLElement>('[data-human-touch-progress]');
-    const humanTouchSeek = document.querySelector<HTMLElement>('[data-human-touch-seek]');
+    const humanTouchToggles = document.querySelectorAll<HTMLButtonElement>('[data-human-touch-toggle]');
+    const humanTouchProgresses = document.querySelectorAll<HTMLElement>('[data-human-touch-progress]');
+    const humanTouchSeeks = document.querySelectorAll<HTMLElement>('[data-human-touch-seek]');
     const humanTouchCurrent = document.querySelector<HTMLElement>('[data-human-touch-current]');
 
-    humanTouchSeek?.addEventListener('click', (event) => {
-        if (!humanTouchAudio || !humanTouchSeek || !humanTouchAudio.duration) return;
+    humanTouchSeeks.forEach((seek) => {
+        seek.addEventListener('click', (event) => {
+            if (!humanTouchAudio || !seek || !humanTouchAudio.duration) return;
 
-        const bounds = humanTouchSeek.getBoundingClientRect();
-        const ratio = Math.min(1, Math.max(0, (event.clientX - bounds.left) / bounds.width));
-        humanTouchAudio.currentTime = ratio * humanTouchAudio.duration;
+            const bounds = seek.getBoundingClientRect();
+            const ratio = Math.min(1, Math.max(0, (event.clientX - bounds.left) / bounds.width));
+            humanTouchAudio.currentTime = ratio * humanTouchAudio.duration;
+        });
     });
 
     const formatAudioTime = (seconds: number) => {
@@ -223,40 +277,50 @@ const { t } = Astro.props;
         const currentTime = humanTouchAudio.currentTime || 0;
         const progress = duration > 0 ? currentTime / duration * 100 : 0;
 
-        if (humanTouchProgress) humanTouchProgress.style.inlineSize = `${progress}%`;
+        humanTouchProgresses.forEach((el) => {
+            el.style.inlineSize = `${progress}%`;
+        });
         if (humanTouchCurrent) humanTouchCurrent.textContent = formatAudioTime(currentTime);
     };
 
     humanTouchAudio?.addEventListener('play', () => {
         humanTouch?.classList.add('is-partying');
-        humanTouchToggle?.classList.add('is-playing');
-        humanTouchToggle?.setAttribute('aria-label', humanTouchToggle.dataset.pauseLabel ?? '');
+        humanTouchToggles.forEach((btn) => {
+            btn.classList.add('is-playing');
+            btn.setAttribute('aria-label', btn.dataset.pauseLabel ?? '');
+        });
     });
 
     humanTouchAudio?.addEventListener('pause', () => {
         humanTouch?.classList.remove('is-partying');
-        humanTouchToggle?.classList.remove('is-playing');
-        humanTouchToggle?.setAttribute('aria-label', humanTouchToggle.dataset.playLabel ?? '');
+        humanTouchToggles.forEach((btn) => {
+            btn.classList.remove('is-playing');
+            btn.setAttribute('aria-label', btn.dataset.playLabel ?? '');
+        });
     });
 
     humanTouchAudio?.addEventListener('ended', () => {
         humanTouch?.classList.remove('is-partying');
-        humanTouchToggle?.classList.remove('is-playing');
-        humanTouchToggle?.setAttribute('aria-label', humanTouchToggle.dataset.playLabel ?? '');
+        humanTouchToggles.forEach((btn) => {
+            btn.classList.remove('is-playing');
+            btn.setAttribute('aria-label', btn.dataset.playLabel ?? '');
+        });
         updatePlayer();
     });
 
     humanTouchAudio?.addEventListener('loadedmetadata', updatePlayer);
     humanTouchAudio?.addEventListener('timeupdate', updatePlayer);
 
-    humanTouchToggle?.addEventListener('click', () => {
-        if (!humanTouchAudio) return;
+    humanTouchToggles.forEach((btn) => {
+        btn.addEventListener('click', () => {
+            if (!humanTouchAudio) return;
 
-        if (humanTouchAudio.paused) {
-            void humanTouchAudio.play();
-            return;
-        }
+            if (humanTouchAudio.paused) {
+                void humanTouchAudio.play();
+                return;
+            }
 
-        humanTouchAudio.pause();
+            humanTouchAudio.pause();
+        });
     });
 </script>

package/src/landing/team/components/TeamHero.astro

@@ -25,18 +25,27 @@ const { t } = Astro.props;
             <slot name="title" />
             <p class="team-hero-lead">{t.lead}</p>
         </div>
-        <div
-            class="team-hero-stage"
-            aria-label={t.stageLabel}
-        >
-            <img
-                class="team-hero-scene"
-                src={heroSceneUrl.src}
-                width={heroSceneUrl.width}
-                height={heroSceneUrl.height}
-                alt={t.sceneAlt}
-                loading="eager"
-            />
+        <div class="team-hero-stage">
+            <div class="team-hero-window" aria-label={t.stageLabel}>
+                <div class="team-hero-window-header">
+                    <div class="team-hero-window-dots">
+                        <span class="window-dot red"></span>
+                        <span class="window-dot yellow"></span>
+                        <span class="window-dot green"></span>
+                    </div>
+                    <span class="team-hero-window-title">gamebob_studio.webp</span>
+                </div>
+                <div class="team-hero-window-content">
+                    <img
+                        class="team-hero-scene"
+                        src={heroSceneUrl.src}
+                        width={heroSceneUrl.width}
+                        height={heroSceneUrl.height}
+                        alt={t.sceneAlt}
+                        loading="eager"
+                    />
+                </div>
+            </div>
         </div>
     </div>
 </section>

package/src/landing/team/entry.ts

@@ -2,7 +2,6 @@ import type { LandingEntry } from '../../types';
 
 const assetsBasePath = '/landings/team/assets';
 const cssPath = '/landings/team/team.css';
-const openGraphImage = `${assetsBasePath}/gamebob-team-hero.webp`;
 
 export const teamEntry: LandingEntry = {
     id: 'team',
@@ -11,13 +10,24 @@ export const teamEntry: LandingEntry = {
         cssPath,
     },
     seo: {
-        title: 'GameBob Team',
-        description: 'A warm team landing about Bob, the feline board of directors, one solo developer in Mallorca, and the companions remembered along the way.',
-        image: openGraphImage,
-        openGraphImage,
+        image: `${assetsBasePath}/team-og.webp`,
+        openGraphImage: `${assetsBasePath}/team-og.webp`,
     },
     i18n: {
-        en: () => import('./i18n/en').then((m) => m.cardContent),
         es: () => import('./i18n/es').then((m) => m.cardContent),
+        en: () => import('./i18n/en').then((m) => m.cardContent),
+        fr: () => import('./i18n/fr').then((m) => m.cardContent),
+        de: () => import('./i18n/de').then((m) => m.cardContent),
+        it: () => import('./i18n/it').then((m) => m.cardContent),
+        pt: () => import('./i18n/pt').then((m) => m.cardContent),
+        nl: () => import('./i18n/nl').then((m) => m.cardContent),
+        sv: () => import('./i18n/sv').then((m) => m.cardContent),
+        pl: () => import('./i18n/pl').then((m) => m.cardContent),
+        id: () => import('./i18n/id').then((m) => m.cardContent),
+        tr: () => import('./i18n/tr').then((m) => m.cardContent),
+        ru: () => import('./i18n/ru').then((m) => m.cardContent),
+        ja: () => import('./i18n/ja').then((m) => m.cardContent),
+        ko: () => import('./i18n/ko').then((m) => m.cardContent),
+        zh: () => import('./i18n/zh').then((m) => m.cardContent),
     }
 };