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"
  color="primary"
  blockClass={{
    paragraph: {
      strong: "custom-strong-class",
      em: "custom-em-class",
      a: "custom-link-class",
      master: "custom-paragraph-class"
    },
    heading: "custom-heading-class",
    list: "custom-list-class",
    quote: "custom-quote-class",
    code: "custom-code-class",
    image: "custom-image-class"
  }}
/>

⚙️ Configuration

Properties

Block Class Configuration

The blockClass property allows you to customize the styling of different block types and their nested elements. Here's a detailed breakdown of the configuration options:

type BlockClassConfig = {
  // Paragraph block configuration
  paragraph?: string | {
    // Nested elements within paragraph
    strong?: string;  // Custom class for <strong> elements
    em?: string;     // Custom class for <em> elements
    a?: string;      // Custom class for <a> elements
    s?: string;
    u?: string;
    master?: string; // Master class for the entire paragraph
  };
  
  // Heading block configuration
  heading?: string;  // Custom class for heading elements
  
  // List block configuration
  list?: string;     // Custom class for list elements
  
  // Quote block configuration
  quote?: string;     // Custom class for quote elements

  // Code block configuration
  code?: string;     // Custom class for code elements

  // Image block configuration
  image?: string;     // Custom class for image elements
}

Examples

1. Simple string configuration:

<StrapiBlocks 
  blockClass={{
    paragraph: "my-paragraph-class",
    heading: "my-heading-class",
    list: "my-list-class"
  }}
/>

2. Detailed paragraph configuration:

<StrapiBlocks 
  blockClass={{
    paragraph: {
      strong: "font-bold text-primary",
      em: "italic text-secondary",
      a: "text-accent hover:underline",
      master: "text-base leading-relaxed"
    }
  }}
/>

3. Mixed configuration:

<StrapiBlocks 
  blockClass={{
    paragraph: {
      strong: "font-bold",
      master: "text-base"
    },
    heading: "text-2xl font-bold",
    list: "list-disc pl-4"
  }}
/>

🔧 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.