5 files changed, 278 insertions, 50 deletions

diff --git a/assets/common/css/markdown.css b/assets/common/css/markdown.css
new file mode 100644
index 00000000..f651e67e
--- /dev/null
+++ b/assets/common/css/markdown.css
@@ -0,0 +1,173 @@
+/**
+ * Credit to Simon Laroche <https://github.com/simonlc/Markdown-CSS>
+ * whom created the CSS which this file is based on.
+ * License: Unlicense <http://unlicense.org/>
+ */
+
+.markdown p{
+    margin:0.75em 0;
+}
+
+.markdown img{
+    max-width:100%;
+}
+
+.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6{
+    font-weight:normal;
+    font-style:normal;
+    line-height:1em;
+    margin:0.75em 0;
+}
+.markdown h4, .markdown h5, .markdown h6{ font-weight: bold; }
+.markdown h1{ font-size:2.5em; }
+.markdown h2{ font-size:2em; }
+.markdown h3{ font-size:1.5em; }
+.markdown h4{ font-size:1.2em; }
+.markdown h5{ font-size:1em; }
+.markdown h6{ font-size:0.9em; }
+
+.markdown blockquote{
+    color:#666666;
+    padding-left: 3em;
+    border-left: 0.5em #EEE solid;
+    margin:0.75em 0;
+}
+.markdown hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
+.markdown pre, .markdown code, .markdown kbd, .markdown samp {
+    font-family: monospace, 'courier new';
+    font-size: 0.98em;
+}
+.markdown pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+.markdown b, .markdown strong { font-weight: bold; }
+
+.markdown dfn, .markdown em { font-style: italic; }
+
+.markdown ins { background: #ff9; color: #000; text-decoration: none; }
+
+.markdown mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+.markdown sub, .markdown sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+.markdown sup { top: -0.5em; }
+.markdown sub { bottom: -0.25em; }
+
+.markdown ul, .markdown ol { margin: 1em 0; padding: 0 0 0 2em; }
+.markdown li p:last-child { margin:0 }
+.markdown dd { margin: 0 0 0 2em; }
+
+.markdown img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+.markdown table { border-collapse: collapse; border-spacing: 0; }
+.markdown td { vertical-align: top; }
+
+@media only screen and (min-width: 480px) {
+    .markdown {font-size:0.9em;}
+}
+
+@media only screen and (min-width: 768px) {
+    .markdown {font-size:1em;}
+}
+
+#linklist .markdown li {
+    padding: 0;
+    border: none;
+    background: none;
+}
+
+#linklist .markdown ul li {
+    list-style: circle;
+}
+
+#linklist .markdown ol li {
+    list-style: decimal;
+}
+
+.markdown table {
+    padding: 0;
+}
+.markdown table tr {
+    border-top: 1px solid #cccccc;
+    background-color: white;
+    margin: 0;
+    padding: 0;
+}
+.markdown table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+}
+.markdown table tr th {
+    font-weight: bold;
+    border: 1px solid #cccccc;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+}
+.markdown table tr td {
+    border: 1px solid #cccccc;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+}
+.markdown table tr th :first-child, .markdown  table tr td :first-child {
+    margin-top: 0;
+}
+.markdown table tr th :last-child, table tr td :last-child {
+    margin-bottom: 0;
+}
+
+.markdown pre {
+    background-color: #eee;
+    padding: 4px 9px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    overflow: auto;
+    box-shadow: 0 -1px 0 #e5e5e5,0 0 1px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
+}
+
+.markdown pre code {
+    color: black;
+    font-family: 'Consolas', 'Monaco', 'Andale Mono', monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.7;
+    font-size: 11.5px;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+.markdown :not(pre) code {
+    background-color: #eee;
+    padding: 1px 3px;
+    border-radius: 1px;
+    box-shadow: 0 -1px 0 #e5e5e5,0 0 1px rgba(0,0,0,0.12),0 1px 1px rgba(0,0,0,0.24);
+}
+
+#pageheader .md_help {
+    color: white;
+}
+
+/*
+ Remove header bookmarks style
+ */
+#pageheader .md_help a {
+    color: lightgray;
+    font-weight: bold;
+    text-decoration: underline;
+
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+}
+
+#pageheader .md_help a:hover {
+    color: white;
+}
diff --git a/assets/common/js/thumbnails-update.js b/assets/common/js/thumbnails-update.js
index b66ca3ae..3cd4c2a7 100644
--- a/assets/common/js/thumbnails-update.js
+++ b/assets/common/js/thumbnails-update.js
@@ -10,13 +10,14 @@
  * It contains a recursive call to retrieve the thumb of the next link when it succeed.
  * It also update the progress bar and other visual feedback elements.
  *
+ * @param {string} basePath Shaarli subfolder for XHR requests
  * @param {array}  ids      List of LinkID to update
  * @param {int}    i        Current index in ids
  * @param {object} elements List of DOM element to avoid retrieving them at each iteration
  */
-function updateThumb(ids, i, elements) {
+function updateThumb(basePath, ids, i, elements) {
   const xhr = new XMLHttpRequest();
-  xhr.open('POST', '?do=ajax_thumb_update');
+  xhr.open('PATCH', `${basePath}/admin/shaare/${ids[i]}/update-thumbnail`);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xhr.responseType = 'json';
   xhr.onload = () => {
@@ -29,17 +30,18 @@ function updateThumb(ids, i, elements) {
       elements.current.innerHTML = i;
       elements.title.innerHTML = response.title;
       if (response.thumbnail !== false) {
-        elements.thumbnail.innerHTML = `<img src="${response.thumbnail}">`;
+        elements.thumbnail.innerHTML = `<img src="${basePath}/${response.thumbnail}">`;
       }
       if (i < ids.length) {
-        updateThumb(ids, i, elements);
+        updateThumb(basePath, ids, i, elements);
       }
     }
   };
-  xhr.send(`id=${ids[i]}`);
+  xhr.send();
 }
 
 (() => {
+  const basePath = document.querySelector('input[name="js_base_path"]').value;
   const ids = document.getElementsByName('ids')[0].value.split(',');
   const elements = {
     progressBar: document.querySelector('.progressbar > div'),
@@ -47,5 +49,5 @@ function updateThumb(ids, i, elements) {
     thumbnail: document.querySelector('.thumbnail-placeholder'),
     title: document.querySelector('.thumbnail-link-title'),
   };
-  updateThumb(ids, 0, elements);
+  updateThumb(basePath, ids, 0, elements);
 })();
diff --git a/assets/default/js/base.js b/assets/default/js/base.js
index d5c29c69..be986ae0 100644
--- a/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@ -10,7 +10,7 @@ import Awesomplete from 'awesomplete';
  * @returns Found element or null.
  */
 function findParent(element, tagName, attributes) {
-  const parentMatch = key => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1;
+  const parentMatch = (key) => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1;
   while (element) {
     if (element.tagName.toLowerCase() === tagName) {
       if (Object.keys(attributes).find(parentMatch)) {
@@ -25,12 +25,18 @@ function findParent(element, tagName, attributes) {
 /**
  * Ajax request to refresh the CSRF token.
  */
-function refreshToken() {
+function refreshToken(basePath, callback) {
   const xhr = new XMLHttpRequest();
-  xhr.open('GET', '?do=token');
+  xhr.open('GET', `${basePath}/admin/token`);
   xhr.onload = () => {
-    const token = document.getElementById('token');
-    token.setAttribute('value', xhr.responseText);
+    const elements = document.querySelectorAll('input[name="token"]');
+    [...elements].forEach((element) => {
+      element.setAttribute('value', xhr.responseText);
+    });
+
+    if (callback) {
+      callback(xhr.response);
+    }
   };
   xhr.send();
 }
@@ -95,7 +101,7 @@ function updateAwesompleteList(selector, tags, instances) {
  * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
  */
 function htmlEntities(str) {
-  return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`);
+  return str.replace(/[\u00A0-\u9999<>&]/gim, (i) => `&#${i.charCodeAt(0)};`);
 }
 
 /**
@@ -188,8 +194,8 @@ function removeClass(element, classname) {
 function init(description) {
   function resize() {
     /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */
-    const scrollTop = window.pageYOffset ||
-      (document.documentElement || document.body.parentNode || document.body).scrollTop;
+    const scrollTop = window.pageYOffset
+      || (document.documentElement || document.body.parentNode || document.body).scrollTop;
 
     description.style.height = 'auto';
     description.style.height = `${description.scrollHeight + 10}px`;
@@ -215,6 +221,8 @@ function init(description) {
 }
 
 (() => {
+  const basePath = document.querySelector('input[name="js_base_path"]').value;
+
   /**
    * Handle responsive menu.
    * Source: http://purecss.io/layouts/tucked-menu-vertical/
@@ -461,7 +469,7 @@ function init(description) {
       });
 
       if (window.confirm(message)) {
-        window.location = `?delete_link&lf_linkdate=${ids.join('+')}&token=${token.value}`;
+        window.location = `${basePath}/admin/shaare/delete?id=${ids.join('+')}&token=${token.value}`;
       }
     });
   }
@@ -482,8 +490,10 @@ function init(description) {
           });
         });
 
-        const ids = links.map(item => item.id);
-        window.location = `?change_visibility&token=${token.value}&newVisibility=${visibility}&ids=${ids.join('+')}`;
+        const ids = links.map((item) => item.id);
+        window.location = (
+          `${basePath}/admin/shaare/visibility?token=${token.value}&newVisibility=${visibility}&id=${ids.join('+')}`
+        );
       });
     });
   }
@@ -545,8 +555,9 @@ function init(description) {
       }
       const refreshedToken = document.getElementById('token').value;
       const fromtag = block.getAttribute('data-tag');
+      const fromtagUrl = block.getAttribute('data-tag-url');
       const xhr = new XMLHttpRequest();
-      xhr.open('POST', '?do=changetag');
+      xhr.open('POST', `${basePath}/admin/tags`);
       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
       xhr.onload = () => {
         if (xhr.status !== 200) {
@@ -554,20 +565,28 @@ function init(description) {
           location.reload();
         } else {
           block.setAttribute('data-tag', totag);
+          block.setAttribute('data-tag-url', encodeURIComponent(totag));
           input.setAttribute('name', totag);
           input.setAttribute('value', totag);
           findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none';
           block.querySelector('a.tag-link').innerHTML = htmlEntities(totag);
-          block.querySelector('a.tag-link').setAttribute('href', `?searchtags=${encodeURIComponent(totag)}`);
-          block.querySelector('a.rename-tag').setAttribute('href', `?do=changetag&fromtag=${encodeURIComponent(totag)}`);
+          block
+            .querySelector('a.tag-link')
+            .setAttribute('href', `${basePath}/?searchtags=${encodeURIComponent(totag)}`);
+          block
+            .querySelector('a.count')
+            .setAttribute('href', `${basePath}/add-tag/${encodeURIComponent(totag)}`);
+          block
+            .querySelector('a.rename-tag')
+            .setAttribute('href', `${basePath}/admin/tags?fromtag=${encodeURIComponent(totag)}`);
 
           // Refresh awesomplete values
-          existingTags = existingTags.map(tag => (tag === fromtag ? totag : tag));
+          existingTags = existingTags.map((tag) => (tag === fromtag ? totag : tag));
           awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes);
         }
       };
-      xhr.send(`renametag=1&fromtag=${encodeURIComponent(fromtag)}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`);
-      refreshToken();
+      xhr.send(`renametag=1&fromtag=${fromtagUrl}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`);
+      refreshToken(basePath);
     });
   });
 
@@ -589,19 +608,20 @@ function init(description) {
       event.preventDefault();
       const block = findParent(event.target, 'div', { class: 'tag-list-item' });
       const tag = block.getAttribute('data-tag');
+      const tagUrl = block.getAttribute('data-tag-url');
       const refreshedToken = document.getElementById('token').value;
 
       if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) {
         const xhr = new XMLHttpRequest();
-        xhr.open('POST', '?do=changetag');
+        xhr.open('POST', `${basePath}/admin/tags`);
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xhr.onload = () => {
           block.remove();
         };
-        xhr.send(encodeURI(`deletetag=1&fromtag=${tag}&token=${refreshedToken}`));
-        refreshToken();
+        xhr.send(`deletetag=1&fromtag=${tagUrl}&token=${refreshedToken}`);
+        refreshToken(basePath);
 
-        existingTags = existingTags.filter(tagItem => tagItem !== tag);
+        existingTags = existingTags.filter((tagItem) => tagItem !== tag);
         awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes);
       }
     });
@@ -611,4 +631,15 @@ function init(description) {
   [...autocompleteFields].forEach((autocompleteField) => {
     awesomepletes.push(createAwesompleteInstance(autocompleteField));
   });
+
+  const exportForm = document.querySelector('#exportform');
+  if (exportForm != null) {
+    exportForm.addEventListener('submit', (event) => {
+      event.preventDefault();
+
+      refreshToken(basePath, () => {
+        event.target.submit();
+      });
+    });
+  }
 })();
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 61e382b6..a528adb0 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -69,20 +69,22 @@ pre {
   font-family: 'Roboto';
   font-weight: 400;
   font-style: normal;
-  src: local('Roboto'),
-  local('Roboto-Regular'),
-  url('../fonts/Roboto-Regular.woff2') format('woff2'),
-  url('../fonts/Roboto-Regular.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('../fonts/Roboto-Regular.woff2') format('woff2'),
+    url('../fonts/Roboto-Regular.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-weight: 700;
   font-style: normal;
-  src: local('Roboto'),
-  local('Roboto-Bold'),
-  url('../fonts/Roboto-Bold.woff2') format('woff2'),
-  url('../fonts/Roboto-Bold.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Bold'),
+    url('../fonts/Roboto-Bold.woff2') format('woff2'),
+    url('../fonts/Roboto-Bold.woff') format('woff');
 }
 
 body,
@@ -375,7 +377,7 @@ body,
 }
 
 @media screen and (max-width: 64em) {
-  .header-search ,
+  .header-search,
   .header-search * {
     visibility: hidden;
   }
@@ -490,6 +492,10 @@ body,
   }
 }
 
+.header-alert-message {
+  text-align: center;
+}
+
 // CONTENT - GENERAL
 .container {
   position: relative;
@@ -550,7 +556,6 @@ body,
   color: $dark-grey;
   font-size: .9em;
 
-
   a {
     display: inline-block;
     margin: 3px 0;
@@ -612,6 +617,11 @@ body,
     padding: 5px;
     text-decoration: none;
     color: $dark-grey;
+
+    &.selected {
+      background: var(--main-color);
+      color: $white;
+    }
   }
 
   input {
@@ -1236,8 +1246,19 @@ form {
   color: $dark-grey;
 }
 
-.page404-container {
+.page-error-container {
   color: $dark-grey;
+
+  h2 {
+    margin: 70px 0 25px;
+  }
+
+  pre {
+    margin: 0 20%;
+    padding: 20px 0;
+    text-align: left;
+    line-height: .7em;
+  }
 }
 
 // EDIT LINK
@@ -1436,6 +1457,8 @@ form {
   -webkit-transition: opacity 500ms ease-in-out;
   -moz-transition: opacity 500ms ease-in-out;
   -o-transition: opacity 500ms ease-in-out;
+  min-width: 1px;
+  min-height: 1px;
 
   &.b-loaded {
     opacity: 1;
@@ -1535,11 +1558,11 @@ form {
   text-align: center;
 
   a {
+    background: $almost-white;
     display: inline-block;
-    margin: 0 15px;
+    padding: 5px;
     text-decoration: none;
-    color: $white;
-    font-weight: bold;
+    color: $dark-grey;
   }
 }
 
@@ -1587,13 +1610,14 @@ form {
 
   > div {
     border-radius: 10px;
-    background: repeating-linear-gradient(
-      -45deg,
-      $almost-white,
-      $almost-white 6px,
-      var(--background-color) 6px,
-      var(--background-color) 12px
-    );
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        $almost-white,
+        $almost-white 6px,
+        var(--background-color) 6px,
+        var(--background-color) 12px
+      );
     width: 0%;
     height: 10px;
   }
diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css
index 87c440c8..1688dce0 100644
--- a/assets/vintage/css/shaarli.css
+++ b/assets/vintage/css/shaarli.css
@@ -746,8 +746,6 @@ a.bigbutton, #pageheader a.bigbutton {
     text-align: left;
     background-color: transparent;
     background-color: rgba(0, 0, 0, 0.4);
-    /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
-    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
     /* IE6–IE9 */
     text-shadow: 2px 2px 1px #000000;
 }