femtosite

0.0.32 • Public • Published

Femtosite

Extremely tiny static site generator based on TSX templates.

Getting started

We've created an easy interactive init process, start by calling the command in your favourite terminal:

npx femtosite init

The guide will now help setup the femtosite.json config file and make sure you hit the ground running.

Once you're ready to build your static site run:

npx femtosite build
# OR
npm run build

Femtosite will now transpile your TSX pages and render them afterwards, while taking care of any assets referenced with either the <StyleAsset /> or <ScriptAsset /> built in components.

Example page

index.component.tsx

import { createPage } from 'femtosite';

import { HelloWorld } from '../components/hello-world.component.js';
import { Shell } from '../components/shell.component.js';

export default createPage(async page => (
  <Shell page={page}>
    <HelloWorld />
  </Shell>
));

shell.component.tsx

import { FemtositePageProps, Html, ScriptAsset, StyleAsset } from 'femtosite';

export const Shell = async (
  { page }: { page: FemtositePageProps },
  ...children
) => (
  <Html lang="en">
    <head>
      <StyleAsset src="./assets/style.css" inline={true} />
      <StyleAsset src="./scss/main.scss" />
      <ScriptAsset src="./assets/app.js" inline={true} />
      <ScriptAsset src="./assets/app.js" async={true} />
    </head>
    <body>{...children}</body>
  </Html>
);

hello-world.component.tsx

export const HelloWorld = () => (
  <div>
    <h1>Hello World</h1>
    <p>Welcome to your new Femtosite!</p>
  </div>
);

Package Sidebar

Install

npm i femtosite

Weekly Downloads

1

Version

0.0.32

License

MIT

Unpacked Size

2.74 MB

Total Files

220

Last publish

Collaborators

  • larsvonqualen