vrr/open-code-review
2
0
Fork 0
mirror of https://github.com/alibaba/open-code-review.git synced 2026-08-21 14:44:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
open-code-review/pages
History
Exact
hezheng.lsw 56a3937b35
feat(pages): redesign hero with two-column layout and three install channels (#408) 
* feat(pages): redesign hero with two-column layout and three install channels

- Change hero from centered stack to desktop two-column layout (text left, terminal right)
- Replace top install badge with three install channels: npm, macOS/Linux, Windows PowerShell
- Add brand icons (npm/apple/linux/windows) with #ffffff 90% opacity
- Interleave apple/linux icons within the macOS / Linux label
- Add i18n keys hero.installNpm/installUnix/installWindows for en/zh/ja
- Adjust hero title to three lines (en) and content paddingTop

* feat(hero): replace platform channels with npm+brew tab switcher, optimize layout

- Replace unix/windows install channels with npm + Homebrew tab switcher
- Use official Homebrew SVG icon (white monochrome)
- CTA buttons: height 32→40px, hover scale + shadow micro-interactions
- Section height: fixed px → minHeight + paddingBottom (removes dead space)
- Tab labels: simplified to 'npm' / 'Homebrew' (brand casing)
- Remove unused apple/linux/windows SVG assets
- Add missing i18n keys for ru locale

* fix(hero): improve tab selected state visibility and minor layout fixes

- Tab selected: fontWeight 600 + pure white text for better contrast
- Tab padding: 14px → 9px for tighter fit
- Button type='button' to prevent form submission
- Mobile minHeight: 'auto' → 600 to prevent background collapse
- Remove redundant ternary in alignItems

---------

Co-authored-by: kite <lizhengfeng.lzf@alibaba-inc.com>
2026-08-12 14:21:15 +08:00
..
public feat(pages): add social preview meta tags and og-image (#414) 2026-07-21 14:33:27 +08:00
src feat(pages): redesign hero with two-column layout and three install channels (#408) 2026-08-12 14:21:15 +08:00
.gitignore feat: init 2026-05-20 22:03:52 +08:00
eslint.config.js chore: add SPDX license headers and automated verification (#740) 2026-08-05 21:26:27 +08:00
index.html fix(pages): inline critical CSS to remove the initial white flash (#601) (#610) 2026-08-05 15:13:47 +08:00
logo.svg feat: update brand assets (#257) 2026-07-01 19:09:42 +08:00
package.json ci(pages): add smoke test step to verify build output is servable (#741) 2026-08-06 20:25:00 +08:00
postcss.config.cjs ci(pages): add ESLint and bundle size check to CI pipeline (#558) 2026-07-28 20:19:37 +08:00
README.md docs(pages): add landing page development guide (#270) 2026-07-02 16:36:54 +08:00
tailwind.config.cjs ci(pages): add ESLint and bundle size check to CI pipeline (#558) 2026-07-28 20:19:37 +08:00
tsconfig.json feat: init 2026-05-20 22:03:52 +08:00
vitest.config.ts chore: add SPDX license headers and automated verification (#740) 2026-08-05 21:26:27 +08:00
vitest.setup.ts chore: add SPDX license headers and automated verification (#740) 2026-08-05 21:26:27 +08:00
webpack.config.cjs ci(pages): add ESLint and bundle size check to CI pipeline (#558) 2026-07-28 20:19:37 +08:00

README.md

OpenCodeReview Landing Page (pages/)

This directory contains the OpenCodeReview landing page, built with TypeScript, React, Webpack, and Tailwind CSS.

Getting Started

Prerequisites

  • Node.js >=18 (recommended: latest LTS)
  • npm (comes with Node.js) or pnpm

Install dependencies

From the pages/ directory:

npm install

Or with pnpm:

pnpm install

Start local dev server

npx webpack serve

Equivalent npm script:

npm run dev

Default dev server settings (from webpack.config.js):

  • URL: http://localhost:3030
  • Host: 0.0.0.0
  • Port: 3030

Build for production

npx webpack

Project script (recommended, sets production mode):

npm run build

Build output is generated in pages/dist/.

Type checking

npm run typecheck

Project Structure

pages/
├── src/                # React + TypeScript source code
│   ├── components/     # Reusable UI components
│   ├── pages/          # Route-level page components
│   ├── i18n/           # Localization resources and i18n context
│   ├── styles/         # Global styles (Tailwind entry, custom CSS)
│   └── index.tsx       # Frontend entry point
├── dist/               # Production build artifacts (generated)
├── index.html          # HTML template used by HtmlWebpackPlugin
├── webpack.config.js   # Bundling + dev server config
├── tailwind.config.js  # Tailwind theme/content configuration
├── postcss.config.js   # PostCSS pipeline (Tailwind + Autoprefixer)
├── tsconfig.json       # TypeScript compiler options
└── package.json        # Dependencies and scripts

Development Guidelines

PR screenshots are required

Any PR that changes files in pages/ must include before/after screenshots of affected views in the PR description.

Please include:

  • What page/section changed
  • Before screenshot
  • After screenshot
  • Desktop or mobile context (if responsive behavior changed)

Code style and formatting

  • Follow existing TypeScript + React style in this directory.
  • Keep components focused and readable; prefer splitting large JSX blocks into smaller components.
  • Prefer utility-first Tailwind classes and reuse existing design tokens from tailwind.config.js.
  • Keep imports and file naming consistent with surrounding code.
  • Run npm run typecheck before opening a PR.

Tailwind CSS configuration notes

  • Tailwind config is in tailwind.config.js.
  • Content scanning targets:
    • ./src/**/*.{ts,tsx}
    • ./index.html
  • PostCSS integration is configured in postcss.config.js with:
    • tailwindcss
    • autoprefixer

TypeScript configuration notes

  • TypeScript config is in tsconfig.json.
  • Important defaults:
    • strict: true
    • jsx: react-jsx
    • target: ES2020
    • noEmit: true (Webpack handles output)

Suggested PR Checklist

  • Dependencies installed and project runs locally
  • npm run typecheck passes
  • npm run build succeeds
  • Before/after screenshots added to PR
  • Scope is limited to one logical change