@jjlmoya/landings 0.4.0

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@jjlmoya/landings",
+    "version": "0.4.0",
+    "type": "module",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "exports": {
+        ".": "./src/index.ts",
+        "./entries": "./src/entries.ts",
+        "./team": "./src/landing/team/landing.astro",
+        "./team/entry": "./src/landing/team/entry.ts"
+    },
+    "files": [
+        "src",
+        "scripts"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "postinstall": "node ./scripts/copy-public-assets.mjs",
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro",
+        "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+        "check": "astro check",
+        "type-check": "astro check",
+        "test": "vitest run",
+        "preversion": "npm run lint && npm run test",
+        "postversion": "git push && git push --tags",
+        "patch": "npm version patch",
+        "minor": "npm version minor",
+        "major": "npm version major"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,astro}": [
+            "eslint --fix"
+        ]
+    },
+    "dependencies": {
+        "@iconify-json/mdi": "^1.2.3",
+        "@jjlmoya/prompagate": "^1.1.0",
+        "@jjlmoya/utils-shared": "1.2.0",
+        "astro": "^6.1.2",
+        "astro-icon": "^1.1.0"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.8",
+        "eslint": "^9.39.4",
+        "eslint-plugin-astro": "^1.6.0",
+        "eslint-plugin-no-comments": "^1.1.10",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.4.0",
+        "postcss-html": "^1.8.1",
+        "schema-dts": "^1.1.2",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-declaration-strict-value": "^1.11.1",
+        "typescript": "^5.4.0",
+        "typescript-eslint": "^8.58.0",
+        "vitest": "^4.1.2"
+    }
+}

package/scripts/copy-public-assets.mjs

@@ -0,0 +1,44 @@
+import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
+const consumerRoot = process.env.INIT_CWD || process.cwd();
+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 copies = [
+    ["src/landing/team/assets", "assets"],
+];
+
+await mkdir(publicRoot, { recursive: true });
+
+for (const [from, to] of copies) {
+    await cp(join(packageRoot, from), join(publicRoot, to), {
+        recursive: true,
+        force: true,
+        errorOnExist: false,
+    });
+}
+
+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`;
+    }),
+);
+
+await writeFile(join(publicRoot, "team.css"), `${cssBundle.join("\n")}\n`);

package/src/components/PreviewNavSidebar.astro

@@ -0,0 +1,102 @@
+---
+interface NavItem {
+    id: string;
+    title: string;
+    href: string;
+    isActive?: boolean;
+}
+
+interface Props {
+    categoryTitle: string;
+    apps?: NavItem[];
+}
+
+const { categoryTitle, apps = [] } = Astro.props;
+---
+
+<nav class="preview-nav-sidebar">
+    <div class="sidebar-header">
+        <h3>{categoryTitle}</h3>
+    </div>
+
+    <ul class="apps-list">
+        {
+            apps.map((app) => (
+                <li>
+                    <a href={app.href} class:list={["app-link", { active: app.isActive }]}>
+                        <span class="app-title">{app.title}</span>
+                    </a>
+                </li>
+            ))
+        }
+    </ul>
+</nav>
+
+<style>
+    .preview-nav-sidebar {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: var(--bg-surface, #0f172a);
+    }
+
+    .sidebar-header {
+        padding: 2rem 1.5rem 1.5rem;
+        border-bottom: 1px solid var(--border-color, #1e293b);
+    }
+
+    .sidebar-header h3 {
+        margin: 0;
+        font-size: 0.75rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        color: var(--text-muted, #94a3b8);
+    }
+
+    .apps-list {
+        list-style: none;
+        margin: 0;
+        padding: 0.5rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .apps-list li {
+        margin: 0;
+    }
+
+    .app-link {
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 1.5rem;
+        color: var(--text-muted, #94a3b8);
+        text-decoration: none;
+        font-size: 0.9375rem;
+        font-weight: 500;
+        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+        border-left: 3px solid transparent;
+        position: relative;
+    }
+
+    .app-link:hover {
+        color: var(--text-base, #f1f5f9);
+        background: rgba(255, 255, 255, 0.08);
+        padding-left: 1.75rem;
+    }
+
+    .app-link.active {
+        color: var(--accent, #f43f5e);
+        background: rgba(244, 63, 94, 0.15);
+        border-left-color: var(--accent, #f43f5e);
+        font-weight: 600;
+    }
+
+    .app-title {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>

package/src/components/PreviewToolbar.astro

@@ -0,0 +1,139 @@
+---
+import type { KnownLocale } from '../types';
+
+interface Props {
+    currentLocale: KnownLocale;
+    localeUrls?: Partial<Record<KnownLocale, string>>;
+}
+
+const { currentLocale, localeUrls = {} } = Astro.props;
+
+const otherLocales = Object.entries(localeUrls).filter(([l]) => l !== currentLocale) as [KnownLocale, string][];
+---
+
+<nav class="preview-toolbar">
+    {
+        otherLocales.length > 0 && (
+            <div class="locale-group">
+                <span class="locale-current">{currentLocale.toUpperCase()}</span>
+                {otherLocales.map(([locale, url]) => (
+                    <a href={url} class="btn-locale">
+                        {locale.toUpperCase()}
+                    </a>
+                ))}
+            </div>
+        )
+    }
+
+    <button id="theme-toggle" class="btn-theme" aria-label="Toggle theme" title="Toggle theme">
+        <span class="theme-icon"></span>
+    </button>
+</nav>
+
+<script>
+    function initToolbar() {
+        const btn = document.getElementById("theme-toggle");
+        if (!btn) return;
+
+        const applyTheme = (theme: string) => {
+            document.documentElement.classList.remove("theme-light", "theme-dark");
+            document.documentElement.classList.add(theme);
+            localStorage.setItem("theme", theme);
+        };
+
+        btn.addEventListener("click", () => {
+            const next = document.documentElement.classList.contains("theme-dark")
+                ? "theme-light"
+                : "theme-dark";
+            applyTheme(next);
+        });
+    }
+
+    initToolbar();
+    document.addEventListener("astro:after-swap", initToolbar);
+</script>
+
+<style>
+    .preview-toolbar {
+        position: fixed;
+        top: 1rem;
+        right: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        z-index: 1000;
+        background: var(--bg-surface);
+        padding: 0.4rem;
+        border-radius: 1rem;
+        border: 1px solid var(--border-color);
+        backdrop-filter: blur(12px);
+    }
+
+    .locale-group {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding-right: 0.5rem;
+        border-right: 1px solid var(--border-color);
+    }
+
+    .locale-current {
+        font-size: 0.7rem;
+        font-weight: 900;
+        color: var(--text-muted);
+        padding: 0.4rem 0.6rem;
+        letter-spacing: 0.08em;
+    }
+
+    .btn-locale {
+        background: transparent;
+        border: 1px solid var(--border-color);
+        color: var(--text-main);
+        cursor: pointer;
+        padding: 0.4rem 0.7rem;
+        border-radius: 0.5rem;
+        font-weight: 700;
+        font-size: 0.7rem;
+        text-decoration: none;
+        letter-spacing: 0.08em;
+        transition: all 0.2s ease;
+    }
+
+    .btn-locale:hover {
+        border-color: var(--accent);
+        color: var(--accent);
+    }
+
+    .btn-theme {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0.5rem;
+        border-radius: 0.6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.2s ease;
+    }
+
+    .btn-theme:hover {
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    .theme-icon {
+        display: block;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+    }
+
+    :global(.theme-light) .theme-icon {
+        background: #f59e0b;
+        box-shadow: 0 0 8px #fbbf24;
+    }
+
+    :global(.theme-dark) .theme-icon {
+        background: #94a3b8;
+        box-shadow: inset -4px -2px 0 #1e293b;
+    }
+</style>

package/src/entries.ts

@@ -0,0 +1,9 @@
+import type { LandingDefinition } from './types';
+import { teamEntry } from './landing/team/entry';
+
+export const ALL_LANDING_DEFINITIONS: LandingDefinition[] = [
+    {
+        entry: teamEntry,
+        LandingComponent: () => import('./landing/team/landing.astro'),
+    }
+];

package/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.astro' {
+  const Component: (_props: Record<string, unknown>) => unknown;
+  export default Component;
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { ALL_LANDING_DEFINITIONS } from './entries';
+
+export type {
+    KnownLocale,
+    LocaleLoader,
+    LocaleMap,
+    LandingCardContent,
+    LandingPublicAssets,
+    LandingSeoMetadata,
+    LandingEntry,
+    LandingDefinition,
+} from './types';

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

@@ -0,0 +1,118 @@
+---
+import MasterPlanScene from "./MasterPlanScene.astro";
+import scene1 from "../assets/webcomic/scene-1.webp";
+import scene2 from "../assets/webcomic/scene-2.webp";
+import scene3 from "../assets/webcomic/scene-3.webp";
+import scene4 from "../assets/webcomic/scene-4.webp";
+import formulaMoney from "../assets/master-plan-money.webp";
+import formulaFood from "../assets/master-plan-food.webp";
+import formulaMoreMoney from "../assets/master-plan-more-money.webp";
+import formulaMoreFood from "../assets/master-plan-more-food.webp";
+import formulaTools from "../assets/master-plan-tools.webp";
+import formulaProjects from "../assets/master-plan-projects.webp";
+
+interface Props {
+    t: {
+        eyebrow: string;
+        title: string;
+        spainFood: string;
+        worldFood: string;
+        humanAssignment: string;
+        languagesLabel: string;
+        text: string;
+        quote: string;
+        closing: string;
+        scenes: {
+            label: string;
+            title: string;
+            text: string;
+            assetAlt: string;
+            formula: string[];
+        }[];
+    };
+}
+
+const { t } = Astro.props;
+
+const scenes = [
+    {
+        number: "01",
+        label: t.scenes[0]!.label,
+        title: t.scenes[0]!.title,
+        text: t.scenes[0]!.text,
+        visual: "money",
+        asset: scene1,
+        assetAlt: t.scenes[0]!.assetAlt,
+        formula: [
+            { label: t.scenes[0]!.formula[0]!, asset: formulaMoney },
+            { label: t.scenes[0]!.formula[1]!, asset: formulaFood },
+        ],
+    },
+    {
+        number: "02",
+        label: t.scenes[1]!.label,
+        title: t.scenes[1]!.title,
+        text: t.scenes[1]!.text,
+        visual: "bowl",
+        asset: scene2,
+        assetAlt: t.scenes[1]!.assetAlt,
+        formula: [
+            { label: t.scenes[1]!.formula[0]!, asset: formulaMoreMoney },
+            { label: t.scenes[1]!.formula[1]!, asset: formulaMoreFood },
+        ],
+    },
+    {
+        number: "03",
+        label: t.scenes[2]!.label,
+        title: t.scenes[2]!.title,
+        text: t.scenes[2]!.text,
+        visual: "map",
+        asset: scene3,
+        assetAlt: t.scenes[2]!.assetAlt,
+        formula: [
+            { label: t.scenes[2]!.formula[0]!, asset: formulaTools },
+            { label: t.scenes[2]!.formula[1]!, asset: formulaMoney },
+        ],
+    },
+    {
+        number: "04",
+        label: t.scenes[3]!.label,
+        title: t.scenes[3]!.title,
+        text: t.scenes[3]!.text,
+        visual: "orders",
+        asset: scene4,
+        assetAlt: t.scenes[3]!.assetAlt,
+        formula: [
+            { label: t.scenes[3]!.formula[0]!, asset: formulaProjects },
+            { label: t.scenes[3]!.formula[1]!, asset: formulaMoreFood },
+        ],
+    },
+];
+
+
+---
+
+<section class="team-section master-plan" aria-labelledby="master-plan-title">
+    <div class="team-landing-inner">
+        <div class="master-plan-header">
+            <p class="team-section-eyebrow">{t.eyebrow}</p>
+            <h2 class="team-section-title" id="master-plan-title">{t.title}</h2>
+            <p class="team-section-text">
+                {t.text}
+            </p>
+        </div>
+
+        <div class="master-plan-strip" aria-label={t.languagesLabel}>
+            {
+                scenes.map((scene) => (
+                    <MasterPlanScene scene={scene} />
+                ))
+            }
+        </div>
+
+        <p class="master-plan-punchline">
+            <span>{t.quote}</span>
+            <strong>{t.closing}</strong>
+        </p>
+    </div>
+</section>