@bleedingdev/modern-js-create 3.2.0-ultramodern.102 → 3.2.0-ultramodern.104

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

package/template/tests/ultramodern.contract.test.ts.handlebars

@@ -25,6 +25,63 @@ describe('generated UltraModern contract', () => {
 {{/unless}}
   });
 
+  test('keeps UltraModern starter web correctness defaults', () => {
+    const routePage = readText('src/routes/[lang]/page.tsx');
+    const routeCss = readText('src/routes/index.css');
+    const modernConfig = readText('modern.config.ts');
+    const enLocale = readJson<{
+      home?: {
+        meta?: {
+          description?: string;
+          title?: string;
+        };
+        skipLink?: string;
+      };
+    }>('config/public/locales/en/translation.json');
+
+    expect(fs.existsSync(path.join(root, 'config/favicon.svg'))).toBe(true);
+    expect(
+      fs.existsSync(
+        path.join(root, 'config/public/assets/ultramodern-logo.svg'),
+      ),
+    ).toBe(true);
+    expect(routePage).not.toContain('lf3-static.bytednsdoc.com');
+    expect(routePage).toContain('<Helmet');
+    expect(routePage).toContain('htmlAttributes={{');
+    expect(routePage).toContain('dir: languageDirections[currentLanguage]');
+    expect(routePage).toContain('lang: currentLanguage');
+    expect(routePage).toContain('<title>{pageTitle}</title>');
+    expect(routePage).toContain(
+      '<meta name="description" content={pageDescription} />',
+    );
+    expect(routePage).toContain(
+      '<main id="starter-main" className="starter-main">',
+    );
+    expect(routePage).toContain('<h1 id="starter-heading" className="title">');
+    expect(routePage).toContain('src="/assets/ultramodern-logo.svg"');
+    expect(routePage).toContain('height={96}');
+    expect(routePage).toContain('width={96}');
+    expect(routePage).toContain(
+      '<span aria-hidden="true" className="arrow-right" />',
+    );
+    expect(routePage).not.toContain('<div className="title">');
+    expect(modernConfig).toContain(
+      'width=device-width, initial-scale=1.0, viewport-fit=cover',
+    );
+    expect(modernConfig).not.toContain('user-scalable=no');
+    expect(modernConfig).not.toContain('maximum-scale');
+    expect(routeCss).toContain('min-block-size: 100dvh');
+    expect(routeCss).toContain(
+      'grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr))',
+    );
+    expect(routeCss).toContain(':focus-visible');
+    expect(routeCss).toContain('@media (prefers-reduced-motion: reduce)');
+    expect(routeCss).not.toContain('width: 1100px');
+    expect(enLocale.home?.meta?.title).toBe('UltraModern.js Starter');
+    expect(enLocale.home?.meta?.description).toBeTruthy();
+    expect(enLocale.home?.skipLink).toBeTruthy();
+  });
+
   test('retains package-source metadata for generated Modern.js packages', () => {
     const packageJson = readJson<{
       dependencies?: Record<string, string>;
@@ -32,6 +89,7 @@ describe('generated UltraModern contract', () => {
       modernjs?: {
         packageSource?: {
           config?: string;
+          strategy?: string;
         };
         preset?: string;
       };
@@ -48,15 +106,20 @@ describe('generated UltraModern contract', () => {
     expect(packageJson.modernjs?.packageSource?.config).toBe(
       './.modernjs/ultramodern-package-source.json',
     );
-    expect(packageSource.strategy).toMatch(/^(workspace|install)$/u);
-    expect(packageSource.modernPackages?.packages).toContain(
-      '@modern-js/runtime',
-    );
-    expect(packageSource.modernPackages?.packages).toContain(
-      '@modern-js/app-tools',
+    expect(packageJson.modernjs?.packageSource?.strategy).toBe(
+      packageSource.strategy,
     );
-    expect(packageSource.modernPackages?.packages).toContain(
-      '@modern-js/adapter-rstest',
+    expect(packageSource.strategy).toMatch(/^(workspace|install)$/u);
+    const generatedModernDependencies = [
+      ...new Set(
+        (['dependencies', 'devDependencies'] as const).flatMap(section =>
+          Object.keys(packageJson[section] ?? {}),
+        ),
+      ),
+    ].filter(packageName => packageName.startsWith('@modern-js/'));
+    expect(packageSource.modernPackages?.packages?.length).toBeGreaterThan(0);
+    expect(packageSource.modernPackages?.packages).toEqual(
+      expect.arrayContaining(generatedModernDependencies),
     );
     expect(packageSource.modernPackages?.specifier).toBeTruthy();
     expect(

package/template/tsconfig.json

@@ -116,6 +116,6 @@
       }
     ]
   },
-  "include": ["src", "api", "shared", "config", "modern.config.ts"],
+  "include": ["src", "api", "shared", "config", "modern.config.ts", "server"],
   "exclude": ["**/node_modules"]
 }

package/template-workspace/README.md.handlebars

@@ -19,9 +19,18 @@ pnpm dlx @bleedingdev/modern-js-create payments --vertical
 ```
 
 Each added vertical owns its UI/routes, browser-safe Module Federation exposes,
-localized route metadata, CSS prefix, Effect BFF handlers, local API contract,
-and typed client surface. Server handlers and Effect client/contract modules
-stay out of browser exposes.
+private-first route metadata, localized URLs, public-route opt-ins, CSS prefix,
+Effect BFF handlers, local API contract, and typed client surface. Server
+handlers and Effect client/contract modules stay out of browser exposes.
+
+## Private-First Public Surfaces
+
+Generated app routes are private and non-indexable by default. Private app,
+auth, tenant, dashboard, and internal routes publish no discovery output unless
+route metadata explicitly marks them `public && indexable`. The default scaffold
+therefore emits only a disallowing `robots.txt`; sitemap, web manifest,
+`llms.txt`, API catalog, security.txt, and JSON-LD output stay omitted until a
+safe public route or public docs/help/product surface exists.
 
 Run the scaffold validator before adding business code and after every
 `--vertical` mutation: