| title | description | image_url |
|---|---|---|
Code opensource techno Anywhere |
Contribuez ou détournez le code de la technologie Anywhere, qui vous permet de faire apparaître et de synchroniser n'importe quelle ressource de multiBàO sur votre site. |
Makes your HTML content easily editable from Github in Markdown.
- Edit a file on your Github called my-content.md
- Set the attribute
data-anywhere="my-content"on a tag in your HTML page
Your tag content will be replaced with the one from my-content.md and interpreted in HTML! Crazy huh!
Add this before your closing </head>:
<script src="https://cdn.rawgit.com/vinyll/anywhere/master/dist/anywhere.js"></script>
<script>Anywhere.config.default = {user: "vinyll", repo: "anywhere"};</script>
Now use it adding the data-anywhere attribute telling the file to read from:
<div data-anywhere="README"></div>
This will retrieve the README.md file from the Github repo and replace the <p> tag content.
For a github user vinyll, pointing to a anywhere repo on the branch mybranch, here's a sample config:
<script>
Anywhere.config.default = {
user: "vinyll", // your github username
repo: "anywhere", // your github repository
branch: "mybranch" // the branch where the file is. Default is _master_
}
</script>
The example below will therefore get the markdown content from https://github.com/vinyll/anywhere/blob/master/README.md, convert it into HTML and render it into some tag.
See the demo to see it in action or the demo code to view how it works.
The inclusion script
<script src="https://cdn.rawgit.com/vinyll/anywhere/master/dist/anywhere.js"></script>refers to the bleeding edge version of Anywhere. To use a stable version you should call it with the version you want to use. For example<script src="https://cdn.rawgit.com/vinyll/anywhere/0.3/dist/anywhere.js"></script>to refer to version 0.3. A list of versions is available on the github releases list.
Any DOM node with data-anywhere attribute will dispatch an update event
when ready.
var mydiv = document.querySelector('#mydiv');
mydiv.addEventListener('update', function(e) {
console.log('mydiv content was updated! new content:', e.detail);
}
You can therefore be informed whenever the content has been updated.
the update() event is available on all the DOM nodes where you apply data-anywhere attribute.
Therefore you can force-update a refresh on the node to reload its content:
var mydiv = document.querySelector('#mydiv');
mydiv.attributes['data-anywhere'].value = 'other-github-file';
mydiv.update();
This will load other-github-file from Github and update mydiv with the content retrieved.
'Anywhere' uses marked to convert Github's Markdown to HTML.
Note that when you use
data-anywhereattribute on a inline tag (such as<span>,<em>) or if you forced that tag todisplay: inline, the Markdown content rendered will not have the<p>wrapper. Therefore the HTML will not break and you can css-style properly.
With this lib you can use Github as a content editor with git powers and Github benefits. You could also use it as your CMS. Please let me know your usage.
JavaScipt ES6 is the original language version. You may find the file in
/src/anywhere.js.
To compile, install babeljs and run:
babel src/anywhere.js --blacklist strict -o dist/anywhere.js
You can add the --watch option if you're actively developping.
I chose to remove the "use strict"; option on top of the file as it would be on the global scope of the file and could therefore impact other JS files. If you have a better solution please file a bug.
Many ways to contribute:
- submit an issue when you find a bug
- suggest new ideas
- fork this repo and implement your features
- improve the code or demo
- find typos
- letting me know how you use it
MIT. Refer to the license.txt file.