Add default styles for buttons

src/index.ts

@@ -1 +1,60 @@
 import './style.scss';
+
+interface PublishPreset {
+  url: string,
+  title: string,
+  extra?: {
+    media?: null|string,
+    text?: null|string,
+    via?: null|string,
+  }
+}
+
+type UrlBuilder = (data: PublishPreset) => string;
+
+const NETWORKS: { [name: string]: UrlBuilder } = {
+};
+
+function initShareonChild(child: HTMLElement, preset: PublishPreset) {
+  if (child) {
+    child.classList.forEach((cls) => {
+      if (Object.prototype.hasOwnProperty.call(NETWORKS, cls)) {
+        const url = NETWORKS[cls](preset);
+        if (child.tagName.toLowerCase() === 'a') {
+          child.setAttribute('href', url);
+          child.setAttribute('rel', 'noopener noreferrer');
+          child.setAttribute('target', '_blank');
+        } else {
+          child.addEventListener('click', () => { window.open(url, '_blank', 'noopener,noreferrer').opener = null; });
+        }
+      }
+    });
+  }
+}
+
+window.onload = () => {
+  const shareonContainers = document.getElementsByClassName('shareon');
+
+  for (let i = 0; i < shareonContainers.length; i += 1) {
+    const container = shareonContainers[i] as HTMLElement;
+
+    for (let j = 0; j < container.children.length; j += 1) {
+      const child = container.children[j] as HTMLElement;
+
+      const preset: PublishPreset = {
+        url: child.dataset.url || container.dataset.url || window.location.href,
+        title: child.dataset.title || container.dataset.title || document.title || '',
+        extra: {
+          media: child.dataset.media || container.dataset.media || null,
+          text: child.dataset.text || container.dataset.text || null,
+          via: child.dataset.via || container.dataset.via || null,
+        },
+      };
+
+      initShareonChild(
+        child as HTMLElement,
+        preset,
+      );
+    }
+  }
+};

src/style.scss

@@ -0,0 +1,69 @@
+$button-size:   36px;
+$icon-size:     20px;
+
+$padding-ver:   0.3*$icon-size;
+$padding-hor:   $icon-size / 2;
+$padding-icon:  ($button-size - $icon-size) / 2;
+
+$height:        $button-size - 2*$padding-ver;
+$width:         $button-size - 2*$padding-hor;
+
+.shareon {
+    & > * {
+        display: inline-block;
+        position: relative;
+
+        height: $height;
+        min-width: $width;
+
+        padding: $padding-ver $padding-hor;
+
+        background-color: #ccc;
+        border-radius: $icon-size / 6;
+        border: none;
+        box-sizing: content-box;
+        color: white;
+        line-height: 1.5;
+        transition: opacity 300ms ease;
+        vertical-align: middle;
+
+        &:hover {
+            cursor: pointer;
+            opacity: .7;
+        }
+
+        &:not(:empty) {
+            font-size: 0.8 * $icon-size;
+            text-decoration: none;
+
+            &::before {
+                position: relative;
+
+                height: 100%;
+                width: $icon-size+$padding-icon;
+
+                top: 0;
+                left: 0;
+
+                background-position: 0 50%;
+            }
+        }
+
+        &::before {
+            display: inline-block;
+            position: absolute;
+
+            height: $icon-size;
+            width: $icon-size;
+
+            top: $padding-icon;
+            left: $padding-icon;
+
+            background-repeat: no-repeat;
+            background-size: $icon-size $icon-size;
+            content: '';
+            vertical-align: bottom;
+        }
+
+    }
+}