c8r/gen

Compositor JSX static site generator

Gen

Compositor JSX static site generator

npm i @compositor/gen -g

• Build static sites with Lab components and Iso JSX files
• Exports static HTML and inlined CSS
• Handles multiple routes
• Export CSS using styled-components, glamorous, and more
• Use Lab components and themes in markdown
• Pass props data via front-matter

Usage

Export a static site:

gen . --out-dir dist

Run in development mode:

gen . --dev

How it works

Given a folder structure like the following:

dist/
src/
  about.jsx
  index.jsx
  lab.json
  theme.json

Running gen src --out-dir dist will create HTML files:

dist/
  about/
    index.html
  index.html

Files

Gen will load theme.json and lab.json files in the target directory and import Lab components. Any files ending with .jsx or .md will be used to create pages. Markdown and JSX files can include front-matter for setting page-level attributes, such as title and description, and also be passed to the page component as props.

Example JSX file

---
title: Hello World
description: This is a demo page
---
<Box px={3} py={4}>
  <Heading>{props.title}</Heading>
</Box>
<CustomLabComponent
  description={props.description}
/>

Front Matter Options

All front matter is passed to the JSX file as a props object. Additionally, page-level metadata can be set using the following properties:

• title page title
• description page description
• og object of open graph data
• twitter object of Twitter card data
• stylesheets array of stylesheet URLs to add as links in the head
• scripts array of JavaScript strings to include before the closing body tag

Layouts

When rendering markdown files, Gen will look for a layout property in front-matter. If a JSX file with the same name is found, it will be used as a page layout component, passing the rendered markdown content as children.

Example markdown file

---
title: About
layout: default-layout
---

# About

Example JSX layout file

---
---
<SiteHeader />
<Box px={3} py={4}>
  {props.children}
</Box>
<SiteFooter />

CLI options

• --out-dir, -d: output directory
• --dev, -D: run as development server
• --open, -o: open development server in default browser
• --port, -p: set port for development server

---

Made by Compositor | MIT License

gen's Issues

Add support for emotion, fela, and cxs

• Component creators: https://github.com/c8r/gen/blob/master/lib/createComponents.js#L9
• ThemeProviders: https://github.com/c8r/gen/blob/master/lib/render.js#L20
• Static CSS getters: https://github.com/c8r/gen/blob/master/lib/render.js#L27

Improve directory support

When we search for files to render, we should recursively check the given directory. Currently we only search the given directory.

docs/
  components/
    a.md
    b.md
  overview/
    installation.md

Trouble deploying with gen

Problem

Build command successfully works under macOS, not on Netlify.

Expected behavior

gen successfully deploys using build command.

Actual Behavior

gen fails with exit code 1 when deploying using Netlify

Here's the relevant portion of the deploy log from Netlify showing an apparent issue encountered with gen@L65

Deploy log

11:10:41 PM: NPM modules installed
11:10:42 PM: /opt/build/repo/node_modules/@compositor/gen/bin/cli.js:65
const create = async (dirname, opts) => {
                     ^

SyntaxError: Unexpected token (
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:383:7)
    at startup (bootstrap_node.js:149:9)
11:10:42 PM: Cached NPM modules
11:10:42 PM: Build complete: exit code: 1
11:10:42 PM: Cleaning up docker container
11:10:42 PM: Error running command: Build script returned non-zero exit code: 1
11:10:42 PM: An error occurred while building the site, skipping the deploy and cache refresh.
11:10:43 PM: Build script returned non-zero exit code: 1
11:10:43 PM: Finished processing build request in 39.073240634s

For reference, here's my package.json:

{
  "name": "2018.greg.is",
  "version": "0.0.1",
  "description": "Primary site of Greg Gamel",
  "scripts": {
    "test": "which gen",
    "start": "gen src -Dop 8080",
    "build": "gen src -d dist"
  },
  "author": "Greg Gamel",
  "devDependencies": {
    "@compositor/gen": "^1.0.0-4"
  }
}

My site structure is currently identical to the gen example dir

Again, everything works locally without error or issue. Not sure what might be the issue. Any guidance would be appreciated.

Getting 'EADDRNOTAVAIL' error

I am getting this error when I tried
gen . --out-dir dist

  code: 'EADDRNOTAVAIL',
  errno: 'EADDRNOTAVAIL',
  syscall: 'listen',
  address: 'fe80::9c6b:3ddc:9d33:a634',
  port: 8000

I tried with different port as well