{"id":19520975,"url":"https://github.com/rodneylab/sveltekit-components","last_synced_at":"2025-04-07T17:07:48.195Z","repository":{"id":57139037,"uuid":"412586450","full_name":"rodneylab/sveltekit-components","owner":"rodneylab","description":"Handy components for building sites in SvelteKit ","archived":false,"fork":false,"pushed_at":"2025-03-21T08:26:03.000Z","size":757,"stargazers_count":59,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T16:16:52.054Z","etag":null,"topics":["leafletjs","mapbox","openstreetmap","svelte","svelte-components","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodneylab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-01T18:59:15.000Z","updated_at":"2025-03-21T08:25:46.000Z","dependencies_parsed_at":"2025-02-06T14:14:20.820Z","dependency_job_id":"8692cf6a-597c-49e7-ad0e-2b45dd11d129","html_url":"https://github.com/rodneylab/sveltekit-components","commit_stats":{"total_commits":145,"total_committers":1,"mean_commits":145.0,"dds":0.0,"last_synced_commit":"d2c8e89af03bbe85f2e95745cc99da8d5745f8ec"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsveltekit-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsveltekit-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsveltekit-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodneylab%2Fsveltekit-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodneylab","download_url":"https://codeload.github.com/rodneylab/sveltekit-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"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":["leafletjs","mapbox","openstreetmap","svelte","svelte-components","sveltekit"],"created_at":"2024-11-11T00:28:38.110Z","updated_at":"2025-04-07T17:07:48.174Z","avatar_url":"https://github.com/rodneylab.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/rodneylab/sveltekit-components/raw/main/images/rodneylab-github-sveltekit-components.png\" alt=\"Rodney Lab sveltekit-components Github banner\"\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"Open Rodney Lab site\" href=\"https://rodneylab.com\" rel=\"nofollow noopener noreferrer\"\u003e\n    \u003cimg alt=\"Rodney Lab logo\" src=\"https://rodneylab.com/assets/icon.png\" width=\"60\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Sveltekit Components\n\u003c/h1\u003e\n\n# sveltekit-components\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/rodneylab/sveltekit-components)\n\nLibrary of TypeScript friendly SvelteKit components for adding functionality to your SvelteKit apps.\n\n## Setup\n\nTo install the package run\n\n```shell\npnpm add -D @rodneylab/sveltekit-components @rodneylab/sveltekit-map-component\npnpm add --save-peer leaflet\n```\n\n## Components\n\n### Form Fields\n\nAdd accessible text, email and password inputs to your SvelteKit site forms. See \u003ca href=\"https://github.com/rodneylab/sveltekit-components/blob/main/src/routes/form.svelte\"\u003efull SvelteKit form examples\u003c/a\u003e or get started with extracts below:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport {\n\t\tEmailInputField,\n\t\tPasswordInputField,\n\t\tTextArea,\n\t\tTextInputField,\n\t} from '@rodneylab/sveltekit-components';\n\u003c/script\u003e\n\n\u003cform on:submit|preventDefault={handleSubmit}\u003e\n\t\u003cTextInputField\n\t\tvalue={name}\n\t\tid=\"form-name\"\n\t\tplaceholder=\"Blake Jones\"\n\t\ttitle=\"Name\"\n\t\terror={errors?.name ?? null}\n\t\ton:update={(event) =\u003e {\n\t\t\tname = event.detail;\n\t\t}}\n\t\tstyle=\"padding-bottom:1rem\"\n\t/\u003e\n\t\u003cEmailInputField\n\t\tvalue={email}\n\t\tid=\"form-email\"\n\t\tplaceholder=\"blake@example.com\"\n\t\ttitle=\"Email\"\n\t\terror={errors?.email ?? null}\n\t\ton:update={(event) =\u003e {\n\t\t\temail = event.detail;\n\t\t}}\n\t\tstyle=\"padding-bottom:1rem\"\n\t/\u003e\n\t\u003cTextArea\n\t\tvalue={message}\n\t\tid=\"form-message\"\n\t\tplaceholder=\"Enter your message here\"\n\t\ttitle=\"Message\"\n\t\terror={errors?.message ?? null}\n\t\ton:update={(event) =\u003e {\n\t\t\tmessage = event.detail;\n\t\t}}\n\t\tstyle=\"padding-bottom:1rem\"\n\t/\u003e\n\t\u003cbutton type=\"submit\" disabled={submitting}\u003eSubmit form\u003c/button\u003e\n\u003c/form\u003e\n\n\u003cform on:submit|preventDefault={handleSubmit}\u003e\n\t\u003cEmailInputField\n\t\tvalue={email}\n\t\tid=\"login-email\"\n\t\tplaceholder=\"blake@example.com\"\n\t\ttitle=\"Email\"\n\t\terror={errors?.email ?? null}\n\t\ton:update={(event) =\u003e {\n\t\t\temail = event.detail;\n\t\t}}\n\t\tstyle=\"padding-bottom:1rem\"\n\t/\u003e\n\t\u003cPasswordInputField\n\t\tvalue={password}\n\t\tid=\"login-password\"\n\t\tplaceholder=\"P@$sw0rD\"\n\t\ttitle=\"Password\"\n\t\terror={errors?.password ?? null}\n\t\ton:update={(event) =\u003e {\n\t\t\tpassword = event.detail;\n\t\t}}\n\t\tstyle=\"padding-bottom:1rem;border-style:none\"\n\t/\u003e\n\t\u003cbutton type=\"submit\" disabled={submitting}\u003eSubmit form\u003c/button\u003e\n\u003c/form\u003e\n```\n\n### Image\n\nResponsive image component with lazy loading support. Requires the vanilla-lazyload package for lazy loading and vite-imagetools for responsive image support:\n\n```shell\npnpm install -D vanilla-lazyload vite-imagetools\n```\n\nYou will also need to update `svelte.config.js` configuration to use vite-imagetools:\n\n```javascript\n/** @type {import('@sveltejs/kit').Config} */\nimport { imagetools } from 'vite-imagetools';\n...\n\nconst config = {\n  kit: {\n    // hydrate the \u003cdiv id=\"svelte\"\u003e element in src/app.html\n    target: '#svelte',\n    vite: {\n      plugins: [imagetools()],\n    },\n  },\n};\n\nexport default config;\n```\n\nFor lazyloading, load the vanilla-lazyload script into the document in a layout component (e.g. `src/routes/__layout.svelte`):\n\n```svelte\n  import lazyload from 'vanilla-lazyload';\n  import { browser } from '$app/environment';\n\n  if (browser \u0026\u0026 !document.lazyloadInstance) {\n    document.lazyloadInstance = new lazyload();\n  }\n```\n\nThen use the `Image` component on a page:\n\n```svelte\n\u003cscript\u003e\n\timport { onMount } from 'svelte';\n\timport { browser } from '$app/environment';\n\timport { Image } from '@rodneylab/sveltekit-components';\n\n\timport meta from '$lib/assets/your-image.jpg?w=768\u0026metadata';\n\timport srcsetJpeg from '$lib/assets/your-image.jpg?w=1536;1280;768;640\u0026jpeg\u0026srcset';\n\timport srcsetWebp from '$lib/assets/your-image.jpg?w=1536;1280;768;640\u0026webp\u0026srcset';\n\n\texport let imageData;\n\n\tonMount(() =\u003e {\n\t\tif (browser) {\n\t\t\tdocument.lazyloadInstance.update();\n\t\t}\n\t});\n\n\tconst { width, height, src } = meta;\n\tconst sources = [\n\t\t{ srcset: srcsetWebp, type: 'image/webp' },\n\t\t{ srcset: srcsetJpeg, type: 'image/jpeg' },\n\t];\n\n\tconst sizes = '(max-width: 672px) calc(100vw - 32px), 672px';\n\u003c/script\u003e\n\n\u003cImage {alt} {width} {height} {src} {sources} {placeholder} {sizes} style={'border-radius:12px'} /\u003e\n```\n\nThe code in `onMount` only needs to be called once for each page, so if, for example, you have component A, B and C all containing an image and included in page Z, add the `onMount` code only to page Z and add the `Image` component (without `onMount` code) to `A.svelte`, `B.svelte` and `C.svelte`.\n\nIf you want to load the image eagerly use the `loading` prop to specify this:\n\n```svelte\n\u003cImage {alt} {width} loading=\"eager\" {height} {src} {sources} {placeholder} {sizes} /\u003e\n```\n\nBest practise is to load the largest contentful paint above the fold eagerly. Typically this means eager loading for banner images.\n\n#### Props\n\n\u003cdl\u003e\n\u003cdt\u003e\u003ccode\u003ealt: string\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eText describing the image for screen reader users.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003ewidth: number\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eNominal image width, used to help reduced cumulative layout shift.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003eheight: number\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eNominal image height, used to help reduced cumulative layout shift.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003esrc: string\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eImage source. This is the fallback for older browsers.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003esources: { srcset: string; type: string }[]\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eArray of source and types for responsive images.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003eplaceholder: string\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eCan be a Base64 encoded, low resolution placeholder which is displayed while the full resolution image is loading.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003esizes: string\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eMedia query like string which helps the browser choose the right image size.\u003c/dd\u003e\n\u003cdt\u003e\u003ccode\u003eloading: string\u003c/code\u003e\u003c/dt\u003e\u003cdd\u003eCan be \u003ccode\u003eeager\u003c/code\u003e or \u003ccode\u003elazy\u003c/code\u003e. Default is \u003ccode\u003elazy\u003c/code\u003e.\u003c/dd\u003e\n\u003c/dl\u003e\n\nSee \u003ca aria-label=\"Open post on SvelteKit image plugin\" href=\"https://rodneylab.com/sveltekit-image-plugin/\"\u003earticle on SvelteKit images which provides much more background\u003c/a\u003e on what these props are and how you might update them.\n\n### Map\n\nAdd a map to your SvelteKit site using \u003ca aria-label=\"Learn more about Map box\" href=\"https://www.mapbox.com/\"\u003eMapbox\u003c/a\u003e with \u003ca aria-label=\"Learn more about Open street map\" href=\"https://www.openstreetmap.org/#map=6/54.910/-3.432\"\u003eOpenStreetMap\u003c/a\u003e and \u003ca aria-label=\"Learn about leaflet j s\" href=\"https://leafletjs.com/\n\"\u003eLeafletJS\u003c/a\u003e. Requires a Mapbox access token, just add it your to the `.env` file in your project:\n\n```plaintext\nPUBLIC_MAPBOX_ACCESS_TOKEN=your.token\n```\n\nAdd the component to a `.svelte` file in your project:\n\n```svelte\n\u003cscript\u003e\n\timport { Map } from '@rodneylab/sveltekit-map-component';\n\tconst latitude = 51.50162;\n\tconst longitude = -0.14115;\n\tconst zoom = 16;\n\tconst location = { latitude, longitude };\n\u003c/script\u003e\n\n\u003cMap\n\tid=\"my-map\"\n\t{location}\n\t{zoom}\n\timportance=\"high\"\n\tmarkerMarkup=\"\u003cp\u003eWe are \u003cstrong\u003ehere\u003c/strong\u003e!\u003c/p\u003e\"\n/\u003e\n```\n\n## Further Info\n\nTo create your own SvelteKit component library see the video on \u003ca aria-label=\"Learn how to create a Svelte Kit Component library\" href=\"https://rodneylab.com/create-sveltekit-component-library/\"\u003ecreating a SvelteKit component library\u003c/a\u003e. Drop a comment on that page if you have a question.\n\nFeel free to jump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodneylab%2Fsveltekit-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodneylab%2Fsveltekit-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodneylab%2Fsveltekit-components/lists"}