{"id":30756904,"url":"https://github.com/gravity-ui/page-constructor-builder","last_synced_at":"2025-09-04T10:50:16.467Z","repository":{"id":305687968,"uuid":"1021995133","full_name":"gravity-ui/page-constructor-builder","owner":"gravity-ui","description":"Static site generator with @gravity-ui/page-constructor","archived":false,"fork":false,"pushed_at":"2025-08-21T10:10:50.000Z","size":834,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-21T10:36:51.336Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gravity-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-18T09:27:29.000Z","updated_at":"2025-08-21T10:10:11.000Z","dependencies_parsed_at":"2025-07-21T14:41:37.956Z","dependency_job_id":"86d21b83-1ace-469e-8442-c5c7714dacb2","html_url":"https://github.com/gravity-ui/page-constructor-builder","commit_stats":null,"previous_names":["gravity-ui/page-constructor-builder"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/gravity-ui/page-constructor-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fpage-constructor-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fpage-constructor-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fpage-constructor-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fpage-constructor-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gravity-ui","download_url":"https://codeload.github.com/gravity-ui/page-constructor-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Fpage-constructor-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273596105,"owners_count":25134258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-04T10:50:12.117Z","updated_at":"2025-09-04T10:50:16.441Z","avatar_url":"https://github.com/gravity-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Page Constructor Builder\n\nA powerful command-line utility for building static pages from YAML configurations using the [@gravity-ui/page-constructor](https://github.com/gravity-ui/page-constructor) package. See [page-constructor storybook](https://preview.gravity-ui.com/page-constructor/) for configuration details.\n\n## Quick Start\n\n1. **Install package:**\n\n```bash\nnpm install @gravity-ui/page-constructor-builder\n```\n\n2. **Add build command to package.json:**\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"page-builder build\"\n  }\n}\n```\n\n3. **Add source files:**\n\n`page-builder.config.yml`:\n\n```yaml\ninput: ./pages\noutput: ./dist\nassets: ./assets\nfavicon: logo.svg\ntheme: light\nminify: true\n```\n\n`pages/index.yml`:\n\n```yaml\nmeta:\n  title: Hello, World\n  description: A simple page constructor page\n\nblocks:\n  - type: header-block\n    title: Hello, World\n    description: |\n      Build beautiful static pages from **YAML configurations** using the power of \n      [@gravity-ui/page-constructor](https://github.com/gravity-ui/page-constructor).\n    background:\n      color: '#f8f9fa'\n```\n\n4. **Build your pages:**\n\n```bash\nnpm run build\n```\n\n5. **Open the generated HTML files in your browser:**\n\n```bash\nopen dist/index.html\n```\n\n## Usage\n\n### Commands\n\n#### `page-builder build`\n\nBuild pages from YAML configurations.\n\n```bash\npage-builder build [options]\n```\n\n**Options:**\n\n- `-i, --input \u003cpath\u003e`: Input directory containing YAML files (default: \"./pages\")\n- `-o, --output \u003cpath\u003e`: Output directory for built files (default: \"./dist\")\n- `-c, --config \u003cpath\u003e`: Configuration file path (default: \"./page-builder.config.yml\")\n- `--css \u003cfiles...\u003e`: Custom CSS files to include\n- `--components \u003cpath\u003e`: Custom components directory\n- `--navigation \u003cpath\u003e`: Navigation data file\n- `--assets \u003cpath\u003e`: Static assets directory to copy\n- `--theme \u003ctheme\u003e`: Theme (light|dark) (default: \"light\")\n- `--base-url \u003curl\u003e`: Base URL for the site\n- `--minify`: Enable minification\n- `--source-maps`: Generate source maps\n- `--watch`: Enable watch mode\n\n### Configuration\n\nCreate a `page-builder.config.yml` file in your project root:\n\n```yaml\ninput: ./pages\noutput: ./dist\nassets: ./assets\nfavicon: logo.svg # Favicon file from assets or external URL\ntheme: light\nbaseUrl: https://mysite.com\nminify: true\nsourceMaps: false # Generate source maps for debugging (increases bundle size)\ncss:\n  - ./styles/main.css\n  - ./styles/components.scss\ncomponents: ./components\nnavigation: ./navigation.yml\nwebpack:\n  # Custom webpack configuration\n```\n\n### Page Configuration\n\nCreate YAML files in your pages directory:\n\n```yaml\n# pages/index.yml\nmeta:\n  title: Welcome to My Site\n  description: This is the homepage of my awesome site\n\nblocks:\n  - type: header-block\n    title: Welcome!\n    description: This is a **header block** with markdown support\n    background:\n      color: '#f0f0f0'\n\n  - type: content-block\n    title: About Us\n    text: |\n      This is a content block with multiple lines of text.\n\n      You can use **markdown** formatting here.\n\n  - type: CustomBlock # Your custom component\n    title: Custom Component\n    content: This uses a custom component\n```\n\n### Custom Components\n\nCreate React components in your components directory:\n\n```typescript\n// components/CustomBlock.tsx\nimport React from 'react';\n\ninterface CustomBlockProps {\n  title: string;\n  content: string;\n  className?: string;\n}\n\nexport const CustomBlock: React.FC\u003cCustomBlockProps\u003e = ({\n  title,\n  content,\n  className = ''\n}) =\u003e {\n  return (\n    \u003cdiv className={`custom-block ${className}`}\u003e\n      \u003ch2\u003e{title}\u003c/h2\u003e\n      \u003cp\u003e{content}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default CustomBlock;\n```\n\n### Custom Styles\n\nAdd your custom CSS/SCSS files:\n\n```css\n/* styles/main.css */\n.custom-block {\n  padding: 20px;\n  margin: 20px 0;\n  border-radius: 8px;\n  background: #f5f5f5;\n  border-left: 4px solid #007acc;\n}\n\n.custom-block h2 {\n  margin-top: 0;\n  color: #007acc;\n}\n```\n\n### Static Assets\n\nThe page constructor builder automatically handles static assets like images, icons, and other files. Configure the assets directory in your configuration file:\n\n```yaml\n# page-builder.config.yml\ninput: ./pages\noutput: ./dist\nassets: ./assets # Assets directory to copy\n```\n\n**Assets Directory Structure:**\n\n```\nassets/\n├── images/\n│   ├── hero-banner.jpg\n│   └── about-photo.png\n├── icons/\n│   ├── logo.svg\n│   └── social-icons.svg\n└── documents/\n    └── brochure.pdf\n```\n\n**Using Assets in Your Pages:**\n\n```yaml\n# pages/index.yml\nblocks:\n  - type: header-block\n    title: Welcome\n    description: Check out our amazing content\n    background:\n      image: assets/images/hero-banner.jpg\n\n  - type: media-block\n    title: About Us\n    media:\n      - type: image\n        src: assets/images/about-photo.png\n        alt: Our team photo\n```\n\n### Favicon\n\nThe page constructor builder supports adding favicons to your static pages. You can specify either a local file from your assets directory or an external URL.\n\n#### Configuration\n\nAdd the `favicon` option to your configuration file:\n\n```yaml\n# page-builder.config.yml\nfavicon: logo.svg # Local file from assets directory\n# or\nfavicon: https://cdn.example.com/favicon.ico # External URL\n```\n\n#### Local Favicon Files\n\nFor local favicon files, the builder will:\n\n- Automatically detect the file in your assets directory\n- Copy it to the output directory\n- Generate proper HTML `\u003clink\u003e` tags with correct MIME types\n\n**Supported file formats:**\n\n- **SVG** (recommended) - `image/svg+xml`\n- **ICO** (classic) - `image/x-icon`\n- **PNG** (modern) - `image/png`\n- **JPG/JPEG** (acceptable) - `image/jpeg`\n- **GIF** (animated) - `image/gif`\n\n**Examples:**\n\n```yaml\n# page-builder.config.yml\nfavicon: logo.svg                    # File in assets/ directory\nfavicon: icons/favicon.ico           # File in assets/icons/ subdirectory\nfavicon: ./custom/path/favicon.png   # Custom path relative to project\nfavicon: /absolute/path/favicon.ico  # Absolute path\n```\n\n#### External Favicon URLs\n\nYou can also use external favicon URLs from CDNs or other domains:\n\n```yaml\n# page-builder.config.yml\nfavicon: https://cdn.example.com/favicon.ico\nfavicon: https://mysite.com/assets/logo.svg\n```\n\n#### Generated HTML\n\nThe builder automatically generates appropriate HTML tags based on the favicon type:\n\n```html\n\u003c!-- For SVG favicons --\u003e\n\u003clink rel=\"icon\" type=\"image/svg+xml\" href=\"assets/logo.svg\" /\u003e\n\n\u003c!-- For ICO favicons (includes legacy browser support) --\u003e\n\u003clink rel=\"icon\" type=\"image/x-icon\" href=\"assets/favicon.ico\" /\u003e\n\u003clink rel=\"shortcut icon\" href=\"assets/favicon.ico\" /\u003e\n\n\u003c!-- For external URLs --\u003e\n\u003clink rel=\"icon\" href=\"https://example.com/favicon.ico\" /\u003e\n```\n\n### Navigation\n\nThe page constructor builder supports global navigation configuration that appears on all pages. Navigation is configured through a separate YAML file.\n\n#### Navigation Configuration\n\nCreate a `navigation.yml` file in your project root (or specify a custom path in your config):\n\n```yaml\n# navigation.yml\nlogo:\n  text: Your Site Name\n  url: 'index.html'\n  icon: 'assets/logo.svg'\n\nheader:\n  leftItems:\n    - text: Home\n      url: 'index.html'\n      type: 'link'\n    - text: About\n      url: 'about.html'\n      type: 'link'\n    - text: Documentation\n      url: 'https://external-site.com/docs'\n      type: 'link'\n  rightItems:\n    - text: GitHub\n      url: 'https://github.com/your-repo'\n      type: 'link'\n    - text: Contact\n      url: 'contact.html'\n      type: 'link'\n\nfooter:\n  leftItems:\n    - text: Privacy Policy\n      url: 'privacy.html'\n      type: 'link'\n  rightItems:\n    - text: © 2024 Your Company\n      type: 'text'\n```\n\n#### Per-Page Navigation Override\n\nYou can override navigation for specific pages by adding a `navigation` section directly in your page YAML:\n\n```yaml\n# pages/special-page.yml\nmeta:\n  title: Special Page\n\nnavigation:\n  logo:\n    text: Special Site\n    url: 'index.html'\n  header:\n    leftItems:\n      - text: Back to Main\n        url: 'index.html'\n        type: 'link'\n\nblocks:\n  - type: header-block\n    title: This page has custom navigation\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Fpage-constructor-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgravity-ui%2Fpage-constructor-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Fpage-constructor-builder/lists"}