0 Fork 0

mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-09 05:26:24 +09:00

Files

T

Oleg Isonen 99371187dc docs: Move product documentation into Builder (#5987 )

## Summary

- move the complete GitBook documentation tree and assets into Builder
under `/docs`
- generate the exhaustive MCP page from the local CLI source in the same
change
- publish GitBook from a release-gated `docs` branch containing the
exact successfully released revision
- run MCP documentation tests, typechecking, and stale-output checks
with the existing generated-docs check
- remove links to the Community Discussions repository

## Technical choices

- Import the current documentation as a linear snapshot so the branch
satisfies Builder's required-linear-history protection.
- Keep the Markdown wrapper separate from the TypeScript generator at
`scripts/docs/mcp-page.md`.
- Generate through `packages/cli/local.js` so CLI guidance and its
documentation are reviewed together.
- Let `check:generated-docs` reject CLI changes that leave the committed
MCP page stale.
- After both GitHub release creation and package publication succeed,
fast-forward the read-only `docs` branch to the immutable release tag
commit. A divergent update fails instead of publishing a different
revision.
- Configure GitBook to publish `/docs` from the `docs` branch, not
directly from `main`.
- Exclude `/docs` from the repository-wide `oxfmt` scan so imported
GitBook Markdown retains its established formatting; generator tests and
stale-output checks still validate the MCP page.
- Exclude `transcripts/` and GitHub Discussions from the migration.

## Todo

- [x] Import documentation, navigation, includes, and assets under
`/docs`.
- [x] Generate the MCP page from the local CLI source.
- [x] Move MCP generation and validation into Builder.
- [x] Require MCP documentation updates alongside CLI changes.
- [x] Publish released revisions through a read-only `docs` branch.
- [x] Remove Community repository links from Builder and the migrated
docs.
- [x] Preserve and verify a final Community Git bundle locally.
- [ ] Merge this pull request.
- [ ] Let the next successful release create or advance the `docs`
branch.
- [ ] Repoint GitBook Git Sync to `webstudio-is/webstudio`, branch
`docs`, root directory `/docs`.
- [ ] Verify `docs.webstudio.is`, navigation, assets, anchors, and the
MCP page in production.
- [ ] Delete `webstudio-is/webstudio-community`.

## Verification

- `pnpm check:generated-docs`
- `pnpm lint`
- `pnpm oxfmt --check`
- `git diff --check origin/main...HEAD`
- generator regression test demonstrated failing when the GitBook
wrapper behavior was removed, then passing after restoration
- no fixture inputs or outputs are affected

## Known limitation

All documentation merged after the previous release waits for the next
successful release before GitBook publishes it. This deliberately keeps
the public MCP reference aligned with an installable CLI revision.

Ref #5986

2026-08-03 17:55:50 +02:00

3.4 KiB

Raw Permalink Blame History

description

description
Add and style text content in Webstudio with the Text component.

Text

See MDN: <span>

The Text component is used to display text content in your Webstudio projects. It provides a flexible container for adding and styling text.

Overview

Text is the primary component for adding readable content to your pages. Unlike the Heading or Paragraph components which have more specific semantic purposes, Text is a general-purpose text container.

Tag Options

Text can render different HTML elements:

Tag	Use Case
`div`	Block-level text container (default)
`span`	Inline text container
`cite`	Citation or reference to creative work
`figcaption`	Caption for a figure element

Properties

Property	Type	Description
`tag`	string	HTML element to render (default: `div`)
`id`	string	Unique identifier for the element
`class`	string	CSS class names

When to Use Text vs Other Components

Component	Use Case
Text	General text content, captions, labels
Heading	Section titles (h1-h6)
Paragraph	Body text, article content
Span	Inline text styling within other text

Styling Text

Typography Properties

Font Family: Choose from system fonts or custom fonts
Font Size: Set the size in various units (px, rem, em)
Font Weight: Light, normal, medium, bold, etc.
Line Height: Spacing between lines
Letter Spacing: Spacing between characters
Text Align: Left, center, right, justify
Color: Text color

Text Effects

Text Shadow: Add shadow effects
Text Transform: Uppercase, lowercase, capitalize
Text Decoration: Underline, overline, line-through
Text Overflow: Ellipsis for truncated text

Rich Text Editing

When you double-click on a Text component in the canvas, you enter rich text editing mode where you can:

Apply Bold formatting
Apply Italic formatting
Add Links
Use inline formatting like Superscript and Subscript

Dynamic Content

Text components can display dynamic content using variables:

Select the Text component
In the Settings panel, click the binding icon next to content
Choose a variable or expression

Example use cases:

Display CMS content
Show user data
Render computed values

Best Practices

Use semantic components - Choose Heading for titles and Paragraph for body text when appropriate
Set readable font sizes - Body text should typically be 16px or larger
Maintain contrast - Ensure sufficient color contrast between text and background
Use appropriate line height - 1.4-1.6 for body text improves readability
Limit line length - Keep lines to 50-75 characters for optimal readability

Heading - For section titles
Paragraph - For body text
Inline Text - For inline text styling
Link - For clickable text

3.4 KiB Raw Permalink Blame History