An Astro-inspired static site implementation built as a Vite plugin with SolidJS and TSX.

This project is under development and is not published as an npm package yet.

Build this project and add it to your app as a local or workspace dependency. Then configure it in vite.config.ts:

import { defineConfig } from "vite";
import { staticSite } from "solid-static";
import {
  createHtmlMarkdownProcessor,
  solidMarkdown,
} from "solid-static/markdown";
import { responsiveImages } from "solid-static/responsive-images";

export default defineConfig({
  plugins: [
    staticSite({
      collections: {},
      i18n: {
        defaultLocale: "en",
        locales: ["en"],
        routing: { prefixDefaultLocale: false },
      },
      integrations: [solidMarkdown(), responsiveImages()],
      markdown: { processor: createHtmlMarkdownProcessor() },
      trailingSlash: "always",
    }),
  ],
});

Add .tsx, .md, or .mdx pages under src/pages. The directory structure determines each page's route. Markdown pages must declare a SolidJS layout in their frontmatter.

Import an image through Vite, then render it with ResponsiveImage in a SolidJS page or component:

import hero from "../assets/hero.jpg";
import { ResponsiveImage } from "solid-static/image";

export default function Home() {
  return (
    <ResponsiveImage
      src={hero}
      alt="Mountain landscape"
      width={1600}
      height={900}
      layout="constrained"
      widths={[480, 768, 1200, 1600]}
      sizes="(max-width: 768px) 100vw, 1200px"
      format="webp"
      loading="lazy"
    />
  );
}

The responsive images integration generates the requested variants and adds the resulting srcset during development and production builds.

Dedicated documentation is not available yet. For the concepts and intended behavior, see the corresponding Astro guides:

• Images
• Markdown content
• Content collections
• Pages
• Configuration