docs: Add blog post for Svelte

README.md

@@ -83,10 +83,11 @@ You also need to start the Jest Preview Server by running the CLI `jest-preview`
 
 ## Examples
 
-- Use with [Vite](https://vitejs.dev/): [Example with Vite](https://www.jest-preview.com/docs/examples/vite-react)
-- Use with [Create React App](https://create-react-app.dev/): [Example with CRA](https://www.jest-preview.com/docs/examples/create-react-app)
-- Use with [NextJs Rust Compiler](https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler): [Example with NextJs Rust Compiler](https://www.jest-preview.com/docs/examples/next-rust)
-- Use with [NextJS Babel](https://nextjs.org/docs/testing#setting-up-jest-with-babel): [Example with CRA](https://www.jest-preview.com/docs/examples/next-babel)
+- Use with [Vite React](https://vitejs.dev/): https://www.jest-preview.com/docs/examples/vite-react
+- Use with [Create React App](https://create-react-app.dev/): https://www.jest-preview.com/docs/examples/create-react-app
+- Use with [NextJs Rust Compiler](https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler): https://www.jest-preview.com/docs/examples/next-rust
+- Use with [NextJS Babel](https://nextjs.org/docs/testing#setting-up-jest-with-babel): https://www.jest-preview.com/docs/examples/next-babel
+- Use with [Svelte](https://svelte.dev): https://www.jest-preview.com/docs/examples/svelte
 
 ## Feedback
 

examples/svelte/README.md

@@ -1,6 +1,6 @@
 # Use with Svelte
 
-This example demonstrates how to use `jest-preview` with [`Svelte`](https://svelte.dev) and [`Svelte Testing Library`](https://testing-library.com/docs/svelte-testing-library/intro/)
+This example demonstrates how to use `jest-preview` with [**Svelte**](https://svelte.dev) and [**Svelte Testing Library**](https://testing-library.com/docs/svelte-testing-library/intro/)
 
 ## Install Jest
 
@@ -18,11 +18,12 @@ Install Jest Preview
 npm install --save-dev jest-preview
 ```
 
-Configure code transforms as follow:
+[Configure code transforms](https://www.jest-preview.com/docs/getting-started/installation#2-configure-jests-transform-to-transform-css-and-files) as follow:
 
 ```js
 // jest.config.js
 transform: {
+  // ...
   "^.+\\.(css|scss|sass)$": "jest-preview/transforms/css",
   "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file",
 }

website/blog/2022-07-02-svelte-example/index.md

@@ -0,0 +1,46 @@
+---
+slug: svelte-example
+title: Jest Preview with Svelte
+description: If you use Jest to write tests for Svelte, you can also use Jest Preview to write and debug your tests faster
+authors: [nvh95]
+tags: [jest-preview, svelte, example]
+image: /img/svelte-support.jpg
+---
+
+[jest-preview](https://www.npmjs.com/package/jest-preview) is initially designed to work with jest, react and react-testing-library. However, the package is framework-agnostic, and you can use it with any testing libraries. Today, we add [an example](https://github.com/nvh95/jest-preview/tree/main/examples/svelte) of using it with [**Svelte**](https://svelte.dev) and [**Svelte Testing Library**](https://testing-library.com/docs/svelte-testing-library/intro/)
+
+<!--truncate-->
+
+![Use Jest Preview with Svelte](./svelte-animated.gif)
+
+Now, you can easily preview your UI in Jest when using Svelte just by 2 steps:
+
+1. Open Jest Preview Dashboard:
+
+```bash
+jest-preview
+```
+
+2. Add `debug()` to wherever you want to preview:
+
+```diff
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import { debug } from 'jest-preview';
+import App from '../../App.svelte';
+
+describe('Counter Component', () => {
+  it('it changes count when button is clicked', async () => {
+    render(App);
+    const button = screen.getByText(/Clicks:/);
+    expect(button.innerHTML).toBe('Clicks: 0');
+    await fireEvent.click(button);
+    expect(button.innerHTML).toBe('Clicks: 1');
+
++    debug();
+  });
+});
+```
+
+That's it. You can see the full example and detailed instruction at https://github.com/nvh95/jest-preview/tree/main/examples/svelte.
+
+<!-- TODO: After copying README.md to docs page, update the link here. -->