https://github.com/metonym/svelte-preprocess-readme

Develop and demo Svelte components from your README.md
https://github.com/metonym/svelte-preprocess-readme

Last synced: about 1 month ago
JSON representation

Develop and demo Svelte components from your README.md

• Host: GitHub
• URL: https://github.com/metonym/svelte-preprocess-readme
• Owner: metonym
• License: mit
• Created: 2021-10-24T20:29:15.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-24T20:47:24.000Z (about 3 years ago)
• Last Synced: 2024-04-28T14:20:28.054Z (7 months ago)
• Language: Svelte
• Homepage:
• Size: 14.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-preprocess-readme

> Develop and demo Svelte components from your `README.md`

`svelte-preprocess-readme` is a Svelte preprocessor that turns your `README.md` file into live documentation.

## Installation

**Yarn**

```bash

yarn add -D svelte-preprocess-readme

```

**NPM**

```bash

npm i -D svelte-preprocess-readme

```

**pnpm**

```bash

pnpm i -D svelte-preprocess-readme

```

## Usage

This preprocessor is designed to be used with [Vite](https://vitejs.dev/).

**`package.json`**

```json

{

  "name": "svelte-focus-key",

  "svelte": "./src/index.js",

  "scripts": {

    "dev": "vite",

    "build": "vite build"

  },

  "devDependencies": {

    "@sveltejs/vite-plugin-svelte": "next",

    "svelte": "^3.44.0",

    "vite": "^2.6.10"

  },

  "repository": {

    "type": "git",

    "url": "https://github.com/metonym/svelte-focus-key"

  }

}

```

**vite.config.js**

```js

// vite.config.js

import { svelte } from "@sveltejs/vite-plugin-svelte";

import { preprocessReadme } from "svelte-preprocess-readme";

import pkg from "./package.json";

export default {

  plugins: [

    svelte({

      extensions: [".svelte", ".md"],

      preprocess: [

        preprocessReadme({

          name: pkg.name,

          svelte: pkg.svelte,

          relativeUrlPrefix: pkg.repository.url,

        }),

      ],

    }),

  ],

};

```

**`index.html`**

```html

  

    

    

  

  

    

      import App from "./README.md";

      new App({ target: document.body });

    

  

```

## License

[MIT](LICENSE)