Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onmax/astro-single-file
Integration made for Astro that allows to build HTML & CSS in a single file
https://github.com/onmax/astro-single-file
astro-integration astrojs single-page
Last synced: 3 months ago
JSON representation
Integration made for Astro that allows to build HTML & CSS in a single file
- Host: GitHub
- URL: https://github.com/onmax/astro-single-file
- Owner: onmax
- Created: 2022-08-14T05:58:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-14T08:03:27.000Z (over 2 years ago)
- Last Synced: 2024-09-27T21:41:01.375Z (3 months ago)
- Topics: astro-integration, astrojs, single-page
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/astro-single-file
- Size: 88.9 KB
- Stars: 15
- Watchers: 0
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# astro-single-file
This **[Astro integration][astro-integration]** allows developers to bundle the CSS and HTML in a single file.
- [Why](#why)
- [Installation](#installation)
- [Usage](#usage)
- [Configuration](#configuration)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
- [Acknowledgment](#acknowledgment)
## Why?
Recently, I had to build some HTML emails templates to send to some users where the final bundle is preferable to be in a single file for backend developers. That's why, only CSS and no JS files are being merged in the HTML file. If you would like to support JS files, you are welcome to submit a PR!
### Installation
#### Automatic installation
Run the following command to install and set it up for you automatically
```sh
astro add astro-single-file # Follow the instructions
```
#### Manual installation
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
```sh
# Using NPM
npx astro add -D astro-single-file
# Using Yarn
yarn astro add -D astro-single-file
# Using PNPM
pnpx astro add -D astro-single-file
```
__`astro.config.mjs`__
```js
import astroSingleFile from 'astro-single-file';
export default {
// ...
integrations: [astroSingleFile()],
}
```
Then, restart the dev server.
## Usage
This integration will after the build process finishes, using `astro:build:done` hook. It will look in the build directory and it will find all the references in your HTML files where it references an external CSS file which it will replace. Then, it will remove those CSS files.
## Configuration
At the moment, this integration does not have any configuration available. You're welcome to submit an issue or PR!
## Troubleshooting
- If your installation doesn't seem to be working, make sure to restart the dev server.
- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
- If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server.
For help, check out the `#support-threads` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
## Contributing
This package is maintained by [@onmax](https://github.com/onmax). You're welcome to submit an issue or PR!
## Acknowledgment
Inspired by [vite-plugin-singlefile](https://github.com/richardtallent/vite-plugin-singlefile).