diff --git a/assets/images/favicon.svg b/assets/images/favicon.svg new file mode 100644 index 0000000..eb061e7 --- /dev/null +++ b/assets/images/favicon.svg @@ -0,0 +1,75 @@ + + + + + + + + image/svg+xml + + + + + (c) Daniel Kraus <www.bovender.de> + + + + + + + + + + diff --git a/assets/js/mastodon-share.js b/assets/js/mastodon-share.js new file mode 100644 index 0000000..67bc1b9 --- /dev/null +++ b/assets/js/mastodon-share.js @@ -0,0 +1,68 @@ + +// I got the key, I got the secret… +let key = 'mastodon-instance'; +let instance = localStorage.getItem(key); + +// get the link from the DOM +const button = document.querySelector('.mastodon-share'); + +// refresh the link with the instance name +const refreshlink = (instance) => { + button.href = `https://${instance}/share?text=${encodeURIComponent(document.title)}%0A${encodeURIComponent(location.href)}`; +} + +// got it? Let's go! +if (button) { + // labels and texts from the link + let prompt = button.dataset.prompt || 'Please tell me your Mastodon instance'; + let editlabel = button.dataset.editlabel || 'Edit your Mastodon instance'; + let edittext = button.dataset.edittext || '✏️'; + + // Ask the user for the instance name and set it… + const setinstance = _ => { + instance = window.prompt(prompt, instance); + if(instance) { + localStorage.setItem(key, instance); + createeditbutton(); + refreshlink(instance); + button.click(); + } + } + + // create and insert the edit link + const createeditbutton = _ => { + if (document.querySelector('button.mastodon-edit')) return; + let editlink = document.createElement('button'); + editlink.innerText = edittext; + editlink.classList.add('mastodon-edit'); + editlink.title = editlabel; + editlink.ariaLabel = editlabel; + editlink.addEventListener('click', (e) => { + e.preventDefault(); + localStorage.removeItem(key); + setinstance(); + }); + button.insertAdjacentElement('afterend', editlink); + } + + // if there is a value in localstorage, create the edit link + if(localStorage.getItem(key)) { + createeditbutton(); + } + + // When a user clicks the link + button.addEventListener('click', (e) => { + + // If the user has already entered their instance + // and it is in localstorage write out the link href + // with the instance and the current page title and URL + if(localStorage.getItem(key)) { + refreshlink(localStorage.getItem(key)); + // otherwise, prompt the user for their instance and save it to localstorage + } else { + e.preventDefault(); + setinstance(); + } + + }); +} \ No newline at end of file diff --git a/assets/scss/_predefined.scss b/assets/scss/_predefined.scss new file mode 100644 index 0000000..6032997 --- /dev/null +++ b/assets/scss/_predefined.scss @@ -0,0 +1,54 @@ +// Colors +$theme: hsl(172, 99%, 26%); +$text: hsl(204, 28%, 93%); +$light-grey: #292e32; // #494f5c; +$dark-grey: #3B3E48; +$highlight-grey: #7d828a; +$midnightblue: #2c3e50; +$typewriter: hsl(172, 100%, 36%); + +// Fonts +$fonts: "IBM Plex Sans Light", "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; +$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei"; + +//Admonition +$admonition-background: ( + 'note': rgba(68, 138, 255, 0.1), + 'info': rgba(0, 184, 212, 0.1), + 'tip': rgba(0, 191, 165, 0.1), + 'success': rgba(0, 200, 83, 0.1), + 'warning': rgba(255, 145, 0, 0.1), + 'failure': rgba(255, 82, 82, 0.1), + 'danger': rgba(255, 23, 68, 0.1), + 'bug': rgba(245, 0, 87, 0.1), + ) !default; + +$admonition-color: ( + 'note': #448aff, + 'info': #00b8d4, + 'tip': #00bfa5, + 'success': #00c853, + 'warning': #ff9100, + 'failure': #ff5252, + 'danger': #ff1744, + 'bug': #f50057, + ) !default; + +// Mixins +@mixin dimmed { + opacity: .6; +} + +@mixin aTag { + a { + word-wrap: break-word; + border: none; + box-shadow: inset 0 -4px 0 $theme; + transition-property: box-shadow; + transition-duration: .1s; + + &:hover { + box-shadow: inset 0 -1em 0 $theme; + } + } +} \ No newline at end of file