@bleedingdev/modern-js-create 3.2.0-ultramodern.120 → 3.2.0-ultramodern.122

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

@@ -37,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 = () => {
@@ -183,13 +152,15 @@ 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';
@@ -203,12 +174,15 @@ if (skipRequested) {
 }
 
 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(
@@ -217,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]) {

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>
+  );
+};