Astro Strapi Blocks

Astro Components package for Strapi 5 Blocks Field integration

---

Table of Contents

• 📋 Requirements
• 📦 Installation
• 🚀 Features
• 🖥️ Usage
• ⚙️ Configuration
• 🔧 Development
• 🤝 Contributing
• 📄 License

📋 Requirements

• Astro ^5.5.0
• TailwindCSS ^4.0.0

📦 Installation

yarn add @sensinum/astro-strapi-blocks

npm install @sensinum/astro-strapi-blocks

🚀 Features

• ✨ Comprehensive support for Strapi 5 Blocks Field with built-in types:
  • 📌 Headers (H1 - H6)
  • 📝 Paragraph with formatting (italic, bold, underline, strikethrough, link)
  • 📑 Quote with formatting (italic, bold, underline, strikethrough, link)
  • 📋 List (ordered and unordered)
  • 💻 Code blocks
  • 🖼️ Image blocks
• 🎯 Flexible block class configuration for custom styling
• 🛠️ TypeScript support with full type definitions

🖥️ Usage

---
import StrapiBlocks from '@sensinum/astro-strapi-blocks';
---

<StrapiBlocks 
  data={strapiBlockData}
  class="custom-class"
  theme={{
    extend: { // 'extend' and/or 'overwrite'
      paragraph: {
        block: ['custom-paragraph-class'],
        strong: ['custom-strong-class'],
        italic: ['custom-em-class'],
        link: ['custom-link-class']
      },
      heading: {
        block: ['custom-heading-class']
      },
      list: {
        block: ['custom-list-class']
      },
      quote: {
        block: ['custom-quote-class']
      },
      code: {
        block: ['custom-code-class']
      },
      image: {
        block: ['custom-image-class']
      }
    }
  }}
/>

⚙️ Configuration

Properties

Property	Type	Description
data	StrapiBlockField	Required. The Strapi block data to render. This should be the raw block data from your Strapi API response.
class	string	Optional. Additional CSS classes to apply to the component wrapper.
theme	StrapiBlockUserTheme	Optional. Theme configuration for blocks. Allows for extending or overwriting default styles.

Theme Configuration

The theme property allows you to customize the styling of different block types and their nested elements. You can either extend the default theme or completely overwrite it. Here's a detailed breakdown of the configuration options:

type StrapiBlockUserTheme = {
  extend?: {
    block?: string[];
    heading?: {
      block?: string[];
      h1?: string[];
      h2?: string[];
      h3?: string[];
      h4?: string[];
      h5?: string[];
      h6?: string[];
    };
    paragraph?: {
      block?: string[];
      span?: string[];
      strong?: string[];
      italic?: string[];
      underline?: string[];
      strikethrough?: string[];
      link?: string[];
    };
    quote?: {
      block?: string[];
      span?: string[];
      strong?: string[];
      italic?: string[];
      underline?: string[];
      strikethrough?: string[];
      link?: string[];
    };
    list?: {
      block?: string[];
      ordered?: string[];
      unordered?: string[];
      item?: string[];
    };
    code?: {
      block?: string[];
      language?: string[];
    };
    image?: {
      block?: string[];
      image?: string[];
      caption?: string[];
    };
  };
  overwrite?: {
    // Same structure as extend, but will replace default values instead of extending them
  };
}

Examples

1. Extending default theme:

<StrapiBlocks 
  theme={{
    extend: {
      paragraph: {
        block: ['my-paragraph-class'],
        strong: ['font-bold text-primary'],
        italic: ['italic text-secondary'],
        link: ['text-accent hover:underline']
      },
      heading: {
        block: ['my-heading-class'],
        h1: ['text-4xl font-bold']
      }
    }
  }}
/>

2. Overwriting default theme:

<StrapiBlocks 
  theme={{
    overwrite: {
      paragraph: {
        block: ['my-paragraph-class'],
        strong: ['font-bold'],
        italic: ['italic'],
        link: ['text-blue-500']
      }
    }
  }}
/>

3. Mixed configuration (extend and overwrite):

<StrapiBlocks 
  theme={{
    extend: {
      paragraph: {
        strong: ['font-bold'],
        italic: ['italic']
      }
    },
    overwrite: {
      heading: {
        block: ['text-2xl'],
        h1: ['text-4xl font-bold']
      }
    }
  }}
/>

The default theme includes Tailwind CSS classes for common styling needs. You can extend or overwrite these classes to match your design requirements.

🔧 Development

1. Clone the repository
2. Install dependencies:

   yarn

3. Run development mode:

   yarn dev

4. Check types:

   yarn check

🤝 Contributing

We welcome contributions to this project! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please make sure to:

• Follow the existing code style
• Write tests for new features
• Update documentation as needed
• Keep your PR focused and concise

📄 License

Copyright © Sensinum & VirtusLab

This project is licensed under the MIT License - see the LICENSE.md file for details.