Discover rodneylab/svelte-each Open Source project

Handy components for building sites in SvelteKit

269

sveltekit-components

Demo site for SvelteKit SEO showing how to set up meta tags in a SvelteKit blog site.

sveltekit-seo

Starter for a fast Astro blog using Markdown and a spot of Svelte

astro-blog-markdown

SvelteKit demo code for using vite-imagetools to add cached, responsive, Next-Gen images to a SvelteKit site with no cumulative layout shift.

sveltekit-image-plugin

WASM code for parsing Markdown into HTML with light output tweaking

parsedown

SvelteKit GraphQL queries using fetch only: how you can drop Apollo client and urql dependencies altogether to make your Svelte app leaner.

sveltekit-graphql-fetch

Code to accompany Astro articles.

astro

API using PostgREST to query and update supabase database.

narcissus

Use Apollo Client with SvelteKit to Query a GraphQL API: we use the GitHub API to query our repos and learn a bit of SvelteKit along the way.

sveltekit-graphql-github

Beautiful, easy SVG social icons in Svelte

svelte-social-icons

SvelteKit eCommerce site: how to build a fast, SEO friendly, static eCommerce site using Svelte, Snipcart and Directus.

svelte-ecommerce-site-start

SvelteKit Shiki syntax highlighting: use any VSCode colour theme to accessibly syntax highlight code on your SvelteKit app with line numbers.

sveltekit-shiki-code-highlighting

SvelteKit infinite scroll: see how you can use Svelte stores and a reactive function to implement an infinite scrolling Instagram feed.

sveltekit-instagram-infinite-scroll

SvelteKit S3 Multipart Upload: how you can upload large files, such as video to your S3 compatible storage provider using presigned URLs.

sveltekit-s3-multipart-upload

A markdown parser to output Astro markup

cmessless

Simple Svelte responsive image gallery: create a ribbon gallery, using Svelte dimension bindings to maintain the aspect ratio of all images.

sveltekit-simple-image-gallery

Open source favicon generation: create your favicon from scratch then optimise it for modern and legacy browsers using free apps in 2022.

open-source-favicon-generation

Shell

sveltekit-hcaptcha-form

SvelteKit hCaptcha contact form: see how you can scare bots away from your Svelte site using a privacy focussed captcha service.

SvelteKit JSON import: how you can use data provided from business apps and ther sources directly in your Svelte site, thanks to Vite.

sveltekit-json-import

Using vanilla-extract with SvelteKit: how you can make zero-runtime stylesheets with the new TypeScript friendly preprocessor in Svelte.

sveltekit-vanilla-extract

SvelteKit session cookies: accessing user-specific data in your SvelteKit app use session and HttpOnly cookies for added security.

sveltekit-session-cookies

Demo static Svelte site for narcissus backendless blog

narcissus-blog

GraphQL API demo using Fastify, Mercurius and Nexus

fastify-mercurius-nexus-graphql-api

Svelte Charts: how quickly and easily you can add customised charts to your SvelteKit, Astro or other Svelte apps with Chart.js.

svelte-chartjs

SvelteKit FAQ Page SEO: how you can use ❤️ Svelte's SEO friendliness to create a FAQ page with JSON-LD SchemaOrg SEO meta loved by Google.

sveltekit-faq-page-seo

A simple repo for analysis of online firewall block lists and combining them efficiently into a block list for use in a firewall

blocklists

Python

sveltekit-content-security-policy

SvelteKit Content Security Policy: how you can add CSP to reduce your Svelte site's cross-site scripting (XSS) attack surface.

Demo code for adding axe accessibility testing to SvelteKit using Playwright and pa11y

sveltekit-accessibility-testing

cistercian-clock

Demo code to show how to use the Intersection Observer API in Sveltekit to help track page views

sveltekit-intersection-observer

Demo showing how to add SVG icons from just about any library to your Svelte app using a single extra dependency

sveltekit-iconify

Handy components for building sites in SvelteKit

sveltekit-map-component

SvelteKit Session Storage: how you can improve UX by temporarily caching user form entries then repopulating fields on browser refreshes.

sveltekit-session-storage

Using Local Storage in SvelteKit: taking the example of setting a site theme, explore how to combine the Local Storage and Svelte Store APIs.

sveltekit-local-storage

Rodney Lab Git Hub profile

rodneylab

hcaptcha-serverless-rust-worker

Demo code for creating an hCaptcha verify endpoint using Cloudflare Workers written in Rust

Gatsby 3 MDX blog starter for an accessible, fast and secure blog site

gatsby-starter-climate

Using Jolt with Flecs & Dear ImGui 👀 to add game physics introspection to a raylib game, with pause and stepping for dev tools debugging 🐜.

raylib-flecs-imgui-introspection

CMake

decisive

front end for site admin

Get Started with Astro and Redis Tutorial Starter Code

upstash-astro

Svelte login form example 📝 signup and login forms for your Svelte app with password strength meter 🔐 and strong password auto generation.

svelte-login-form

Jolt Physics raylib ⚡️ trying Jolt C++ game development physics library with raylib in a 3D hello world 🎱 bouncing sphere example.

jolt-raylib-hello-world

CMake

deno

Code to accompany Deno & Deno Fresh articles.

sveltekit-form-example

SvelteKit form example 📝 code to get a contact form working with SvelteKit actions, and 10 tips to avoid common pitfalls 🍀

CSS

gatsby-cloud-functions-recaptcha

Example site showing how Gatsby Cloud Functions can be used with an accessible reCAPTCHA.

Using raylib with Dear ImGui: how you can use Dear ImGui to create an immediate mode 🐜 debugging interface for your CMake raylib game 🎮

raylib-imgui

CMake

stylelint-sveltekit

Stylelint for SvelteKit: keep you Svelte code consistent and make sure your CSS and SCSS code follows your team's style guide to the letter!

Upstash for Redis and the Performance API: measuring performance gains with Web APIs to deploy the database optimally in your Deno app.

upstash-redis-deno-perf

Svelte share buttons: adding social share buttons to your Svelte app for mobiles and Safari using the native Web Share API with fallbacks.

sveltekit-share-buttons

SvelteKit CSS only :hover image slider

sveltekit-css-hover-image-slider

Godot Rust 2D Platform game

knights-to-see-you

SvelteKit FIDO U2F login: how you can add multi factor authentication (MFA) to the front end of your Svelte app for added login security.

sveltekit-fido-u2f-login

SvelteKit Fontaine ✍🏽 how to eliminate or reduce font swap cumulative layout shift working with custom, self-hosted fonts in ❤️ SvelteKit.

sveltekit-fontaine

CSS

sveltekit-graphql-client

SvelteKit demo for running ApolloClient

Fast JS Search on Gatsby: Roll Your Own Site Search: Demo site

gatsby-site-search

SvelteKit CSS stylelint: how you can lint vanilla CSS within your Svelte source files using stylelint accessibility and best practice rules.

sveltekit-lint-css

Demo site showing how to use Netlify functions with SvelteKit

sveltekit-netlify-functions

Back end app using Fastify and Mercurius to create a GraphQL API. Uses PostgreSQL db with Prisma.

moment

A demo site to show how the Fauna data API can be used with Gatsby Cloud Functions.

gatsby-functions-fauna

Astro Server-side Rendering: getting started with Astro SSR building a productivity search app with Vitest and Edge geolocation data

astro-server-side-rendering

Astro

rainbow

Rainbow — Accessibility Contrast Tool for Text on Images

SvelteKit demo code for responsive lazy loading iframes.

sveltekit-lazyload-iframe

Markdown writing CLI tool

markwrite

SvelteKit TypeScript vanilla-extract starter: create a markdown blog site with responsive, Next-Gen images, PWA and vanilla-extract styles.

sveltekit-typescript-vanilla-extract-starter

Cloudflare Rust Worker which listens for mux video upload events

mux-webhook-worker

Code to accompany Serverless Rust articles.

serverless-rust

Arkanoid clone built in C++ with Raylib and flecs

arkanoid-clone

C++

sveltekit-s3-compatible-storage

SvelteKit S3 compatible storage: how you can upload files to your cloud storage provider from your Svelte app using presigned URLs.

Macroquad egui DevTools: adding a visual 🐞 debugging user interface for developers to Rust Macroquad game using ⚡️ egui.

learn-web-gpu

C++

macroquad-egui

SvelteKit Ably: introduction to using Svelte with Ably and building a real-time ♟️ game or instant 💬 chat with serverless WebSockets.

sveltekit-ably-realtime-game

Rust dungeon crawler game using Bevy ECS

dungeoncrawl

SvelteKit tooling: we look at 7 tools you can add to streamline your Svelte continuous integration (CI) and development processes.

sveltekit-tooling

Gatsby 100 Days of Code 2021

rodneylab-100-days-of-gatsby