https://github.com/remorses/edit-this-page
https://github.com/remorses/edit-this-page
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/remorses/edit-this-page
- Owner: remorses
- Created: 2020-07-31T18:02:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-22T02:00:06.000Z (about 4 years ago)
- Last Synced: 2024-05-02T02:10:18.747Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://edit-this-page.now.sh
- Size: 3.52 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
edit-this-page
Make your website editable by your users
Import a button on your page to make any website editable, the button opens an overlay code editor that let you make changes and submit a pull request on github
### 1. Install
```
yarn add edit-this-page babel-plugin-edit-this-page @emotion/core @chakra-ui/core
```
### 2. Add the babel plugin
The babel plugin is necessary to inject the source code, github repo url to be used by the react component
```js
// babel.config.js
module.exports = {
plugins: [
[
'edit-this-page',
{
editableFiles: 'pages/**',
githubUrl: 'https://github.com/remorses/edit-this-page',
branch: 'master',
},
],
],
}
```
### 3. Use the react component
The react component will open a modal to edit your page contents
```tsx
import EditThisPageButton from 'edit-this-page'
export function App() {
return (
edit this page
)
}
```