├── .gitignore ├── LICENSE ├── README.md ├── demo.gif ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── global.css ├── images │ ├── profile1.jpg │ ├── profile2.jpg │ ├── profile3.jpg │ └── stories │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── oliver.jpg │ │ └── percy.jpg └── index.html ├── rollup.config.js ├── scripts └── setupTypeScript.js └── src ├── App.svelte ├── Story.svelte ├── StoryContainer.svelte ├── User.svelte ├── main.js ├── mockData.js └── swipe.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Geoff Rich 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte Stories 2 | 3 | This is a Svelte implementation of web.dev's [GUI Challenges #1](https://web.dev/building-a-stories-component/). Images from [Lorem Picsum](https://picsum.photos/) or taken by me. 4 | 5 | [Live demo](https://svelte-stories.glitch.me/) 6 | 7 | ![Demo](demo.gif) 8 | 9 | ## Get started 10 | 11 | Install the dependencies... 12 | 13 | ```bash 14 | cd svelte-stories 15 | npm install 16 | ``` 17 | 18 | ...then start [Rollup](https://rollupjs.org): 19 | 20 | ```bash 21 | npm run dev 22 | ``` 23 | 24 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 25 | 26 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 27 | 28 | If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense. 29 | 30 | ## Building and running in production mode 31 | 32 | To create an optimised version of the app: 33 | 34 | ```bash 35 | npm run build 36 | ``` 37 | 38 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 39 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/demo.gif -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@babel/code-frame": { 8 | "version": "7.10.4", 9 | "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", 10 | "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", 11 | "dev": true, 12 | "requires": { 13 | "@babel/highlight": "^7.10.4" 14 | } 15 | }, 16 | "@babel/helper-validator-identifier": { 17 | "version": "7.10.4", 18 | "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", 19 | "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", 20 | "dev": true 21 | }, 22 | "@babel/highlight": { 23 | "version": "7.10.4", 24 | "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", 25 | "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", 26 | "dev": true, 27 | "requires": { 28 | "@babel/helper-validator-identifier": "^7.10.4", 29 | "chalk": "^2.0.0", 30 | "js-tokens": "^4.0.0" 31 | } 32 | }, 33 | "@polka/url": { 34 | "version": "1.0.0-next.11", 35 | "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz", 36 | "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==" 37 | }, 38 | "@rollup/plugin-commonjs": { 39 | "version": "16.0.0", 40 | "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz", 41 | "integrity": "sha512-LuNyypCP3msCGVQJ7ki8PqYdpjfEkE/xtFa5DqlF+7IBD0JsfMZ87C58heSwIMint58sAUZbt3ITqOmdQv/dXw==", 42 | "dev": true, 43 | "requires": { 44 | "@rollup/pluginutils": "^3.1.0", 45 | "commondir": "^1.0.1", 46 | "estree-walker": "^2.0.1", 47 | "glob": "^7.1.6", 48 | "is-reference": "^1.2.1", 49 | "magic-string": "^0.25.7", 50 | "resolve": "^1.17.0" 51 | } 52 | }, 53 | "@rollup/plugin-node-resolve": { 54 | "version": "10.0.0", 55 | "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz", 56 | "integrity": "sha512-sNijGta8fqzwA1VwUEtTvWCx2E7qC70NMsDh4ZG13byAXYigBNZMxALhKUSycBks5gupJdq0lFrKumFrRZ8H3A==", 57 | "dev": true, 58 | "requires": { 59 | "@rollup/pluginutils": "^3.1.0", 60 | "@types/resolve": "1.17.1", 61 | "builtin-modules": "^3.1.0", 62 | "deepmerge": "^4.2.2", 63 | "is-module": "^1.0.0", 64 | "resolve": "^1.17.0" 65 | } 66 | }, 67 | "@rollup/pluginutils": { 68 | "version": "3.1.0", 69 | "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", 70 | "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", 71 | "dev": true, 72 | "requires": { 73 | "@types/estree": "0.0.39", 74 | "estree-walker": "^1.0.1", 75 | "picomatch": "^2.2.2" 76 | }, 77 | "dependencies": { 78 | "estree-walker": { 79 | "version": "1.0.1", 80 | "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", 81 | "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", 82 | "dev": true 83 | } 84 | } 85 | }, 86 | "@types/estree": { 87 | "version": "0.0.39", 88 | "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", 89 | "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", 90 | "dev": true 91 | }, 92 | "@types/node": { 93 | "version": "14.14.10", 94 | "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.10.tgz", 95 | "integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==", 96 | "dev": true 97 | }, 98 | "@types/resolve": { 99 | "version": "1.17.1", 100 | "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", 101 | "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", 102 | "dev": true, 103 | "requires": { 104 | "@types/node": "*" 105 | } 106 | }, 107 | "ansi-styles": { 108 | "version": "3.2.1", 109 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 110 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 111 | "dev": true, 112 | "requires": { 113 | "color-convert": "^1.9.0" 114 | } 115 | }, 116 | "anymatch": { 117 | "version": "3.1.1", 118 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", 119 | "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", 120 | "dev": true, 121 | "requires": { 122 | "normalize-path": "^3.0.0", 123 | "picomatch": "^2.0.4" 124 | } 125 | }, 126 | "async-limiter": { 127 | "version": "1.0.1", 128 | "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", 129 | "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==", 130 | "dev": true 131 | }, 132 | "balanced-match": { 133 | "version": "1.0.0", 134 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", 135 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", 136 | "dev": true 137 | }, 138 | "binary-extensions": { 139 | "version": "2.1.0", 140 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", 141 | "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", 142 | "dev": true 143 | }, 144 | "brace-expansion": { 145 | "version": "1.1.11", 146 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 147 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 148 | "dev": true, 149 | "requires": { 150 | "balanced-match": "^1.0.0", 151 | "concat-map": "0.0.1" 152 | } 153 | }, 154 | "braces": { 155 | "version": "3.0.2", 156 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 157 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 158 | "dev": true, 159 | "requires": { 160 | "fill-range": "^7.0.1" 161 | } 162 | }, 163 | "buffer-from": { 164 | "version": "1.1.1", 165 | "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", 166 | "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", 167 | "dev": true 168 | }, 169 | "builtin-modules": { 170 | "version": "3.1.0", 171 | "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", 172 | "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", 173 | "dev": true 174 | }, 175 | "chalk": { 176 | "version": "2.4.2", 177 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", 178 | "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", 179 | "dev": true, 180 | "requires": { 181 | "ansi-styles": "^3.2.1", 182 | "escape-string-regexp": "^1.0.5", 183 | "supports-color": "^5.3.0" 184 | } 185 | }, 186 | "chokidar": { 187 | "version": "3.4.3", 188 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz", 189 | "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==", 190 | "dev": true, 191 | "requires": { 192 | "anymatch": "~3.1.1", 193 | "braces": "~3.0.2", 194 | "fsevents": "~2.1.2", 195 | "glob-parent": "~5.1.0", 196 | "is-binary-path": "~2.1.0", 197 | "is-glob": "~4.0.1", 198 | "normalize-path": "~3.0.0", 199 | "readdirp": "~3.5.0" 200 | } 201 | }, 202 | "color-convert": { 203 | "version": "1.9.3", 204 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 205 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 206 | "dev": true, 207 | "requires": { 208 | "color-name": "1.1.3" 209 | } 210 | }, 211 | "color-name": { 212 | "version": "1.1.3", 213 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 214 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", 215 | "dev": true 216 | }, 217 | "commander": { 218 | "version": "2.20.3", 219 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", 220 | "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", 221 | "dev": true 222 | }, 223 | "commondir": { 224 | "version": "1.0.1", 225 | "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", 226 | "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", 227 | "dev": true 228 | }, 229 | "concat-map": { 230 | "version": "0.0.1", 231 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 232 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", 233 | "dev": true 234 | }, 235 | "console-clear": { 236 | "version": "1.1.1", 237 | "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz", 238 | "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==" 239 | }, 240 | "deepmerge": { 241 | "version": "4.2.2", 242 | "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", 243 | "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", 244 | "dev": true 245 | }, 246 | "escape-string-regexp": { 247 | "version": "1.0.5", 248 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 249 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", 250 | "dev": true 251 | }, 252 | "estree-walker": { 253 | "version": "2.0.1", 254 | "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz", 255 | "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==", 256 | "dev": true 257 | }, 258 | "fill-range": { 259 | "version": "7.0.1", 260 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 261 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 262 | "dev": true, 263 | "requires": { 264 | "to-regex-range": "^5.0.1" 265 | } 266 | }, 267 | "focus-visible": { 268 | "version": "5.2.0", 269 | "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz", 270 | "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==" 271 | }, 272 | "fs.realpath": { 273 | "version": "1.0.0", 274 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 275 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", 276 | "dev": true 277 | }, 278 | "fsevents": { 279 | "version": "2.1.3", 280 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", 281 | "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", 282 | "dev": true, 283 | "optional": true 284 | }, 285 | "function-bind": { 286 | "version": "1.1.1", 287 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 288 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 289 | "dev": true 290 | }, 291 | "get-port": { 292 | "version": "3.2.0", 293 | "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz", 294 | "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=" 295 | }, 296 | "glob": { 297 | "version": "7.1.6", 298 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", 299 | "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", 300 | "dev": true, 301 | "requires": { 302 | "fs.realpath": "^1.0.0", 303 | "inflight": "^1.0.4", 304 | "inherits": "2", 305 | "minimatch": "^3.0.4", 306 | "once": "^1.3.0", 307 | "path-is-absolute": "^1.0.0" 308 | } 309 | }, 310 | "glob-parent": { 311 | "version": "5.1.1", 312 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", 313 | "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", 314 | "dev": true, 315 | "requires": { 316 | "is-glob": "^4.0.1" 317 | } 318 | }, 319 | "has": { 320 | "version": "1.0.3", 321 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 322 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 323 | "dev": true, 324 | "requires": { 325 | "function-bind": "^1.1.1" 326 | } 327 | }, 328 | "has-flag": { 329 | "version": "3.0.0", 330 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", 331 | "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", 332 | "dev": true 333 | }, 334 | "inflight": { 335 | "version": "1.0.6", 336 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 337 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", 338 | "dev": true, 339 | "requires": { 340 | "once": "^1.3.0", 341 | "wrappy": "1" 342 | } 343 | }, 344 | "inherits": { 345 | "version": "2.0.4", 346 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 347 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", 348 | "dev": true 349 | }, 350 | "is-binary-path": { 351 | "version": "2.1.0", 352 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 353 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 354 | "dev": true, 355 | "requires": { 356 | "binary-extensions": "^2.0.0" 357 | } 358 | }, 359 | "is-core-module": { 360 | "version": "2.2.0", 361 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", 362 | "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", 363 | "dev": true, 364 | "requires": { 365 | "has": "^1.0.3" 366 | } 367 | }, 368 | "is-extglob": { 369 | "version": "2.1.1", 370 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 371 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 372 | "dev": true 373 | }, 374 | "is-glob": { 375 | "version": "4.0.1", 376 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", 377 | "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", 378 | "dev": true, 379 | "requires": { 380 | "is-extglob": "^2.1.1" 381 | } 382 | }, 383 | "is-module": { 384 | "version": "1.0.0", 385 | "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", 386 | "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=", 387 | "dev": true 388 | }, 389 | "is-number": { 390 | "version": "7.0.0", 391 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 392 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 393 | "dev": true 394 | }, 395 | "is-reference": { 396 | "version": "1.2.1", 397 | "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", 398 | "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", 399 | "dev": true, 400 | "requires": { 401 | "@types/estree": "*" 402 | } 403 | }, 404 | "jest-worker": { 405 | "version": "26.6.2", 406 | "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", 407 | "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==", 408 | "dev": true, 409 | "requires": { 410 | "@types/node": "*", 411 | "merge-stream": "^2.0.0", 412 | "supports-color": "^7.0.0" 413 | }, 414 | "dependencies": { 415 | "has-flag": { 416 | "version": "4.0.0", 417 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", 418 | "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", 419 | "dev": true 420 | }, 421 | "supports-color": { 422 | "version": "7.2.0", 423 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", 424 | "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", 425 | "dev": true, 426 | "requires": { 427 | "has-flag": "^4.0.0" 428 | } 429 | } 430 | } 431 | }, 432 | "js-tokens": { 433 | "version": "4.0.0", 434 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 435 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", 436 | "dev": true 437 | }, 438 | "kleur": { 439 | "version": "3.0.3", 440 | "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", 441 | "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==" 442 | }, 443 | "livereload": { 444 | "version": "0.9.1", 445 | "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz", 446 | "integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==", 447 | "dev": true, 448 | "requires": { 449 | "chokidar": "^3.3.0", 450 | "livereload-js": "^3.1.0", 451 | "opts": ">= 1.2.0", 452 | "ws": "^6.2.1" 453 | } 454 | }, 455 | "livereload-js": { 456 | "version": "3.3.1", 457 | "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz", 458 | "integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==", 459 | "dev": true 460 | }, 461 | "local-access": { 462 | "version": "1.1.0", 463 | "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz", 464 | "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==" 465 | }, 466 | "magic-string": { 467 | "version": "0.25.7", 468 | "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", 469 | "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", 470 | "dev": true, 471 | "requires": { 472 | "sourcemap-codec": "^1.4.4" 473 | } 474 | }, 475 | "merge-stream": { 476 | "version": "2.0.0", 477 | "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", 478 | "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", 479 | "dev": true 480 | }, 481 | "mime": { 482 | "version": "2.4.6", 483 | "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz", 484 | "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==" 485 | }, 486 | "minimatch": { 487 | "version": "3.0.4", 488 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 489 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", 490 | "dev": true, 491 | "requires": { 492 | "brace-expansion": "^1.1.7" 493 | } 494 | }, 495 | "mri": { 496 | "version": "1.1.6", 497 | "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz", 498 | "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==" 499 | }, 500 | "normalize-path": { 501 | "version": "3.0.0", 502 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 503 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 504 | "dev": true 505 | }, 506 | "once": { 507 | "version": "1.4.0", 508 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 509 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 510 | "dev": true, 511 | "requires": { 512 | "wrappy": "1" 513 | } 514 | }, 515 | "opts": { 516 | "version": "2.0.2", 517 | "resolved": "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz", 518 | "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==", 519 | "dev": true 520 | }, 521 | "path-is-absolute": { 522 | "version": "1.0.1", 523 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 524 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", 525 | "dev": true 526 | }, 527 | "path-parse": { 528 | "version": "1.0.6", 529 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", 530 | "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", 531 | "dev": true 532 | }, 533 | "picomatch": { 534 | "version": "2.2.2", 535 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", 536 | "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", 537 | "dev": true 538 | }, 539 | "randombytes": { 540 | "version": "2.1.0", 541 | "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", 542 | "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", 543 | "dev": true, 544 | "requires": { 545 | "safe-buffer": "^5.1.0" 546 | } 547 | }, 548 | "readdirp": { 549 | "version": "3.5.0", 550 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", 551 | "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", 552 | "dev": true, 553 | "requires": { 554 | "picomatch": "^2.2.1" 555 | } 556 | }, 557 | "require-relative": { 558 | "version": "0.8.7", 559 | "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz", 560 | "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=", 561 | "dev": true 562 | }, 563 | "resolve": { 564 | "version": "1.19.0", 565 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz", 566 | "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==", 567 | "dev": true, 568 | "requires": { 569 | "is-core-module": "^2.1.0", 570 | "path-parse": "^1.0.6" 571 | } 572 | }, 573 | "rollup": { 574 | "version": "2.33.3", 575 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz", 576 | "integrity": "sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w==", 577 | "dev": true, 578 | "requires": { 579 | "fsevents": "~2.1.2" 580 | } 581 | }, 582 | "rollup-plugin-css-only": { 583 | "version": "3.0.0", 584 | "resolved": "https://registry.npmjs.org/rollup-plugin-css-only/-/rollup-plugin-css-only-3.0.0.tgz", 585 | "integrity": "sha512-v6ZZuApxXl/Z07jAmH+p5HsLPMW2BHIRJ4Tpxv22S+jpINZ1QFxWoeMDMyFDd+XM1jFcQeshkjuD8xUVOJJG7Q==", 586 | "dev": true, 587 | "requires": { 588 | "@rollup/pluginutils": "3 || 4" 589 | } 590 | }, 591 | "rollup-plugin-livereload": { 592 | "version": "2.0.0", 593 | "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz", 594 | "integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==", 595 | "dev": true, 596 | "requires": { 597 | "livereload": "^0.9.1" 598 | } 599 | }, 600 | "rollup-plugin-svelte": { 601 | "version": "7.0.0", 602 | "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.0.0.tgz", 603 | "integrity": "sha512-cw4yv/5v1NQV3nPbpOJtikgkB+9mfSJaqKUdq7x5fVQJnwLtcdc2JOszBs5pBY+SemTs5pmJbdEMseEavbUtjQ==", 604 | "dev": true, 605 | "requires": { 606 | "require-relative": "^0.8.7", 607 | "rollup-pluginutils": "^2.8.2" 608 | } 609 | }, 610 | "rollup-plugin-terser": { 611 | "version": "7.0.2", 612 | "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", 613 | "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==", 614 | "dev": true, 615 | "requires": { 616 | "@babel/code-frame": "^7.10.4", 617 | "jest-worker": "^26.2.1", 618 | "serialize-javascript": "^4.0.0", 619 | "terser": "^5.0.0" 620 | } 621 | }, 622 | "rollup-pluginutils": { 623 | "version": "2.8.2", 624 | "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", 625 | "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", 626 | "dev": true, 627 | "requires": { 628 | "estree-walker": "^0.6.1" 629 | }, 630 | "dependencies": { 631 | "estree-walker": { 632 | "version": "0.6.1", 633 | "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", 634 | "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", 635 | "dev": true 636 | } 637 | } 638 | }, 639 | "sade": { 640 | "version": "1.7.4", 641 | "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz", 642 | "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==", 643 | "requires": { 644 | "mri": "^1.1.0" 645 | } 646 | }, 647 | "safe-buffer": { 648 | "version": "5.2.1", 649 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", 650 | "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", 651 | "dev": true 652 | }, 653 | "semiver": { 654 | "version": "1.1.0", 655 | "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz", 656 | "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==" 657 | }, 658 | "serialize-javascript": { 659 | "version": "4.0.0", 660 | "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", 661 | "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", 662 | "dev": true, 663 | "requires": { 664 | "randombytes": "^2.1.0" 665 | } 666 | }, 667 | "sirv": { 668 | "version": "1.0.7", 669 | "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.7.tgz", 670 | "integrity": "sha512-QMT2OTD3CTr8de9VByPmvSEeyt6k8/Cxg0J2kQJ5HNhIWfhFg9ypcIWWzez9rPWnGj+WtJ7AZD/MdT/vdilV/A==", 671 | "requires": { 672 | "@polka/url": "^1.0.0-next.9", 673 | "mime": "^2.3.1", 674 | "totalist": "^1.0.0" 675 | } 676 | }, 677 | "sirv-cli": { 678 | "version": "1.0.8", 679 | "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.8.tgz", 680 | "integrity": "sha512-bJI+kkzQvMKfAOfgLzv09kWsdymLm39LgKmGjacB19GHIAQLCvXXg8e8HzcofTjDZlA8zVv4dQjU9SWkNzkJhw==", 681 | "requires": { 682 | "console-clear": "^1.1.0", 683 | "get-port": "^3.2.0", 684 | "kleur": "^3.0.0", 685 | "local-access": "^1.0.1", 686 | "sade": "^1.6.0", 687 | "semiver": "^1.0.0", 688 | "sirv": "^1.0.7", 689 | "tinydate": "^1.0.0" 690 | } 691 | }, 692 | "source-map": { 693 | "version": "0.7.3", 694 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", 695 | "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", 696 | "dev": true 697 | }, 698 | "source-map-support": { 699 | "version": "0.5.19", 700 | "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", 701 | "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", 702 | "dev": true, 703 | "requires": { 704 | "buffer-from": "^1.0.0", 705 | "source-map": "^0.6.0" 706 | }, 707 | "dependencies": { 708 | "source-map": { 709 | "version": "0.6.1", 710 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 711 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 712 | "dev": true 713 | } 714 | } 715 | }, 716 | "sourcemap-codec": { 717 | "version": "1.4.8", 718 | "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", 719 | "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", 720 | "dev": true 721 | }, 722 | "supports-color": { 723 | "version": "5.5.0", 724 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 725 | "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", 726 | "dev": true, 727 | "requires": { 728 | "has-flag": "^3.0.0" 729 | } 730 | }, 731 | "svelte": { 732 | "version": "3.30.0", 733 | "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.30.0.tgz", 734 | "integrity": "sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==", 735 | "dev": true 736 | }, 737 | "terser": { 738 | "version": "5.5.1", 739 | "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz", 740 | "integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==", 741 | "dev": true, 742 | "requires": { 743 | "commander": "^2.20.0", 744 | "source-map": "~0.7.2", 745 | "source-map-support": "~0.5.19" 746 | } 747 | }, 748 | "tinydate": { 749 | "version": "1.3.0", 750 | "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz", 751 | "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==" 752 | }, 753 | "to-regex-range": { 754 | "version": "5.0.1", 755 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 756 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 757 | "dev": true, 758 | "requires": { 759 | "is-number": "^7.0.0" 760 | } 761 | }, 762 | "totalist": { 763 | "version": "1.1.0", 764 | "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz", 765 | "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==" 766 | }, 767 | "wrappy": { 768 | "version": "1.0.2", 769 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 770 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", 771 | "dev": true 772 | }, 773 | "ws": { 774 | "version": "6.2.1", 775 | "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", 776 | "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", 777 | "dev": true, 778 | "requires": { 779 | "async-limiter": "~1.0.0" 780 | } 781 | } 782 | } 783 | } 784 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "rollup -c -w", 7 | "start:dev": "sirv public --dev", 8 | "start": "npm run build && sirv public" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^16.0.0", 12 | "@rollup/plugin-node-resolve": "^10.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.0.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "focus-visible": "^5.2.0", 22 | "sirv-cli": "^1.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/favicon.png -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | color: #333; 14 | background: hsl(200, 15%, 93%); 15 | margin: 0; 16 | box-sizing: border-box; 17 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 18 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 19 | overflow: hidden; 20 | } 21 | 22 | a { 23 | color: rgb(0, 100, 200); 24 | text-decoration: none; 25 | } 26 | 27 | a:hover { 28 | text-decoration: underline; 29 | } 30 | 31 | a:visited { 32 | color: rgb(0, 80, 160); 33 | } 34 | 35 | label { 36 | display: block; 37 | } 38 | 39 | input, 40 | button, 41 | select, 42 | textarea { 43 | font-family: inherit; 44 | font-size: inherit; 45 | -webkit-padding: 0.4em 0; 46 | padding: 0.4em; 47 | margin: 0 0 0.5em 0; 48 | box-sizing: border-box; 49 | border: 1px solid #ccc; 50 | border-radius: 2px; 51 | } 52 | 53 | input:disabled { 54 | color: #ccc; 55 | } 56 | 57 | button { 58 | color: #333; 59 | background-color: #f4f4f4; 60 | outline: none; 61 | } 62 | 63 | button:disabled { 64 | color: #999; 65 | } 66 | 67 | button:not(:disabled):active { 68 | background-color: #ddd; 69 | } 70 | 71 | button:focus { 72 | border-color: #666; 73 | } 74 | 75 | .js-focus-visible :focus:not(.focus-visible) { 76 | outline: 3px solid transparent !important; /* important needed to clobber svelte styles */ 77 | } 78 | 79 | p { 80 | margin: 0; 81 | } 82 | 83 | .visually-hidden { 84 | clip: rect(0 0 0 0); 85 | clip-path: inset(50%); 86 | height: 1px; 87 | overflow: hidden; 88 | position: absolute; 89 | white-space: nowrap; 90 | width: 1px; 91 | } 92 | 93 | main { 94 | display: grid; 95 | place-items: center; 96 | height: 100%; 97 | } 98 | 99 | @media (prefers-reduced-motion: reduce) { 100 | * { 101 | animation-delay: 0ms !important; 102 | animation-duration: 1ms !important; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /public/images/profile1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/profile1.jpg -------------------------------------------------------------------------------- /public/images/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/profile2.jpg -------------------------------------------------------------------------------- /public/images/profile3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/profile3.jpg -------------------------------------------------------------------------------- /public/images/stories/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/stories/1.jpg -------------------------------------------------------------------------------- /public/images/stories/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/stories/2.jpg -------------------------------------------------------------------------------- /public/images/stories/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/stories/3.jpg -------------------------------------------------------------------------------- /public/images/stories/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/stories/4.jpg -------------------------------------------------------------------------------- /public/images/stories/oliver.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/stories/oliver.jpg -------------------------------------------------------------------------------- /public/images/stories/percy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoffrich/svelte-stories/456f55666b9a120377dd5d411d7c591c8f3cd2ae/public/images/stories/percy.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GUI Challenges - #1 Stories 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import css from 'rollup-plugin-css-only'; 7 | 8 | const production = !process.env.ROLLUP_WATCH; 9 | 10 | function serve() { 11 | let server; 12 | 13 | function toExit() { 14 | if (server) server.kill(0); 15 | } 16 | 17 | return { 18 | writeBundle() { 19 | if (server) return; 20 | server = require('child_process').spawn('npm', ['run', 'start:dev'], { 21 | stdio: ['ignore', 'inherit', 'inherit'], 22 | shell: true 23 | }); 24 | 25 | process.on('SIGTERM', toExit); 26 | process.on('exit', toExit); 27 | } 28 | }; 29 | } 30 | 31 | export default { 32 | input: 'src/main.js', 33 | output: { 34 | sourcemap: true, 35 | format: 'iife', 36 | name: 'app', 37 | file: 'public/build/bundle.js' 38 | }, 39 | plugins: [ 40 | svelte({ 41 | compilerOptions: { 42 | // enable run-time checks when not in production 43 | dev: !production 44 | } 45 | }), 46 | // we'll extract any component CSS out into 47 | // a separate file - better for performance 48 | css({ output: 'bundle.css' }), 49 | 50 | // If you have external dependencies installed from 51 | // npm, you'll most likely need these plugins. In 52 | // some cases you'll need additional configuration - 53 | // consult the documentation for details: 54 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 55 | resolve({ 56 | browser: true, 57 | dedupe: ['svelte'] 58 | }), 59 | commonjs(), 60 | 61 | // In dev mode, call `npm run start` once 62 | // the bundle has been generated 63 | !production && serve(), 64 | 65 | // Watch the `public` directory and refresh the 66 | // browser on changes when not in production 67 | !production && livereload('public'), 68 | 69 | // If we're building for production (npm run build 70 | // instead of npm run dev), minify 71 | production && terser() 72 | ], 73 | watch: { 74 | clearScreen: false 75 | } 76 | }; 77 | -------------------------------------------------------------------------------- /scripts/setupTypeScript.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** This script modifies the project to support TS code in .svelte files like: 4 | 5 | 8 | 9 | As well as validating the code for CI. 10 | */ 11 | 12 | /** To work on this script: 13 | rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template 14 | */ 15 | 16 | const fs = require("fs") 17 | const path = require("path") 18 | const { argv } = require("process") 19 | 20 | const projectRoot = argv[2] || path.join(__dirname, "..") 21 | 22 | // Add deps to pkg.json 23 | const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8")) 24 | packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { 25 | "svelte-check": "^1.0.0", 26 | "svelte-preprocess": "^4.0.0", 27 | "@rollup/plugin-typescript": "^6.0.0", 28 | "typescript": "^3.9.3", 29 | "tslib": "^2.0.0", 30 | "@tsconfig/svelte": "^1.0.0" 31 | }) 32 | 33 | // Add script for checking 34 | packageJSON.scripts = Object.assign(packageJSON.scripts, { 35 | "validate": "svelte-check" 36 | }) 37 | 38 | // Write the package JSON 39 | fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " ")) 40 | 41 | // mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too 42 | const beforeMainJSPath = path.join(projectRoot, "src", "main.js") 43 | const afterMainTSPath = path.join(projectRoot, "src", "main.ts") 44 | fs.renameSync(beforeMainJSPath, afterMainTSPath) 45 | 46 | // Switch the app.svelte file to use TS 47 | const appSveltePath = path.join(projectRoot, "src", "App.svelte") 48 | let appFile = fs.readFileSync(appSveltePath, "utf8") 49 | appFile = appFile.replace(" 4 | 5 |
6 |

Stories Demo

7 | 8 |
9 | -------------------------------------------------------------------------------- /src/Story.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | 31 |
34 | 35 | {#if text} 36 |

{text}

37 | {/if} 38 |
39 | -------------------------------------------------------------------------------- /src/StoryContainer.svelte: -------------------------------------------------------------------------------- 1 | 104 | 105 | 167 | 168 | 169 | 170 | 171 |
180 | {#each users as user, userIdx} 181 | {#if userIdx >= currentUserIndex} 182 | 186 | {#each user.images as image, imageIdx} 187 | {#if userIdx !== currentUserIndex || imageIdx >= currentImageIndex} 188 | 189 | {/if} 190 | {/each} 191 | 192 | {/if} 193 | {/each} 194 |

You've reached the end!

195 |
196 |

197 | Tap on the left and right side to scroll. Holding CTRL or swiping skips to 198 | the next user. 199 |

200 |

201 | Use the left and right arrow keys to scroll. Holding CTRL or swiping skips 202 | to the next user. 203 |

204 |
205 |
206 | -------------------------------------------------------------------------------- /src/User.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 59 | 60 |
64 |
65 | {displayname} 66 |
67 |

{displayname}

68 |

@{username}

69 |
70 |
71 | 72 | 73 |
-------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | import 'focus-visible/dist/focus-visible'; 3 | 4 | const app = new App({ 5 | target: document.body 6 | }); 7 | 8 | export default app; 9 | -------------------------------------------------------------------------------- /src/mockData.js: -------------------------------------------------------------------------------- 1 | export const users = [ 2 | { 3 | username: 'geoffrich_', 4 | displayname: 'Geoff', 5 | profileSrc: '/images/profile1.jpg', 6 | images: [ 7 | { 8 | src: '/images/stories/oliver.jpg', 9 | alt: 'A cute kitten staring into the camera', 10 | text: '😍' 11 | }, 12 | { 13 | src: '/images/stories/percy.jpg', 14 | alt: 'A grey cat sprawled out and showing its belly' 15 | }, 16 | { 17 | src: '/images/stories/1.jpg', 18 | alt: 'A tractor in a grain field', 19 | text: 'Hey!' 20 | } 21 | ] 22 | }, 23 | { 24 | username: 'SvelteSociety', 25 | displayname: 'Svelte Society', 26 | profileSrc: '/images/profile3.jpg', 27 | images: [ 28 | { 29 | src: '/images/stories/2.jpg', 30 | alt: 'A shallow lake with trees and sun breaking through the clouds' 31 | } 32 | ] 33 | }, 34 | { 35 | username: 'argyleink', 36 | displayname: 'Adam Argyle', 37 | profileSrc: '/images/profile2.jpg', 38 | images: [ 39 | { 40 | src: '/images/stories/3.jpg', 41 | alt: 'A large body of water with blue hills in the background', 42 | text: 'So peaceful!' 43 | }, 44 | { 45 | src: '/images/stories/4.jpg', 46 | alt: 'A forest under heavy fog', 47 | text: '🥶' 48 | } 49 | ] 50 | } 51 | ]; 52 | -------------------------------------------------------------------------------- /src/swipe.js: -------------------------------------------------------------------------------- 1 | // Adapted from https://css-tricks.com/simple-swipe-with-vanilla-javascript/ 2 | 3 | let startX = null; 4 | const SWIPE_THRESHOLD = 20; 5 | 6 | function setStart(e) { 7 | startX = unify(e).clientX; 8 | } 9 | 10 | function unify(e) { 11 | return e.changedTouches ? e.changedTouches[0] : e; 12 | } 13 | 14 | function makeEvent(dx, complete) { 15 | return new CustomEvent('swipe', { 16 | detail: { 17 | direction: dx < 0 ? 'left' : dx > 0 ? 'right' : 'none', 18 | complete, 19 | dx 20 | } 21 | }); 22 | } 23 | 24 | export default function swipe(node) { 25 | node.addEventListener('mousedown', setStart); 26 | node.addEventListener('touchstart', setStart); 27 | 28 | node.addEventListener('mouseup', finishSwipe); 29 | node.addEventListener('touchend', finishSwipe); 30 | 31 | node.addEventListener('mousemove', drag); 32 | node.addEventListener('touchmove', drag); 33 | 34 | function drag(e) { 35 | e.preventDefault(); 36 | if (startX || startX === 0) { 37 | let dx = unify(e).clientX - startX; 38 | node.dispatchEvent(makeEvent(dx, false)); 39 | } 40 | } 41 | 42 | function finishSwipe(e) { 43 | if (startX || startX === 0) { 44 | let dx = unify(e).clientX - startX; 45 | 46 | if (Math.abs(dx) > SWIPE_THRESHOLD) { 47 | node.dispatchEvent(makeEvent(dx, true)); 48 | } 49 | 50 | startX = null; 51 | } 52 | } 53 | 54 | return { 55 | destroy() { 56 | node.removeEventListener('mousedown', setStart); 57 | node.removeEventListener('touchstart', setStart); 58 | 59 | node.removeEventListener('mouseup', finishSwipe); 60 | node.removeEventListener('touchend', finishSwipe); 61 | 62 | node.removeEventListener('mousemove', drag); 63 | node.removeEventListener('touchmove', drag); 64 | } 65 | }; 66 | } 67 | --------------------------------------------------------------------------------