Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igorskyflyer/npm-astro-saferesource
๐ Adds CSP-compliant inline scripts and styles to Astro! Featured on the official Astro integrations page https://astro.build/integrations/?search=igor.dvlpr ๐
https://github.com/igorskyflyer/npm-astro-saferesource
astro back-end csp html igorskyflyer inline javascript js script style subresource-integrity ts typescript
Last synced: 4 days ago
JSON representation
๐ Adds CSP-compliant inline scripts and styles to Astro! Featured on the official Astro integrations page https://astro.build/integrations/?search=igor.dvlpr ๐
- Host: GitHub
- URL: https://github.com/igorskyflyer/npm-astro-saferesource
- Owner: igorskyflyer
- License: mit
- Created: 2024-07-22T16:50:48.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-25T19:02:43.000Z (7 months ago)
- Last Synced: 2025-01-31T03:25:02.364Z (13 days ago)
- Topics: astro, back-end, csp, html, igorskyflyer, inline, javascript, js, script, style, subresource-integrity, ts, typescript
- Language: Astro
- Homepage: https://www.npmjs.com/package/@igor.dvlpr/astro-saferesource
- Size: 195 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
๐ <SafeResource />
๐ Adds CSP-compliant inline scripts and styles to Astro! ๐
๐ Support further development
I work hard for every project, including this one
and your support means a lot to me!
Consider buying me a coffee. โ
Thank you for supporting my efforts! ๐๐
@igorskyflyer
## ๐ Table of contents
- [Usage](#-usage)
- [Examples](#-examples)
- [Changelog](#-changelog)
- [License](#-license)
- [Related](#-related)
- [Author](#-author)
## ๐ต๐ผ Usage
Install it by executing:
```shell
npm i -D "@igor.dvlpr/astro-saferesource"
```
In order to use it, all you need to do is wrap your existing **inline** `script` or `style` tags with the `` component, i.e.:
`before.astro`
```astro
console.log('Hello World')
```
`after.astro`
```astro
---
import SafeResource from '@igor.dvlpr/astro-saferesource'
---
// <-- do not forget to add is:inline, if not present
console.log('Hello World')
```
and the component will generate the following output:
`after.html`
```astro
console.log('Hello World')
```
> [!NOTE]
> The component outputs a SHA-256 hash.
>
> [!CAUTION]
> Do **NOT** forget to add `is:inline` to the element or else Astro will remove it from the `` component in order to optimize it.
>
> [!TIP]
> The component will log the ***page***, ***type*** of resource (script/style) and the generated ***hashes*** in the console of the IDE.
>
---
## โจ Examples
`example.astro`
```astro
---
import SafeResource from '@igor.dvlpr/astro-saferesource'
import Layout from '../layouts/Layout.astro'
---
document.addEventListener('DOMContentLoaded', () => {
const easyNav = document.getElementById('easy-nav')
const easyShow = easyNav.getAttribute('data-show')
if (
easyShow === 'whenNeeded' &&
document.documentElement.scrollHeight > window.innerHeight
) {
easyNav.className = 'show'
}
})
.eren-jaeger {
color: red;
}
```
---
## ๐ Changelog
๐ The changelog is available here: [CHANGELOG.md](https://github.com/igorskyflyer/npm-astro-saferesource/blob/main/CHANGELOG.md).
---
## ๐ชช License
Licensed under the MIT license which is available here, [MIT license](https://github.com/igorskyflyer/npm-astro-saferesource/blob/main/LICENSE).
---
## ๐งฌ Related
[@igor.dvlpr/astro-post-excerpt](https://www.npmjs.com/package/@igor.dvlpr/astro-post-excerpt)
> _โญ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! ๐_
[@igor.dvlpr/astro-easynav-button](https://www.npmjs.com/package/@igor.dvlpr/astro-easynav-button)
> _๐งญ Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. ๐ผ_
[@igor.dvlpr/magic-queryselector](https://www.npmjs.com/package/@igor.dvlpr/magic-queryselector)
> _๐ช A TypeScript-types patch for querySelector/querySelectorAll, make them return types you expect them to! ๐ฎ_
[@igor.dvlpr/zep](https://www.npmjs.com/package/@igor.dvlpr/zep)
> _๐ง Zep is a zero-dependency, efficient debounce module. โฐ_
[@igor.dvlpr/keppo](https://www.npmjs.com/package/@igor.dvlpr/keppo)
> _๐ก Parse, manage, compare and output SemVer-compatible version numbers. ๐ก_
---
### ๐จ๐ปโ๐ป Author
Created by **Igor Dimitrijeviฤ** ([*@igorskyflyer*](https://github.com/igorskyflyer/)).