@bleedingdev/modern-js-create 3.2.0-ultramodern.98 → 3.4.0-ultramodern.0

package/template-workspace/scripts/bootstrap-agent-skills.mjs

@@ -7,6 +7,16 @@ const root = process.cwd();
 const lockPath = path.join(root, '.agents/skills-lock.json');
 const checkOnly = process.argv.includes('--check');
 const force = process.argv.includes('--force');
+const postinstall = process.argv.includes('--postinstall');
+const truthy = value => /^(1|true|yes|on)$/i.test(String(value ?? ''));
+const falsy = value => /^(0|false|no|off)$/i.test(String(value ?? ''));
+const skipRequested =
+  truthy(process.env.ULTRAMODERN_SKIP_AGENT_SKILLS) ||
+  falsy(process.env.ULTRAMODERN_AGENT_SKILLS);
+const cloneTimeoutMs = Number.parseInt(
+  process.env.ULTRAMODERN_AGENT_SKILLS_CLONE_TIMEOUT_MS ?? '60000',
+  10,
+);
 
 const readJson = filePath => JSON.parse(fs.readFileSync(filePath, 'utf-8'));
 
@@ -15,6 +25,7 @@ const run = (command, args, options = {}) =>
     cwd: options.cwd ?? root,
     encoding: 'utf-8',
     stdio: options.stdio ?? ['ignore', 'pipe', 'pipe'],
+    timeout: options.timeout,
   });
 
 const commandExists = command => {
@@ -26,45 +37,14 @@ const commandExists = command => {
   }
 };
 
-const runShell = script =>
-  run('sh', ['-lc', script], {
-    stdio: 'inherit',
-  });
-
-const installGit = () => {
+const requireGit = () => {
   if (commandExists('git')) {
     return;
   }
 
-  if (commandExists('brew')) {
-    run('brew', ['install', 'git'], { stdio: 'inherit' });
-  } else if (process.platform === 'linux' && commandExists('apt-get')) {
-    const sudo =
-      typeof process.getuid === 'function' && process.getuid() === 0
-        ? ''
-        : 'sudo ';
-    runShell(`${sudo}apt-get update && ${sudo}apt-get install -y git`);
-  } else if (process.platform === 'linux' && commandExists('dnf')) {
-    const sudo =
-      typeof process.getuid === 'function' && process.getuid() === 0
-        ? ''
-        : 'sudo ';
-    runShell(`${sudo}dnf install -y git`);
-  } else if (process.platform === 'linux' && commandExists('yum')) {
-    const sudo =
-      typeof process.getuid === 'function' && process.getuid() === 0
-        ? ''
-        : 'sudo ';
-    runShell(`${sudo}yum install -y git`);
-  } else if (process.platform === 'linux' && commandExists('apk')) {
-    runShell('apk add --no-cache git');
-  }
-
-  if (!commandExists('git')) {
-    throw new Error(
-      'Git is required for UltraModern setup. Install git and run pnpm skills:install again.',
-    );
-  }
+  throw new Error(
+    'Git is required to install agent skills. Install git yourself (for example "brew install git" or "sudo apt-get install git") and run pnpm skills:install again. This script never installs system packages on your behalf.',
+  );
 };
 
 const isInsideGitWorkTree = () => {
@@ -106,12 +86,14 @@ const removeTree = dir =>
 
 const cloneSource = (source, targetDir) => {
   if (source.commit) {
-    run('git', ['init', targetDir]);
+    run('git', ['init', targetDir], { timeout: 30000 });
     run('git', ['remote', 'add', 'origin', source.repository], {
       cwd: targetDir,
+      timeout: 30000,
     });
     run('git', ['fetch', '--depth', '1', '--quiet', 'origin', source.commit], {
       cwd: targetDir,
+      timeout: cloneTimeoutMs,
     });
     run(
       'git',
@@ -123,32 +105,24 @@ const cloneSource = (source, targetDir) => {
         '--quiet',
         'FETCH_HEAD',
       ],
-      { cwd: targetDir },
+      { cwd: targetDir, timeout: 30000 },
     );
     return;
   }
 
   const repo = source.repository.replace(/^https:\/\/github.com\//u, '');
   try {
-    run('gh', [
-      'repo',
-      'clone',
-      repo,
-      targetDir,
-      '--',
-      '--depth',
-      '1',
-      '--quiet',
-    ]);
+    run(
+      'gh',
+      ['repo', 'clone', repo, targetDir, '--', '--depth', '1', '--quiet'],
+      { timeout: cloneTimeoutMs },
+    );
   } catch {
-    run('git', [
-      'clone',
-      '--depth',
-      '1',
-      '--quiet',
-      source.repository,
-      targetDir,
-    ]);
+    run(
+      'git',
+      ['clone', '--depth', '1', '--quiet', source.repository, targetDir],
+      { timeout: cloneTimeoutMs },
+    );
   }
 };
 
@@ -178,21 +152,37 @@ const requiredCloneSources = sources.filter(
 const optionalCloneSources = sources.filter(
   source => source.install === 'clone-if-authorized',
 );
-const requiredSkills = [
-  ...(lock.baseline ?? []),
-  ...requiredCloneSources.flatMap(source => source.baseline ?? []),
-].filter(
-  (skill, index, skills) =>
-    skills.findIndex(candidate => candidate.name === skill.name) === index,
+const cloneSourceSkillNames = new Set(
+  [...requiredCloneSources, ...optionalCloneSources].flatMap(source =>
+    (source.baseline ?? []).map(skill => skill.name),
+  ),
 );
+const vendoredRequiredSkills = (lock.baseline ?? []).filter(
+  skill => !cloneSourceSkillNames.has(skill.name),
+);
+const cloneOptIn = truthy(process.env.ULTRAMODERN_AGENT_SKILLS);
+
+if (skipRequested) {
+  const reason = 'agent skills bootstrap skipped by environment';
+  if (checkOnly) {
+    console.log(reason);
+    process.exit(0);
+  }
+  console.log(reason);
+  installLefthook();
+  process.exit(0);
+}
 
 if (checkOnly) {
-  const missingRequired = requiredSkills
+  const missingVendored = vendoredRequiredSkills
     .map(skill => skill.name)
     .filter(
       skillName => !fs.existsSync(path.join(installDir, skillName, 'SKILL.md')),
     );
-  const missingOptional = optionalCloneSources.flatMap(source =>
+  const missingCloneInstalled = [
+    ...requiredCloneSources,
+    ...optionalCloneSources,
+  ].flatMap(source =>
     (source.baseline ?? [])
       .map(skill => skill.name)
       .filter(
@@ -201,27 +191,33 @@ if (checkOnly) {
       ),
   );
 
-  if (missingRequired.length > 0) {
+  if (missingVendored.length > 0) {
     console.error(
-      `Required agent skills not installed: ${missingRequired.join(', ')}. Run pnpm skills:install.`,
+      `Required agent skills not installed: ${missingVendored.join(', ')}. Run pnpm skills:install.`,
     );
     process.exit(1);
   }
 
-  if (missingOptional.length > 0) {
+  if (missingCloneInstalled.length > 0) {
     console.warn(
-      `Private skills not installed: ${missingOptional.join(', ')}. Run pnpm skills:install if you have access.`,
+      `Clone-installed agent skills not present: ${missingCloneInstalled.join(', ')}. Run pnpm skills:install to fetch them.`,
     );
   } else {
-    console.log('Required and private agent skills are installed.');
-    process.exit(0);
+    console.log('All pinned agent skills are installed.');
   }
-  console.log('Required agent skills are installed.');
+  process.exit(0);
+}
+
+if (postinstall && !cloneOptIn) {
+  console.log(
+    'Skipping agent skill repository clones during postinstall. Run pnpm skills:install (or set ULTRAMODERN_AGENT_SKILLS=1 before installing) to fetch them.',
+  );
+  installLefthook();
   process.exit(0);
 }
 
 fs.mkdirSync(installDir, { recursive: true });
-installGit();
+requireGit();
 initializeGitRepository();
 
 for (const source of [...requiredCloneSources, ...optionalCloneSources]) {
@@ -230,10 +226,8 @@ for (const source of [...requiredCloneSources, ...optionalCloneSources]) {
     try {
       cloneSource(source, tempDir);
     } catch (error) {
-      if (source.install === 'clone-if-authorized') {
-        console.warn(
-          `Skipping ${source.repository}; current developer may not have access.`,
-        );
+      if (source.install === 'clone-if-authorized' || postinstall) {
+        console.warn(`Skipping ${source.repository}; ${error.message}`);
         continue;
       }
       throw error;

package/template-workspace/scripts/setup-agent-reference-repos.mjs

@@ -122,6 +122,12 @@ function porcelainStatus() {
   return run('git', ['status', '--porcelain'], { timeout: 30000 });
 }
 
+function commitInstallerChanges(message) {
+  run('git', ['commit', '--no-verify', '-m', message], {
+    timeout: 120000,
+  });
+}
+
 function ensureGitRepository() {
   if (!isGitWorkTree()) {
     if (checkOnly) {
@@ -139,9 +145,7 @@ function ensureGitRepository() {
     }
     log('creating initial workspace commit before adding reference subtrees');
     run('git', ['add', '-A'], { timeout: 30000 });
-    run('git', ['commit', '-m', 'Initialize UltraModern workspace'], {
-      timeout: 120000,
-    });
+    commitInstallerChanges('Initialize UltraModern workspace');
     return true;
   }
 
@@ -311,9 +315,7 @@ function commitManifestIfChanged() {
     return;
   }
   run('git', ['add', manifestPath], { timeout: 30000 });
-  run('git', ['commit', '-m', 'Record agent reference repo manifest'], {
-    timeout: 120000,
-  });
+  commitInstallerChanges('Record agent reference repo manifest');
 }
 
 function main() {

package/templates/app/shell-frame.tsx

@@ -0,0 +1,49 @@
+import { useLocalizedLocation, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import type { ReactNode } from 'react';
+import { Header, StatusBadge } from './vertical-components';
+
+interface ShellFrameProps {
+  children: ReactNode;
+}
+
+export default function ShellFrame({ children }: ShellFrameProps) {
+  const { i18nInstance, language } = useModernI18n();
+  const t = i18nInstance['t'].bind(i18nInstance);
+  const { alternates } = useLocalizedLocation();
+
+  return (
+    <main className="shell:min-h-screen shell:bg-um-canvas shell:px-4 shell:py-5 shell:text-um-foreground shell:sm:px-6 shell:lg:px-12">
+      <div className="shell:mx-auto shell:flex shell:min-h-20 shell:max-w-7xl shell:flex-col shell:items-start shell:gap-3 shell:bg-white/90 shell:px-4 shell:py-3 shell:shadow-xl shell:shadow-stone-900/10 shell:sm:px-6 shell:md:flex-row shell:md:flex-wrap shell:md:items-center shell:md:justify-between">
+        <Header />
+        <div className="shell:flex shell:min-w-0 shell:flex-wrap shell:items-center shell:gap-2 shell:md:ml-auto">
+          <label className="shell:sr-only" htmlFor="ultramodern-language">
+            {t('shell.language.switcher')}
+          </label>
+          <select
+            aria-label={t('shell.language.switcher')}
+            className="shell:h-10 shell:w-10 shell:cursor-pointer shell:appearance-none shell:border-0 shell:bg-transparent shell:p-0 shell:text-center shell:text-3xl shell:font-black shell:leading-none shell:text-stone-950 shell:shadow-none shell:[appearance:none] shell:[text-align-last:center] shell:focus-visible:rounded-md shell:focus-visible:outline-3 shell:focus-visible:outline-offset-2 shell:focus-visible:outline-emerald-700/40 shell:[&::-ms-expand]:hidden shell:[&::picker-icon]:hidden shell:[&_option]:text-xl"
+            id="ultramodern-language"
+            name="language"
+            onChange={event => {
+              const nextLanguage = event.currentTarget.value;
+              const targetHref = alternates[nextLanguage];
+              if (targetHref !== undefined) {
+                window.location.assign(targetHref);
+              }
+            }}
+            value={language}
+          >
+            <option aria-label={t('shell.language.en')} value="en">
+              🇬🇧
+            </option>
+            <option aria-label={t('shell.language.cs')} value="cs">
+              🇨🇿
+            </option>
+          </select>
+          <StatusBadge />
+        </div>
+      </div>
+      {children}
+    </main>
+  );
+}

package/templates/app/ultramodern-route-head.tsx.handlebars

@@ -0,0 +1,142 @@
+import { useLocalizedLocation, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { Helmet } from '@modern-js/runtime/head';
+import {
+  ultramodernRouteMetadata,
+} from './ultramodern-route-metadata';
+import type { RouteJsonLd } from './ultramodern-jsonld';
+
+const appName = {{appDisplayNameJson}};
+const fallbackLanguage = 'en';
+const supportedLanguages = ['en', 'cs'] as const;
+type SupportedLanguage = (typeof supportedLanguages)[number];
+type RouteMetadata = (typeof ultramodernRouteMetadata)[number] & {
+  readonly jsonLd?: RouteJsonLd;
+};
+
+const routeMetadata = ultramodernRouteMetadata as readonly RouteMetadata[];
+
+const isSupportedLanguage = (value: string): value is SupportedLanguage =>
+  supportedLanguages.includes(value as SupportedLanguage);
+
+const normalisePath = (pathname: string) => {
+  const normalised = pathname.replaceAll(/\/+/gu, '/').replace(/\/+$/u, '');
+  return normalised.length > 0 ? normalised : '/';
+};
+
+const stripLanguagePrefix = (pathname: string) => {
+  const segments = normalisePath(pathname).split('/').filter(Boolean);
+  if (segments.length > 0 && isSupportedLanguage(segments[0] ?? '')) {
+    segments.shift();
+  }
+  return `/${segments.join('/')}`;
+};
+
+const escapeRegExp = (value: string) =>
+  value.replaceAll(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+
+const paramName = (segment: string) => segment.slice(1).replace(/\?$/u, '');
+
+const matchPattern = (pathname: string, pattern: string) => {
+  const names: string[] = [];
+  const source = normalisePath(pattern)
+    .split('/')
+    .filter(Boolean)
+    .map(segment => {
+      if (segment.startsWith(':')) {
+        names.push(paramName(segment));
+        return segment.endsWith('?') ? '(?:/([^/]+))?' : '/([^/]+)';
+      }
+      return `/${escapeRegExp(segment)}`;
+    })
+    .join('');
+  const match = new RegExp(`^${source || '/'}$`, 'u').exec(
+    normalisePath(pathname),
+  );
+
+  if (match === null) {
+    return;
+  }
+
+  const params: Record<string, string> = {};
+  for (const [index, name] of names.entries()) {
+    params[name] = decodeURIComponent(match[index + 1] ?? '');
+  }
+  return params;
+};
+
+const resolveRouteMetadata = (pathname: string) => {
+  const pathWithoutLanguage = stripLanguagePrefix(pathname);
+
+  for (const route of routeMetadata) {
+    const canonicalParams = matchPattern(pathWithoutLanguage, route.canonicalPath);
+    if (canonicalParams !== undefined) {
+      return route;
+    }
+
+    for (const language of supportedLanguages) {
+      const params = matchPattern(pathWithoutLanguage, route.localisedPaths[language]);
+      if (params !== undefined) {
+        return route;
+      }
+    }
+  }
+
+  return routeMetadata[0];
+};
+
+const absoluteUrl = (pathname: string) => {
+  const origin = ULTRAMODERN_SITE_URL.replace(/\/+$/u, '');
+  return `${origin}${pathname}`;
+};
+
+const sanitiseJsonLd = (value: RouteJsonLd) =>
+  JSON.stringify(value).replaceAll('<', '\\u003c');
+
+export const UltramodernRouteHead = () => {
+  const { i18nInstance } = useModernI18n();
+  const t = i18nInstance['t'].bind(i18nInstance);
+  const { canonical, alternates } = useLocalizedLocation();
+  const route = resolveRouteMetadata(canonical);
+  const title = route ? t(route.titleKey) : appName;
+  const description = route ? t(route.descriptionKey) : appName;
+  const canonicalUrl = absoluteUrl(alternates[fallbackLanguage] ?? `/${fallbackLanguage}`);
+  const indexable = route?.public === true && route?.indexable === true;
+  const jsonLd = indexable ? route?.jsonLd : undefined;
+
+  return (
+    <Helmet htmlAttributes={{ lang: i18nInstance.language ?? fallbackLanguage }}>
+      <title>{title}</title>
+      <meta content={description} name="description" />
+      <meta content={indexable ? 'index, follow' : 'noindex, nofollow'} name="robots" />
+      {indexable && (
+        <>
+          <link rel="canonical" href={canonicalUrl} />
+          {supportedLanguages.map(code => (
+            <link
+              href={absoluteUrl(alternates[code] ?? `/${code}`)}
+              hrefLang={code}
+              key={code}
+              rel="alternate"
+            />
+          ))}
+          <link
+            href={absoluteUrl(alternates[fallbackLanguage] ?? `/${fallbackLanguage}`)}
+            hrefLang="x-default"
+            rel="alternate"
+          />
+          <meta content={title} property="og:title" />
+          <meta content={description} property="og:description" />
+          <meta content={canonicalUrl} property="og:url" />
+          <meta content="website" property="og:type" />
+          <meta content={i18nInstance.language ?? fallbackLanguage} property="og:locale" />
+          <meta content="summary_large_image" name="twitter:card" />
+          <meta content={title} name="twitter:title" />
+          <meta content={description} name="twitter:description" />
+          {jsonLd && (
+            <script type="application/ld+json">{sanitiseJsonLd(jsonLd)}</script>
+          )}
+        </>
+      )}
+    </Helmet>
+  );
+};