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. 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...
data-pedit
attribute in your html code on elements that you/your client might want to edit in the future.Run this command to fetch required scripts
$ npm install pedit-cms
Then, include the following code in your website
<script src="node_modules/pedit-cms/dist/pedit.js"></script>
Run this command to fetch required scripts
$ bower install pedit-cms
Then, include the following code in your website
<script src="bower_components/pedit/dist/pedit.js"></script>
Download the latest release and extract it into your site's source directory.
Then, include the following code in your website
<script src="pedit/dist/pedit.js"></script>
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:
<body>
...
<h1 data-pedit="title">Title</h1>
<p data-pedit="paragraph">Lorem ipsum dolor sit amet</p>
<p data-pedit="paragraph-2"></p>
...
</body>
Example 2 (Notice how using the same data-pedit
value is useful here):
index.html
<body>
...
<footer>
<p data-pedit="copyright-line">pedit. All rights reserved</p>
</footer>
...
</body>
about.html
<body>
...
<footer>
<p data-pedit="copyright-line">pedit. All rights reserved</p>
</footer>
...
</body>
When the site's deployed, visit the url using chrome. With the chrome extension installed, you'll see the pedit logo in the action bar. Click it to start editing content.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
Pranay Prakash - Personal Site, LinkedIn, Github