A performance-first web component for content sharing. Initially developed for (and you can see it used on) infrequently.org
Provides:
- Sharing via Web Share API as well as direct link copy and toot/tweet buttons
- Themeing through CSS variables and Web Component
::part()
s - Tiny footprint; a single file, ~4KiB gzipped, and traced to death by someone who knows their way around a browser
See share.html
for examples.
Basic use is to import the (single) script file (no dependencies), prefereably with modern syntax so as to avoid browsers that can't support it:
<script type="module">
import "./share-button.js";
</script>
<share-button
title="Infrequently Noted"
url="https://infrequently.org/">
</share-button>
Styling is handled via CSS ::part()
directives and variables, e.g.:
share-button.blue {
--color: darkblue;
--hover-bg-color: rgba(53, 49, 181, 0.219);
--transition-duration: 0.2s;
--hover-scale: 1.5;
}
share-button.never-tweet::part(tweet-button) {
display: none;
}
The important ::part()
s are:
share-button
tweet-button
toot-button
copy-link-button
This thing is a super bare-bones, no-frills, no-frameworks.
Building requires a functional linux environment (WSL and Crostini work great) with fonttools
in your PATH
. On Debian-derived distros, a quick sudo apt install fonttools
should be enough.
The design works by:
- Subsetting from the checked-in fontawesome glyphs; see
subset.sh
to add a glyph. - The resulting combined font is then subsetted, which considerably reduces resulting binary size
- That subset is then base64 encoded and dropt on disk at
combined.woff2
- We then manually copy this into the URL injected by
share-button.js
(yes, yes, I know) - This is then loaded in a singleton way as the script loads. This might cause a global style recalc! Caveat emptor.
- When instantiated, the web components reply on this font for their glyphs.
The care taken to minimize dependencies for the component (no framework) and binary size means the whole shebang should come down the wire in less than 4KiB, making it suitable for inlining in aggressive setups.