https://github.com/surmon-china/readme.vue

Design your README.md by @vuejs component.
https://github.com/surmon-china/readme.vue

Last synced: 8 months ago
JSON representation

Design your README.md by @vuejs component.

• Host: GitHub
• URL: https://github.com/surmon-china/readme.vue
• Owner: surmon-china
• License: mit
• Archived: true
• Created: 2022-01-20T14:43:40.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-08-15T21:08:26.000Z (about 1 year ago)
• Last Synced: 2024-12-27T16:25:01.197Z (9 months ago)
• Language: Vue
• Homepage:
• Size: 1.48 MB
• Stars: 11
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# README.md

🚀 Design your README.md by Vue component.

![](https://readme.app.surmon.me/api/render?template_id=hello-world&props.theme=dark&svg.width=830&svg.height=300)

## Render API

BaseURL: `http://readme.app.surmon.me/api/render`

### 🔷 Template params

**Template ID** `?template_id=`

Use default [template](https://github.com/surmon-china/README.md/tree/main/templates).

**Template URL** `?template_url=`

Use your remote vue template.

**Template string** `?template_string=`

Use your vue template by query string.

### 🔷 Template render params

begin with `props.`, template render params will transmit to vue component's `props`.

e.g. `?props.theme=dark&props.rows=2` will transmit to vue component `{ theme: 'dark', rows: '2' }`

### 🔷 SVG render params

begin with `svg.`, SVG render params will transmit to SVG wrapper's attributes.

e.g. `?svg.width=830&svg.height=100` will transmit to SVG wrapper ``

## HelloWorld

#### simple example

```markdown

![](https://readme.app.surmon.me/api/render?template_id=hello-world)

```

#### template params example

```markdown

![](https://readme.app.surmon.me/api/render?template_id=hello-world&props.theme=dark)

```

#### SVG params example

```markdown

![](https://readme.app.surmon.me/api/render?template_id=hello-world&svg.width=800&svg.height=300)

```

## Template

1. must be a vue SFC component

2. can't use Node.js API, `$ctx` only (see [sandbox context](https://github.com/surmon-china/README.md/blob/main/app/step-vue-render.ts#L13))

3. plain SFC component only

template example:

```vue

  


    
content

  


  const { defineComponent } = $ctx.vue

  export default defineComponent({

    name: 'Example',

    props: {

      theme: {

        type: String,

        default: 'light'

      }

    }

  })

  .main {

    width: 100px;

    height: 100px;

  }

```

## Template context

[TODO](https://github.com/surmon-china/README.md/blob/main/app/step-vue-render.ts#L13)

## Development Setup

```bash

# install dependencies

$ yarn

$ yarn dev

$ yarn build

$ yarn start

```

### Layout

- `api` vercel serverless

- `app/server` Node.js server