Create --handle-color variable and improve docs

BrianMitchL · BrianMitchL · commit 39517eb9a7e3 · 2022-01-21T08:29:04.000-06:00
diff --git a/README.md b/README.md
@@ -1,15 +1,26 @@
 # svelte-compare-image
 
-A component to compare two images by dragging a slider to reveal the other
-image. Find the package on NPM at [svelte-compare-image](https://npmjs.com/package/svelte-compare-image).
+A Svelte component to compare two images.
+Find the package on NPM at [svelte-compare-image](https://npmjs.com/package/svelte-compare-image).
 
 An interactive example can be found at https://brianm.me/svelte-compare-image/
 
+![screen recording example](https://github.com/BrianMitchL/svelte-compare-image/raw/main/example.gif)
+
+The markup, state logic, and styling were originally adapted from [react-compare-image](https://github.com/junkboy0315/react-compare-image).
+
 ## Docs
 
 The component will display the images and fill available width and height using a ResizeObserver according to the aspect ratios of the images.
 
-To use it, render the component as seen below. The `--slider-width` and `--handle-size` CSS custom property props are optional and default to 0.125rem and 2.5rem, respectfully.
+To use it, render the component as seen below, providing image src and alt text for the left and right images.
+The following CSS custom properties are optional and can be set to customize the appearance of the slider.
+
+| Property         | Default Value |
+| ---------------- | ------------- |
+| `--handle-size`  | `2.5rem`      |
+| `--slider-color` | `#ffffff`     |
+| `--slider-width` | `0.125rem`    |
 
 ```svelte
 <script lang="ts">
@@ -21,7 +32,8 @@ To use it, render the component as seen below. The `--slider-width` and `--handl
   imageLeftAlt="left"
   imageRightSrc="https://via.placeholder.com/600x400/00aaff/ffffff?text=Right"
   imageRightAlt="right"
-  --slider-width="0.125rem"
   --handle-size="2.5rem"
+  --slider-color="#ffffff"
+  --slider-width="0.125rem"
 />
 ```
diff --git a/example.gif b/example.gif
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "author": "Brian Mitchell",
   "license": "MIT",
-  "description": "A component to compare two images by dragging a slider to reveal the other image",
+  "description": "A Svelte component to compare two images",
   "keywords": [
     "svelte",
     "compare",
@@ -56,6 +56,6 @@
     "pre-commit": "npm run prettier-staged"
   },
   "engines": {
-    "node": ">16.13.0"
+    "node": ">=16.13.0"
   }
 }
diff --git a/src/app.html b/src/app.html
@@ -2,9 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="description" content="" />
-    <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.png" />
+    <meta
+      name="description"
+      content="A Svelte component to compare two images"
+    />
+    <meta name="author" content="Brian Mitchell" />
+    <meta property="og:title" content="Svelte Compare Image" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://brianm.me/svelte-compare-image/" />
+    <meta property="og:description" content="" />
+    <meta property="og:locale" content="en_US" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@BrianMitchL" />
+    <meta name="twitter:title" content="Svelte Compare Image" />
+    <meta
+      name="twitter:description"
+      content="A Svelte component to compare two images"
+    />
     %svelte.head%
   </head>
   <body>
diff --git a/src/components/Example.svelte b/src/components/Example.svelte
@@ -115,8 +115,9 @@
     imageLeftAlt="left"
     imageRightSrc="https://via.placeholder.com/{rightWidth}x{rightHeight}/00aaff/ffffff?text=Right"
     imageRightAlt="right"
-    --slider-width="0.125rem"
     --handle-size="2.5rem"
+    --slider-color="#ffffff"
+    --slider-width="0.125rem"
   />
 </div>
 
diff --git a/src/lib/CompareImage.svelte b/src/lib/CompareImage.svelte
@@ -217,7 +217,7 @@
   }
 
   .line {
-    background: #ffffff;
+    background: var(--slider-color, #ffffff);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
       0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     flex: 0 1 auto;
@@ -231,7 +231,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border: var(--slider-width, 0.125rem) solid #ffffff;
+    border: var(--slider-width, 0.125rem) solid var(--slider-color, #ffffff);
     border-radius: 100%;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
       0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
@@ -242,7 +242,8 @@
   .handle::before {
     content: "";
     border: inset calc(var(--handle-size, 2.5rem) * 0.15) rgba(0, 0, 0, 0);
-    border-right: calc(var(--handle-size, 2.5rem) * 0.15) solid #ffffff;
+    border-right: calc(var(--handle-size, 2.5rem) * 0.15) solid
+      var(--slider-color, #ffffff);
     height: 0;
     margin-right: calc(var(--handle-size, 2.5rem) * 0.25);
     width: 0;
@@ -251,7 +252,8 @@
   .handle::after {
     content: "";
     border: inset calc(var(--handle-size, 2.5rem) * 0.15) rgba(0, 0, 0, 0);
-    border-left: calc(var(--handle-size, 2.5rem) * 0.15) solid #ffffff;
+    border-left: calc(var(--handle-size, 2.5rem) * 0.15) solid
+      var(--slider-color, #ffffff);
     height: 0;
     width: 0;
   }
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -8,8 +8,7 @@
 
 <h1>Svelte Compare Image</h1>
 <p>
-  A component to compare two images by dragging a slider to reveal the other
-  image. Find the source on <a
+  A Svelte component to compare two images. Find the source on <a
     href="https://github.com/BrianMitchL/svelte-compare-image">GitHub</a
   >
   and on NPM at

Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,7 @@`
`8`	`8`
`9`	`9`	`<h1>Svelte Compare Image</h1>`
`10`	`10`	`<p>`
`11`		`- A component to compare two images by dragging a slider to reveal the other`
`12`		`- image. Find the source on <a`
	`11`	`+ A Svelte component to compare two images. Find the source on <a`
`13`	`12`	`href="https://github.com/BrianMitchL/svelte-compare-image">GitHub</a`
`14`	`13`	`>`
`15`	`14`	`and on NPM at`