Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pranaygp/pedit
An easy way to make your websites editable!
https://github.com/pranaygp/pedit
Last synced: 2 months ago
JSON representation
An easy way to make your websites editable!
- Host: GitHub
- URL: https://github.com/pranaygp/pedit
- Owner: pranaygp
- Created: 2016-01-07T14:30:27.000Z (over 8 years ago)
- Default Branch: develop
- Last Pushed: 2016-11-06T23:21:33.000Z (over 7 years ago)
- Last Synced: 2024-04-11T16:18:10.972Z (2 months ago)
- Language: JavaScript
- Size: 188 KB
- Stars: 22
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - pedit - An easy way to make your websites editable! (JavaScript)
README
# pedit [](https://travis-ci.org/pranaygp/pedit)
An easy way to make your websites editable!
pedit helps you make the text on your site easily editable with the help of a [chrome extension][extension]. This could be helpful when you're making a website for a client who wants to keep their site updated, or if you just wanna easily edit the content on your own site without messing with html or pushing updates.
pedit works by dynamically loading all pedit enabled text from Firebase.
It's as easy as 1, 2, 3...
1. You use the `data-pedit` attribute in your html code on elements that you/your client might want to edit in the future.
2. When viewing the site on chrome with the [extension][extension], you'll see the pedit logo in your address bar. Hit it!
3. Your website magically becomes editable (after authenticating you, ofcourse). All changes made are saved (as a hidden bonus, changes are live and updates are pushed to everyone viewing your page in realtime)!
## Installation
### NPM installation
Run this command to fetch required scripts
```bash
$ npm install pedit-cms
```
Then, include the following code in your website
```html
```
### Bower installation
Run this command to fetch required scripts
```bash
$ bower install pedit-cms
```
Then, include the following code in your website
```html
```
### Source install
#### pedit
Download the [latest release][pedit-zip] and extract it into your site's source directory.
Then, include the following code in your website
```html
```
## Usage
After installing the required js scripts and ensuring that you **included the js files for every page where you want to enable pedit**,
Add the `data-pedit` attribute to any html element that you want to make editable. It's `value` should be an ID that you want to associate with that element.
**`data-pedit` values should be unique accross all pages in the same domain, unless you want elements to share content**
> Using the same `data-pedit` value on multiple elements will give them the same text data. This can be useful for common elements across pages like footer description.
Example:
```html
...
Title
Lorem ipsum dolor sit amet
...
```
Example 2 (Notice how using the same `data-pedit` value is useful here):
**index.html**
```html
...
pedit. All rights reserved
...
```
**about.html**
```html
...
pedit. All rights reserved
...
```
When the site's deployed, visit the url using chrome. With the [chrome extension][extension] installed, you'll see the pedit logo in the action bar. Click it to start editing content.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Credits
Pranay Prakash - [Personal Site](http://pranayprakash.co), [LinkedIn](http://linkedin.com/in/pranaygp), [Github](http://github.com/pranaygp)
[extension]: https://chrome.google.com/webstore/detail/pedit/adkanmbgbpddnlmijakakfajlcokkfje
[pedit-zip]: https://github.com/pranaygp/pedit/archive/0.6.0.zip