{"id":22488825,"url":"https://github.com/Wattenberger/kumiko","last_synced_at":"2025-08-02T21:31:52.165Z","repository":{"id":63914192,"uuid":"343806109","full_name":"Wattenberger/kumiko","owner":"Wattenberger","description":"A kumiko pattern generator, based on any image","archived":false,"fork":false,"pushed_at":"2022-11-28T23:11:09.000Z","size":2279,"stargazers_count":68,"open_issues_count":9,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-30T13:43:43.982Z","etag":null,"topics":["generator","kumiko","plottertools","svelte","svg"],"latest_commit_sha":null,"homepage":"https://kumiko-generator.netlify.app/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wattenberger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-02T14:40:58.000Z","updated_at":"2024-10-25T23:12:11.000Z","dependencies_parsed_at":"2023-01-14T13:30:43.949Z","dependency_job_id":null,"html_url":"https://github.com/Wattenberger/kumiko","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"the-pudding/svelte-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wattenberger%2Fkumiko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wattenberger%2Fkumiko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wattenberger%2Fkumiko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wattenberger%2Fkumiko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wattenberger","download_url":"https://codeload.github.com/Wattenberger/kumiko/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500220,"owners_count":17930019,"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","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":["generator","kumiko","plottertools","svelte","svg"],"created_at":"2024-12-06T17:18:47.019Z","updated_at":"2024-12-06T17:20:49.872Z","avatar_url":"https://github.com/Wattenberger.png","language":"Svelte","funding_links":[],"categories":["Svelte"],"sub_categories":[],"readme":"# Svelte Starter   \n\n![Repo diagram test](./diagram-test.svg)\n\n![Repo diagram](./diagram.svg)\n\nThis [starter template](https://github.com/the-pudding/svelte-starter) aims for fast and easy web development with HMR, and pre-rendered HTML for optimal static hosting.\n\n_Please note: do not use or reproduce The Pudding logos or fonts without written permission._\n\n#### Features\n\n- [HMR](https://github.com/rixo/svelte-hmr) for lightning fast development\n- [Feather Icons](https://github.com/feathericons/feather) for simple/easy svg icons\n- [ArchieML](http://archieml.org/) for micro-CMS powered by Google Docs and Sheets\n- [LayerCake](https://layercake.graphics/) enabled by default for chart\n- [Water.css](https://github.com/kognise/water.css) for default styling\n- Includes csv, json, and svg imports by default\n- Pre-renders HTML on deploy with content that is hydrated on load\n- Configured to make easy deploment to Github Pages\n\n## Quickstart\n\nNew school: just click the `Use this template` button above.\n\nOld school:\n\n```bash\nnpx degit the-pudding/svelte-starter my-project\n```\n\nThen in your local repo:\n\n```bash\nnpm install\nnpm run build\n```\n\n## Development\n\nTo start the dev server:\n\n```bash\nnpm run dev\n```\n\nModify content in `src` and `public/assets`.\ntest\n\n## Deploy\n\n```bash\nnpm run deploy\n```\n\nThis generates a directory called `ssr` with the server-side rendered static-hostable app.\n\nIf deploying to github pages:\n\n```bash\nmake github\n```\n\n## Style\n\nThere are a few stylesheets included by default in `template.html`. Modify `global.css` variables to make changes to `water.css` defaults.\n\nYou can use SCSS or another CSS preprocessor by installing the module (eg. `node-sass`) and including the property in the svelte-preprocess in the rollup config files.\n\n## Google Docs and Sheets\n\n- Create a Google Doc or Sheet\n- Click `Share` button -\u003e advanced -\u003e Change... -\u003e to \"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 `config.json`, 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## Pre-loaded helpers\n\n### Helper Components\n\nLocated in `src/components/helpers`.\n\n- `Window.svelte`: A wrapper around svelte:window that automatically debounces resize and throttles scroll, storing `innerHeight`, `innerWidth`, and `scrollY` as global stores.\n- `Icon.svelte`: Simple integration with Feather Icons.\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\n### Pudding Components\n\nLocated in `src/components/pudding`.\n\n- `Footer.svelte`: Pudding recirculation and social links.\n- `Header.svelte`: Pudding logo.\n\n### Actions\n\nLocated in `src/actions`.\n\n- `inView.js`: detect when an element enters or exits the viewport.\n- `css.js`: dynmically change the value of a CSS variable.\n\n### Utils\n\nLocated in `src/utils/`.\n\n- `mapToArray.js`: Convenience function to convert maps (generated from d3 group and rollup) to iterable array of objects.\n- `move.js`: transform translate function shorthand.\n\n### Preset Stores\n\nThese are located in `src/stores`, to include them do this (replacing `name`):\n\n```js\nimport name from \"../stores/name.js\";\n```\n\n- `prefersReducedMotion`: returns a boolean if the user has this CSS media query enabled or not.\n\n- `viewport`: returns an object `{ width, height }` of the viewport dimensions. It is debounced for performance.\n\n- `scrollY`: returns an number window vertical scroll position. It is throttled using rAF for performance.\n\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\n### Utils\n\n`transformSvg.js`: this custom transition lets you apply an svg transform property with the in/out svelte transition. Parameters (with defaults):\n\n```js\n{\n\ttarget: \"\", // string: transform properties [required]\n\tdelay: 0, // number: ms\n\tduration: 250, // number: in ms\n\teasing: linear, // function: svelte easing function\n\trelative: false, // boolean: adds target onto pre-existing transform\n\topacity: false // boolean: to fade in/out as well\n}\n```\n\n**Usage**\n\n```svelte\n\u003cg out:transformSvg={{ target: \"translate(50, 50)\" }}\u003e\n```\n\n## Notes\n\nAny @html tags, e.g., `{@html user}` must be the child of a dom element so they can be properly hydrated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWattenberger%2Fkumiko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWattenberger%2Fkumiko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWattenberger%2Fkumiko/lists"}