
Template details
Landpack
A customizable Astro landing page template for open-source projects, with YAML/Markdown content, light/dark themes, and an AI customization skill.
About this template
Landpack is a static landing page template for open-source projects, built with Astro, Lumos for Astro, and plain CSS, and maintained by Lauro Guedes. Content lives in YAML, JSON, and Markdown files, and the template outputs a static site with validated content, optimized local images, local fonts, social metadata, and a sitemap. The bundled example project is Laravel SSO; running the template installs no identity server and requires no PHP.
What is Landpack?
Landpack is a landing page template that takes project content written in YAML, JSON, and Markdown and produces a fully static site. It runs on Astro (badged as Astro 7) and requires Node.js 22.12.0 or newer plus npm 9.6.5 or newer. The template is licensed MIT and credits Lumos for Astro to Timothy Ricks. Feature cards, installation steps, integration tabs, and FAQs are each defined as separate content collection entries whose order values control sequence.
Key Features
- Astro and Lumos stack — built on Astro with Lumos for Astro components and plain CSS, with design tokens for palette, type scale, spacing, and theme colors kept in
src/styles/base.css. - Prompt-based AI customization — a repository-local skill at
.agents/skills/landpack-customize/SKILL.mdmaps the project so a coding agent can adapt content, branding, images, links, and SEO while preserving structure. - Content-driven sections — feature cards, steps and commands, integration tabs with code examples, and Markdown FAQs are edited through
src/content/collections rather than page code. - Theme and layout options — persistent light/dark themes, three hero backgrounds and three screenshot frames configured in YAML, plus paired light and dark screenshots via
imageLight. - Navigation behavior — a responsive layout with a mobile navigation sidebar and a header that hides on downward scroll and returns on upward scroll.
- Interactive touches — copyable commands, shareable integration tab URLs (
?tab=), a hover/touch/keyboard-activatable SSO diagram, and reduced-motion support. - SEO tooling —
npm run og:generateregenerates the social card from project content, andnpm run seo:checkaudits built metadata, the social image, sitemap, and robots file. - Ships without a database — static output with no CMS, API token, React, or Vue dependency and no server adapter required.
Who is it for?
- Open-source maintainers: replace the Laravel SSO sample content with their own project's identity, commands, and screenshots to publish a static landing page.
- Developers using AI coding agents: paste a project link and a prepared prompt so an agent adapts branding, assets, and SEO while keeping the template structure intact.
- Static-host users: deploy the generated
dist/directory to Cloudflare Workers (via the includedwrangler.jsonc) or Vercel, which needs no extra configuration.
What can you do with Landpack?
- Launch a project page: fill
src/content/project/main.yamlwith identity, hero, links, section copy, screenshots, stamp, and author, then runnpm run build. - Document installation: define step entries with copyable commands so visitors can copy setup instructions directly from the page.
- Show integrations: add integration entries as tabs with code examples and shareable URLs that link to a specific tab.
- Pass an SEO audit before launch: run
npm run buildand thennpm run seo:check, using the--allow-placeholderflag only for local validation with a placeholder domain.
How does Landpack work?
- Install locked dependencies and start the dev server with
npm ciandnpm run dev -- --background, then open the address Astro prints (normally localhost:4321). - Copy
.env.exampleto.envand setPUBLIC_SITE_URLto the landing page's URL before a production build. - Run
npm run check,npm run build, andnpm run seo:check, then publish the generateddist/directory.
FAQ
Is Landpack free?
Yes. Landpack is released under the MIT license. When redistributing the template, the existing copyright and license notices must be preserved, and changing the displayed license field does not change the software license.
Does Landpack require a database or CMS?
No. Landpack produces static output and needs no database, CMS, API token, React, or Vue. Content is edited in YAML, JSON, and Markdown files inside the repository, and no server adapter is required for deployment.
Which Node.js version does Landpack need?
Landpack requires Node.js 22.12.0 or newer and npm 9.6.5 or newer. The quick start uses npm ci to install from the committed lockfile, and normal fresh installs should keep using npm ci.
How do I set the production URL?
Set PUBLIC_SITE_URL in .env or the hosting build environment, then rebuild. Without it, canonical links, social images, robots.txt, and the sitemap fall back to the shipped example domain, which the standard SEO check rejects.
Can I host Landpack in a subdirectory?
Landpack assumes hosting at the domain root. For a subdirectory, set Astro's base and update root-relative navigation, favicon, and social-image paths, since changing base alone does not update literal URLs.
















