repository·main·Indexed 41 days ago
https://github.com/accretional/statueA high-performance static site generator (SSG) version 0.2.15 that uses Markdown for content, Svelte for components, Tailwind for styling, and Pagefind for search. It integrates with SvelteKit and supports advanced features like SQLite dynamic components with OPFS caching and remote iframe previews for specialized templates.
Statue sites use a specific directory structure for content and static assets:
static/ directory. Replace static/favicon.png with your own.content/ directory.content/example.md or content/blog/hello-world.md.content/blog/, content/docs/, content/projects/).src/routes/. You can modify the homepage in src/routes/+page.svelte or the footer in src/routes/+layout.svelte.content/
├── blog/my-first-post.md
├── docs/guide.md
└── projects/project-one.mdStatue uses two distinct routing mechanisms that work together:
Content Routes (Automatic): Any markdown file placed in the content/ directory is automatically converted into a page. The folder structure within content/ directly maps to the URL path.
content/blog/my-post.md → /blog/my-postcontent/about.md → /aboutCustom Routes (Manual): Standard SvelteKit routes defined in src/routes/ allow you to create pages that are not based on markdown files (e.g., a pricing page or a contact page).
src/routes/pricing/+page.svelte → /pricingRoute Priority Warning: If a custom Svelte route and a markdown content file share the same path (e.g., src/routes/about/+page.svelte and content/about.md), the Svelte page takes precedence and the markdown content will not be rendered.
content/blog/my-post.md → /blog/my-post
content/docs/guide.md → /docs/guide
content/about.md → /aboutStatue is a Template-Based Static Site Generator. The architecture is split into two main parts:
src/lib/ (containing Components, CMS, and Styles). This logic is shared across all templates.src/routes/ and content/ folders located in the root of the repository.templates/<template-name>/. Each template contains its own routes, content, and config files.A standard Statue project follows this directory layout:
content/: Contains all .md files for your site content.src/lib/index.css: The entry point for your site's theme styling.src/routes/: Contains SvelteKit route files:+page.svelte: The homepage.[directory]/+page.svelte: Directory-level pages.[...slug]/+page.svelte: Individual content pages.static/: Holds static assets like images and favicons.site.config.json: The global configuration file.You can include a post-setup.sh script in your template directory to perform tasks immediately after a user initializes the template (e.g., fetching GitHub data or running migrations).
Behavior:
npx statue init.PROJECT_DIR environment variable, which is the absolute path to the user's new project.Best Practices:
read prompts).command || echo 'warning').#!/bin/bash
# templates/your-template/post-setup.sh
# $PROJECT_DIR is the absolute path to the user's project
cd "$PROJECT_DIR"
if [ -f "./scripts/setup.sh" ]; then
bash "./scripts/setup.sh"
fiStatue relies on two specific catch-all routes to bridge the content/ directory to the web:
[...slug]/+page.svelte): Matches specific markdown files (e.g., /about matches content/about.md).[directory]/+page.svelte): Matches directory paths to list all markdown files within them (e.g., /blog matches all files in content/blog/).Note: Do not modify the +page.server.js files associated with these routes, as they contain the core logic for loading and parsing markdown content.
Site styling is managed via CSS imports in src/lib/index.css. You can switch the entire look of your site by changing the @import statement to one of the eight built-in themes.
Example of importing the blue theme:
@import "statue-ssg/themes/blue.css";Themes must meet WCAG AA standards for color contrast to ensure readability:
Key combinations to check:
--color-foreground on --color-background--color-on-primary on --color-primary--color-muted on --color-backgroundStatue uses a file-based routing system where Markdown files located in the content/ directory determine your site's URL structure. There is no database or CMS required; the folder hierarchy directly maps to your website paths.
Example Mapping:
content/blog/my-post.md becomes yoursite.com/blog/my-postcontent/docs/guide.md becomes yoursite.com/docs/guideThe brokerage.agents.items[] array in site.config.json supports two modes for displaying agents:
name, title, image, email, and phone to render a native card.remoteUrl. When this field is present, the agent card is rendered from the remote site using an <iframe>.By default, the template appends #agent-preview-mobile-card to the remoteUrl to target a specific part of the remote page. You can override this fragment using the brokerage.agents.remotePreviewFragment configuration key.
If your remote URL points to a local instance of the real-estate-agent template, use http://localhost:3000 during development.
{
"brokerage": {
"agents": {
"remotePreviewFragment": "#custom-fragment",
"items": [
{
"remoteUrl": "https://agent-profile.com/jane-doe"
}
]
}
}
}Statue provides several components for building directory listing pages:
DirectoryHeader: Displays the directory name.SubDirectories: A grid of subdirectory cards.DirectoryContent: A grid of content cards within a directory.<!-- DirectoryHeader Example -->
<DirectoryHeader title="Blog Posts" />
<!-- SubDirectories Example -->
<SubDirectories subDirectories={[{ title: 'Tutorials', url: '/docs/tutorials' }]} />
<!-- DirectoryContent Example -->
<DirectoryContent content={[{ url: '/docs/guide', metadata: { title: 'Guide', description: 'Getting started' } }]} />