Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/igorskyflyer/npm-astro-escaped-component

🏃🏻‍♂️‍➡️ An Astro component that holds only HTML-encoded content. Featured on the official Astro integrations page https://astro.build/integrations/?search=igor.dvlpr 📜
https://github.com/igorskyflyer/npm-astro-escaped-component

astro back-end content entities escape escaped html igorskyflyer javascript js string text ts typescript xss

Last synced: 3 months ago
JSON representation

🏃🏻‍♂️‍➡️ An Astro component that holds only HTML-encoded content. Featured on the official Astro integrations page https://astro.build/integrations/?search=igor.dvlpr 📜

Host: GitHub
URL: https://github.com/igorskyflyer/npm-astro-escaped-component
Owner: igorskyflyer
License: mit
Created: 2024-07-25T23:18:40.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-07-27T15:28:17.000Z (7 months ago)
Last Synced: 2024-09-29T12:35:34.689Z (5 months ago)
Topics: astro, back-end, content, entities, escape, escaped, html, igorskyflyer, javascript, js, string, text, ts, typescript, xss
Language: Astro
Homepage: https://www.npmjs.com/package/@igor.dvlpr/astro-escaped-component
Size: 123 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

        
Escaped 🏃🏻‍♂️‍➡️ for Astro 🚀







  🏃🏻‍♂️‍➡️ An Astro component that holds only HTML-encoded content. 📜











  

    


    💖 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)

- [API](#-api)

- [Examples](#-examples)

- [Changelog](#-changelog)

- [License](#-license)

- [Related](#-related)

- [Author](#-author)







## 🕵🏼 Usage

Install it by executing:

```shell

npm i -D "@igor.dvlpr/astro-escaped-component"

```




## 🤹🏼 API

The API exposes a single Astro component `Escaped`, see [a usage example below](#-examples).  

After importing the component into a project, add it to an `Astro` page markup as:

```astro

 {/* text/code to be escaped */}

```




> [!IMPORTANT]

> The attribute `is:raw` is crucial for the component to work, if not specified, Astro will parse all content as pure HTML, including `` and `<style>` tags.

>

<br>

> [!CAUTION]

> This component escapes/encodes text using HTML entities and can help prevent XSS attacks. However, this may not be ***sufficient*** in all cases.

>

> Ensure **additional** security measures are in place.

>

<br>

---

## ✨ Examples

`example.astro`

```astro

---

import Escaped from '@igor.dvlpr/astro-escaped-component'

---

<Escaped is:raw>

  Mitochondria are known as the "powerhouses" of the cell because they generate most of the cell's supply of ATP & CO<sub>2</sub>, which is used as a source of chemical energy.

  

  <, >, ", ', &, =, `, !, @, $, %, (, ), +, {, }, [, ].

  

  <script>console.log('Hello? No? 😭')

{/*

  Will be rendered as:

  Mitochondria are known as the "powerhouses" of the cell because they generate most of the cell's supply of ATP & CO<sub>2</sub>, which is used as a source of chemical energy.

  <, >, ", ', &, =, `, !, @, $, %, (, ), +, {, }, [, ].

  <script>console.log('Hello? No? 😭')</script>

*/}

```

---

## 📝 Changelog

📑 The changelog is available here: [CHANGELOG.md](https://github.com/igorskyflyer/npm-astro-escaped-component/blob/main/CHANGELOG.md).

---

## 🪪 License

Licensed under the MIT license which is available here, [MIT license](https://github.com/igorskyflyer/npm-astro-escaped-component/blob/main/LICENSE).

---

## 🧬 Related

[@igor.dvlpr/common-types](https://www.npmjs.com/package/@igor.dvlpr/common-types)

> _🔦 Provides frequently used types for your TypeScript projects. 🦄_




[@igor.dvlpr/registry-apppaths](https://www.npmjs.com/package/@igor.dvlpr/registry-apppaths)

> _🪀 A Node.js module for reading the AppPaths registry key on Windows. Useful for retrieving applications that can be launched from the command prompt. 🗃_




[@igor.dvlpr/scrollend-polyfill](https://www.npmjs.com/package/@igor.dvlpr/scrollend-polyfill)

> _🛴 A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. ⛸️_




[@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/windev](https://www.npmjs.com/package/@igor.dvlpr/windev)

> _🍃 Provides ways of checking whether a path is a legacy Windows device. 💾_

---




### 👨🏻‍💻 Author

Created by **Igor Dimitrijević** ([*@igorskyflyer*](https://github.com/igorskyflyer/)).