mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-10 06:24:35 +09:00
Oleg Isonen
99371187dc
## 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
2.4 KiB
2.4 KiB
description
| description |
|---|
| Add paragraph text blocks to your Webstudio pages. |
Paragraph
See MDN: <p>
The Paragraph component renders an HTML <p> element, used for blocks of body text content.
Overview
Paragraphs are the primary component for body text and article content. They automatically include proper spacing and are semantically correct for running text.
Properties
| Property | Type | Description |
|---|---|---|
id |
string | Unique identifier |
class |
string | CSS class names |
When to Use Paragraph
Use Paragraph for:
- Article body content
- Descriptions and explanations
- Any block of running text
Use other components for:
- Titles → Heading
- Labels or short text → Text
- Inline styled text → Inline Text
Styling Paragraphs
Typography
- Font Size: 16px minimum recommended for readability
- Line Height: 1.5-1.7 for comfortable reading
- Max Width: 65-75 characters per line is optimal
- Margin: Add spacing between paragraphs
Readable Text Tips
- Sufficient contrast: Minimum 4.5:1 ratio with background
- Comfortable line length: Use max-width to limit text width
- Adequate spacing: Line height of at least 1.5
- Clear font: Use readable typefaces at appropriate sizes
Rich Text Formatting
When editing a Paragraph, you can apply inline formatting:
- Bold text for emphasis
- Italic text for titles or foreign words
- Links for navigation
- Superscript for footnotes
- Subscript for chemical formulas
Dynamic Content
Paragraphs work well with dynamic content:
Collection
└── Paragraph (bound to post.content)
For long-form CMS content, consider using:
- Content Embed for rich text
- Markdown Embed for markdown
Best Practices
- One idea per paragraph: Keep paragraphs focused
- Use semantic markup: Paragraph for text, Heading for titles
- Maintain readability: Proper sizing, spacing, and contrast
- Consider mobile: Text should be readable on all devices
Related Components
- Text - General text container
- Heading - Section titles
- Content Embed - Rich text from CMS