ltheme-vitepress — Vue Blog Template

SHA-256: 5348c15e57c11f44491b90e88f511c31f17d76aaa7eb320f7022dff90b523a60

2026-10-01T03:58:01.892Z

# LTheme

A VitePress theme for writers who want their blog to read like a book: Tufte-style margin sidenotes, classic book typography, a paginated post archive with tags and categories, and a mobile layout tuned breakpoint by breakpoint instead of just squeezed to fit.

This repo is both the theme (`src/theme/`) and its own live demo (`docs/`) — every page you'd see running it is real content in this repo, not a mockup.

## Quick start (run the demo)

```sh
git clone https://github.com/max-ayn/ltheme-vitepress
cd ltheme-vitepress
pnpm install
pnpm docs:dev
```

## Use it in your own VitePress project

**Not on npm yet — publishing it is deliberately deferred for now.** To use it today, copy `src/theme` into your project and self-reference it the same way this repo does (see `package.json`'s `exports` field). Once it does get published, the install will just be:

```sh
npm install ltheme
```

```ts
// .vitepress/config.mts
import { defineConfigWithTheme } from "vitepress";
import type { ThemeConfig } from "ltheme/theme/types";
import { tufteSidenotePlugin, writingContainerPlugin } from "ltheme/theme/support/markdown-plugins";

export default defineConfigWithTheme<ThemeConfig>({
  themeConfig: {
    avatar: "/images/avatar.jpg",
    nav: [{ text: "Home", link: "/" }],
    socialLinks: [{ icon: "github", link: "https://github.com/you", ariaLabel: "GitHub" }],
  },
  markdown: {
    config(md) {
      md.use(tufteSidenotePlugin);
      md.use(writingContainerPlugin);
    },
  },
});
```

```ts
// .vitepress/theme/index.ts
import Theme from "ltheme/theme";
export default Theme;
```

Full walkthrough — sidenote syntax, the `:::writing` container, post frontmatter — is at [`docs/pages/use-me.md`](docs/pages/use-me.md), or on the "Use me" page when running the demo.

## Project layout

- `src/theme/` — the theme: layout, styles, markdown plugins, Vue components.
- `src/theme/styles/components/` — one CSS file per component.
- `src/theme/support/markdown-plugins.ts` — the `^[...]` sidenote syntax and the `:::writing` container.
- `docs/pages/` — this site's actual content, and a live example of every theme feature.

## Contributing

See [`docs/pages/contribute.md`](docs/pages/contribute.md) — local setup, where things live, and what to check before opening a PR.

## License

MIT