4 |
5 | *Plume* is a 100% client-side blogging platform, built using [Solid standards](https://github.com/solid/), in which data is decoupled from the application itself. This means that you can host the application on any Web server, without having to install anything -- no database, no messing around with Node.js, it has 0 dependencies! It also means that other similar applications will be able to reuse the data resulting from your posts, without having to go through a complicated API.
6 |
7 | Plume uses [Markdown](https://en.wikipedia.org/wiki/Markdown) to provide you with the easiest and fastest experience for writing beautiful articles.
8 |
9 | It currently does not support dynamic configuration of data spaces, which means you will have to either run it on your own Web server, or manually upload it to your account -- you can use [https://databox.me]( https://databox.me) as storage. The next version will allow you to run it from Github, like all the other [Solid apps](https://github.com/solid/solid-apps) we currently offer.
10 |
11 | ## Configuration
12 |
13 | Before being able to use Plume, you will have to manually set some config values. First you need to copy/rename the `config-example.json` file to `config.json`. Then you need to set the `postsURL` value to have it point to an **existing** container on a [Solid-friendly server](https://github.com/solid/solid-platform) that holds your blog posts. Finally, you should also set the `owners` variable by adding your own WebID, in order to be able to access the editor UI and to create new posts.
14 |
15 | Here is an example of the configuration file:
16 |
17 | ```
18 | {
19 | "owners": ["https://example.org/profile#me"],
20 | "title": "Plume",
21 | "tagline": "Light as a feather",
22 | "picture": "img/logo.svg",
23 | "fadeText": true,
24 | "showSources": true,
25 | "cacheUnit": "days",
26 | "defaultPath": "posts",
27 | "postsURL": "https://account.databox.me/Public/blog/posts/"
28 | }
29 | ```
30 |
31 | Here is what each config parameter means:
32 |
33 | * `owner`: a list of URLs (WebIDs) of the people who can post on the blog
34 | * `title`: the title of the blog
35 | * `tagline`: tagline/subtitle
36 | * `picture`: the picture to display on the blog's header
37 | * `fadeText`: true/false - shortens the posts length when viewing the full blog
38 | * `showSources`: true/false - it will add a button/link that points to the source of the blog post (the actual resource)
39 | * `cacheUnit`: minutes/hours/days/ - validity of certain cached data (you shouldn't really need to change it)
40 | * `defaultPath`: this value will be suggested to the user if the blog needs to be initialized
41 | * `postsURL`: the URL of the folder (container) holding the posts for the blog
42 |
--------------------------------------------------------------------------------
/js/dropdown.js:
--------------------------------------------------------------------------------
1 | (function (window, document) {
2 | 'use strict';
3 |
4 | // Enable drop-down menus in Pure
5 | // Inspired by YUI3 gallery-simple-menu by Julien LeComte
6 | // [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js]
7 |
8 | function PureDropdown(dropdownParent) {
9 |
10 | var PREFIX = 'pure-',
11 | ACTIVE_CLASS_NAME = PREFIX + 'menu-active',
12 | ARIA_ROLE = 'role',
13 | ARIA_HIDDEN = 'aria-hidden',
14 | MENU_OPEN = 0,
15 | MENU_CLOSED = 1,
16 | MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
17 | MENU_ACTIVE_SELECTOR = '.pure-menu-active',
18 | MENU_LINK_SELECTOR = '.pure-menu-link',
19 | MENU_SELECTOR = '.pure-menu-children',
20 | DISMISS_EVENT = (window.hasOwnProperty &&
21 | window.hasOwnProperty('ontouchstart')) ?
22 | 'touchstart' : 'mousedown',
23 |
24 | ARROW_KEYS_ENABLED = true,
25 |
26 | ddm = this; // drop down menu
27 |
28 | this._state = MENU_CLOSED;
29 |
30 | this.show = function () {
31 | if (this._state !== MENU_OPEN) {
32 | this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
33 | this._menu.setAttribute(ARIA_HIDDEN, false);
34 | this._state = MENU_OPEN;
35 | }
36 | };
37 |
38 | this.hide = function () {
39 | if (this._state !== MENU_CLOSED) {
40 | this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
41 | this._menu.setAttribute(ARIA_HIDDEN, true);
42 | this._link.focus();
43 | this._state = MENU_CLOSED;
44 | }
45 | };
46 |
47 | this.toggle = function () {
48 | this[this._state === MENU_CLOSED ? 'show' : 'hide']();
49 | };
50 |
51 | this.halt = function (e) {
52 | e.stopPropagation();
53 | e.preventDefault();
54 | };
55 |
56 | this._dropdownParent = dropdownParent;
57 | this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
58 | this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
59 | this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);
60 |
61 | // Set ARIA attributes
62 | this._link.setAttribute('aria-haspopup', 'true');
63 | this._menu.setAttribute(ARIA_ROLE, 'menu');
64 | this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
65 | this._menu.setAttribute('aria-hidden', 'true');
66 | [].forEach.call(
67 | this._menu.querySelectorAll('li'),
68 | function(el){
69 | el.setAttribute(ARIA_ROLE, 'presentation');
70 | }
71 | );
72 | [].forEach.call(
73 | this._menu.querySelectorAll('a'),
74 | function(el){
75 | el.setAttribute(ARIA_ROLE, 'menuitem');
76 | }
77 | );
78 |
79 | // Toggle on click
80 | this._link.addEventListener('click', function (e) {
81 | e.stopPropagation();
82 | e.preventDefault();
83 | ddm.toggle();
84 | });
85 |
86 | // Keyboard navigation
87 | document.addEventListener('keydown', function (e) {
88 | var currentLink,
89 | previousSibling,
90 | nextSibling,
91 | previousLink,
92 | nextLink;
93 |
94 | // if the menu isn't active, ignore
95 | if (ddm._state !== MENU_OPEN) {
96 | return;
97 | }
98 |
99 | // if the menu is the parent of an open, active submenu, ignore
100 | if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
101 | return;
102 | }
103 |
104 | currentLink = ddm._menu.querySelector(':focus');
105 |
106 | // Dismiss an open menu on ESC
107 | if (e.keyCode === 27) {
108 | /* Esc */
109 | ddm.halt(e);
110 | ddm.hide();
111 | }
112 | // Go to the next link on down arrow
113 | else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
114 | /* Down arrow */
115 | ddm.halt(e);
116 | // get the nextSibling (an LI) of the current link's LI
117 | nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
118 | // if the nextSibling is a text node (not an element), go to the next one
119 | while (nextSibling && nextSibling.nodeType !== 1) {
120 | nextSibling = nextSibling.nextSibling;
121 | }
122 | nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
123 | // if there is no currently focused link, focus the first one
124 | if (!currentLink) {
125 | ddm._menu.querySelector('.pure-menu-link').focus();
126 | }
127 | else if (nextLink) {
128 | nextLink.focus();
129 | }
130 | }
131 | // Go to the previous link on up arrow
132 | else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
133 | /* Up arrow */
134 | ddm.halt(e);
135 | // get the currently focused link
136 | previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
137 | while (previousSibling && previousSibling.nodeType !== 1) {
138 | previousSibling = previousSibling.previousSibling;
139 | }
140 | previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
141 | // if there is no currently focused link, focus the last link
142 | if (!currentLink) {
143 | ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
144 | }
145 | // else if there is a previous item, go to the previous item
146 | else if (previousLink) {
147 | previousLink.focus();
148 | }
149 | }
150 | });
151 |
152 | // Dismiss an open menu on outside event
153 | document.addEventListener(DISMISS_EVENT, function (e) {
154 | var target = e.target;
155 | if (target !== ddm._link && !ddm._menu.contains(target)) {
156 | ddm.hide();
157 | ddm._link.blur();
158 | }
159 | });
160 |
161 | }
162 |
163 | function initDropdowns() {
164 | var dropdownParents = document.querySelectorAll('.pure-menu-has-children');
165 | for (var i = 0; i < dropdownParents.length; i++) {
166 | var ddm = new PureDropdown(dropdownParents[i]);
167 | }
168 | }
169 |
170 | initDropdowns();
171 |
172 | }(this, this.document));
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
115 |
121 |
116 |
120 | -
117 |
- Powered by Plume
118 |
'+posts[url].title+'
':'this post'; 345 | var div = document.createElement('div'); 346 | div.id = 'delete'; 347 | div.classList.add('dialog'); 348 | var section = document.createElement('section'); 349 | section.innerHTML = "You are about to delete "+postTitle; 350 | div.appendChild(section); 351 | 352 | var footer = document.createElement('footer'); 353 | 354 | var del = document.createElement('button'); 355 | del.classList.add("button"); 356 | del.classList.add('danger'); 357 | del.classList.add('float-left'); 358 | del.setAttribute('onclick', 'Plume.deletePost(\''+url+'\')'); 359 | del.innerHTML = 'Delete'; 360 | footer.appendChild(del); 361 | // delete button 362 | var cancel = document.createElement('button'); 363 | cancel.classList.add('button'); 364 | cancel.classList.add('float-right'); 365 | cancel.setAttribute('onclick', 'Plume.cancelDelete()'); 366 | cancel.innerHTML = 'Cancel'; 367 | footer.appendChild(cancel); 368 | div.appendChild(footer); 369 | 370 | // append to body 371 | document.querySelector('body').appendChild(div); 372 | }; 373 | 374 | var cancelDelete = function() { 375 | document.getElementById('delete').remove(); 376 | }; 377 | 378 | var deletePost = function(url) { 379 | if (url) { 380 | Solid.web.del(url).then( 381 | function(done) { 382 | if (done) { 383 | delete posts[url]; 384 | document.getElementById(url).remove(); 385 | document.getElementById('delete').remove(); 386 | notify('success', 'Successfully deleted post'); 387 | resetAll(true); 388 | } 389 | } 390 | ) 391 | .catch( 392 | function(err) { 393 | notify('error', 'Could not delete post'); 394 | resetAll(); 395 | } 396 | ); 397 | } 398 | }; 399 | 400 | var showError = function(err) { 401 | if (!err || !err.xhr) { 402 | return; 403 | } 404 | hideLoading(); 405 | var url = err.xhr.requestedURI; 406 | var errorText = ''; 407 | if (err.status > 400 && err.status < 500) { 408 | errorText = "Could not fetch URL"; 409 | } 410 | document.querySelector('.error-title').innerHTML = errorText + ' - ' + err.status; 411 | document.querySelector('.error-url').innerHTML = document.querySelector('.error-url').href = url; 412 | document.querySelector('.error').classList.remove('hidden'); 413 | }; 414 | 415 | var showViewer = function(url) { 416 | window.history.pushState("", document.querySelector('title').value, window.location.pathname+"?post="+encodeURIComponent(url)); 417 | // hide main page 418 | document.querySelector(config.postsElement).classList.add('hidden'); 419 | var viewer = document.querySelector('.viewer'); 420 | viewer.classList.remove('hidden'); 421 | 422 | var article = postToHTML(posts[url]); 423 | if (!article) { 424 | showLoading(); 425 | fetchPost(url).then( 426 | function(post) { 427 | // convert post to HTML 428 | posts[url] = post; 429 | hideLoading(); 430 | showViewer(url); 431 | } 432 | ).catch( 433 | function(err) { 434 | showError(err); 435 | } 436 | ); 437 | return; 438 | } 439 | 440 | // Update document title 441 | if (posts[url] && posts[url].title) { 442 | document.querySelector('title').innerHTML += ' - ' + posts[url].title; 443 | } 444 | 445 | // add last modified date 446 | if (posts[url].modified && posts[url].modified != posts[url].created) { 447 | var modDate = document.createElement('p'); 448 | modDate.innerHTML += ' '+"Last updated "+formatDate(posts[url].modified, 'LLL')+''; 449 | article.querySelector('section').appendChild(modDate); 450 | } 451 | 452 | // append article 453 | viewer.appendChild(article); 454 | var footer = document.createElement('footer'); 455 | viewer.appendChild(footer); 456 | // add separator 457 | var sep = document.createElement('h1'); 458 | sep.classList.add('content-subhead'); 459 | footer.appendChild(sep); 460 | // create button list 461 | var buttonList = document.createElement('div'); 462 | // add back button 463 | var back = document.createElement('a'); 464 | back.classList.add("action-button"); 465 | back.href = window.location.pathname; 466 | back.innerHTML = '≪ Back to blog'; 467 | buttonList.appendChild(back); 468 | // add view source 469 | if (config.showSources) { 470 | var src = document.createElement('a'); 471 | src.classList.add("action-button"); 472 | src.href = url; 473 | src.target = '_blank'; 474 | src.innerHTML = 'View data'; 475 | buttonList.appendChild(src); 476 | } 477 | // append button list to viewer 478 | footer.appendChild(buttonList); 479 | } 480 | 481 | var showEditor = function(url) { 482 | if (!user.authenticated) { 483 | notify('all', "You must log in before creating or editing posts."); 484 | return; 485 | } 486 | 487 | // make sure we're entering in edit mode 488 | if (editor.isPreviewActive()) { 489 | togglePreview(); 490 | } 491 | // hide nav button 492 | document.getElementById('menu-button').classList.add('hidden'); 493 | // handle tags 494 | var tags = document.querySelector('.editor-tags'); 495 | var appendTag = function(name, color) { 496 | var tagDiv = document.createElement('div'); 497 | tagDiv.classList.add('post-category'); 498 | tagDiv.classList.add('inline-block'); 499 | if (color) { 500 | tagDiv.setAttribute('style', 'background:'+color+';'); 501 | } 502 | var span = document.createElement('span'); 503 | span.innerHTML = name; 504 | tagDiv.appendChild(span); 505 | var tagLink = document.createElement('a'); 506 | tagLink.setAttribute('onclick', 'this.parentElement.remove()'); 507 | tagLink.innerHTML = 'x'; 508 | tagDiv.appendChild(tagLink); 509 | tags.appendChild(tagDiv); 510 | // clear input 511 | document.querySelector('.editor-add-tag').value = ''; 512 | }; 513 | 514 | var loadPost = function(url) { 515 | var post = posts[url]; 516 | if (post.title) { 517 | document.querySelector('.editor-title').value = post.title; 518 | // Also update document title 519 | document.querySelector('title').innerHTML += ' - Editing - ' + posts[url].title; 520 | } 521 | if (post.author) { 522 | var author = getAuthorByWebID(post.author); 523 | document.querySelector('.editor-author').innerHTML = author.name; 524 | } 525 | if (post.created) { 526 | document.querySelector('.editor-date').innerHTML = formatDate(post.created); 527 | } 528 | 529 | // add tags 530 | if (post.tags && post.tags.length > 0) { 531 | var tagInput = document.createElement('input'); 532 | for (var i in post.tags) { 533 | var tag = post.tags[i]; 534 | if (tag.name && tag.name.length > 0) { 535 | appendTag(tag.name, tag.color); 536 | } 537 | } 538 | 539 | } 540 | if (post.body) { 541 | setBodyValue(decodeHTML(post.body)); 542 | } 543 | 544 | document.querySelector('.publish').innerHTML = "Update"; 545 | document.querySelector('.publish').setAttribute('onclick', 'Plume.publishPost(\''+url+'\')'); 546 | window.history.pushState("", document.querySelector('title').value, window.location.pathname+"?edit="+encodeURIComponent(url)); 547 | }; 548 | 549 | document.querySelector('.posts').classList.add('hidden'); 550 | document.querySelector('.viewer').classList.add('hidden'); 551 | document.querySelector('.start').classList.add('hidden'); 552 | document.querySelector('.editor').classList.remove('hidden'); 553 | document.querySelector('.editor-title').focus(); 554 | document.querySelector('.editor-author').innerHTML = user.name; 555 | document.querySelector('.editor-date').innerHTML = formatDate(); 556 | document.querySelector('.editor-tags').innerHTML = ''; 557 | 558 | // add event listener and set up tags 559 | // document.querySelector('.editor-add-tag').value = ''; 560 | // document.querySelector('.editor-add-tag').onkeypress = function(e){ 561 | // if (!e) e = window.event; 562 | // var keyCode = e.keyCode || e.which; 563 | // if (keyCode == '13'){ 564 | // appendTag(document.querySelector('.editor-add-tag').value, document.querySelector('.color-picker').style.background); 565 | // } 566 | // } 567 | 568 | // preload data if updating 569 | if (url && url.length > 0) { 570 | if (posts[url]) { 571 | loadPost(url); 572 | } else { 573 | fetchPost(url).then( 574 | function(post) { 575 | loadPost(url); 576 | } 577 | ); 578 | } 579 | } else { 580 | // resume post if we have data 581 | var post = loadPendingPost(); 582 | if (post) { 583 | setBodyValue(post.body); 584 | document.querySelector('.editor-title').value = post.title; 585 | } 586 | document.querySelector('.publish').innerHTML = "Publish"; 587 | document.querySelector('.publish').setAttribute('onclick', 'Plume.publishPost()'); 588 | } 589 | }; 590 | 591 | var publishPost = function(url) { 592 | var post = (url)?posts[url]:{}; 593 | post.title = trim(document.querySelector('.editor-title').value); 594 | post.body = getBodyValue(); 595 | post.tags = []; 596 | var allTags = document.querySelectorAll('.editor-tags .post-category'); 597 | for (var i in allTags) { 598 | if (allTags[i].style) { 599 | var tag = {}; 600 | tag.name = allTags[i].querySelector('span').innerHTML; 601 | tag.color = rgbToHex(allTags[i].style.background); 602 | post.tags.push(tag); 603 | } 604 | } 605 | 606 | post.modified = moment().utcOffset('00:00').format("YYYY-MM-DDTHH:mm:ssZ"); 607 | 608 | if (!url) { 609 | post.author = user.webid; 610 | post.created = post.modified; 611 | } 612 | 613 | savePost(post, url); 614 | }; 615 | 616 | // save post data to server 617 | var savePost = function(post, url) { 618 | //TODO also write tags - use sioc:topic -> uri 619 | var g = new $rdf.graph(); 620 | g.add($rdf.sym(''), RDF('type'), SIOC('Post')); 621 | g.add($rdf.sym(''), DCT('title'), $rdf.lit(post.title)); 622 | g.add($rdf.sym(''), SIOC('has_creator'), $rdf.sym('#author')); 623 | g.add($rdf.sym(''), DCT('created'), $rdf.lit(post.created, '', $rdf.Symbol.prototype.XSDdateTime)); 624 | g.add($rdf.sym(''), DCT('modified'), $rdf.lit(post.modified, '', $rdf.Symbol.prototype.XSDdateTime)); 625 | g.add($rdf.sym(''), SIOC('content'), $rdf.lit(encodeHTML(post.body))); 626 | 627 | g.add($rdf.sym('#author'), RDF('type'), SIOC('UserAccount')); 628 | g.add($rdf.sym('#author'), SIOC('account_of'), $rdf.sym(post.author)); 629 | g.add($rdf.sym('#author'), FOAF('name'), $rdf.lit(authors[post.author].name)); 630 | g.add($rdf.sym('#author'), SIOC('avatar'), $rdf.sym(authors[post.author].picture)); 631 | 632 | var triples = new $rdf.Serializer(g).toN3(g); 633 | 634 | if (url) { 635 | var writer = Solid.web.put(url, triples); 636 | } else { 637 | var slug = makeSlug(post.title); 638 | var writer = Solid.web.post(config.postsURL, slug, triples); 639 | } 640 | writer.then( 641 | function(res) { 642 | // all done, clean up and go to initial state 643 | if (res.url.slice(0,4) !== 'http') { 644 | res.url = config.postsURL.slice(0, config.postsURL.lastIndexOf('/') + 1)+slug; 645 | } 646 | cancelPost('?post='+encodeURIComponent(res.url)); 647 | } 648 | ) 649 | .catch( 650 | function(err) { 651 | console.log("Could not create post!"); 652 | console.log(err); 653 | notify('error', 'Could not create post'); 654 | resetAll(); 655 | } 656 | ); 657 | }; 658 | 659 | var fetchPosts = function(url, showGrowl) { 660 | // select element holding all the posts 661 | var postsdiv = document.querySelector(config.postsElement); 662 | // clear previous posts 663 | postsdiv.innerHTML = ''; 664 | // ask only for sioc:Post resources 665 | Solid.web.get(url).then( 666 | function(g) { 667 | var _posts = []; 668 | var st = g.statementsMatching(undefined, RDF('type'), SIOC('Post')); 669 | // fallback to containment triples 670 | if (st.length === 0) { 671 | st = g.statementsMatching($rdf.sym(url), LDP('contains'), undefined); 672 | st.forEach(function(s) { 673 | _posts.push(s.object.uri); 674 | }) 675 | } else { 676 | st.forEach(function(s) { 677 | _posts.push(s.subject.uri); 678 | }); 679 | } 680 | 681 | if (_posts.length === 0) { 682 | resetAll(); 683 | hideLoading(); 684 | if (user.authenticated) { 685 | document.querySelector('.start').classList.remove('hidden'); 686 | } else { 687 | document.querySelector('.init').classList.remove('hidden'); 688 | } 689 | } 690 | 691 | var toLoad = _posts.length; 692 | var isDone = function() { 693 | if (toLoad <= 0) { 694 | hideLoading(); 695 | if (showGrowl) { 696 | growl("Updating...", "Finished updating your blog"); 697 | } 698 | } 699 | } 700 | 701 | var sortedPosts = []; 702 | _posts.forEach(function(url){ 703 | fetchPost(url).then( 704 | function(post) { 705 | if (len(post) === 0) { 706 | toLoad--; 707 | isDone(); 708 | } else { 709 | // convert post to HTML 710 | var article = postToHTML(post, true); 711 | 712 | // sort array and add to dom 713 | // TODO improve it later 714 | sortedPosts.push({date: post.created, url: post.url}); 715 | sortedPosts.sort(function(a,b) { 716 | var c = new Date(a.date); 717 | var d = new Date(b.date); 718 | return d-c; 719 | }); 720 | for(var i=0; iRecent Posts
915 | if (!post) { 916 | return; 917 | } 918 | var author = getAuthorByWebID(post.author); 919 | var name = author.name; 920 | var picture = author.picture; 921 | 922 | // create main post element 923 | var article = document.createElement('article'); 924 | article.classList.add('post'); 925 | article.id = post.url; 926 | 927 | // create header 928 | var header = document.createElement('header'); 929 | header.classList.add('post-header'); 930 | // append header to article 931 | article.appendChild(header); 932 | 933 | // set avatar 934 | var avatar = document.createElement('img'); 935 | avatar.classList.add('post-avatar'); 936 | avatar.src = picture; 937 | avatar.alt = avatar.title = name+"'s picture"; 938 | // append picture to header 939 | var avatarLink = document.createElement('a'); 940 | avatarLink.href = post.author; 941 | avatarLink.setAttribute('target', '_blank'); 942 | avatarLink.appendChild(avatar); 943 | header.appendChild(avatarLink); 944 | 945 | // add meta data 946 | var meta = document.createElement('div'); 947 | meta.classList.add('post-meta'); 948 | // append meta to header 949 | header.appendChild(meta); 950 | 951 | // create meta author 952 | var metaAuthor = document.createElement('a'); 953 | metaAuthor.classList.add('post-author'); 954 | metaAuthor.href = post.author; 955 | metaAuthor.setAttribute('target', '_blank'); 956 | metaAuthor.innerHTML = name; 957 | // append meta author to meta 958 | meta.appendChild(metaAuthor); 959 | 960 | // add br 961 | meta.appendChild(document.createElement('br')); 962 | 963 | // create meta date 964 | var metaDate = document.createElement('span'); 965 | metaDate.classList.add('post-date'); 966 | metaDate.innerHTML = formatDate(post.created); 967 | // append meta date to meta 968 | meta.appendChild(metaDate); 969 | 970 | // create meta tags 971 | if (post.tags && post.tags.length > 0) { 972 | var metaTags = document.createElement('span'); 973 | metaTags.classList.add('post-tags'); 974 | metaTags.innerHTML = " under "; 975 | for (var i in post.tags) { 976 | var tag = post.tags[i]; 977 | if (tag.name && tag.name.length > 0) { 978 | var tagLink = document.createElement('a'); 979 | tagLink.classList.add('post-category'); 980 | if (tag.color) { 981 | tagLink.setAttribute('style', 'background:'+tag.color+';'); 982 | } 983 | tagLink.innerHTML = tag.name; 984 | tagLink.href = "#"; 985 | tagLink.setAttribute('onclick', 'Plume.sortTag("'+tag.name+'")'); 986 | metaTags.appendChild(tagLink); 987 | } 988 | } 989 | 990 | // append meta tag 991 | meta.appendChild(metaTags); 992 | } 993 | 994 | // create title 995 | var title = document.createElement('h1'); 996 | title.classList.add('post-title'); 997 | title.innerHTML = (post.title)?''+post.title+'':''; 998 | // append title to body 999 | header.appendChild(title); 1000 | 1001 | // create body 1002 | var section = document.createElement('section'); 1003 | section.classList.add('post-body'); 1004 | article.appendChild(section); 1005 | 1006 | var bodyText = parseMD(decodeHTML(post.body)); 1007 | 1008 | // add post body 1009 | if (makeLink) { 1010 | section.classList.add('clickable'); 1011 | section.addEventListener('click', function (event) { window.location.replace('?post='+encodeURIComponent(post.url))}); 1012 | } 1013 | section.innerHTML += bodyText; 1014 | 1015 | // add footer with action links 1016 | var footer = document.createElement('footer'); 1017 | 1018 | if (user.webid == post.author) { 1019 | // edit button 1020 | var edit = document.createElement('a'); 1021 | edit.classList.add("action-button"); 1022 | edit.href = '?edit='+encodeURIComponent(post.url); 1023 | edit.setAttribute('title', 'Edit post'); 1024 | edit.innerHTML = 'Edit';
1025 | footer.appendChild(edit);
1026 | // delete button
1027 | var del = document.createElement('a');
1028 | del.classList.add('action-button');
1029 | del.classList.add('danger-text');
1030 | del.setAttribute('onclick', 'Plume.confirmDelete(\''+post.url+'\')');
1031 | del.innerHTML = 'Delete';
1032 | footer.appendChild(del);
1033 | }
1034 |
1035 | // append footer to post
1036 | article.appendChild(footer);
1037 |
1038 | var sep = document.createElement('div');
1039 | sep.classList.add('separator');
1040 | article.appendChild(sep);
1041 |
1042 | // append article to list of posts
1043 | return article;
1044 | };
1045 |
1046 | // fade long text in articles
1047 | // TODO fix fade after updating post
1048 | var addTextFade = function(url) {
1049 | // get element current height
1050 | var article = document.getElementById(url);
1051 | if (url && article) {
1052 | var section = article.querySelector('section');
1053 | var height = section.offsetHeight;
1054 | // fade post contents if post is too long
1055 | if (height > 400) {
1056 | section.classList.add('less');
1057 | var fade = document.createElement('div');
1058 | fade.classList.add('fade-bottom');
1059 | fade.classList.add('center-text');
1060 | fade.innerHTML = '— '+"more —";
1061 | article.insertBefore(fade, article.querySelector('footer'));
1062 | }
1063 | }
1064 | };
1065 |
1066 | // Websocket
1067 | var connectToSocket = function(wss, uri) {
1068 | if (!webSockets[wss]) {
1069 | var socket = new WebSocket(wss);
1070 | socket.onopen = function(){
1071 | this.send('sub ' + uri);
1072 | console.log("Connected to WebSocket at", wss);
1073 | }
1074 | socket.onmessage = function(msg){
1075 | if (msg.data && msg.data.slice(0, 3) === 'pub') {
1076 | // resource updated
1077 | var res = trim(msg.data.slice(3, msg.data.length));
1078 | console.log("Got new message: pub", res);
1079 | fetchPosts(res, true); //refetch posts and notify
1080 | }
1081 | }
1082 | socket.onclose = function() {
1083 | console.log("Websocket connection closed. Restarting...");
1084 | connectToSocket(wss, uri);
1085 | }
1086 | webSockets[wss] = socket;
1087 | }
1088 | };
1089 |
1090 | // Subscribe to changes to a URL
1091 | var socketSubscribe = function(wss, url) {
1092 | if (webSockets[wss]) {
1093 | webSockets[wss].send('sub '+url);
1094 | } else {
1095 | connectToSocket(wss, url);
1096 | }
1097 | };
1098 |
1099 | // Misc/helper functions
1100 | var sortTag = function(name) {
1101 | console.log(name);
1102 | };
1103 |
1104 | var notify = function(ntype, text, timeout) {
1105 | timeout = timeout || 1500;
1106 | var note = document.createElement('div');
1107 | note.classList.add('note');
1108 | note.innerHTML = text;
1109 | note.addEventListener('click', note.remove, false);
1110 |
1111 | switch (ntype) {
1112 | case 'success':
1113 | note.classList.add('success');
1114 | break;
1115 | case 'error':
1116 | timeout = 3000;
1117 | note.classList.add('danger');
1118 | var tip = document.createElement('small');
1119 | tip.classList.add('small');
1120 | tip.innerHTML = ' Tip: check console for debug information.';
1121 | note.appendChild(tip);
1122 | break;
1123 | case 'sticky':
1124 | timeout = 0;
1125 | note.classList.add('dark');
1126 | note.innerHTML += ' [dismiss]'
1127 | break;
1128 | default:
1129 | note.classList.add('dark');
1130 | }
1131 | document.querySelector('body').appendChild(note);
1132 | if (timeout > 0) {
1133 | setTimeout(function() {
1134 | note.remove();
1135 | }, timeout);
1136 | }
1137 | };
1138 |
1139 | // Send a browser notification
1140 | var growl = function(type, body, timeout) {
1141 | var icon = 'favicon.png';
1142 | if (!timeout) {
1143 | var timeout = 2000;
1144 | }
1145 |
1146 | // Let's check if the browser supports notifications
1147 | if (!("Notification" in window)) {
1148 | console.log("This browser does not support desktop notification");
1149 | }
1150 |
1151 | // At last, if the user already denied any notification, and you
1152 | // want to be respectful there is no need to bother him any more.
1153 | // Let's check if the user is okay to get some notification
1154 | if (Notification.permission === "granted") {
1155 | // If it's okay let's create a notification
1156 | var notification = new Notification(type, {
1157 | dir: "auto",
1158 | lang: "",
1159 | icon: icon,
1160 | body: body,
1161 | tag: "notif"
1162 | });
1163 | setTimeout(function() { notification.close(); }, timeout);
1164 | }
1165 | };
1166 | // Authorize browser notifications
1167 | function authorizeNotifications() {
1168 | var status = getNotifStatus();
1169 | // Let's check if the browser supports notifications
1170 | if (!("Notification" in window)) {
1171 | console.log("This browser does not support desktop notification");
1172 | }
1173 |
1174 | if (status !== 'granted') {
1175 | Notification.requestPermission(function (permission) {
1176 | // Whatever the user answers, we make sure we store the information
1177 | Notification.permission = permission;
1178 | });
1179 | } else if (status === 'granted') {
1180 | Notification.permission = 'denied';
1181 | }
1182 | };
1183 | // Browser notifications status
1184 | function getNotifStatus() {
1185 | // Let's check if the browser supports notifications
1186 | if (!("Notification" in window)) {
1187 | console.log("This browser does not support desktop notification");
1188 | return undefined
1189 | } else {
1190 | return Notification.permission;
1191 | }
1192 | };
1193 |
1194 | // Overlay
1195 | var toggleOverlay = function(elem) {
1196 | var overlay = document.querySelector(elem);
1197 | overlay.addEventListener('click', toggleOverlay);
1198 | overlay.style.visibility = (overlay.style.visibility == "visible") ? "hidden" : "visible";
1199 | };
1200 |
1201 | // Convert rgb() to #hex
1202 | var rgbToHex = function (color) {
1203 | color = color.replace(/\s/g,"");
1204 | var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
1205 | if(aRGB)
1206 | {
1207 | color = '';
1208 | for (var i=1; i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
1209 | }
1210 | else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
1211 | return '#'+color;
1212 | };
1213 |
1214 | var togglePreview = function() {
1215 | editor.togglePreview();
1216 | var text = document.querySelector('.preview');
1217 | text.innerHTML = (text.innerHTML=="View")?"Edit":"View";
1218 | };
1219 |
1220 | // check if user is among the owners list
1221 | var isOwner = function() {
1222 | if (config.owners && config.owners.indexOf(user.webid) >= 0) {
1223 | return true;
1224 | }
1225 | return false;
1226 | };
1227 |
1228 | // formatDate
1229 | var formatDate = function(date, style) {
1230 | style = style || 'LL';
1231 | if (moment().diff(moment(date), 'days') > 1) {
1232 | return moment(date).format(style);
1233 | } else {
1234 | return moment(date).fromNow();
1235 | }
1236 | };
1237 |
1238 | // sanitize strings
1239 | var trim = function (str) {
1240 | return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
1241 | }
1242 | var makeSlug = function (str) {
1243 | // replace white spaces and multiple dashes
1244 | str = str.replace(/\s+/g, '-').
1245 | replace(/-+/g, '-').
1246 | replace(/^-+/, '').
1247 | replace(/-*$/, '').
1248 | replace(/[^A-Za-z0-9-]/g, '').
1249 | toLowerCase();
1250 | str += '.ttl';
1251 | return str;
1252 | };
1253 |
1254 | // escape HTML code
1255 | var encodeHTML = function (html) {
1256 | return html
1257 | .replace(/&/g, "&")
1258 | .replace(//g, ">")
1260 | .replace(/"/g, """)
1261 | .replace(/'/g, "'");
1262 | };
1263 |
1264 | var decodeHTML = function (html) {
1265 | return html
1266 | .replace(/&/g, "&")
1267 | .replace(/</g, "<")
1268 | .replace(/>/g, ">")
1269 | .replace(/"/g, "\"")
1270 | .replace(/'/g, "'");
1271 | };
1272 | // compute length of objects based on its keys
1273 | var len = function(obj) {
1274 | return Object.keys(obj).length;
1275 | };
1276 |
1277 |
1278 | var setColor = function(color) {
1279 | document.querySelector('.color-picker').style.background = window.getComputedStyle(document.querySelector('.'+color), null).backgroundColor;
1280 | document.querySelector('.pure-menu-active').classList.remove('pure-menu-active');
1281 | document.querySelector('.editor-add-tag').focus();
1282 | };
1283 |
1284 | var cancelPost = function(url) {
1285 | clearPendingPost();
1286 | url = (url)?url:window.location.pathname;
1287 | window.location.replace(url);
1288 | };
1289 |
1290 | // reset to initial view
1291 | var resetAll = function(refresh) {
1292 | document.getElementById('menu-button').classList.remove('hidden');
1293 | if (isOwner()) {
1294 | showNewPostButton();
1295 | }
1296 | hideLoading();
1297 | document.querySelector('.init').classList.add('hidden');
1298 | document.querySelector('.editor').classList.add('hidden');
1299 | document.querySelector('.viewer').classList.add('hidden');
1300 | document.querySelector('.viewer').innerHTML = '';
1301 | document.querySelector('.posts').classList.remove('hidden');
1302 | // document.querySelector('.editor-add-tag').value = '';
1303 | if (posts && len(posts) === 0) {
1304 | if (user.authenticated) {
1305 | document.querySelector('.start').classList.remove('hidden');
1306 | } else {
1307 | document.querySelector('.init').classList.remove('hidden');
1308 | }
1309 | }
1310 | if (refresh) {
1311 | showBlog(config.postsURL);
1312 | } else {
1313 | window.history.pushState("", document.querySelector('title').value, window.location.pathname);
1314 | }
1315 | };
1316 |
1317 | // login / logout buttons + new post
1318 | var showLogin = function() {
1319 | document.getElementsByClassName('login')[0].classList.remove('hidden');
1320 | document.getElementsByClassName('logout')[0].classList.add('hidden');
1321 | hideNewPostButton();
1322 | };
1323 | var hideLogin = function() {
1324 | document.getElementsByClassName('login')[0].classList.add('hidden');
1325 | document.getElementsByClassName('logout')[0].classList.remove('hidden');
1326 | };
1327 | // loading animation
1328 | var hideLoading = function() {
1329 | document.querySelector('.loading').classList.add('hidden');
1330 | }
1331 | var showLoading = function() {
1332 | document.querySelector('.loading').classList.remove('hidden');
1333 | }
1334 | // new post button
1335 | var hideNewPostButton = function() {
1336 | document.querySelector('.new').classList.add('hidden');
1337 | };
1338 | var showNewPostButton = function() {
1339 | document.querySelector('.new').classList.remove('hidden');
1340 | };
1341 |
1342 | // save pending post text to localStorage
1343 | var savePendingPost = function(text) {
1344 | var post = {};
1345 | post.title = trim(document.querySelector('.editor-title').value);
1346 | post.body = text;
1347 | try {
1348 | localStorage.setItem(appURL+'pendingPost', JSON.stringify(post));
1349 | } catch(err) {
1350 | console.log(err);
1351 | }
1352 |
1353 | };
1354 | // load pending post text from localStorage
1355 | var loadPendingPost = function() {
1356 | try {
1357 | return JSON.parse(localStorage.getItem(appURL+'pendingPost'));
1358 | } catch(err) {
1359 | console.log(err);
1360 | }
1361 | };
1362 | var clearPendingPost = function() {
1363 | setBodyValue('');
1364 | try {
1365 | localStorage.removeItem(appURL+'pendingPost');
1366 | } catch(err) {
1367 | console.log(err);
1368 | }
1369 | }
1370 |
1371 | // save authors to localStorage
1372 | var saveLocalAuthors = function() {
1373 | try {
1374 | localStorage.setItem(appURL+'authors', JSON.stringify(authors));
1375 | } catch(err) {
1376 | console.log(err);
1377 | }
1378 | };
1379 | // clear localstorage authors data
1380 | var clearLocalAuthors = function() {
1381 | try {
1382 | localStorage.removeItem(appURL+'authors');
1383 | } catch(err) {
1384 | console.log(err);
1385 | }
1386 | };
1387 | // clear localstorage config data
1388 | var loadLocalAuthors = function() {
1389 | try {
1390 | var data = JSON.parse(localStorage.getItem(appURL+'authors'));
1391 | if (data) {
1392 | authors = data;
1393 | }
1394 | } catch(err) {
1395 | console.log(err);
1396 | }
1397 | };
1398 |
1399 | // save config data to localStorage
1400 | var saveLocalStorage = function() {
1401 | var data = {
1402 | user: user,
1403 | config: config
1404 | };
1405 | try {
1406 | localStorage.setItem(appURL, JSON.stringify(data));
1407 | } catch(err) {
1408 | console.log(err);
1409 | }
1410 | };
1411 | // clear localstorage config data
1412 | var clearLocalStorage = function() {
1413 | try {
1414 | localStorage.removeItem(appURL);
1415 | } catch(err) {
1416 | console.log(err);
1417 | }
1418 | };
1419 | var loadLocalStorage = function() {
1420 | try {
1421 | var data = JSON.parse(localStorage.getItem(appURL));
1422 | if (data) {
1423 | // don't let session data become stale (24h validity)
1424 | var dateValid = data.config.saveDate + 1000 * 60 * 60 * 24;
1425 | if (Date.now() < dateValid) {
1426 | config = data.config;
1427 | user = data.user;
1428 | if (user.authenticated) {
1429 | hideLogin();
1430 | }
1431 | if (isOwner()) {
1432 | showNewPostButton();
1433 | }
1434 | } else {
1435 | console.log("Deleting localStorage data because it expired");
1436 | localStorage.removeItem(appURL);
1437 | }
1438 | } else {
1439 | // clear sessionStorage in case there was a change to the data structure
1440 | localStorage.removeItem(appURL);
1441 | }
1442 | } catch(err) {
1443 | notify('sticky', 'Persistence functionality is disabled while cookies are disabled.');
1444 | console.log(err);
1445 | }
1446 | };
1447 |
1448 |
1449 |
1450 | // ----- INIT -----
1451 | // start app by loading the config file
1452 | applyConfig();
1453 | var http = new XMLHttpRequest();
1454 | http.open('get', 'config.json');
1455 | http.onreadystatechange = function() {
1456 | if (this.readyState == this.DONE) {
1457 | init(JSON.parse(this.response));
1458 | }
1459 | };
1460 | http.send();
1461 |
1462 |
1463 |
1464 | // return public functions
1465 | return {
1466 | notify: notify,
1467 | user: user,
1468 | posts: posts,
1469 | login: login,
1470 | logout: logout,
1471 | signup: signup,
1472 | resetAll: resetAll,
1473 | cancelPost: cancelPost,
1474 | showEditor: showEditor,
1475 | showViewer: showViewer,
1476 | setColor: setColor,
1477 | publishPost: publishPost,
1478 | confirmDelete: confirmDelete,
1479 | cancelDelete: cancelDelete,
1480 | deletePost: deletePost,
1481 | togglePreview: togglePreview,
1482 | toggleOverlay: toggleOverlay,
1483 | growl: growl
1484 | };
1485 | }(this));
1486 |
1487 |
1488 | Plume.menu = (function() {
1489 | var ESCAPE_CODE = 27;
1490 |
1491 | var navButton = document.getElementById('menu-button'),
1492 | navMenu = document.getElementById('global-nav'),
1493 | mainDiv = document.getElementById('main');
1494 |
1495 | var navLinks = navMenu.getElementsByTagName('a');
1496 |
1497 | function handleKeydown(event) {
1498 | event.preventDefault();
1499 | if (event.keyCode === ESCAPE_CODE) {
1500 | document.body.classList.toggle('active');
1501 | disableNavLinks();
1502 | navButton.focus();
1503 | }
1504 | };
1505 | function handleClick(event) {
1506 | event.preventDefault();
1507 | if (document.body.classList.contains('active')) {
1508 | document.body.classList.remove('active');
1509 | disableNavLinks();
1510 | }
1511 | else {
1512 | document.body.classList.add('active');
1513 | enableNavLinks();
1514 | navLinks[0].focus();
1515 | }
1516 | };
1517 | function forceClose(event) {
1518 | if (document.body.classList.contains('active')) {
1519 | document.body.classList.remove('active');
1520 | disableNavLinks();
1521 | }
1522 | };
1523 | function enableNavLinks() {
1524 | navButton.removeAttribute('aria-label', 'Menu expanded');
1525 | navMenu.removeAttribute('aria-hidden');
1526 | for (var i=0; i