Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/binzcodes/visor
Full-coverage <head>-gear for your Astro app
https://github.com/binzcodes/visor
astro astro-component devex seo withastro
Last synced: about 6 hours ago
JSON representation
Full-coverage <head>-gear for your Astro app
- Host: GitHub
- URL: https://github.com/binzcodes/visor
- Owner: binzcodes
- Created: 2024-04-30T16:06:52.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-12-31T03:29:07.000Z (20 days ago)
- Last Synced: 2025-01-18T07:39:35.877Z (1 day ago)
- Topics: astro, astro-component, devex, seo, withastro
- Language: Astro
- Homepage: https://astro-visor.netlify.app
- Size: 270 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Visor
Full-coverage `` gear for your Astro app.
Visor automatically generates the necessary head tags for global metadata.
### Features
- Perfect Lighthouse scores out of the box
- Full PWA support
- Dynamic favicon generation
- Customizable metadata tags
- OpenGraph and social media tags
## Installation
To install Visor, run one of the following commands in your Astro project:
```bash
pnpm install @binz/visor sharp sharp-ico
```
```bash
npm install @binz/visor sharp sharp-ico
```
```bash
yarn add @binz/visor sharp sharp-ico
```
## Usage
Import the component from the Visor package and use it in your Astro Layout component:
```astro
// src/layouts/default.astro
---
import {Visor} from '@binz/visor';
import logoSvgSrc from '../images/Logo.svg';
interface Props {
title: string;
}
const { title: pageTitle } = Astro.props;
const canonicalUrl = Astro.url;
---
```
See the core package [README](./packages/visor/README.md) for advanced usage including:
- [PWA support](./packages/visor/README.md#pwa-support)
- [Dynamic favicon generation](./packages/visor/README.md#site-favicon-generation)
We recommend [`astro-shield`](https://github.com/kindspells/astro-shield) for additional security headers.
## Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request to the GitHub repository.
This repository uses [Changesets](./.changeset/README.md) to manage releases.
## License
This Astro Head component is open source and available under the MIT License.
## Credits
Visor builds on [Favicon Generation with Astro](https://kremalicious.com/favicon-generation-with-astro/) by [Matthias Kretschmann](https://matthiaskretschmann.com/)