{"id":34834560,"url":"https://github.com/cerchie/svelte-scrollytale","last_synced_at":"2026-05-24T03:33:12.811Z","repository":{"id":200603133,"uuid":"705788911","full_name":"Cerchie/svelte-scrollytale","owner":"Cerchie","description":"playing with scrollytelling template from The Pudding","archived":false,"fork":false,"pushed_at":"2023-11-09T21:31:38.000Z","size":305,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-11T02:08:34.701Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cerchie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-16T17:33:50.000Z","updated_at":"2024-06-30T15:53:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef90fb72-c82f-48a8-b92d-642d1642abcb","html_url":"https://github.com/Cerchie/svelte-scrollytale","commit_stats":null,"previous_names":["cerchie/svelte-scrollytale"],"tags_count":0,"template":false,"template_full_name":"the-pudding/svelte-starter","purl":"pkg:github/Cerchie/svelte-scrollytale","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fsvelte-scrollytale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fsvelte-scrollytale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fsvelte-scrollytale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fsvelte-scrollytale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cerchie","download_url":"https://codeload.github.com/Cerchie/svelte-scrollytale/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fsvelte-scrollytale/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28032292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-25T16:00:05.230Z","updated_at":"2025-12-25T16:00:06.357Z","avatar_url":"https://github.com/Cerchie.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Starter\n\nThis [starter template](https://github.com/the-pudding/svelte-starter) aims to quickly scaffold a [SvelteKit](https://kit.svelte.dev/) project, designed around data-driven, visual stories at [The Pudding](https://pudding.cool).\n\n### Notes\n* _Do not use or reproduce The Pudding logos or fonts without written permission._\n* _Prettier Formatting: Disable any text editor Prettier extensions to take advantage of the built-in rules._\n\n### Features\n\n- [Lucide Icons](https://lucide.dev/) for simple/easy svg icons\n- [ArchieML](http://archieml.org/) for micro-CMS powered by Google Docs and Sheets\n- [Style Dictionary](https://amzn.github.io/style-dictionary/) for CSS/JS style parity\n- CSV, JSON, and SVG imports\n- SSR static-hosted builds by default\n\n## Quickstart\n#### From Scratch\n* Click the green `Use this template` button above.\n* Alternatively: `npx degit the-pudding/svelte-starter my-project`\n\n#### Pre-existing Project\n* clone the repo\n\n#### Installation\n* In your local repo run `pnpm install` or `npm install`\n\n## Development\n\n```bash\nnpm run dev\n```\n\nChange the script in `package.json` to `\"dev\": \"svelte-kit dev --host\"` to test on your local network on a different device.\n\n## Deploy\n```bash\nnpm run build\n```\n\nThis generates a directory called `build` with the statically rendered app.\n\nA shortcut for github pages:\n```bash\nmake github\n```\n\nDeploying to Pudding AWS:\n```bash\nmake pudding\n```\n\n## Style\n\nThere are a few stylesheets included by default in `src/styles`. Refer to them in `app.css`, the place for applying global styles.\n\nFor variable parity in both CSS and JS, modify files in the `properties` folder using the [Style Dictionary](https://amzn.github.io/style-dictionary/) API.\n\nRun `npm run style` to regenerate the style dictionary.\n\n#### Some css utility classes in reset.css\n* `.sr-only`: makes content invisible available for screen reader\n* `.text-outline`: adds a psuedo stroke to text element\n\n### Custom Fonts\nFor locally hosted fonts, simply add the font to the `static/assets` folder and include a reference in `src/styles/font.css`, making sure the url starts with `\"assets/...\"`.\n\n## Google Docs and Sheets\n\n* Create a Google Doc or Sheet\n* Click `Share` -\u003e `Advanced` -\u003e `Change...` -\u003e `Anyone with this link`\n* In the address bar, grab the ID - eg. \"...com/document/d/**1IiA5a5iCjbjOYvZVgPcjGzMy5PyfCzpPF-LnQdCdFI0**/edit\"\n* paste in the ID above into `google.config.js`, and set the filepath to where you want the file saved\n* If you want to do a Google Sheet, be sure to include the `gid` value in the url as well\n\nRunning `npm run gdoc` at any point (even in new tab while server is running) will fetch the latest from all Docs and Sheets.\n\n## Structural Overview\n\n### Pages\nThe `src/routes` directory contains pages for your app. For a single-page app (most cases) you don't have to modify anything in here. `+page.svelte` represents the root page, think of it as the `index.html` file. It is prepopulated with a few things like metadata and font preloading. It also includes a reference to a blank slate component `src/components/Index.svelte`. This is the file you want to really start in for your app.\n\n### Embedding Data\nFor smaller datasets, it is often great to embed the data into the HTML file. If you want to use data as-is, you can use normal import syntax (e.g., `import data from \"$data/file.csv\"`). If you are working with data but you want to preserve the original or clean/parse just what you need to use in the browser to optimize the front-end payload, you can load it via `+page.server.js`, do some work on it, and return just what you need. This is passed automatically to `+page.svelte` and accessible in any component with `getContext(\"data\")`.\n\n\n## Pre-loaded helpers\n\n### Components\n\nLocated in `src/components`.\n\n```js\n// Usage\nimport Example from \"$components/Example.svelte\";\n```\n\n* `Footer.svelte`: Pudding recirculation and social links.\n* `Header.svelte`: Pudding masthead.\n\n### Helper Components\n\nLocated in `src/components/helpers`.\n\n```js\n// Usage\nimport Example from \"$components/helpers/Example.svelte\";\n```\n\n* `ButtonSet.svelte`: Accessible button group inputs.\n* `Chunk.svelte`: Split text into smaller dom element chunks.\n* `Countdown.svelte`: Countdown timer text.\n* `Figure.svelte`: A barebones chart figure component to handle slots.\n* `MotionToggle.svelte`: A toggle button to enable/disable front-end user motion preference.\n* `Range.svelte`: Customizable range slider.\n* `Scrolly.svelte`: Scrollytelling.\n* `SortTable.svelte`: Sortable semantic table with customizable props.\n* `Slider.svelte (and Slider.Slide.svelte)`: A slider widget, especially useful for swipe/slide stories.\n* `Tap.svelte`: Edge-of-screen tapping library, designed to integrate with slider.\n* `Tip.svelte`: Button that links to Strip payment link.\n* `Toggle.svelte`: Accessible toggle inputs.\n* `WIP.svelte`: A sticky banner saying this project is a WIP.\n\n### Layercake Chart Components\n\nStarter templates for various chart types to be used with [LayerCake](https://layercake.graphics/). Located in `src/components/layercake`.\n\n```js\n// Usage\nimport Example from \"$components/layercake/Example.svelte\";\n```\n\n### Actions\n\nLocated in `src/actions`.\n\n```js\n// Usage\nimport example from \"$actions/action.js\";\n```\n\n* `canTab.js`: enable/disable tabbing on child elements.\n* `checkOverlap.js`: Label overlapping detection. Loops through selection of nodes and adds a class to the ones that are overlapping. Once one is hidden it ignores it.\n* `focusTrap.js`: Enable a keyboard focus trap for modals and menus.\n* `keepWithinBox.js`: Offsets and element left/right to stay within parent.\n* `inView.js`: detect when an element enters or exits the viewport.\n* `resize.js`: detect when an element is resized.\n\n### Stores\n\nThese are located in `src/stores`. You can put custom ones in `src/stores/misc.js` or create unique files for more complex ones.\n\n```js\n// Usage\nimport example from \"$stores/example.js\";\nimport { example } from \"$stores/misc.js\";\n```\n\n* `mq`: returns an object of media queries booleans if they are enabled or not. You can modify them in the js file.\n* `previous`: returns the previous value of another store.\n* `reducedMotion`: returns a boolean of front-end user event to enable/disable motion preference.\n* `scrollY`: returns a number of window vertical scroll position. It is throttled using rAF for performance.\n* `timer`: returns an object `{ timer, elapsed }`. `timer` has 5 methods (start, stop, toggle, set, reset) and `elapsed` is a store that is the number of ms.\n* `viewport`: returns an object `{ width, height }` of the viewport dimensions. It is debounced for performance.\n\n### Utils\n\nLocated in `src/utils/`.\n\n```js\n// Usage\nimport example from \"$utils/example.js\";\n```\n* `csvDownload.js`: Converts a flat array of data to CSV content ready to be used as an `href` value for download.\n* `generateId.js`: Generate an alphanumeric id.\n* `loadCsv.js`: Loads and parses a CSV file.\n* `loadImage.js`: Loads an image.\n* `loadJson.js`: Loads and parses a JSON file.\n* `loadPixels.js`: Loads the pixel data of an image via an offscreen canvas.\n* `localStorage.js`: Read and write to local storage.\n* `mapToArray.js`: Convenience function to convert a map to an array.\n* `move.js`: transform translate function shorthand.\n* `previous.js`: keep track of the previous value of a store.\n* `transformSvg.js`: Custom transition lets you apply an svg transform property with the in/out svelte transition. Parameters (with defaults):\n* `translate.js`: Convenience function for transform translate css.\n* `urlParams.js`: Get and set url parameters.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerchie%2Fsvelte-scrollytale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcerchie%2Fsvelte-scrollytale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerchie%2Fsvelte-scrollytale/lists"}