📃 Table of contents

• Usage
• API
• Examples
• Changelog
• License
• Related
• Author

🕵🏼 Usage

Install it by executing:

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

🤹🏼 API

The API exposes a single Astro component Escaped, see a usage example below.

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

<Escaped is:raw>
 {/* text/code to be escaped */}
</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 <script> and <style> tags.

[!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.

✨ Examples

example.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? 😭')</script>
</Escaped>

{/*

  Will be rendered as:

  Mitochondria are known as the &#34;powerhouses&#34; of the cell because they generate most of the cell&#39;s supply of ATP &#38; CO&#60;sub&#62;2&#60;/sub&#62;, which is used as a source of chemical energy.

  &#60;, &#62;, &#34;, &#39;, &#38;, &#61;, &#96;, &#33;, &#64;, &#36;, &#37;, &#40;, &#41;, &#43;, &#123;, &#125;, &#91;, &#93;.

  &#60;script&#62;console.log&#40;&#39;Hello? No? 😭&#39;&#41;&#60;/script&#62;

*/}

📝 Changelog

📑 The changelog is available here: CHANGELOG.md.

🪪 License

Licensed under the MIT license which is available here, MIT license.

🧬 Related

@igor.dvlpr/common-types

🔦 Provides frequently used types for your TypeScript projects. 🦄

@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

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

@igor.dvlpr/astro-easynav-button

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼

@igor.dvlpr/windev

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

👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).