@bleedingdev/modern-js-create 3.2.0-ultramodern.117 → 3.2.0-ultramodern.118

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

@@ -1,209 +0,0 @@
-import { Helmet } from '@modern-js/runtime/head';
-import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
-import { useLocation } from '{{routerRuntimeImport}}';
-{{#if useEffectBff}}import effectBff from '@api/effect/index';
-import { Effect } from '@modern-js/plugin-bff/effect-client';
-import { useEffect, useState } from 'react';
-{{/if}}
-import { useTranslation } from 'react-i18next';
-
-{{#if useEffectBff}}type GreetingResponse = Awaited<ReturnType<typeof effectBff.client.greetings.hello>>;
-
-{{/if}}
-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);
-
-const stripLanguagePrefix = (pathname: string) => {
-  const segments = pathname.split('/').filter(Boolean);
-  if (segments.length > 0 && isSupportedLanguage(segments[0] ?? '')) {
-    segments.shift();
-  }
-  return `/${segments.join('/')}`;
-};
-
-const localizedPath = (pathname: string, language: SupportedLanguage) => {
-  const pathWithoutLanguage = stripLanguagePrefix(pathname);
-  return pathWithoutLanguage === '/' ? `/${language}` : `/${language}${pathWithoutLanguage}`;
-};
-
-const absoluteUrl = (pathname: string) => {
-  const origin = ULTRAMODERN_SITE_URL.replace(/\/+$/u, '');
-  return `${origin}${pathname}`;
-};
-
-const locationSuffix = (location: { hash?: unknown; search?: unknown; searchStr?: unknown }) => {
-  const { hash, search, searchStr } = location;
-  let locationSearch = '';
-  if (typeof searchStr === 'string') {
-    locationSearch = searchStr;
-  } else if (typeof search === 'string') {
-    locationSearch = search;
-  }
-  const locationHash = typeof hash === 'string' ? hash : '';
-  return `${locationSearch}${locationHash}`;
-};
-
-const Index = () => {
-  const { t } = useTranslation();
-  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) => ({
-    code,
-    href: `${localizedPath(location.pathname, code)}${suffix}`,
-    label: t(`home.language.${code}`),
-  }));
-{{#if useEffectBff}}  const [effectMessage, setEffectMessage] = useState('loading...');
-
-  useEffect(() => {
-    let mounted = true;
-    Effect.runFork(
-      Effect.promise(() => effectBff.client.greetings.hello({})).pipe(
-        Effect.tap((data: GreetingResponse) =>
-          Effect.sync(() => {
-            if (mounted) {
-              setEffectMessage(data.message);
-            }
-          }),
-        ),
-      ),
-    );
-    return () => {
-      mounted = false;
-    };
-  }, []);
-{{/if}}
-  return (
-    <div className="container-box">
-      <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
-            href={absoluteUrl(localizedPath(location.pathname, code))}
-            hrefLang={code}
-            key={code}
-            rel="alternate"
-          />
-        ))}
-        <link
-          href={absoluteUrl(localizedPath(location.pathname, fallbackLanguage))}
-          hrefLang="x-default"
-          rel="alternate"
-        />
-      </Helmet>
-      <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
-              aria-current={currentLanguage === option.code ? 'page' : undefined}
-              href={option.href}
-              key={option.code}
-            >
-              {option.label}
-            </a>
-          ))}
-        </nav>
-      </header>
-      <main id="starter-main" className="starter-main">
-        <section className="hero" aria-labelledby="starter-heading">
-          <img
-            alt={t('home.logoAlt')}
-            className="logo"
-            height={96}
-            src="/assets/ultramodern-logo.svg"
-            width={96}
-          />
-          <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>
-        </p>
-{{/if}}
-        <div className="grid">
-          <a
-            href="https://bleedingdev.github.io/ultramodern.js/guides/get-started/ultramodern.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="card"
-          >
-            <h2>
-              {t('home.cards.guide.title')}
-              <span aria-hidden="true" className="arrow-right" />
-            </h2>
-            <p>{t('home.cards.guide.body')}</p>
-          </a>
-          <a
-            href="https://bleedingdev.github.io/ultramodern.js/configure/app/usage.html"
-            target="_blank"
-            className="card"
-            rel="noreferrer"
-          >
-            <h2>
-              {t('home.cards.config.title')}
-              <span aria-hidden="true" className="arrow-right" />
-            </h2>
-            <p>{t('home.cards.config.body')}</p>
-          </a>
-          <a
-            href="https://github.com/BleedingDev/ultramodern.js/blob/main-ultramodern/packages/toolkit/create/template/.github/workflows/ultramodern-gates.yml.handlebars"
-            target="_blank"
-            className="card"
-            rel="noreferrer"
-          >
-            <h2>
-              {t('home.cards.gates.title')}
-              <span aria-hidden="true" className="arrow-right" />
-            </h2>
-            <p>{t('home.cards.gates.body')}</p>
-          </a>
-          <a
-            href="https://bleedingdev.github.io/ultramodern.js/configure/app/bff/effect.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="card"
-          >
-            <h2>
-              {t('home.cards.bff.title')}
-              <span aria-hidden="true" className="arrow-right" />
-            </h2>
-            <p>{t('home.cards.bff.body')}</p>
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default Index;

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

@@ -1,266 +0,0 @@
-{{#if enableTailwind}}@import 'tailwindcss';
-
-{{/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 {
-  margin: 0;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Arial,
-    sans-serif;
-  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-block-size: 100dvh;
-  inline-size: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 1.25rem;
-}
-
-.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-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 {
-  margin: 0.35rem 0 0;
-  font-size: 3.5rem;
-  line-height: 1;
-  font-weight: 750;
-  letter-spacing: 0;
-  text-wrap: balance;
-}
-
-.logo {
-  inline-size: 6rem;
-  block-size: 6rem;
-  border-radius: 1.25rem;
-  filter: drop-shadow(0 1rem 1.5rem rgb(17 24 39 / 18%));
-}
-
-.name {
-  color: var(--starter-accent-strong);
-  font-size: 0.95rem;
-  font-weight: 700;
-  line-height: 1.4;
-}
-
-.description {
-  line-height: 1.5;
-  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 {
-  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,
-    monospace;
-}
-
-.container-box .grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
-  align-items: center;
-  gap: 1rem;
-}
-
-.card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  min-block-size: 9rem;
-  padding: 1.25rem;
-  color: inherit;
-  text-decoration: none;
-  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 {
-  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;
-  gap: 0.55rem;
-  font-size: 1.25rem;
-  line-height: 1.2;
-  margin: 0;
-  padding: 0;
-}
-
-.card p {
-  opacity: 0.7;
-  font-size: 0.9rem;
-  line-height: 1.5;
-}
-
-.arrow-right {
-  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/src/routes/layout.tsx.handlebars

@@ -1,10 +0,0 @@
-import { Outlet } from '{{routerRuntimeImport}}';
-import './index.css';
-
-export default function Layout() {
-  return (
-    <div>
-      <Outlet />
-    </div>
-  );
-}

package/template/tailwind.config.ts.handlebars

@@ -1,10 +0,0 @@
-{{#if enableTailwind}}import type { Config } from 'tailwindcss';
-
-export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  plugins: [],
-  theme: {
-    extend: {},
-  },
-} satisfies Config;
-{{/if}}

package/template/tests/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "types": ["@rstest/core/globals"]
-  },
-  "include": ["./"]
-}

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

@@ -1,163 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import { describe, expect, test } from '@rstest/core';
-
-const root = process.cwd();
-const readText = (relativePath: string) =>
-  fs.readFileSync(path.join(root, relativePath), 'utf-8');
-const readJson = <T>(relativePath: string): T =>
-  JSON.parse(readText(relativePath)) as T;
-
-describe('generated UltraModern contract', () => {
-  test('keeps localized route metadata and Rstest wiring', () => {
-    expect(fs.existsSync(path.join(root, 'src/routes/[lang]/page.tsx'))).toBe(
-      true,
-    );
-    expect(fs.existsSync(path.join(root, 'src/routes/page.tsx'))).toBe(false);
-    expect(fs.existsSync(path.join(root, 'src/routes/layout.tsx'))).toBe(true);
-    expect(fs.existsSync(path.join(root, 'oxlint.config.ts'))).toBe(true);
-    expect(fs.existsSync(path.join(root, 'oxfmt.config.ts'))).toBe(true);
-{{#if enableTailwind}}
-    expect(fs.existsSync(path.join(root, 'postcss.config.mjs'))).toBe(true);
-    expect(fs.existsSync(path.join(root, 'tailwind.config.ts'))).toBe(true);
-{{/if}}
-{{#unless enableTailwind}}
-    expect(fs.existsSync(path.join(root, 'postcss.config.mjs'))).toBe(false);
-    expect(fs.existsSync(path.join(root, 'tailwind.config.ts'))).toBe(false);
-{{/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>;
-      devDependencies?: Record<string, string>;
-      scripts?: Record<string, string>;
-      modernjs?: {
-        packageSource?: {
-          config?: string;
-          strategy?: string;
-        };
-        preset?: string;
-      };
-    }>('package.json');
-    const packageSource = readJson<{
-      modernPackages?: {
-        packages?: string[];
-        specifier?: string;
-      };
-      strategy?: string;
-    }>('.modernjs/ultramodern-package-source.json');
-
-    expect(packageJson.modernjs?.preset).toBe('presetUltramodern');
-    expect(packageJson.modernjs?.packageSource?.config).toBe(
-      './.modernjs/ultramodern-package-source.json',
-    );
-    expect(packageJson.modernjs?.packageSource?.strategy).toBe(
-      packageSource.strategy,
-    );
-    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(
-      packageJson.devDependencies?.['@modern-js/adapter-rstest'],
-    ).toBeTruthy();
-    expect(
-      packageJson.devDependencies?.['@modern-js/code-tools'],
-    ).toBeTruthy();
-    expect(
-      packageJson.devDependencies?.['@modern-js/create'],
-    ).toBeTruthy();
-    expect(readText('scripts/check-i18n-strings.mjs')).toContain(
-      "from '@modern-js/code-tools'",
-    );
-    expect(packageJson.scripts?.format).toBe('oxfmt .');
-    expect(packageJson.scripts?.['format:check']).toBe('oxfmt --check .');
-    expect(packageJson.scripts?.lint).toBe('oxlint .');
-    expect(packageJson.scripts?.['lint:fix']).toBe('oxlint . --fix');
-    expect(packageJson.scripts?.['ultramodern:check']).toContain(
-      'pnpm format:check && pnpm lint',
-    );
-    expect(packageJson.devDependencies?.oxfmt).toBe('0.53.0');
-    expect(packageJson.devDependencies?.oxlint).toBe('1.68.0');
-    expect(packageJson.devDependencies?.ultracite).toBe('7.8.1');
-{{#if enableTailwind}}
-    expect(packageJson.devDependencies?.tailwindcss).toBe('^4.3.0');
-    expect(packageJson.devDependencies?.['@tailwindcss/postcss']).toBe(
-      '^4.3.0',
-    );
-{{/if}}
-{{#unless enableTailwind}}
-    expect(packageJson.devDependencies?.tailwindcss).toBeUndefined();
-    expect(
-      packageJson.devDependencies?.['@tailwindcss/postcss'],
-    ).toBeUndefined();
-{{/unless}}
-  });
-});