chore: new linter config

storyblok · Oct 17, 2024 · 58d129c · 58d129c
1 parent bb55e03
commit 58d129c
Show file tree

Hide file tree

Showing 61 changed files with 3,768 additions and 3,084 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,28 +1,28 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: npm
+    directory: /
     schedule:
-      interval: "daily"
+      interval: daily
     commit-message:
       prefix: fix
       prefix-development: chore
       include: scope
     groups:
       linting-dx-tools:
         patterns:
-          - "*lint*" # eslint, eslint-*, vue-eslint-parser, lint-staged, @commitlint/*, @typescript-eslint/*
-          - "prettier"
-          - "husky"
-          - "@vue/tsconfig"
-          - "*babel*" # babel-*, @vue/babel-preset-app, @babel/*
+          - '*lint*' # eslint, eslint-*, vue-eslint-parser, lint-staged, @commitlint/*, @typescript-eslint/*
+          - prettier
+          - husky
+          - '@vue/tsconfig'
+          - '*babel*' # babel-*, @vue/babel-preset-app, @babel/*
         update-types:
-          - "minor"
-          - "patch"
+          - minor
+          - patch
       testing-tools:
         patterns:
-          - "@vue/test-utils"
-          - "vitest"
+          - '@vue/test-utils'
+          - vitest
         update-types:
-          - "minor"
-          - "patch"
+          - minor
+          - patch
diff --git a/README.md b/README.md
@@ -29,12 +29,10 @@
   </a>
 </p>
 
-
 ## 🚀 Usage
 
 > If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-richtext) guide to get a project ready in less than 5 minutes.
 
-
 ### Installation
 
 ```bash
@@ -56,33 +54,33 @@ pnpm add @storyblok/richtext
 ### Basic
 
 ```ts
-import { richTextResolver } from '@storyblok/richtext'
+import { richTextResolver } from '@storyblok/richtext';
 
-const { render } = richTextResolver()
+const { render } = richTextResolver();
 
-const html = render(doc)
+const html = render(doc);
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <div>
   ${html}
   </div>
-`
+`;
 ```
 
 ### Overwrite resolvers
 
 To overwrite an existing resolver, you can pass a property called resolvers available on the `richTextResolver` options.
 
 ```ts
-import { MarkTypes, richTextResolver } from '@storyblok/richtext'
+import { MarkTypes, richTextResolver } from '@storyblok/richtext';
 
 const html = richTextResolver({
   resolvers: {
     [MarkTypes.LINK]: (node) => {
-      return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`
+      return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`;
     },
   },
-}).render(doc)
+}).render(doc);
 ```
 
 ### Typing with Generics
@@ -100,28 +98,28 @@ This way the `@storyblok/richtext` is ignorant of framework specific types, avoi
 const options: StoryblokRichTextOptions<string> = {
   resolvers: {
     [MarkTypes.LINK]: (node: Node<string>) => {
-      return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`
+      return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`;
     },
   },
-}
+};
 
-const html = richTextResolver<string>(options).render(doc)
+const html = richTextResolver<string>(options).render(doc);
 ```
 
 ```ts
 // Vue
 const options: StoryblokRichTextOptions<VNode> = {
   renderFn: h,
-}
-const root = () => richTextResolver<VNode>(options).render(doc)
+};
+const root = () => richTextResolver<VNode>(options).render(doc);
 ```
 
 ## Optimize Images
 
 To optimize images in the richtext, you can use the `optimizeImages` property on the `richTextResolver` options. For the full list of available options, check the [Image Optimization](https://github.com/storyblok/storyblok-js-client?tab=readme-ov-file#method-storyblokrichtextresolverrender) documentation.
 
 ```ts
-import { richTextResolver } from '@storyblok/richtext'
+import { richTextResolver } from '@storyblok/richtext';
 
 const html = richTextResolver({
   optimizeImages: {
@@ -139,12 +137,12 @@ const html = richTextResolver({
       brightness: 10,
     },
   },
-}).render(doc)
+}).render(doc);
 ```
 
 ## Security: HTML Output Sanitization
 
-> [!WARNING]  
+> [!WARNING]
 > This package does not provide proper HTML sanitization by default
 
 The `@storyblok/richtext` package primarly converts rich text content into HTML strings, which can then be rendered into the DOM of a web page. This means that any HTML output generated by the rich text resolver includes the raw content as it is defined in Storyblok, which may potentially include harmful or malicious scripts.
@@ -162,8 +160,8 @@ As a developer using `@storyblok/richtext`, you are responsible for sanitizing t
 To assist you in sanitizing HTML content, we recommend using the following library:
 
 - **sanitize-html**: A simple HTML sanitizer with a flexible API that can adjust to a wide range of applications.
-  
-  GitHub: [sanitize-html](https://github.com/apostrophecms/sanitize-html) 
+
+  GitHub: [sanitize-html](https://github.com/apostrophecms/sanitize-html)
 
 ### Example Usage
 
@@ -175,17 +173,16 @@ import { richTextResolver } from '@storyblok/richtext';
 
 const html = richTextResolver().render(yourRichTextContent);
 const sanitizedHTML = sanitizeHtml(html, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'figure', 'figcaption']),
-    allowedAttributes: {
-        ...sanitizeHtml.defaults.allowedAttributes,
-        'img': ['src', 'alt', 'title']
-    }
+  allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'figure', 'figcaption']),
+  allowedAttributes: {
+    ...sanitizeHtml.defaults.allowedAttributes,
+    img: ['src', 'alt', 'title']
+  }
 });
 
 document.getElementById('your-element-id').innerHTML = sanitizedHTML;
 ```
 
-
 ## Setup
 
 ```
@@ -262,7 +259,6 @@ To run the tests for the core package:
 pnpm run test
 ```
 
-
 ## 🔗 Related Links
 
 - **[Storyblok Technology Hub](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js)**: Storyblok integrates with every framework so that you are free to choose the best fit for your project. We prepared the technology hub so that you can find selected beginner tutorials, videos, boilerplates, and even cheatsheets all in one place.