feat: responsive system, engineering infra, new components, performance

- Section: responsive prop with media query injection - visual-weights: fontSize clamp() for responsive sizing - variables.css: add border-radius/shadow/transition/z-index tokens - ESLint flat config + Prettier + Changeset init - New components: Footer, NewsSidebar, BreakingNewsBanner - Image/Figure: loading=lazy, aspectRatio, sizes props
2026-05-21 10:04:35 +08:00
parent 184353cfb0
commit 5f65d741ed
54 changed files with 2759 additions and 101 deletions
@@ -7,7 +7,7 @@ import {
  Headline,
  Subhead,
  BodyText,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { Demo } from '@/components/Demo';
 import { PropsTable } from '@/components/PropsTable';

@@ -7,7 +7,7 @@ import {
  Subhead,
  BodyText,
  Masthead,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { Demo } from '@/components/Demo';
 import { PropsTable } from '@/components/PropsTable';

@@ -8,7 +8,7 @@ import {
  BodyText,
  Figure,
  PullQuote,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { Demo } from '@/components/Demo';
 import { PropsTable } from '@/components/PropsTable';

@@ -7,7 +7,7 @@ import {
  Subhead,
  BodyText,
  Rule,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { Demo } from '@/components/Demo';
 import { PropsTable } from '@/components/PropsTable';

@@ -7,7 +7,7 @@ import {
  Subhead,
  BodyText,
  Rule,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { CodeBlock } from '@/components/CodeBlock';

 export default function ResponsivePage() {
@@ -7,7 +7,7 @@ import {
  Subhead,
  BodyText,
  Rule,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { Demo } from '@/components/Demo';

 export default function SpanningPage() {
@@ -6,7 +6,7 @@ import {
  Headline,
  Subhead,
  BodyText,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { Demo } from '@/components/Demo';
 import { PropsTable } from '@/components/PropsTable';

@@ -11,8 +11,8 @@ import {
  Byline,
  Dateline,
  Caption,
-} from '@newspaperui/components';
-import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+} from 'newspaperui-components';
+import { visualWeights, resolveFontSize } from 'newspaperui-theme';
 import { Demo } from '@/components/Demo';

 const longText = `Whitehall officials confirmed late Tuesday that the long-anticipated review of national infrastructure funding will be tabled before the recess. The 248-page document, drafted across three departments, recommends a recalibration of regional priorities and a measured shift toward rail electrification. Critics inside the cabinet caution that the timing risks overshadowing the chancellor's autumn statement, while supporters describe the proposals as the most coherent strategic blueprint in a generation.`;
@@ -6,7 +6,7 @@ import {
  Headline,
  Subhead,
  BodyText,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import { ThemeToggle } from '@/components/ThemeToggle';

 interface Swatch {
@@ -1,5 +1,5 @@
 'use client';
-import { Layout, Section, Article, Rule, Headline, Subhead, Kicker, BodyText, Byline, Dateline, Figure, PullQuote } from '@newspaperui/components';
+import { Layout, Section, Article, Rule, Headline, Subhead, Kicker, BodyText, Byline, Dateline, Figure, PullQuote } from 'newspaperui-components';

 export default function EnFeature() {
  return (
@@ -1,5 +1,5 @@
 'use client';
-import { Layout, Section, Article, Rule, BodyText, Figure } from '@newspaperui/components';
+import { Layout, Section, Article, Rule, BodyText, Figure } from 'newspaperui-components';

 const jp = { fontFamily: 'var(--font-family-cjk-jp)' };
 const jpAccent = { color: 'var(--nui-accent-ink-blue)' };
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Layout, Section, Article, Headline, Subhead, Kicker } from '@newspaperui/components';
+import { Layout, Section, Article, Headline, Subhead, Kicker } from 'newspaperui-components';

 const blocks = [
  {
@@ -1,5 +1,5 @@
 'use client';
-import { Layout, Section, Article, Rule, BodyText, Quote } from '@newspaperui/components';
+import { Layout, Section, Article, Rule, BodyText, Quote } from 'newspaperui-components';

 const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
 const cnRed = { color: 'var(--nui-accent-cjk-red)' };
@@ -1,5 +1,5 @@
 'use client';
-import { Layout, Section, Article, BodyText, Quote, Figure, PullQuote } from '@newspaperui/components';
+import { Layout, Section, Article, BodyText, Quote, Figure, PullQuote } from 'newspaperui-components';

 const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
 const cnRed = { color: 'var(--nui-accent-cjk-red)' };
@@ -1,5 +1,5 @@
 'use client';
-import { Layout, Section, Article, Rule, BodyText, Figure } from '@newspaperui/components';
+import { Layout, Section, Article, Rule, BodyText, Figure } from 'newspaperui-components';

 const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
 const cnRed = { color: 'var(--nui-accent-cjk-red)' };
@@ -4,7 +4,7 @@ import {
  Layout, Section, Article, Masthead,
  Headline, Subhead, Kicker, BodyText, Byline, Dateline,
  Figure, PullQuote,
-} from '@newspaperui/components';
+} from 'newspaperui-components';

 export default function BlackletterFrontPage() {
  return (
@@ -4,7 +4,7 @@ import {
  Layout, Section, Article, Masthead, Rule,
  Headline, Subhead, Kicker, BodyText, Byline, Dateline,
  Figure, PullQuote,
-} from '@newspaperui/components';
+} from 'newspaperui-components';

 export default function FrontPage() {
  return (
@@ -1,4 +1,4 @@
-@import "@newspaperui/theme/dist/style.css";
+@import "newspaperui-theme/dist/style.css";

@tailwind base;
@tailwind components;
@@ -9,7 +9,7 @@ import {
  Subhead,
  Kicker,
  BodyText,
-} from '@newspaperui/components';
+} from 'newspaperui-components';
 import Link from 'next/link';

 const demos = [
@@ -108,7 +108,7 @@ export default function LandingPage() {
          </Headline>
          <BodyText weight="Medium">
            <p style={{ fontFamily: 'var(--font-family-meta)', fontSize: '13px' }}>
-              <code>pnpm add @newspaperui/components @newspaperui/theme</code>
+              <code>pnpm add newspaperui-components newspaperui-theme</code>
            </p>
          </BodyText>
          <div style={{ marginTop: '1rem' }}>
@@ -267,8 +267,8 @@ export default function LandingPage() {
          </Headline>
          <BodyText weight="Low">
            <p>
-              4 packages：<code>@newspaperui/theme</code>、<code>@newspaperui/utils</code>、
-              <code>@newspaperui/components</code>（18 components）、<code>@newspaperui/docs</code>。
+              4 packages：<code>newspaperui-theme</code>、<code>newspaperui-utils</code>、
+              <code>newspaperui-components</code>（18 components）、<code>@newspaperui/docs</code>。
            </p>
            <p>Built with pnpm workspaces + Turborepo. Vite for libraries, Next.js 15 for docs.</p>
          </BodyText>
@@ -1,7 +1,7 @@
 'use client';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { cx } from '@newspaperui/utils';
+import { cx } from 'newspaperui-utils';

 interface NavItem {
  label: string;
@@ -7,7 +7,7 @@ const nextConfig = {
  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
  images: { unoptimized: true },
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
-  transpilePackages: ['@newspaperui/components', '@newspaperui/theme', '@newspaperui/utils'],
+  transpilePackages: ['newspaperui-components', 'newspaperui-theme', 'newspaperui-utils'],
 };

 const withMDX = createMDX({
@@ -13,16 +13,16 @@
  "dependencies": {
    "@mdx-js/loader": "^3.1.1",
    "@mdx-js/react": "^3.1.1",
-    "@newspaperui/components": "workspace:*",
-    "@newspaperui/theme": "workspace:*",
-    "@newspaperui/utils": "workspace:*",
    "@next/mdx": "^16.2.6",
    "@types/mdx": "^2.0.13",
    "next": "^15.1.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "rehype-pretty-code": "^0.14.3",
-    "shiki": "^4.1.0"
+    "shiki": "^4.1.0",
+    "newspaperui-components": "workspace:*",
+    "newspaperui-theme": "workspace:*",
+    "newspaperui-utils": "workspace:*"
  },
  "devDependencies": {
    "@types/node": "^22.10.5",
@@ -33,4 +33,4 @@
    "tailwindcss": "^3.4.17",
    "typescript": "^5.7.2"
  }
-}
+}