mirror of
https://github.com/expressjs/expressjs.com.git
synced 2026-02-21 19:41:33 +00:00
Merge branch 'redesign' into header-sidebar-navigation-desktop
This commit is contained in:
Francesca Giannino
@@ -1,15 +1,13 @@
|
||||
# Contributing to Expressjs.com
|
||||
|
||||
### The Official Documentation of the Express.js Framework
|
||||
# Contributing to the expressjs.com website
|
||||
|
||||
This is the contribution documentation for the [expressjs.com](https://github.com/expressjs/expressjs.com) website.
|
||||
|
||||
> [!NOTE]
|
||||
> This is not the repo for Express.js framework. To contribute to the _[Express.js framework](https://github.com/expressjs/express)_, check out the [GitHub repo contributing page](https://github.com/expressjs/express?tab=contributing-ov-file) or the website's [Contributing to Express](https://expressjs.com/en/resources/contributing.html) page.
|
||||
|
||||
#### Need some ideas? These are some typical issues.
|
||||
### Common contributions
|
||||
|
||||
1. **Website issues**: If you see anything on the site that could use a tune-up, think about how to fix it.
|
||||
1. **Website Issues**: Improvements to the site's functionality, design, or accessibility.
|
||||
- Display or screen sizing problems
|
||||
- Mobile responsiveness issues
|
||||
- Missing or broken accessibility features
|
||||
@@ -27,13 +25,13 @@ This is the contribution documentation for the [expressjs.com](https://github.co
|
||||
- Fix incorrect/poorly translated words
|
||||
- Check out the [Contributing translations](#contributing-translations) section below for a contributing guide.
|
||||
|
||||
#### Want to work on a backlog issue?
|
||||
### Working on existing issues
|
||||
|
||||
We often have bugs or enhancements that need work. You can find these under our repo's [Issues tab](https://github.com/expressjs/expressjs.com/issues). Check out the tags to find something that's a good match for you.
|
||||
We welcome contributions to existing bugs or enhancements. You can find these under our repo's [Issues tab](https://github.com/expressjs/expressjs.com/issues). Check out the tags to find something that matches your interests. Look for issues labeled `good first issue` or `help wanted` to get started.
|
||||
|
||||
#### Have an idea? Found a bug?
|
||||
### Reporting bugs & requesting features
|
||||
|
||||
If you've found a bug or a typo, or if you have an idea for an enhancement, you can:
|
||||
If you have found a bug, a typo, or have an idea for an enhancement, you can:
|
||||
|
||||
- Submit a [new issue](https://github.com/expressjs/expressjs.com/issues/new/choose) on our repo. Do this for larger proposals, or if you'd like to discuss or get feedback first.
|
||||
|
||||
@@ -41,31 +39,41 @@ If you've found a bug or a typo, or if you have an idea for an enhancement, you
|
||||
|
||||
## Getting Started
|
||||
|
||||
The steps below will guide you through the Expressjs.com contribution process.
|
||||
The steps below will guide you through the expressjs.com contribution process.
|
||||
|
||||
#### Step 1: (OPTIONAL) Open a New Issue
|
||||
#### Step 1: Open an Issue (Optional)
|
||||
|
||||
So you've found a problem that you want to fix, or have a site enhancement you want to make.
|
||||
If you have identified a problem or an enhancement:
|
||||
|
||||
1. If you want to get feedback or discuss, open a discussion [issue](https://github.com/expressjs/expressjs.com/issues/new/choose) prior to starting work. This is not required, but encouraged for larger proposals.
|
||||
- While we highly encourage this step, it is only for submissions proposing significant change. It helps us to clarify and focus the work, and ensure it aligns with overall project priorities.
|
||||
- For submissions proposing minor improvements or corrections, this is not needed. You can skip this step.
|
||||
- When opening an issue please give it a title and fill in the description section. The more details you provide, the more feedback we can give.
|
||||
- When opening an issue, please provide a clear title and complete description. The more details you provide, the more feedback we can give.
|
||||
|
||||
2. After receiving your issue the Express.js documentation team will respond with feedback. We read every submission and always try to respond quickly with feedback.
|
||||
2. After receiving your issue, the Express.js documentation team will respond with feedback. We review all submissions and aim to respond as soon as possible.
|
||||
- For submissions proposing significant change, we encourage you to follow the review process before starting work.
|
||||
|
||||
#### Step 2: Get the Application Code Base
|
||||
#### Step 2: Get the project codebase
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- **Node.js**: v24.13.0 or higher
|
||||
### Development stack
|
||||
|
||||
This project uses:
|
||||
|
||||
- **Astro** for site generation
|
||||
- **TypeScript** for type safety
|
||||
- **ESLint** for linting
|
||||
- **Prettier** for formatting
|
||||
<!-- TODO: add testing framework -->
|
||||
|
||||
### Tooling
|
||||
|
||||
- **Node.js**: v24.x or higher
|
||||
- **npm**: v11.0.0 or higher (comes with Node 24)
|
||||
|
||||
> We recommend using [nvm](https://github.com/nvm-sh/nvm) to manage Node.js versions. This project includes an `.nvmrc` file for automatic version switching.
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. **Clone the repository:**
|
||||
|
||||
```bash
|
||||
@@ -96,13 +104,58 @@ So you've found a problem that you want to fix, or have a site enhancement you w
|
||||
|
||||
## Available Scripts
|
||||
|
||||
| Command | Description |
|
||||
| ----------------- | ---------------------------------------- |
|
||||
| `npm run dev` | Start development server with hot reload |
|
||||
| `npm run build` | Build production site to `./dist` |
|
||||
| `npm run preview` | Preview production build locally |
|
||||
| Command | Description |
|
||||
| ----------------- | ----------------------------------------- |
|
||||
| `npm run dev` | Start development server with hot reload |
|
||||
| `npm run build` | Build production site to `./dist` |
|
||||
| `npm run preview` | Preview production build locally |
|
||||
| `npm run lint` | Run ESLint to check for issues |
|
||||
| `npm run check` | Run type checking and format verification |
|
||||
|
||||
## Project Structure
|
||||
## Submitting a pull request
|
||||
|
||||
1. Create a new branch from `redesign`
|
||||
2. Make your changes
|
||||
3. Run `npm run check` to verify code style and types
|
||||
4. Commit with a clear message
|
||||
5. Push to your fork
|
||||
6. Open a PR against `redesign`
|
||||
|
||||
> Ensure all checks pass and your branch is up to date with `redesign` before opening a PR.
|
||||
|
||||
## Architecture policy
|
||||
|
||||
Although Astro supports integrations with frameworks such as React or Vue, this project intentionally avoids additional frontend frameworks.
|
||||
|
||||
The expressjs.com website is designed to use:
|
||||
|
||||
- HTML
|
||||
- CSS
|
||||
- TypeScript
|
||||
|
||||
This decision helps keep the codebase lightweight, easier to maintain, and accessible to a broader range of contributors.
|
||||
|
||||
### Do not introduce new frontend frameworks
|
||||
|
||||
Please do not introduce React, Vue, or other client-side frameworks without prior discussion and approval.
|
||||
|
||||
If a proposed feature appears to require a framework integration:
|
||||
|
||||
1. Open an issue first.
|
||||
2. Explain the use case and why the existing stack (HTML, CSS, and TypeScript) is insufficient.
|
||||
3. Wait for approval from the maintainers before proceeding.
|
||||
|
||||
Pull requests that introduce new framework dependencies without prior discussion may be closed.
|
||||
|
||||
### Existing exception
|
||||
|
||||
> The search component is implemented using React to support the Orama-powered search experience.
|
||||
> This is a limited, isolated integration and does not indicate that React (or other frameworks) should be used elsewhere in the project.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Pull requests that introduce new framework dependencies without prior discussion may not be accepted.
|
||||
|
||||
## Project structure
|
||||
|
||||
```
|
||||
astro/
|
||||
@@ -112,8 +165,10 @@ astro/
|
||||
│ │ ├── patterns/ # Complex UI patterns
|
||||
│ │ └── primitives/ # Base UI primitives
|
||||
│ ├── config/ # Configuration files
|
||||
│ │ ├── menu/ # Menu configuration files (sidebars)
|
||||
│ ├── content/ # Content collections
|
||||
│ │ └── docs/ # Documentation content
|
||||
│ │ ├── docs/ # Documentation content
|
||||
│ │ └── resources/ # Resource pages
|
||||
│ ├── i18n/ # Internationalization
|
||||
│ ├── layouts/ # Page layouts
|
||||
│ ├── pages/ # Route pages
|
||||
@@ -313,3 +368,212 @@ type MenuItem = {
|
||||
omitFrom?: VersionPrefix[]; // Versions to exclude this item from
|
||||
};
|
||||
```
|
||||
|
||||
## Content configuration
|
||||
|
||||
The site uses Astro's [Content Collections](https://docs.astro.build/en/guides/content-collections/) to manage documentation and resources. The configuration is defined in `src/content.config.ts`.
|
||||
|
||||
### Collections
|
||||
|
||||
| Collection | Location | Description |
|
||||
| ----------- | ------------------------ | --------------------------------- |
|
||||
| `docs` | `src/content/docs/` | Documentation pages (guides, API) |
|
||||
| `resources` | `src/content/resources/` | Resource pages (community, tools) |
|
||||
|
||||
### Frontmatter schema
|
||||
|
||||
Each content file requires frontmatter with the following properties:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: 'Page Title' # Required: The page title
|
||||
description: 'Description' # Optional: Page description for SEO
|
||||
---
|
||||
```
|
||||
|
||||
## Versioning
|
||||
|
||||
The Express.js documentation supports multiple versions. Content is organized by version in the `src/content/docs/` directory.
|
||||
|
||||
### Version structure
|
||||
|
||||
```
|
||||
src/content/docs/
|
||||
└── en/
|
||||
├── 3x/ # Express 3.x documentation
|
||||
├── 4x/ # Express 4.x documentation
|
||||
└── 5x/ # Express 5.x documentation (default)
|
||||
```
|
||||
|
||||
### How versioning works
|
||||
|
||||
- **Default Version**: `5x` is the current default version
|
||||
- **Supported Versions**: `5x`, `4x`, `3x`
|
||||
- **URL Patterns**:
|
||||
- Versioned: `/en/5x/api/` → Express 5.x API docs
|
||||
- Non-versioned: `/en/api/` → Defaults to Express 5.x
|
||||
|
||||
### Adding version specific content
|
||||
|
||||
1. Create your content file in the appropriate version directory:
|
||||
|
||||
```
|
||||
src/content/docs/en/5x/guide/my-new-page.md
|
||||
```
|
||||
|
||||
2. The versioning system (configured in `src/pages/[lang]/[...slug].astro`) will automatically:
|
||||
- Serve the page at `/en/5x/guide/my-new-page`
|
||||
- Create non-versioned aliases for default version content
|
||||
|
||||
### Menu configuration
|
||||
|
||||
The navigation menus are configured in `src/config/menu/`. The type definitions are in `src/config/types.ts`.
|
||||
|
||||
#### Menu structure
|
||||
|
||||
Menus are composed of **sections** and **items**:
|
||||
|
||||
```
|
||||
Menu
|
||||
├── sections[] # Groups of menu items
|
||||
│ ├── title? # Optional section header
|
||||
│ ├── basePath? # Base path prepended to all item hrefs
|
||||
│ ├── omitFrom? # Versions to exclude this section from
|
||||
│ └── items[] # Menu items in this section
|
||||
└── items[] # Alternative: flat list of items (no sections)
|
||||
```
|
||||
|
||||
#### Configuration files
|
||||
|
||||
| File | Purpose |
|
||||
| --------------- | ------------------------------------------- |
|
||||
| `main.ts` | Top-level navigation (Docs, API, Resources) |
|
||||
| `docs.ts` | Documentation sidebar menu |
|
||||
| `api.ts` | API reference sidebar menu |
|
||||
| `resources.ts` | Resources section menu |
|
||||
| `middleware.ts` | Middleware submenu |
|
||||
|
||||
#### Adding menu items
|
||||
|
||||
Basic menu item with a link:
|
||||
|
||||
```typescript
|
||||
{ href: `/guide/routing`, label: 'Routing', ariaLabel: 'Routing guide' }
|
||||
```
|
||||
|
||||
Menu item with a submenu:
|
||||
|
||||
```typescript
|
||||
{
|
||||
label: 'Properties',
|
||||
ariaLabel: 'Application properties',
|
||||
submenu: {
|
||||
items: [
|
||||
{ href: `/api/application/app-locals`, label: 'app.locals' },
|
||||
{ href: `/api/application/app-mountpath`, label: 'app.mountpath' },
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
#### Adding sections
|
||||
|
||||
Sections group related menu items with an optional title:
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Getting started',
|
||||
items: [
|
||||
{ href: `/starter/installing`, label: 'Installing' },
|
||||
{ href: `/starter/hello-world`, label: 'Hello world' },
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
#### Version specific menus
|
||||
|
||||
**Enabling versioning on a submenu** — Use `versioned` to specify which versions the menu supports. The version prefix will be automatically prepended to URLs:
|
||||
|
||||
```typescript
|
||||
{
|
||||
label: 'API Reference',
|
||||
submenu: {
|
||||
versioned: ['5x', '4x', '3x'], // Supports all three versions
|
||||
sections: apiMenu.sections,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
**Omitting items from specific versions** — Use `omitFrom` to hide an item in certain versions:
|
||||
|
||||
```typescript
|
||||
{
|
||||
href: `/api/application/app-mountpath`,
|
||||
label: 'app.mountpath',
|
||||
omitFrom: ['3x'], // Not available in Express 3.x
|
||||
}
|
||||
```
|
||||
|
||||
**Omitting entire sections from specific versions**:
|
||||
|
||||
```typescript
|
||||
{
|
||||
title: 'Router',
|
||||
omitFrom: ['3x'], // Router section doesn't exist in 3.x
|
||||
items: [
|
||||
{ href: `/api/router/overview`, label: 'Overview' },
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
#### Type reference
|
||||
|
||||
```typescript
|
||||
type VersionPrefix = '5x' | '4x' | '3x';
|
||||
|
||||
type Menu = {
|
||||
sections?: MenuSection[];
|
||||
items?: MenuItem[];
|
||||
basePath?: string;
|
||||
versioned?: VersionPrefix[];
|
||||
};
|
||||
|
||||
type MenuSection = {
|
||||
title?: string; // Section header text
|
||||
basePath?: string; // Prepended to all item hrefs
|
||||
items: MenuItem[];
|
||||
omitFrom?: VersionPrefix[]; // Versions to exclude this section from
|
||||
};
|
||||
|
||||
type MenuItem = {
|
||||
label: string;
|
||||
ariaLabel?: string;
|
||||
icon?: string;
|
||||
href?: string; // Link destination (omit if using submenu)
|
||||
submenu?: Menu; // Nested menu (omit if using href)
|
||||
omitFrom?: VersionPrefix[]; // Versions to exclude this item from
|
||||
};
|
||||
```
|
||||
|
||||
## Contributing translations
|
||||
|
||||
We use Crowdin to manage our translations in multiple languages and achieve automatic translation with artificial intelligence. Since these translations can be inefficient in some cases, we need help from the community to provide accurate and helpful translations.
|
||||
|
||||
The documentation is translated into these languages:
|
||||
|
||||
- Chinese Simplified (`zh-cn`)
|
||||
- Chinese Traditional (`zh-tw`)
|
||||
- English (`en`)
|
||||
- French (`fr`)
|
||||
- German (`de`)
|
||||
- Italian (`it`)
|
||||
- Japanese (`ja`)
|
||||
- Korean (`ko`)
|
||||
- Brazilian Portuguese (`pt-br`)
|
||||
- Spanish (`es`)
|
||||
|
||||
### How to translate
|
||||
|
||||
1. Request to join the Express.js Website project on [Crowdin](https://express.crowdin.com/website)
|
||||
2. [Select the language you want to translate](https://support.crowdin.com/for-translators/#starting-translation)
|
||||
3. [Start translating](https://support.crowdin.com/online-editor/)
|
||||
|
||||
1
astro/public/logo-dark.svg
Normal file
1
astro/public/logo-dark.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="797" height="583" fill="none"><mask id="a" width="797" height="583" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M796.444 0H0v582.187h796.444V0Z"/></mask><g fill="#0A0A0A" mask="url(#a)"><path d="M406.935 445.941h37.984l231.478-309.444h-38.545L406.935 445.941Z"/><path d="M731.398 493.765v.106l-143.83-189.349-18.503 24.553 161.718 221.741H31.37V31.37h315.442l166.741 222.304 19.066-25.628L387.459 31.37h.102L363.725 0H0v582.188h796.444l-65.046-88.423Z"/><path d="M362.291 181.759c-11.022-16.197-25.27-29.267-42.903-39.262-17.581-9.996-38.804-14.968-63.562-14.968-24.755 0-45.465 4.714-63.252 14.095-17.786 9.381-32.291 21.785-43.465 37.162-11.174 15.377-19.478 32.908-24.911 52.489a225.233 225.233 0 0 0-8.099 59.972c0 21.988 2.716 42.903 8.099 62.686 5.382 19.786 13.685 37.163 24.911 52.181 11.174 15.019 25.679 26.809 43.465 35.368 17.787 8.613 38.855 12.917 63.252 12.917 39.163 0 69.456-9.583 90.883-28.806 21.373-19.172 36.085-46.39 44.08-81.55h-37.777c-5.996 23.987-16.813 43.158-32.395 57.56-15.582 14.404-37.163 21.581-64.791 21.581-17.991 0-33.368-3.795-46.182-11.381s-23.373-17.169-31.778-28.806c-8.408-11.585-14.508-24.706-18.301-39.264-3.383-12.917-5.228-25.424-5.638-37.573a294.756 294.756 0 0 0-.461-9.48c-.667-9.381-.564-18.557.461-27.526 1.589-13.841 4.87-27.372 9.842-40.596 4.971-13.38 11.687-25.167 20.093-35.368 8.405-10.2 18.605-18.403 30.6-24.604 11.995-6.204 25.782-9.279 41.364-9.279 15.585 0 28.809 3.075 40.804 9.279 11.992 6.201 22.192 14.404 30.6 24.604 8.406 10.201 14.865 21.886 19.479 35.061 4.611 13.173 7.071 27.011 7.484 41.364H186.681l.153 31.781H391.97c.819-21.581-1.181-42.903-5.999-63.869-4.819-20.964-12.712-39.569-23.68-55.768Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
astro/public/logo-white.svg
Normal file
1
astro/public/logo-white.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="797" height="583" fill="none"><mask id="a" width="797" height="583" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M796.444 0H0v582.187h796.444V0Z"/></mask><g fill="#fff" mask="url(#a)"><path d="M406.935 445.941h37.984l231.478-309.444h-38.545L406.935 445.941Z"/><path d="M731.398 493.765v.106l-143.83-189.349-18.503 24.553 161.718 221.741H31.37V31.37h315.442l166.741 222.304 19.066-25.628L387.459 31.37h.102L363.725 0H0v582.188h796.444l-65.046-88.423Z"/><path d="M362.291 181.759c-11.022-16.197-25.27-29.267-42.903-39.262-17.581-9.996-38.804-14.968-63.562-14.968-24.755 0-45.465 4.714-63.252 14.095-17.786 9.381-32.291 21.785-43.465 37.162-11.174 15.377-19.478 32.908-24.911 52.489a225.233 225.233 0 0 0-8.099 59.972c0 21.988 2.716 42.903 8.099 62.686 5.382 19.786 13.685 37.163 24.911 52.181 11.174 15.019 25.679 26.809 43.465 35.368 17.787 8.613 38.855 12.917 63.252 12.917 39.163 0 69.456-9.583 90.883-28.806 21.373-19.172 36.085-46.39 44.08-81.55h-37.777c-5.996 23.987-16.813 43.159-32.395 57.56-15.582 14.404-37.163 21.581-64.791 21.581-17.991 0-33.368-3.795-46.182-11.381s-23.373-17.169-31.778-28.806c-8.408-11.585-14.508-24.706-18.301-39.264-3.383-12.917-5.228-25.424-5.638-37.573a294.756 294.756 0 0 0-.461-9.48c-.667-9.381-.564-18.557.461-27.526 1.589-13.841 4.87-27.372 9.842-40.596 4.971-13.38 11.687-25.167 20.093-35.368 8.405-10.2 18.605-18.403 30.6-24.604 11.995-6.204 25.782-9.279 41.364-9.279 15.585 0 28.809 3.075 40.804 9.279 11.992 6.201 22.192 14.404 30.6 24.604 8.406 10.201 14.865 21.886 19.479 35.061 4.611 13.173 7.071 27.011 7.484 41.364H186.681l.153 31.781H391.97c.819-21.581-1.181-42.903-5.999-63.869-4.819-20.964-12.712-39.569-23.68-55.768Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -7,29 +7,34 @@
|
||||
*
|
||||
* @example
|
||||
* <Button variant="primary" size="md">Click me</Button>
|
||||
* <Button variant="inverse" ghost>Ghost button</Button>
|
||||
* <Button as="a" href="/docs">
|
||||
* <Icon slot="left" name="arrow" />
|
||||
* Go to docs
|
||||
* </Button>
|
||||
* <Button type="submit">Submit</Button>
|
||||
*
|
||||
* Notes:
|
||||
* - The `disabled` prop is only supported when rendering as `<button>`.
|
||||
* - Anchors do not support native disabled behavior.
|
||||
*/
|
||||
import './Button.css';
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
import type { ButtonBaseProps } from './types';
|
||||
import type { NativeButtonProps, AnchorProps } from './types';
|
||||
|
||||
type Props =
|
||||
| ({ as?: 'a' } & ButtonBaseProps & HTMLAttributes<'a'>)
|
||||
| ({ as?: 'button' } & ButtonBaseProps & HTMLAttributes<'button'>);
|
||||
type Props = AnchorProps | NativeButtonProps;
|
||||
|
||||
const props = Astro.props as Props;
|
||||
|
||||
const {
|
||||
as: Tag = 'button',
|
||||
size = 'md',
|
||||
variant = 'primary',
|
||||
ghost = false,
|
||||
type = 'button',
|
||||
class: className,
|
||||
...rest
|
||||
} = Astro.props;
|
||||
} = props;
|
||||
|
||||
const isButton = Tag === 'button';
|
||||
const buttonType = isButton ? ((props as NativeButtonProps).type ?? 'button') : undefined;
|
||||
---
|
||||
|
||||
<Tag
|
||||
@@ -40,8 +45,10 @@ const {
|
||||
ghost && 'btn--ghost',
|
||||
className,
|
||||
]}
|
||||
type={Tag === 'button' ? type : undefined}
|
||||
type={buttonType}
|
||||
{...rest}
|
||||
>
|
||||
<slot name="left" />
|
||||
<slot />
|
||||
<slot name="right" />
|
||||
</Tag>
|
||||
|
||||
@@ -3,4 +3,10 @@
|
||||
*/
|
||||
|
||||
export { default as Button } from './Button.astro';
|
||||
export type { ButtonBaseProps, ButtonSize, ButtonVariant, ButtonHTMLTag } from './types';
|
||||
export type {
|
||||
ButtonBaseProps,
|
||||
ButtonSize,
|
||||
ButtonVariant,
|
||||
AnchorProps,
|
||||
NativeButtonProps,
|
||||
} from './types';
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
/**
|
||||
* Button Component Types
|
||||
*/
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
|
||||
export type ButtonSize = 'md' | 'sm' | 'xs';
|
||||
|
||||
export type ButtonVariant = 'primary' | 'secondary';
|
||||
|
||||
export type ButtonHTMLTag = 'button' | 'a';
|
||||
|
||||
export interface ButtonBaseProps {
|
||||
/** HTML element to render */
|
||||
as?: ButtonHTMLTag;
|
||||
/** Button size variant */
|
||||
size?: ButtonSize;
|
||||
/** Button style variant */
|
||||
variant?: ButtonVariant;
|
||||
/** Ghost style (no background) */
|
||||
ghost?: boolean;
|
||||
/** Button type (only for button element) */
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
}
|
||||
|
||||
export type AnchorProps = {
|
||||
as: 'a';
|
||||
href: string;
|
||||
} & ButtonBaseProps &
|
||||
Omit<HTMLAttributes<'a'>, 'type' | 'href' | 'disabled'>;
|
||||
|
||||
export type NativeButtonProps = {
|
||||
as?: 'button';
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
} & ButtonBaseProps &
|
||||
HTMLAttributes<'button'>;
|
||||
|
||||
@@ -22,7 +22,7 @@ type Props =
|
||||
| ({ as: 'small' } & BaseProps & HTMLAttributes<'small'>)
|
||||
| ({ as: 'label' } & BaseProps & HTMLAttributes<'label'>);
|
||||
|
||||
const { as = 'p', ...rest } = Astro.props;
|
||||
const { as = 'p', ...rest } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<Typography as={as} variant="body" {...rest}>
|
||||
|
||||
@@ -22,7 +22,7 @@ type Props =
|
||||
| ({ as: 'small' } & BaseProps & HTMLAttributes<'small'>)
|
||||
| ({ as: 'label' } & BaseProps & HTMLAttributes<'label'>);
|
||||
|
||||
const { as = 'span', ...rest } = Astro.props;
|
||||
const { as = 'span', ...rest } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<Typography as={as} variant="body-md" {...rest}>
|
||||
|
||||
@@ -22,7 +22,7 @@ type Props =
|
||||
| ({ as: 'span' } & BaseProps & HTMLAttributes<'span'>)
|
||||
| ({ as: 'label' } & BaseProps & HTMLAttributes<'label'>);
|
||||
|
||||
const { as = 'small', ...rest } = Astro.props;
|
||||
const { as = 'small', ...rest } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<Typography as={as} variant="body-sm" {...rest}>
|
||||
|
||||
@@ -22,7 +22,7 @@ type Props =
|
||||
| ({ as: 'span' } & BaseProps & HTMLAttributes<'span'>)
|
||||
| ({ as: 'label' } & BaseProps & HTMLAttributes<'label'>);
|
||||
|
||||
const { as = 'small', ...rest } = Astro.props;
|
||||
const { as = 'small', ...rest } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<Typography as={as} variant="body-xs" {...rest}>
|
||||
|
||||
@@ -21,7 +21,7 @@ type Props =
|
||||
| ({ as: 'pre' } & BaseProps & HTMLAttributes<'pre'>)
|
||||
| ({ as: 'span' } & BaseProps & HTMLAttributes<'span'>);
|
||||
|
||||
const { as = 'code', ...rest } = Astro.props;
|
||||
const { as = 'code', ...rest } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<Typography as={as} variant="code" {...rest}>
|
||||
|
||||
@@ -10,19 +10,15 @@ import type { HTMLAttributes } from 'astro/types';
|
||||
import Typography from './Typography.astro';
|
||||
import type { TypographyColor, TypographyWeight } from './types.ts';
|
||||
|
||||
type BaseProps = {
|
||||
type HTMLTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
||||
|
||||
interface Props extends HTMLAttributes<'h5'> {
|
||||
as?: HTMLTag;
|
||||
color?: TypographyColor;
|
||||
weight?: TypographyWeight;
|
||||
};
|
||||
}
|
||||
|
||||
type Props =
|
||||
| ({ as?: 'h5' } & BaseProps & HTMLAttributes<'h5'>)
|
||||
| ({ as: 'p' } & BaseProps & HTMLAttributes<'p'>)
|
||||
| ({ as: 'span' } & BaseProps & HTMLAttributes<'span'>)
|
||||
| ({ as: 'small' } & BaseProps & HTMLAttributes<'small'>)
|
||||
| ({ as: 'label' } & BaseProps & HTMLAttributes<'label'>);
|
||||
|
||||
const { as = 'p', ...rest } = Astro.props;
|
||||
const { as = 'h5', ...rest } = Astro.props;
|
||||
---
|
||||
|
||||
<Typography as={as} variant="h5" {...rest}>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
/**
|
||||
* Primitives Components
|
||||
*
|
||||
* Re-export all primitive components for easy importing
|
||||
* Reexport all primitives Components
|
||||
*/
|
||||
|
||||
// Typography
|
||||
|
||||
135
astro/src/content/docs/en/5x/api/response/response.md
Normal file
135
astro/src/content/docs/en/5x/api/response/response.md
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
title: Properties
|
||||
description: section markdown="1">
|
||||
---
|
||||
|
||||
<h2 id="res">Response</h2>
|
||||
|
||||
The `res` object represents the HTTP response that an Express app sends when it gets an HTTP request.
|
||||
|
||||
In this documentation and by convention,
|
||||
the object is always referred to as `res` (and the HTTP request is `req`) but its actual name is determined
|
||||
by the parameters to the callback function in which you're working.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
app.get('/user/:id', (req, res) => {
|
||||
res.send(`user ${req.params.id}`);
|
||||
});
|
||||
```
|
||||
|
||||
But you could just as well have:
|
||||
|
||||
```js
|
||||
app.get('/user/:id', (request, response) => {
|
||||
response.send(`user ${request.params.id}`);
|
||||
});
|
||||
```
|
||||
|
||||
The `res` object is an enhanced version of Node's own response object
|
||||
and supports all [built-in fields and methods](https://nodejs.org/api/http.html#http_class_http_serverresponse).
|
||||
|
||||
<h3 id='res.properties'>Properties</h3>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-app.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-headersSent.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-locals.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-req.md %}
|
||||
</section>
|
||||
|
||||
<h3 id='res.methods'>Methods</h3>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-append.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-attachment.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-cookie.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-clearCookie.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-download.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-end.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-format.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-get.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-json.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-jsonp.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-links.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-location.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-redirect.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-render.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-send.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-sendFile.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-sendStatus.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-set.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-status.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-type.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/res-vary.md %}
|
||||
</section>
|
||||
66
astro/src/content/docs/en/5x/api/router/router.md
Normal file
66
astro/src/content/docs/en/5x/api/router/router.md
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Methods
|
||||
description: section markdown="1">
|
||||
---
|
||||
|
||||
<h2 id="router">Router</h2>
|
||||
|
||||
<section markdown="1">
|
||||
A `router` object is an instance of middleware and routes. You can think of it
|
||||
as a "mini-application," capable only of performing middleware and routing
|
||||
functions. Every Express application has a built-in app router.
|
||||
|
||||
A router behaves like middleware itself, so you can use it as an argument to
|
||||
[app.use()](#app.use) or as the argument to another router's [use()](#router.use) method.
|
||||
|
||||
The top-level `express` object has a [Router()](#express.router) method that creates a new `router` object.
|
||||
|
||||
Once you've created a router object, you can add middleware and HTTP method routes (such as `get`, `put`, `post`,
|
||||
and so on) to it just like an application. For example:
|
||||
|
||||
```js
|
||||
// invoked for any requests passed to this router
|
||||
router.use((req, res, next) => {
|
||||
// .. some logic here .. like any other middleware
|
||||
next();
|
||||
});
|
||||
|
||||
// will handle any request that ends in /events
|
||||
// depends on where the router is "use()'d"
|
||||
router.get('/events', (req, res, next) => {
|
||||
// ..
|
||||
});
|
||||
```
|
||||
|
||||
You can then use a router for a particular root URL in this way separating your routes into files or even mini-apps.
|
||||
|
||||
```js
|
||||
// only requests to /calendar/* will be sent to our "router"
|
||||
app.use('/calendar', router);
|
||||
```
|
||||
|
||||
Keep in mind that any middleware applied to a router will run for all requests on that router's path, even those that aren't part of the router.
|
||||
|
||||
</section>
|
||||
|
||||
<h3 id='router.methods'>Methods</h3>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/router-all.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/router-METHOD.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/router-param.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/router-route.md %}
|
||||
</section>
|
||||
|
||||
<section markdown="1">
|
||||
{% include api/en/5x/router-use.md %}
|
||||
</section>
|
||||
@@ -70,20 +70,21 @@ Express is a project of the OpenJS Foundation. Please review the [trademark poli
|
||||
<div class="logo-table">
|
||||
<div>
|
||||
<h3>Logotype</h3>
|
||||
<a href="/images/brand/logotype-light.svg" class="hidden-dark">
|
||||
<img src="/images/brand/logotype-light.svg" alt="Express.js logo" width="250" height="56"/>
|
||||
<!-- TODO: add logos -->
|
||||
<a href="/logotype-light.svg" >
|
||||
<img src="/logotype-light.svg" alt="Express.js logo" width="250" height="56"/>
|
||||
</a>
|
||||
<a href="/images/brand/logotype-dark.svg" class="hidden-light">
|
||||
<img src="/images/brand/logotype-dark.svg" alt="Express.js logo" width="250" height="56"/>
|
||||
<a href="/logotype-dark.svg" >
|
||||
<img src="/logotype-dark.svg" alt="Express.js logo" width="250" height="56"/>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Logomark</h3>
|
||||
<a href="/images/brand/logo-light.svg" class="hidden-dark">
|
||||
<img src="/images/brand/logo-light.svg" alt="Express.js mark" width="96.5" height="56"/>
|
||||
<a href="/logo-dark.svg">
|
||||
<img src="/logo-dark.svg" alt="Express.js logo" width="56" height="40"/>
|
||||
</a>
|
||||
<a href="/images/brand/logo-dark.svg" class="hidden-light">
|
||||
<img src="/images/brand/logo-dark.svg" alt="Express.js mark" width="96.5" height="56"/>
|
||||
<a href="/logo-white.svg">
|
||||
<img src="/logo-white.svg" alt="Express.js logo" width="56" height="40"/>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user