Skip to content

Commit

Permalink
publish
Browse files Browse the repository at this point in the history
  • Loading branch information
@royalfig
royalfig committed Jan 1, 2024
1 parent 5d3f537 commit ca24b3f
Show file tree
Hide file tree
Showing 11 changed files with 278 additions and 287 deletions.
175 changes: 144 additions & 31 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,9 @@
defer
data-position="left"
data-icon="4"
data-button-text="Share this page"
src="https://unpkg.com/@royalfig/share-button/dist/share-button.umd.js"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/night-owl.min.css"
/>
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
Expand All @@ -40,7 +32,7 @@
</div>
<div class="container">
<header>
<p class="sharing">Sharing is Caring 🤗</p>
<share-button button-text="Sharing is Caring 🤗"></share-button>
<h1>
A fully customizable button to make sharing your content as easy as
possible.
Expand All @@ -50,11 +42,32 @@ <h1>
LinkedIn with the click of a button.
</p>
<div class="meta">
<a href="https://ryanfeigenbaum.com/" class="author"
>By Ryan Feigenbaum</a
<a href="https://ryanfeigenbaum.com/" class="meta-button author"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12.1597 16C10.1243 16 8.29182 16.8687 7.01276 18.2556C8.38039 19.3474 10.114 20 12 20C13.9695 20 15.7727 19.2883 17.1666 18.1081C15.8956 16.8074 14.1219 16 12.1597 16ZM12 4C7.58172 4 4 7.58172 4 12C4 13.8106 4.6015 15.4807 5.61557 16.8214C7.25639 15.0841 9.58144 14 12.1597 14C14.6441 14 16.8933 15.0066 18.5218 16.6342C19.4526 15.3267 20 13.7273 20 12C20 7.58172 16.4183 4 12 4ZM12 5C14.2091 5 16 6.79086 16 9C16 11.2091 14.2091 13 12 13C9.79086 13 8 11.2091 8 9C8 6.79086 9.79086 5 12 5ZM12 7C10.8954 7 10 7.89543 10 9C10 10.1046 10.8954 11 12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7Z"
fill="currentColor"
></path>
</svg>
Ryan Feigenbaum</a
>
<p class="date">Updated on <span id="updated-on"></span></p>
<p id="version"></p>
<p class="meta-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"
fill="currentColor"
></path>
</svg>
<span id="updated-on"></span>
</p>
<a class="meta-button" id="version" href="#" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M7.10508 8.78991C7.45179 10.0635 8.61653 11 10 11H14C16.4703 11 18.5222 12.7915 18.9274 15.1461C20.1303 15.5367 21 16.6668 21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.7334 15.7849 15.6501 16.8949 15.2101C16.5482 13.9365 15.3835 13 14 13H10C8.87439 13 7.83566 12.6281 7 12.0004V15.1707C8.16519 15.5825 9 16.6938 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.6938 3.83481 15.5825 5 15.1707V8.82929C3.83481 8.41746 3 7.30622 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.26661 8.21506 8.34988 7.10508 8.78991ZM6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7ZM6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19ZM18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18C17 18.5523 17.4477 19 18 19Z"
fill="currentColor"
></path>
</svg>
</a>
</div>
</header>
</div>
Expand All @@ -76,7 +89,7 @@ <h2>Installation</h2>
<p>There are two ways to add your share button to the page.</p>
<h3>1. Use the CDN</h3>
<p>Add the following script tag to your <code>head</code>.</p>
<pre><code>&lt;script defer src="https://unpkg.com/@royalfig/share-button/dist/share-button.umd.js"&gt;&lt;/script&gt;</code></pre>
<pre><code class="language-html">&lt;script defer src="https://unpkg.com/@royalfig/share-button/dist/share-button.umd.js"&gt;&lt;/script&gt;</code></pre>

<h3>2. Install with NPM</h3>
<pre><code>npm install @royalfig/share-button</code></pre>
Expand Down Expand Up @@ -124,44 +137,144 @@ <h2>Customization</h2>
<td>Description</td>
<td>Default value</td>
</tr>
<tr>
<td><code>color-backdrop</code></td>
<td>The backdrop color behind the dialog</td>
<td style="background-color: hsl(210deg 20% 98% / 50%)">
hsl(210deg 20% 98% / 50%)
</td>
</tr>
<tr>
<td><code>color-border</code></td>
<td>Border color on share dialog</td>
<td></td>
<td style="background-color: #e5e7eb; color: #000">#e5e7eb</td>
</tr>
<tr>
<td><code>color-surface</code></td>
<td>Share dialog background color</td>
<td></td>
<td><code>color-button-text</code></td>
<td>Button text color</td>
<td style="background-color: #f9fafb; color: #000">#f9fafb</td>
</tr>
<tr>
<td><code>color-button</code></td>
<td>Button background color</td>
<td style="background-color: #111827; color: #fff">#111827</td>
</tr>
<tr>
<td><code>color-element</code></td>
<td>Share dialog text and icon color</td>
<td></td>
<td style="background-color: #111827; color: #fff">#111827</td>
</tr>
<tr>
<td><code>color-button</code></td>
<td>Button background color</td>
<td></td>
<td><code>color-surface</code></td>
<td>Share dialog background color</td>
<td style="background-color: #f9fafb; color: #000">#f9fafb</td>
</tr>
<tr>
<td><code>color-button-text</code></td>
<td>Button text color</td>
<td></td>
<td><code>button-text</code></td>
<td><a href="#button">See button text options</a></td>
<td>"Share"</td>
</tr>
<tr>
<td><code>color-backdrop</code></td>
<td>The blurred dialog background color</td>
<td><code>dark-mode</code></td>
<td>
<a href="#dark-mode">See dark mode customization for details</a>
</td>
<td>true</td>
</tr>
<tr>
<td><code>icon</code></td>
<td>Custom icon</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>Where ...</td>
<td><code>position</code></td>
<td>Position of the button</td>
<td></td>
</tr>
</table>

<h3>Dark Mode Customization</h3>
<h3 id="button">Button Text</h3>
<p>
To change the button text, add the <code>button-text</code> attribute
to the <code>share-button</code> element.
</p>
<pre><code>&lt;share-button button-text="Share this page"&gt;&lt;/share-button&gt;</code></pre>
<p>
Use an empty string to omit button text altogether. Styles will update
to make the button a circle and an <code>aria-label</code> will be
added to the button indicating its text.
</p>
<h3 id="dark-mode">Dark Mode Customization</h3>

<p>
By default, the share button includes default support for dark mode
based on the user's OS preference. That is, when the OS is set to dark
mode, the share button and dialog will be in dark mode and vice versa.
</p>

<p>
However, it's possible to override this behavior by setting the
<code>dark-mode</code> attribute to <code>false</code>. Doing so
disables dark mode and preserves all custom colors.
</p>

<p>
Add custom dark mode styles by defining values for custom variables as
a string.
</p>

<pre><code>&lt;share-button dark-mode="false" style="--color-backdrop: #000; --color-border: #fff; --color-button-text: #fff; --color-button: #000; --color-element: #fff; --color-surface: #000;"&gt;&lt;/share-button&gt;</code></pre>

<h3>Icon</h3>
<p>
There are seven icon possibilities. Set the icon using the `icon` data
attribute followed by a number 1 - 7. See icons below for examples of
options.
</p>

<pre><code>&lt;share-button icon="1"&gt;&lt;/share-button&gt;</code></pre>

<div
style="
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: space-between;
margin-block: 2rem;
"
>
<share-button icon="1" button-text="1"></share-button>
<share-button icon="2" button-text="2"></share-button>
<share-button icon="3" button-text="3"></share-button>
<share-button icon="4" button-text="4"></share-button>
<share-button icon="5" button-text="5"></share-button>
<share-button icon="6" button-text="6"></share-button>
<share-button icon="7" button-text="7"></share-button>
</div>

<p>
To omit an icon altogether, set the icon attribute to
<code>false</code>
</p>

<share-button icon="false"></share-button>

<pre><code>&lt;share-button icon="false"&gt;&lt;/share-button&gt;</code></pre>

<h2>FAQs</h2>
<p>
<strong>
I want to add social meta platform <em>x</em>. (Not that <em>X</em>,
something else...)
</strong>
</p>
<p>
The share button is designed to be as lightweight as possible. It
currently supports Twitter, Facebook, LinkedIn, and copying the URL to
the clipboard. If you'd like to add support for another platform,
please open an issue on GitHub.
</p>
<p><strong> </strong></p>
</div>
</div>
</body>
Expand Down
11 changes: 11 additions & 0 deletions demo/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,8 @@
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^5.0.8"
},
"dependencies": {
"highlight.js": "^11.9.0"
}
}
16 changes: 9 additions & 7 deletions demo/src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import "./style.css";
import "highlight.js/styles/tokyo-night-dark.css";
import hljs from "highlight.js/lib/common";

hljs.highlightAll();

async function getLatestRelease() {
const res = await fetch(
Expand All @@ -15,20 +19,18 @@ async function getLatestRelease() {
});

const updatedOn = document.getElementById("updated-on");
const version = document.getElementById("version");
const version = document.getElementById("version") as HTMLAnchorElement;

if (!updatedOn || !version) {
return;
}

updatedOn.textContent = date;

const a = document.createElement("a");
a.href = html_url;
a.setAttribute("target", "_blank");
a.textContent = tag_name;

version.append(a);
version.href = html_url;
const svg = version.querySelector("svg");
version.textContent = tag_name;
svg && version.prepend(svg);
}

getLatestRelease();
Loading

0 comments on commit ca24b3f

Please sign in to comment.