Getting Started

Quick Start

npm pnpm Yarn

npm install @pelagornis/page

pnpm add @pelagornis/page

yarn add @pelagornis/page

2. Astro Configuration

Add the plugin to your astro.config.mjs file:

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import pagePlugin from "@pelagornis/page";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [pagePlugin()],
    }),
  ],
});

3. Add Styles

Add styles to your src/styles/global.css file:

@import "@pelagornis/page/styles";

Key Features

Modern Design

Clean and intuitive interface providing the best user experience

Dark Mode Support

Automatic theme switching and perfect dark mode support

Responsive

Perfect user experience across all devices from mobile to desktop

Customization

Color Changes

You can easily change theme colors using CSS variables:

:root {
  --page-accent: hsl(220, 100%, 50%);
  --page-accent-hover: hsl(220, 100%, 40%);
  --page-bg: hsl(0, 0%, 100%);
  --page-text: hsl(0, 0%, 10%);
}

Navigation Links

You can configure navigation links in the plugin settings:

pagePlugin({
  navLinks: [
    {
      label: "Blog",
      link: "/blog/",
      badge: "New",
    },
  ],
});

Component Examples

Code Blocks

npm install @pelagornis/page

Next Steps

Your theme is now set up! Try clicking the theme toggle button in the header or hover over the logo.