Astro Theme Pure

Back

Other Integrations

Other integrations that help improve your site

Docs content

medium-zoom#

Checkout medium-zoom ↗ for more.

src/site.config.ts
export const integ: IntegrationUserConfig = {
  // ...
  // A lightbox library that can add zoom effect
  mediumZoom: {
    enable: true, // disable it will not load the whole library
    selector: '.prose .zoomable',
    options: {
      className: 'zoomable'
    }
  }
}
ts

This theme has integrated it in BlogPost.astro by default, which means any content in src/content/blog doesn’t need to import. If you want to use it in any other layout or page, you can use the following code:

---
import { MediumZoom } from 'astro-pure/advanced'
---

<div class="prose">
  <img src="/path/to/image.jpg" class="zoomable" />
</div>

<MediumZoom />
{/* Or with configs */}
<MediumZoom
  selector=".prose .zoomable"
  background="rgba(0, 0, 0, 0.7)"
 />
astro

@playform/compress#

Checkout playform/compress ↗ for more.

@tailwindcss/typography#

Configure typography; configs are in tailwind.config.mjs.

tailwind.config.mjs
const typographyConfig = ({ theme }) => ({
  pure: {
    css: { 
      // ...
    }
  }
})
js

And it will be applied to class list configuration:

src/site.config.ts
export const integ: IntegrationUserConfig = {
  // ...
  typography: {
    class: 'prose prose-pure dark:prose-invert dark:prose-pure prose-headings:font-medium'
  }
}
ts

Checkout tailwindcss-typography ↗ for more.

See more docs