@bleedingdev/modern-js-create 3.2.0-ultramodern.101 → 3.2.0-ultramodern.103

package/template/config/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="UltraModern.js">
+  <rect width="64" height="64" rx="12" fill="#111827"/>
+  <path fill="#35d399" d="M14 17h9v21c0 5 3 8 9 8s9-3 9-8V17h9v22c0 11-8 18-18 18s-18-7-18-18V17Z"/>
+  <path fill="#ffffff" d="M28 17h8v25h-8z"/>
+</svg>

package/template/config/public/assets/ultramodern-logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" role="img" aria-label="UltraModern.js logo">
+  <rect width="160" height="160" rx="28" fill="#111827"/>
+  <path fill="#35d399" d="M42 36h22v56c0 22 14 34 36 34s36-12 36-34V36h22v57c0 35-24 57-58 57S42 128 42 93V36Z"/>
+  <path fill="#ffffff" d="M76 36h20v74H76z"/>
+  <path fill="#8be8ff" d="M112 36h18v74h-18z"/>
+</svg>

package/template/config/public/locales/cs/translation.json

@@ -33,7 +33,12 @@
       "switcher": "Jazyk"
     },
     "logoAlt": "Logo UltraModern.js",
+    "meta": {
+      "description": "Lokalizovany starter aplikace UltraModern.js se silnymi vychozimi hodnotami pro komplexni produkty.",
+      "title": "UltraModern.js Starter"
+    },
     "name": "Jednoduchy starter aplikace",
+    "skipLink": "Preskocit na obsah",
     "title": "UltraModern.js Starter"
   }
 }

package/template/config/public/locales/en/translation.json

@@ -33,7 +33,12 @@
       "switcher": "Language"
     },
     "logoAlt": "UltraModern.js Logo",
+    "meta": {
+      "description": "A localized UltraModern.js app starter with strong defaults for complex products.",
+      "title": "UltraModern.js Starter"
+    },
     "name": "Simple app starter",
+    "skipLink": "Skip to content",
     "title": "UltraModern.js Starter"
   }
 }

package/template/modern.config.ts.handlebars

@@ -53,6 +53,12 @@ export default defineConfig(
 {{/if}}{{#if enableBff}}
         bffPlugin(),
 {{/if}}      ],
+      html: {
+        title: 'UltraModern.js Starter',
+        meta: {
+          viewport: 'width=device-width, initial-scale=1.0, viewport-fit=cover',
+        },
+      },
       source: {
         globalVars: {
           ULTRAMODERN_SITE_URL: siteUrl,

package/template/scripts/validate-ultramodern.mjs.handlebars

@@ -8,6 +8,9 @@ const packageSourcePath = path.resolve(
   process.cwd(),
   '.modernjs/ultramodern-package-source.json',
 );
+const readText = (relativePath) =>
+  fs.readFileSync(path.resolve(process.cwd(), relativePath), 'utf-8');
+const readJson = (relativePath) => JSON.parse(readText(relativePath));
 const readPnpmConfig = (key) => {
   const env = Object.fromEntries(
     Object.entries(process.env).filter(
@@ -109,6 +112,8 @@ const requiredPaths = [
 {{/if}}
   'config/public/locales/en/translation.json',
   'config/public/locales/cs/translation.json',
+  'config/favicon.svg',
+  'config/public/assets/ultramodern-logo.svg',
   'src/modern-app-env.d.ts',
   'src/routes/index.css',
   'src/routes/layout.tsx',
@@ -241,6 +246,11 @@ const packageJson = JSON.parse(
   fs.readFileSync(path.resolve(process.cwd(), 'package.json'), 'utf-8'),
 );
 const packageSource = JSON.parse(fs.readFileSync(packageSourcePath, 'utf-8'));
+const routePage = readText('src/routes/[lang]/page.tsx');
+const routeCss = readText('src/routes/index.css');
+const modernConfig = readText('modern.config.ts');
+const enLocale = readJson('config/public/locales/en/translation.json');
+const csLocale = readJson('config/public/locales/cs/translation.json');
 const unresolvedTemplateMarker = String.fromCodePoint(123, 123);
 if (JSON.stringify(packageJson).includes(unresolvedTemplateMarker)) {
   console.error('package.json contains unresolved template markers');
@@ -250,6 +260,89 @@ if (JSON.stringify(packageSource).includes(unresolvedTemplateMarker)) {
   console.error('package source metadata contains unresolved template markers');
   process.exit(1);
 }
+
+for (const [fileName, text] of [
+  ['src/routes/[lang]/page.tsx', routePage],
+  ['src/routes/index.css', routeCss],
+  ['modern.config.ts', modernConfig],
+]) {
+  if (text.includes('lf3-static.bytednsdoc.com')) {
+    console.error(`${fileName} must not depend on remote starter assets`);
+    process.exit(1);
+  }
+}
+
+for (const requiredSnippet of [
+  '<Helmet',
+  'htmlAttributes={{',
+  'dir: languageDirections[currentLanguage]',
+  'lang: currentLanguage',
+  '<title>{pageTitle}</title>',
+  '<meta name="description" content={pageDescription} />',
+  '<main id="starter-main" className="starter-main">',
+  '<h1 id="starter-heading" className="title">',
+  'src="/assets/ultramodern-logo.svg"',
+  'height={96}',
+  'width={96}',
+  '<span aria-hidden="true" className="arrow-right" />',
+]) {
+  if (!routePage.includes(requiredSnippet)) {
+    console.error(`Generated route page must retain starter correctness snippet: ${requiredSnippet}`);
+    process.exit(1);
+  }
+}
+
+for (const forbiddenSnippet of ['src="https://', '<div className="title">']) {
+  if (routePage.includes(forbiddenSnippet)) {
+    console.error(`Generated route page must not contain ${forbiddenSnippet}`);
+    process.exit(1);
+  }
+}
+
+for (const requiredSnippet of [
+  'width=device-width, initial-scale=1.0, viewport-fit=cover',
+  "title: 'UltraModern.js Starter'",
+]) {
+  if (!modernConfig.includes(requiredSnippet)) {
+    console.error(`modern.config.ts must retain ${requiredSnippet}`);
+    process.exit(1);
+  }
+}
+if (modernConfig.includes('user-scalable=no') || modernConfig.includes('maximum-scale')) {
+  console.error('modern.config.ts must not disable user zoom');
+  process.exit(1);
+}
+
+for (const requiredSnippet of [
+  'min-block-size: 100dvh',
+  'grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr))',
+  ':focus-visible',
+  '@media (prefers-reduced-motion: reduce)',
+  '.skip-link',
+]) {
+  if (!routeCss.includes(requiredSnippet)) {
+    console.error(`Starter CSS must retain ${requiredSnippet}`);
+    process.exit(1);
+  }
+}
+if (routeCss.includes('width: 1100px') || /\.card:focus(?!-visible)/u.test(routeCss)) {
+  console.error('Starter CSS must not reintroduce fixed grid width or focus transform styling');
+  process.exit(1);
+}
+
+for (const [localeName, locale] of [
+  ['en', enLocale],
+  ['cs', csLocale],
+]) {
+  if (
+    typeof locale.home?.meta?.title !== 'string' ||
+    typeof locale.home?.meta?.description !== 'string' ||
+    typeof locale.home?.skipLink !== 'string'
+  ) {
+    console.error(`${localeName} locale must include starter metadata and skip-link copy`);
+    process.exit(1);
+  }
+}
 {{#unless isSubproject}}
 const skillsLock = JSON.parse(
   fs.readFileSync(path.resolve(process.cwd(), '.agents/skills-lock.json'), 'utf-8'),

package/template/src/routes/[lang]/page.tsx.handlebars

@@ -13,6 +13,10 @@ import { useTranslation } from 'react-i18next';
 const fallbackLanguage = 'en';
 const supportedLanguages = ['en', 'cs'] as const;
 type SupportedLanguage = (typeof supportedLanguages)[number];
+const languageDirections: Record<SupportedLanguage, 'ltr'> = {
+  cs: 'ltr',
+  en: 'ltr',
+};
 
 const isSupportedLanguage = (value: string): value is SupportedLanguage =>
   supportedLanguages.includes(value as SupportedLanguage);
@@ -52,6 +56,8 @@ const Index = () => {
   const { language } = useModernI18n();
   const location = useLocation();
   const currentLanguage = isSupportedLanguage(language) ? language : fallbackLanguage;
+  const pageTitle = t('home.meta.title');
+  const pageDescription = t('home.meta.description');
   const canonicalPath = localizedPath(location.pathname, currentLanguage);
   const suffix = locationSuffix(location);
   const languageOptions = supportedLanguages.map((code) => ({
@@ -81,12 +87,9 @@ const Index = () => {
 {{/if}}
   return (
     <div className="container-box">
-      <Helmet>
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
-        />
+      <Helmet htmlAttributes={{ dir: languageDirections[currentLanguage], lang: currentLanguage }}>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
         <link rel="canonical" href={absoluteUrl(canonicalPath)} />
         {supportedLanguages.map((code) => (
           <link
@@ -102,7 +105,10 @@ const Index = () => {
           rel="alternate"
         />
       </Helmet>
-      <main>
+      <a className="skip-link" href="#starter-main">
+        {t('home.skipLink')}
+      </a>
+      <header className="starter-header">
         <nav className="language-switcher" aria-label={t('home.language.switcher')}>
           {languageOptions.map((option) => (
             <a
@@ -114,24 +120,32 @@ const Index = () => {
             </a>
           ))}
         </nav>
-        <div className="title">
-          {t('home.title')}
+      </header>
+      <main id="starter-main" className="starter-main">
+        <section className="hero" aria-labelledby="starter-heading">
           <img
             alt={t('home.logoAlt')}
             className="logo"
-            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
+            height={96}
+            src="/assets/ultramodern-logo.svg"
+            width={96}
           />
-          <p className="name">{t('home.name')}</p>
-        </div>
-        <p className="description{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
-          {t('home.description.intro')}{' '}
-          <code className="code">presetUltramodern(...)</code>{' '}
-          {t('home.description.afterPreset')}{' '}
-          <code className="code">modern.config.ts</code>{' '}
-          {t('home.description.afterConfig')}{' '}
-          <code className="code">pnpm run ultramodern:check</code>{' '}
-          {t('home.description.end')}
-        </p>
+          <div className="hero-copy">
+            <p className="name">{t('home.name')}</p>
+            <h1 id="starter-heading" className="title">
+              {t('home.title')}
+            </h1>
+            <p className="description{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
+              {t('home.description.intro')}{' '}
+              <code className="code">presetUltramodern(...)</code>{' '}
+              {t('home.description.afterPreset')}{' '}
+              <code className="code">modern.config.ts</code>{' '}
+              {t('home.description.afterConfig')}{' '}
+              <code className="code">pnpm run ultramodern:check</code>{' '}
+              {t('home.description.end')}
+            </p>
+          </div>
+        </section>
 {{#if useEffectBff}}
         <p className="description effect-message{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
           {t('home.bff.response')} <code className="code">{effectMessage}</code>
@@ -146,11 +160,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.guide.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.guide.body')}</p>
           </a>
@@ -162,11 +172,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.config.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.config.body')}</p>
           </a>
@@ -178,11 +184,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.gates.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.gates.body')}</p>
           </a>
@@ -194,11 +196,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.bff.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.bff.body')}</p>
           </a>

package/template/src/routes/index.css.handlebars

@@ -1,129 +1,266 @@
 {{#if enableTailwind}}@import 'tailwindcss';
 
-{{/if}}html,
+{{/if}}:root {
+  color-scheme: light;
+  --starter-bg: #f3f6f4;
+  --starter-surface: #ffffff;
+  --starter-text: #14201b;
+  --starter-muted: #52625b;
+  --starter-border: #cfdad4;
+  --starter-accent: #087f5b;
+  --starter-accent-strong: #075f48;
+  --starter-focus: #0b7285;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  padding: 0;
   margin: 0;
   font-family:
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
     Arial,
     sans-serif;
-  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+  color: var(--starter-text);
+  background: linear-gradient(180deg, #ffffff 0%, var(--starter-bg) 100%);
 }
 
 p {
   margin: 0;
 }
 
-* {
+.container-box,
+.container-box *,
+.container-box *::before,
+.container-box *::after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
 }
 
 .container-box {
-  min-height: 100vh;
-  max-width: 100%;
+  min-block-size: 100dvh;
+  inline-size: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-top: 10px;
+  padding: 1.25rem;
 }
 
-main {
-  flex: 1;
+.skip-link {
+  position: fixed;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
+  z-index: 1;
+  padding: 0.65rem 0.9rem;
+  color: #ffffff;
+  background: var(--starter-accent-strong);
+  border-radius: 6px;
+  transform: translateY(-150%);
+  transition: transform 0.15s ease;
+}
+
+.skip-link:focus-visible {
+  transform: translateY(0);
+}
+
+.starter-header {
+  inline-size: min(100%, 72rem);
+  margin-inline: auto;
+}
+
+.language-switcher {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.language-switcher a {
+  min-block-size: 2.25rem;
+  padding: 0.55rem 0.8rem;
+  color: var(--starter-muted);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 999px;
+}
+
+.language-switcher a:hover {
+  color: var(--starter-text);
+  border-color: var(--starter-border);
+}
+
+.language-switcher a[aria-current='page'] {
+  color: var(--starter-accent-strong);
+  background: rgb(8 127 91 / 10%);
+  border-color: rgb(8 127 91 / 24%);
+}
+
+.starter-main {
+  flex: 1;
+  inline-size: min(100%, 72rem);
+  margin-inline: auto;
+  padding-block: 4rem 2rem;
+  display: grid;
+  gap: 3rem;
+  align-content: center;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 1.5rem;
   align-items: center;
 }
 
 .title {
-  display: flex;
-  margin: 4rem 0 4rem;
-  align-items: center;
-  font-size: 4rem;
-  font-weight: 600;
+  margin: 0.35rem 0 0;
+  font-size: 3.5rem;
+  line-height: 1;
+  font-weight: 750;
+  letter-spacing: 0;
+  text-wrap: balance;
 }
 
 .logo {
-  width: 6rem;
-  margin: 7px 0 0 1rem;
+  inline-size: 6rem;
+  block-size: 6rem;
+  border-radius: 1.25rem;
+  filter: drop-shadow(0 1rem 1.5rem rgb(17 24 39 / 18%));
 }
 
 .name {
-  color: #4ecaff;
+  color: var(--starter-accent-strong);
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.4;
 }
 
 .description {
-  text-align: center;
   line-height: 1.5;
-  font-size: 1.3rem;
-  color: #1b3a42;
-  margin-bottom: 5rem;
+  font-size: 1.15rem;
+  color: var(--starter-muted);
+  max-inline-size: 54rem;
+  margin-block-start: 1rem;
+  text-wrap: pretty;
+}
+
+.effect-message {
+  padding: 1rem;
+  background: var(--starter-surface);
+  border: 1px solid var(--starter-border);
+  border-radius: 8px;
 }
 
 .code {
-  background: #fafafa;
-  border-radius: 12px;
-  padding: 0.6rem 0.9rem;
-  font-size: 1.05rem;
+  display: inline-block;
+  padding: 0.15rem 0.35rem;
+  color: var(--starter-accent-strong);
+  background: rgb(8 127 91 / 10%);
+  border-radius: 6px;
+  font-size: 0.95em;
   font-family:
+    ui-monospace,
+    SFMono-Regular,
     Menlo,
     Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
     monospace;
 }
 
 .container-box .grid {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
   align-items: center;
-  justify-content: center;
-  width: 1100px;
-  margin-top: 3rem;
+  gap: 1rem;
 }
 
 .card {
-  padding: 1.5rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  height: 100px;
+  gap: 0.75rem;
+  min-block-size: 9rem;
+  padding: 1.25rem;
   color: inherit;
   text-decoration: none;
-  transition: 0.15s ease;
-  width: 45%;
+  background: var(--starter-surface);
+  border: 1px solid var(--starter-border);
+  border-radius: 8px;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
 }
 
-.card:hover,
-.card:focus {
-  transform: scale(1.05);
+.card:hover {
+  border-color: rgb(8 127 91 / 45%);
+  transform: translateY(-0.125rem);
+}
+
+.skip-link:focus-visible,
+.language-switcher a:focus-visible,
+.card:focus-visible {
+  outline: 3px solid var(--starter-focus);
+  outline-offset: 3px;
 }
 
 .card h2 {
   display: flex;
   align-items: center;
-  font-size: 1.5rem;
+  gap: 0.55rem;
+  font-size: 1.25rem;
+  line-height: 1.2;
   margin: 0;
   padding: 0;
 }
 
 .card p {
-  opacity: 0.6;
+  opacity: 0.7;
   font-size: 0.9rem;
   line-height: 1.5;
-  margin-top: 1rem;
 }
 
 .arrow-right {
-  width: 1.3rem;
-  margin-left: 0.5rem;
-  margin-top: 3px;
+  flex: none;
+  inline-size: 0.65rem;
+  block-size: 0.65rem;
+  border-block-start: 2px solid currentColor;
+  border-inline-end: 2px solid currentColor;
+  transform: rotate(45deg);
+}
+
+@media (max-width: 44rem) {
+  .container-box {
+    padding: 1rem;
+  }
+
+  .starter-main {
+    padding-block: 2rem 1rem;
+  }
+
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .title {
+    font-size: 2.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  .skip-link,
+  .card {
+    transition: none;
+  }
+
+  .card:hover {
+    transform: none;
+  }
 }