# Astro Toolkit
A collection of Astro tools, components, and utilities to streamline your development process.
## SEO
### Head Component
The `BaseHead` component in Astro Toolkit simplifies the process of adding essential SEO tags to your HTML's `` section. This includes OpenGraph, Twitter cards, canonical URLs, and more, saving you from manually configuring these tags for each page.
#### Usage
To use the `BaseHead` component, import it from `astro-toolkit/seo` and customize the SEO tags:
```jsx
---
import { BaseHead } from 'astro-toolkit/seo'
---
```
HTML Output Example
```html
Your Page Title
```
### Benefits
Using the `BaseHead` component saves you from manually configuring:
- OpenGraph tags for better social media sharing
- Twitter card tags to optimize content sharing on Twitter
- Canonical URLs to avoid duplicate content issues
- Google Site Verification tags
- Customizable link and meta tags through the `extend` property
### Extending Head Component with Slots
You can add additional actions inside the `` section using slots within the `BaseHead` component.
```jsx
```
Type Interface
```ts
type Props = {
title?: string
description?: string
OGImage?: {
src: string
alt: string
}
keywords?: string | string[]
sitemap?: boolean
GSVToken: string
robots: string
extend?: {
link?: Partial[]
meta?: Partial[]
}
}
```
## Utils
### formatDate
Formats a given date string into a more readable format.
#### Usage
```ts
import { formatDate } from 'astro-toolkit/utils'
// Example usage
formatDate("2024-07-08") // Outputs: July 8, 2024
```
### slugify, unslugify
Converts strings to URL-friendly slugs and back to their original form.
#### Usage
```ts
import { slugify, unslugify } from 'astro-toolkit/utils'
// Convert a string to a slug
slugify("Hello World") // Outputs: hello-world
// Convert a slug back to a string
unslugify("hello-world") // Outputs: Hello World
```
## Flow
### For Component
A component that loops through arrays and objects, rendering content for each item.
> **Note:** Don't forget to return your content to be rendered.
#### Usage
```astro
---
import { For } from 'astro-toolkit/flow'
---
{(item, index) => (
{index}: {item}
)}
```
In this example, the `For` component iterates over the array `[1, 2, 3]`, rendering a list item for each element.
### With Object
The `For` component can also be used to iterate over object properties.
#### Usage
```astro
---
import { For } from 'astro-toolkit/flow'
---
{(value, key) => (
{key}: {value}
)}
```
## Actions
Easy-to-use view transition callback function to re-run your scripts when the page changes.
#### Usage
```astro
---
---
```
In this example, the `action` function logs a message to the console whenever a page transition occurs.
## Additional Information
### Installation
To install Astro Toolkit, run the following command in your project directory:
```bash
npm install astro-toolkit
```
### Contribution
If you would like to contribute to the Astro Toolkit, please follow the guidelines in the [CONTRIBUTING.md](https://github.com/spices-solutions/wathqny/blob/astro-toolkit%400.1.0/packages/astro-toolkit/CONTRIBUTING.md)