website

Panfactum Website

This package contains the source code for the Panfactum website.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm check	Check for type errors
pnpm lint	Perform linting with autofix enabled

General Architecture

This is an Astro site that uses SolidJS for interactive components.

The site contains several one-off pages for marketing and public outreach. However, the majority of the site content is contained in Markdown files under /src/content which contains documentation, blog articles, and other Panfactum-related information.

In particular, we use an enhanced Markdown syntax (MDX) for which you can find general information here. We have enhanced the basic Markdown build pipeline with many plugins, including several custom ones.

All code is written in Typescript and uses pnpm as the package manager. We aim to enable the strictest possible type-checking and linting whenever possible.

Project Structure

• src/ - Contains the site code
  • pages/ - All page routes and related components
  • components/ - Reusable UI components
  • styles/ - Global CSS styles
  • content/ - Markdown files that contain documentation, blog, and other content
    • /changlog - Changelog entries for releases of the Panfactum framework
    • /docs - Versioned documentation for each active release channel of the Panfactum framework
    • /maturity - Non-versioned documentation about our model for assessing the maturity of a company's platform engineering practices
  • lib/ - Non-ui utility functions
  • state/ - Global state management
• public/ - Static assets that are served directly

Key Dependencies

Besides Astro and SolidJS, take note of the following key dependencies:

• Tailwind v4 - The vast majority of the styling is doing via Tailwind classes
• Kobalte - Component library for SolidJS
• Solid Primitives - Helper utilities for SolidJS
• Solid Icons - Collection of icons that can be used inside SolidJS components
• Nanostores - Used to manage state between Astro islands
• Zod - Data validation at I/O boundaries
• Unpic - Image optimization
• clsx - Utility for constructing class name strings based on complex logic

Contributing

Be sure to review and follow the guidelines documented in our STYLEGUIDE when making contributions.