Integrations

varsha ships with a curated set of Astro integrations pre-configured for production use. This guide covers what is included out of the box and how to add additional integrations.

Included integrations

The following integrations are already configured in astro.config.mjs and work without additional setup.

@astrojs/starlight

Starlight powers varsha’s documentation site. It provides:

Full-text search via Pagefind
Syntax-highlighted code blocks
i18n (English, Japanese, Simplified Chinese)
Dark/light theme support (extended by varsha’s multi-theme system)
Auto-generated sidebar navigation
Previous/next page links
Table of contents
Edit links on GitHub
Last-updated timestamps

Configuration is in astro.config.mjs under the starlight() options object.

@astrojs/sitemap

Automatically generates a sitemap at build time:

Output: /sitemap-index.xml (and /sitemap-0.xml for page sets)
Includes: All static pages, documentation, and blog posts
Respects: The site value in astro.config.mjs for absolute URLs

No additional configuration is needed. Ensure site is set to your production domain.

Static output (no adapter needed)

varsha uses Astro’s output: 'static' mode by default. This means no server adapter is required — the build produces pure HTML/CSS/JS in the dist/ directory that can be deployed to any static host:

Vercel: Auto-detects Astro projects. No adapter or configuration needed.
Netlify: Set build command to npm run build and publish directory to dist.
Cloudflare Pages: Framework preset: Astro, build output: dist.
GitHub Pages: Upload dist/ via GitHub Actions.
Any static host: Upload the contents of dist/.

If you later need SSR (server-side rendering), you can add an adapter:

npm install @astrojs/vercel

import vercel from '@astrojs/vercel';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
  // ...
});

npm install @astrojs/netlify

import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  adapter: netlify(),
  // ...
});

npm install @astrojs/cloudflare

import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
  // ...
});

Adding integrations

Astro’s integration ecosystem makes it easy to add functionality. Install and configure integrations in astro.config.mjs.

Analytics

Add popular analytics providers:

Google Analytics:

npm install @astrojs/google-analytics

Add a script tag directly to MarketingLayout.astro or use a partytown integration.

Plausible / Umami / Simple Analytics:

Add their script tags to the <head> of MarketingLayout.astro or to the Starlight head array in astro.config.mjs:

head: [
  {
    tag: 'script',
    attrs: {
      src: 'https://plausible.io/js/script.js',
      'data-domain': 'your-domain.com',
      defer: true,
    },
  },
],

Vercel Analytics:

npm install @vercel/analytics

Then import and add the <Analytics /> component to your layout.

RSS feed

varsha includes @astrojs/rss pre-configured. The RSS feed is generated automatically at build time at /rss.xml from all published blog posts. See the Content & blog guide for customization options.

Image optimization

Astro’s built-in <Image> component and astro:assets provide automatic image optimization:

---
import { Image } from 'astro:assets';
import myImage from '../assets/my-image.png';
---

<Image src={myImage} alt="Description" width={800} height={400} />

Images in src/assets/ are processed at build time. Images in public/ are served as-is.

MDX extensions

Add MDX plugins for enhanced Markdown processing:

npm install rehype-autolink-headings rehype-slug

Configure in astro.config.mjs:

markdown: {
  rehypePlugins: [
    'rehype-slug',
    ['rehype-autolink-headings', { behavior: 'append' }],
  ],
},

Tailwind CSS

To use Tailwind CSS alongside varsha’s design system:

npx astro add tailwind

This installs @astrojs/tailwind and creates a tailwind.config.mjs. You can use Tailwind utility classes alongside varsha’s CSS tokens.

Partytown (third-party scripts)

For improved performance with third-party scripts (analytics, chat widgets), use Partytown to offload them to a web worker:

npx astro add partytown

Sitemap customization

The sitemap is automatically generated by @astrojs/sitemap. Customize it in astro.config.mjs:

import sitemap from '@astrojs/sitemap';

sitemap({
  // Exclude specific pages
  exclude: ['/admin/', '/internal/'],
  // Custom serialization
  serialize(item) {
    if (item.url === 'https://your-domain.com/') {
      item.changefreq = 'weekly';
      item.priority = 1.0;
    }
    return item;
  },
}),

Icon sets

Use astro-icon for easy icon access:

npm install astro-icon

---
import { Icon } from 'astro-icon/components';
---

<Icon name="github" />
<Icon name="twitter" />

Customizing Starlight

The Starlight integration is extensively customizable. Common customizations include:

Custom CSS

Add custom CSS to override Starlight defaults via src/styles/starlight.css:

starlight({
  customCss: ['./src/styles/starlight.css'],
}),

Custom components

Override Starlight’s built-in components:

starlight({
  components: {
    Banner: './src/components/Banner.astro',
    Header: './src/components/Header.astro',
    Sidebar: './src/components/Sidebar.astro',
    SiteTitle: './src/components/SiteTitle.astro',
    Footer: './src/components/Footer.astro',
  },
}),

Edit link

Configure the “Edit page” link:

starlight({
  editLink: {
    baseUrl: 'https://github.com/your-username/your-repo/edit/main/',
  },
}),

Set editLink: false to disable.

Pagination

Control previous/next page links at the bottom of doc pages:

---
title: My page
prev: false
next:
  label: 'Next topic'
  link: '/docs/next-page/'
---

Next steps

Deployment

Deploy with your preferred platform — Vercel, Netlify, Cloudflare, or static hosting.

Deployment →

SEO & metadata

Configure sitemap, robots, OG tags, and structured data.

SEO & metadata →

Customization

Brand your site and configure the sidebar and navigation.

Customization →

Built with varsha myndlabs