Static site generator based on Rhai

[mcharytoniuk]

Hello,

I am building a static site generator with syntax based on Rhai.

I plan to add some additional features to it for content analysis (things like linting-like suggestions, marking content as a single source of truth, and link reshaping).

I chose Rhai because I needed full control over the abstract syntax tree to achieve RAG and NLP stuff easier later. I ended up with a custom syntax, rewriting JSX into Rust and replacing JavaScript with Rhai.

I called it Poet. I just finished a pre-alpha version and wanted to share it here.

Here's the link to the project: https://github.com/intentee/poet

And here's the project's documentation page (which is created in Poet): https://github.com/intentee/poet.intentee.com 

I hope you'll find it useful. If anyone has feedback to share, has any questions, or would like to contribute, let me know :)

I also wanted to thank @schungx for giving me lots of help and support when I was working on the syntax.

---

PS. Below is an example of a layout from the project. You'll find more syntax examples in the project's documentation repo.

fn render_heading(context, heading) {
  component {
    <a
      class="documentation-page__toc__link-list__link"
      href={`#${heading.id}`}
    >
      {heading.content}
    </a>
  }
}

fn render_menu(context, node, level, nested) {
  component {
    <div class={`documentation-page__menu__section documentation-page__menu__section--level-${level}`}>
      {switch level {
        0 => component {
          <div class="documentation-page__menu__section__title">
            {node.reference.front_matter.title}
          </div>
          <div class="documentation-page__menu__section__content">
            {nested}
          </div>
        },
        _ => component {
          <a
            class={clsx(#{
              "documentation-page__menu__link": true,
              "documentation-page__menu__link--active": context.is_current_page(node.reference.basename),
            })}
            href={context.link_to(node.reference.basename)}
          >
            {node.reference.front_matter.title}
          </a>
          <div class="documentation-page__menu__section__content">
            {nested}
          </div>
        }
      }}
    </div>
  }
}

fn template(context, props, content) {
  context.assets.add("resources/css/layout-documentation-page.css");

  let menu_hierarchy = context.primary_collection.hierarchy;

  component {
    <LayoutMinimal>
      <div class="documentation-page">
        <div class="documentation-page__menu">
          <input id="documentation-page-menu-toggle" type="checkbox">
          <label
            class="documentation-page__menu__title"
            for="documentation-page-menu-toggle"
          >
            Menu
          </label>
          <div class="documentation-page__menu__content">
            {render_hierarchy(
              menu_hierarchy,
              render_menu.curry(context)
            )}
          </div>
        </div>
        <nav class="documentation-page__toc">
          <div class={clsx(#{
            "documentation-page__toc__content": true,
            "documentation-page__toc__content--empty": context.table_of_contents.headings.is_empty(),
          })}>{if !context.table_of_contents.headings.is_empty() {
            component {
              <div class="documentation-page__toc__title">
                On this page
              </div>
              <div class="documentation-page__toc__link-list">{
                context
                  .table_of_contents
                  .headings
                  .filter(|heading| heading.depth == 2)
                  .map(render_heading.curry(context))
              }</div>
            }
          }}</div>
        </nav>
        <div class="documentation-page__content">
          <div class="formatted-text">
            <h1>
              {context.front_matter.title}
            </h1>
            {content}
          </div>
          <div class="documentation-page__related-pages">{
            let prev = menu_hierarchy.before(context.reference.basename);

            if has(prev) {
              component {
                <a
                  class="documentation-page__related-pages__link documentation-page__related-pages__link--prev"
                  href={prev.canonical_link}
                >
                  <span class="documentation-page__related-pages__link__text">{prev.front_matter.title}</span>
                </a>
              }
            }
          }{
            let next = menu_hierarchy.after(context.reference.basename);

            if has(next) {
              component {
                <a
                  class="documentation-page__related-pages__link documentation-page__related-pages__link--next"
                  href={next.canonical_link}
                >
                  <span class="documentation-page__related-pages__link__text">{next.front_matter.title}</span>
                </a>
              }
            }
          }</div>
        </div>
      </div>
    </LayoutMinimal>
  }
}

[schungx]

Is there a reason for both ${ and {?

[mcharytoniuk]

Yeah, I wanted to make it work as close to JSX+JS as possible for the sake of being more familiar to the users. :)

[schungx]

In that case I suppose they are equivalent under Poet? Or ${ ... } only supports expressions?

[mcharytoniuk]

In that case I suppose they are equivalent under Poet? Or ${ ... } only supports expressions?

I've been using this as a reference, I think with JSX they ended up with similar solutions when combining HTML with JS: https://react.dev/learn/javascript-in-jsx-with-curly-braces

So variables in HTML do not have $ in front of them, but they do in string interpolation. Generally whatever is between { and } is treated as Rhai expression (jumps back from HTML to Rhai context kind of :D).

[schungx]

Also, one observation is that it is not at all simple to differentiate Rhai scripts vs embedded HTML content...

Usually that's done inside the editor, but perhaps you can consider special markings or separators that can clearly separate blocks of embedded content? Just a thought.

if has(prev) {
  COMPONENT ++++++++++++++++++++++++++++++++++++++++++++
	<a
	  class="documentation-page__related-pages__link documentation-page__related-pages__link--prev"
	  href={prev.canonical_link}
	>
	  <span class="documentation-page__related-pages__link__text">{prev.front_matter.title}</span>
	</a>
  ++++++++++++++++++++++++++++++++++++++++++++ /COMPONENT
}

Wild ideas, that's all.

[mcharytoniuk]

If you mean just visually blending together then I guess React devs are used to that : D You pretty much always end up with one or two templates at the bottom of a file. I think in JSX that would have been even worse bc you would have to write something like this instead (with a callback):

<div class="documentation-page__related-pages">{function () {
  let prev = menu_hierarchy.before(context.reference.basename);

  if (!has(prev)) {
    return null;
  }

  return (
    <a
      class="documentation-page__related-pages__link documentation-page__related-pages__link--prev"
      href={prev.canonical_link}
    >
      <span class="documentation-page__related-pages__link__text">{prev.front_matter.title}</span>
    </a>
  );
}()}</div>

So the fact that Rhai if and switch actually act like expressions helps a lot, makes the components more readable than with JS imo.